I need to detect the component change.
First check my code which work.
The problem here is that this is called init and it is unnecessary to call all the time ... you should only call for a change or when its data ( response ) is okay.
ngOnInit() {
this.calendarData();
}
detectChangeUser(){
this.sharedService.selectedUserType$.subscribe(
data => {
if(data === 'changed-view-user-trigger'){
this.calendarData();
this.calendarUsers();
}
},
err => console.log(err)
)
}
I need to detect only when data has a response.
Check also my service.
export class SharedService {
public latestViewSwither: any = null;
selectedUserType$ = new BehaviorSubject<any>(this.latestViewSwither);
training$ = this.selectedUserType$.asObservable();
constructor(
private http: HttpClient
) { }
swithViewChanged(e){
this.latestViewSwither = e;
this.selectedUserType$.next(e);
}
}
only to detect when data has value.
data === 'changed-view-user-trigger' don't worry about this. I send it from another component only a string...this is not important.
Only important thing is any hook which detects change... I am also trying with ngAfterViewChecked but my software crashes after this...
You can use BehaviorSubject for this. The BehaviorSubject has the characteristic that it stores the “current” value. This means that you can always directly get the last emitted value from the BehaviorSubject.
See the example below:
import * as Rx from "rxjs";
const subject = new Rx.BehaviorSubject();
// subscriber 1
subject.subscribe((data) => {
console.log('Subscriber A:', data);
});
subject.next(Math.random());
subject.next(Math.random());
// subscriber 2
subject.subscribe((data) => {
console.log('Subscriber B:', data);
});
subject.next(Math.random());
console.log(subject.value)
// output
// Subscriber A: 0.24957144215097515
// Subscriber A: 0.8751123892486292
// Subscriber B: 0.8751123892486292
// Subscriber A: 0.1901322109907977
// Subscriber B: 0.1901322109907977
// 0.1901322109907977
I would try something like that to solve the problem.
service:
export class SharedService {
public latestViewSwither: any = null;
selectedUserType$ = new BehaviorSubject<any>(this.latestViewSwither);
training$ = this.selectedUserType$.asObservable();
constructor(private http: HttpClient) { }
swithViewChanged(e){
this.latestViewSwither = e;
if (!!e) {
this.selectedUserType$.next(e);
}
}
}
Related
I'm new to this. I want to get data from Rest API. Loading data from the endpoint is ok, but I want to use it later, outside the method. For example I want to sum one of the attributes of the todos in another function. In funcion loadTodos() the first console log shows the data, but the second one shows only "undefined". How can I save the values what loadTodos() gives back and use it later?
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
import { TodoDomainService } from '../services/todo-domain.service';
import { Todo } from 'app/model/todo';
#Component({
selector: 'app-todo-listing',
templateUrl: './todo-listing.component.html',
styleUrls: ['./todo-listing.component.scss']
})
export class TodoListingComponent implements OnInit {
todo: Todo;
constructor(private todoService: TodoDomainService, private router:Router) { }
public todos;
ngOnInit() {
this.loadTodos();
this.todo = new Todo();
}
private loadTodos() {
this.todoService.getTodos().subscribe(
data => { this.todos = data },
err => console.error(err),
() => console.log("todos loaded." +this.todos)
);
console.log(this.todos)
}
}
private getSum(todos) {
var sum = 0;
for(var i = 0; i < todos.length; i++){
sum += todos.price[i]}
return this.aggregatedSales;
}
console.log("todos loaded." +this.todos) will show a response because it is executed after the observable has completed.
console.log(this.todos) after your .subscribe(...) shows undefined because the observable hasn't yet finished, that is, the line data => { this.todos = data } hasn't been executed.
You are saving the data correctly for use. If you update your next called for the subscription to look like the following then the sum will execute:
// from
data => { this.todos = data }
// to
data => {
this.todos = data;
this.getSum(this.todos);
}
Here is a stackblitz example of fetching a todos array and adding up the userId values into a sum variable then displaying the value.
I have 2 Subscription - one is a subscription of my ActivatedRoute and another from ngrx Store.
ngOnInit() {
this.menuItems$ = this.store.select('menuItems');
this.menuItems$.subscribe(data => {
this.menuItems = data.menuItems;
});
}
ngAfterViewInit() {
this.fragmentSubscription = this.route.fragment.pipe(
filter((fragment: string) => typeof fragment === 'string')
).subscribe((fragment: string) => {
setTimeout(() => {
const element: ElementRef = this.menuItems.find(menuItem => menuItem.link === fragment).element;
if(element !== undefined) {
element.nativeElement.scrollIntoView({ behavior: "smooth", block: "start", inline: "center" });
}
});
});
}
As my ActivatedRoute (fragment) subscription depends on my store subscription data, I want to delay my ActivatedRoute (fragment) subscription till my Store is subscribed for the first time
Is there any rxjs operator for this?
Tnx
Based on your comment...
If the first time when the Store emits has completed, I no longer want to wait for it when the ActivatedRoute subscribes
You are looking for combineLatest, which...
When any observable emits a value, emit the last emitted value from each.
So I suggest the following:
import { Subscription, combineLatest } from 'rxjs';
// ...
mySubscription: Subscription;
ngOnInit() {
this.mySubscription = combineLatest(
this.store.select('menuItems'),
this.route.fragment.pipe(
filter((fragment: string) => typeof fragment === 'string')
)
// DON'T USE ANY, type your data...!
).subscribe((data: [any, any]) => {
this.menuItems = data[0];
const fragment = data[1]
// do your thing...
})
}
ngOnDestroy() {
this.mySubscription.unsubscribe();
}
Don't get your data in init from the store if possible. Get them from a resolver.
You can ofcourse get them from the store in the resolver and then access them in the init function as a value.
Look for more information here https://angular.io/api/router/Resolve
I follow this guide, and i try to do something similar at Unrelated Components: Sharing Data with a Service paragraph
Data Service:
#Injectable()
export class MyDataService{
private messageSource = new BehaviorSubject(null);
currentMessage = this.messageSource.asObservable();
constructor(private http: HttpClient) {
setInterval(() => { this.changeMessage(this.resultFromRestCall()); }, 10 * 1000);
}
changeMessage(message: object) {
this.messageSource.next(message);
}
resultFromRestCall(){
const json;
this.http.get<object>(myApiUrl).subscribe(res =>
json['data'] = res['data'] //this is an example
);
return json;
}
Component:
export class MyComponent implements OnInit {
constructor(private dataservice: MyDataService) {}
ngOnInit() {
this.dataservice.currentMessage.subscribe(
message => {this.handleVarChange(message); }
);
}
handleVarChange(message) {
console.log(message.data);
}
With this code i got "undefined" in handleVarChange log
Instead of calling this.handleVarChange(message); in subscribe I write console.log(message) i got my result correctly.
So, my question is if it's possible use the value coming from data service in some function of my component.
Thanks in advance
With:
resultFromRestCall(){
const json;
this.http.get<object>(myApiUrl).subscribe(res =>
// takes x amount of time to populate json
json['data'] = res['data'] //this is an example
);
// executed instantly after above request has been called
return json;
}
You are returning json before it has been populated, since the request is asynchronous.
Instead you can flip it around a bit, and call resultFromRestCall() first, and when you get the response, then call changeMessage():
setInterval(() => {
this.resultFromRestCall().subscribe((data) => {
this.changeMessage(data);
});
}, 10 * 1000);
where resultFromRestCall simply returns an observable:
resultFromRestCall(){
return this.http.get<object>(myApiUrl);
}
Also remember to clearInterval in OnDestroy!
DEMO
Omit the .data in handleVarChange:
Instead of
handleVarChange(message) {
console.log(message.data);
}
write
handleVarChange(message) {
console.log(message);
}
i have a class and a function named getStationDetail and i want to send a request to server and get the value and save it to dataFromServer variable
and i want to return that but when i cal that i get empty array
export class StationService {
dataFromServer: any = [];
constructor(private rest: RestService) { }
getStationsDetail() {
this.rest.sendRequest('GET', 'station', null).subscribe(
value => {
this.dataFromServer = value['Station'];
// return this.dataFromServer;
},
);
return this.dataFromServer;
}
}
and i cal it
export class StationComponent implements OnInit(){
mm: any;
ngOnInit() {
this.mm = this._stationService.getStationsDetail().subscribe();
console.log(this.mm);
}
}
but map not worked? how to cal subscribe?
When a request is sent to server then cursor doesn't stop to execute next lines of codes if we want some operations after receiving the response from server then we use observables and do these methods in subscribe(). so for examples:
ngOnInit() {
this._stationService.getStationsDetail()
.subscribe(stationDetails => {
console.log('Response array:' , stationDetails);
});}
I have some data that I want to be shared with my entire app so I have created a service like so..
user.service
userDataSource = BehaviorSubject<Array<any>>([]);
userData = this.userDataSource.asObservable();
updateUserData(data) {
this.userDataSource.next(data);
}
then in my component Im getting some data from an api and then sending that data to userDataSource like so..
constructor(
private: userService: UserService,
private: api: Api
){
}
ngOnInit() {
this.api.getData()
.subscribe((data) => {
this.userService.updateUserData(data);
})
}
now that all works but.. I want to be able to add data to the end of the array inside the userDataSource so basically the equivalent of a .push am I able to just call the updateUserData() function and add more data or will doing that overwrite what is currently in there?
Any help would be appreciated
You can add a new method to your service like addData in which you can combine your previous data with new data like.
import {Injectable} from '#angular/core';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
#Injectable()
export class UserService {
userDataSource: BehaviorSubject<Array<any>> = new BehaviorSubject([]);
userData = this.userDataSource.asObservable();
updateUserData(data) {
this.userDataSource.next(data);
}
addData(dataObj) {
const currentValue = this.userDataSource.value;
const updatedValue = [...currentValue, dataObj];
this.userDataSource.next(updatedValue);
}
}
For someone that may come accross this issue with a BehaviorSubject<YourObject[]>.
I found in this article a way to properly add the new array of YourObject
import { Observable, BehaviorSubject } from 'rxjs';
import { YourObject} from './location';
import { Injectable } from '#angular/core';
#Injectable({
providedIn: 'root'
})
export class ObjService {
private theObjData: BehaviorSubject<YourObject[]> = new BehaviorSubject<YourObject[]>(null);
constructor() {
}
public SetObjData(newValue: YourObject[]): void {
this.theObjData.next(Object.assign([], newValue));
}
}
How to update data:
// inside some component
this.api.userData().subscribe((results:YourObject) =>
this.objService.SetObjData(results);
)
How to observe changes on other component
// inside another component
ngOnInit() {
this.objService.GetAccountStatements().subscribe((results) =>
...
)
}
Normally Observables and Subjects are meant to be streams of data, not an assignment of data. BehaviorSubjects are different because they hold their last emitted value.
Normally Subjects or BehaviorSubjects inside of a contained class (like a Service) do not want to expose themselves publicly to any other classes, so it's best practice to access their properties with getters or methods. This keeps the data stream cold to all subscribers.
However, since the BehaviorSubject holds the last emitted value, there's a few options here. If all subscribers need a concatenated stream of data from every emission, you could access the last emitted value and append to it:
userDataSource = BehaviorSubject<any[]>([]);
userData = this.userDataSource.asObservable();
updateUserData(data) {
this.userDataSource.next(this.userDataSource.value.push(data));
}
...or, in what might be considered better practice, Subscribers to this Subject could do their own transformation on the stream:
this.api.userData()
.scan((prev, current) => prev.push(current). [])
.subscribe((data) => {
this.concatenatedUserData = data;
});
Use concat to add object
userDataSource = BehaviorSubject<Array<any>>([]);
updateUserData(data) {
this.userDataSource.next(this.userDataSource.value.concat(data));
}
Use filter to remove object
removeUserData(data) {
this.userDataSource.next(this.userDataSource.value.filter(obj => obj !== data));
}