I have a scenario where I send data from a component to a service which then manipulates data. The idea was that when I fetch data in the component that I push the change to a BehaviorSubject variable using next.
For some unbeknown to me reason, this.person.subscribe() doesn't get triggered when passing the value using next. However, when I check if the value in the service was changed I see that it was properly updated.
Component
constructor(private incomeService: IncomeService) {
}
ngOnInit(): void {
// Fetching data from a service
this.person = fetchedTestData;
// This doesn't trigger subscribe method in the service
this.incomeService.person.next(fetchedTestData);
// The data is definitely changed because the value is correctly set
console.log(this.incomeService.person)
}
Service
person: BehaviorSubject<any> = new BehaviorSubject<any>(null);
constructor() {
this.person.subscribe(person => {
// Do something else
});
}
What seems to be the culprit here?
Generally Angular services are meant to handle data retrieval and all business logic, while the components subscribe to Observables for display purposes.
If I understand your situation correctly, you'd be better off doing something like this:
Service
public person$$ = new BehaviorSubject<unknown>(null);
public person$ = this.person$$.asObservable();
public getPerson(): void {
// logic for retrieving data
this.person$$.next(response);
}
Component
public person$ = this.incomeService.person$;
// if you wanted to use console for debugging you could also add
// .pipe(tap(person => console.log(person)))
// which would log to console whenever the person$$ subject is updated in the service
constructor(private incomeService: IncomeService) {}
ngOnInit(): void {
this.incomeService.getPerson();
}
Template
<ng-container *ngIf="person$ | async as person">
{{ person | json }}
</ng-container>
In this case, because the async pipe is used in the template, it automatically handles the subscription (and unsubscribing when the component is destroyed). You could also .subscribe in the component logic, just make sure to have an unsubscribe call in there somewhere to prevent memory leaks.
In the service you have person as a behavior subject. You'd update it there not in your component.
component
this.incomeService.updatePerson('something');
service
constructor() {
this.person.subscribe(person => {
console.log(person);
});
}
updatePerson(arg:string){
console.log('is this happening?', arg);
this.person.next(arg);
}
The problem was in a function that was generating an error and that is executed before calling next. Unfortunately I missed it because errors in my Google Chrome console were hidden.
So as a reminder for anyone else having a similar problem; check that your methods are running error free before panicking.