I have a parent component in Angular which creates a ReplaySubject which is sourced from an API call. This changes over time as filters get changed and new calls are made for new data. This Subject is passed to child components so they can work on the data and stay updated if the filters change and new data is emitted.
// ParentComponent
public tasksList = new ReplaySubject(1);
queryParams.switchMap(params => apiCall(params)).subscribe(tasks => tasksList.next(tasks));
// ParentComponent template
<task-list [tasks$]="tasksList"></task-list>
// TaskListComponent
tasksSub = tasks$.subscribe();
ngOnDestroy() { tasksSub.unsubscribe(); }
The problem I have is that when one of the children components is destroyed and unsubscribes from the Subject it completes the Subject and new components cannot subscribe. How can I share the Subject and maintain replayability while also being able to destroy child components?
Related
I have a component that renders data based on the URL - '/lp/:pageId', :pageId is responsible for fetching data from the server called from ngOnInit().
ngOnInit(){
this.apiHelper.getData(this.route.snapshot.params.pageId);
}
I am facing an issue when ->
I open /lp/apple => this fetches data related to apple and renders properly
But when I'm on /lp/apple and press the link which navigates to /lp/banana => only the route changes but does not fetch any data as the component is already loaded.
I tried calling the function to fetch data whenever the route changes, but that breaks some existing functionalities.
Any help regarding good Angular practice with this issue would be helpful. Thank you.
You can define your data reactively. Instead of fetching inside ngOnInit, you can define a data observable that is dependent on the route param (since angular provides the route params as an observable on the active route):
public data$ = this.route.paramMap.pipe(
map(params => params.get('pageId')),
switchMap(pageId => this.apiHelper.getData(pageId))
);
constructor(private route: ActivatedRoute) { }
Here the data$ observable will emit the result of apiHelper.getData() whenever the route param changes.
In my Angular 9 project I have 2 components which are siblings and the parent component. On change in component A, I emit a value and it's set in the parent component and calls a method in component B. The method in component B emits another value and it's set in the parent component. The on change in component A continues, but the emitted value from component B that is set in the parent component (which is an input in component A) is not changed. I don't know why it's not the input for component A does not change even though the parent updates the value.
Parent Component
setSomeNum(someNum: number) {
// this is run on someNumberEmitter in Component A
this.num = someNum;
if (this.viewChildComponentB) {
this.viewChildComponentB.remove(someNum);
}
}
setSomeOtherNum (someOtherNum: number) {
// this is run on someDiffNumEmitter in Component B
this.otherNum = someOtherNum
}
Component A
componentAOnChange(someNum: number) {
this.someNumberEmitter.emit(someNum);
// this.inputFromComponentB is the original value instead of the one emitted in Component B (this.someDiffNum)
this.someService.applyCalc(someNum, this.inputFromComponentB);
}
Component B
remove(someNum: number) {
this.someDiffNumEmitter.emit(this.someDiffNum);
this.someService.applyCalc(someNum, this.someDiffNum);
}
I'm using the OnPush change detection strategy, but nothing changed. How can the sibling component A run with the data changes from component B?
I'm not sure why you're using ViewChild there but if it is to update the child components manually when there's change then that should be a red flag something is being done wrong, if you have data that needs to be shared it should be shared across the board and update accordingly on the single source of data changes without having to manually update the rest of the places.
Now to your problem:
If you're using the OnPush change detection strategy you have to update your data in an immutable way or use Observables, otherwise the change detection won't trigger.
Some people will advice triggering change detection manually but I'd recommend avoiding that as the whole point of using OnPush is to avoid a whole page render unnecessarily.
A simple solution I like to use is to use a Subject or BehaviorSubject instead with the async pipe. This way it ensures smooth work with the OnPush change detection strategy because ChangeDetection will run when the Observable emits a new value, and the async pipe takes care of unsubscribing the Observable for you.
If I were to modify your current components, it'd look something like this:
Parent:
num$ = new Subject<number>();
otherNum$ = new Subject<number>();
setSomeNum(someNum: number) {
this.num$.next(someNum);
}
setSomeOtherNum (someOtherNum: number) {
// this is run on someDiffNumEmitter in Component B
this.otherNum$.next(someOtherNum)
}
Then in the HTML you can use the async pipe, like this:
<some-component [num]="num$ | async" [otherNum]="otherNum$ | async"></some-component>
(You could use the async pipe in the component itself, doesn't really matter).
And that's pretty much it. You should have a Subject as an Observable, then share it with child components, once the Observable is updated, the child components data will be updated as well.
One small caveat is that when using a Subject instead of a BehaviorSubject is to make sure to subscribe before emitting any values to the Subject, otherwise the data will not update. So for certain cases BehaviorSubject is a better fit.
I have two child components and i want pass data between them, to do this i use service.
In service i have
headerObject = new Subject<HeaderObject>();
In first component i have method
onClick() {
this.listImage = this.imageService.getImages();
let headers = new HeaderObject();
headers.file = this.listImage[0].data;
this.documentService.getOcrDocument(headers).subscribe(res => {
headers = res;
this.ocrService.headerObject.next(headers);
})
In second component
headerSubcribed: HeaderObject;
private headerSubscription: Subscription;
ngOnInit() {
this.headerSubscription =
this.ocrService.headerObject.subscribe((ocrHeader: HeaderObject) => {
this.headerSubcribed = ocrHeader;
}
But ngOnInit() only once after render view i want to move this code to outside ngOnit and exeute it but i don't know how ? Some tips how execute that code? I set breakpoint at next() method that emit value but later method subscribe isn't execute? What could I do wrong?
There are 2 parts which you observable/subscribe
Observing something and notifying.
In your service, you have a Subject type variable and you are pushing values to it by calling next(). when this method called, it notifies all the observers means who ever is subscribing it.
listening to the observer and do action
When you listen to an observer, you get an update when they change the value. It does not matter if you put your subscription in onNginit or constructor, if the code is there, it will notify you when there is a change into it.
You can also explore BevavourSubject if it fits to your situation.
I'm currently trying to get a Register/Subscribe system to work with RxJs.
The situation is that I have component A with several sub components A1, A2, A3, ... The amount has to be dynamic. What I want to do now is that whenever an event I will call "somethingChanged" occurs (which is already distributed through an Observable) all sub components A1, ... will do some processing and then return some information (a state) as an event I'll call newStates to the parent action A probably using another observable. For this to work the sub components first have to register themselves to the "event manager" as children of A so that these events can be processed accordingly.
First idea
My first idea for this was to use a bufferCount on the newStates observable with the count being the amount of registered sub components. The problem is that the sub component registering and the parent component subscribing to the newStates observable is happening at almost the same time, the parent even being slightly faster which means the amountSub is usually 0 which breaks this attempt.
registerSubComponent() {
amountSub++;
}
getParentObservable() {
return newStates.bufferCount(amountSub).mergeMap();
}
Second idea
The second attempt was to use the somethingChanged Event and use that to initialize a takeLast to get the last items when they should be thrown. The problem is again as i will run into race condition as sub components take longer to throw their newStates events meaning I'll get old values.
registerSubComponent() {
amountSub++;
}
getParentObservable() {
return somethingChanged.map(() => newStates.takeLast(amountSub);
}
Third idea
So currently my only idea would be to catch the newStates event in the event manager, store the states in an array and check everytime if all registered components send them by looking at the array length. When all states are in i could then send the saved states and reset the array.
registerSubComponent() {
amountSub++;
}
getParentObservable() {
return newParentObservable;
}
newStates.subscribe(state => {
savedStates.push(state);
if(savedStates.length == amountSub) {
newParentObservable.next(savedStates);
savedStates = [];
}
});
Is this the only way or am I missing something so it could be done easier/with observables?
Btw: This is all pseudo code as my actual code also has to support multiple parent components in one manager making it cumbersome to read through.
It sounds like you want change detection up the tree. Using the following method with an angular service sounds like it might be what you need:
I found a solution on this guy Jason Watmore's blog that describes using rxjs Observables and Subjects. Using this method allows data changes to easily propagate up and down the angular inheritance tree to any component you want
Jason's Post
Accompanying Plunkr
Briefly:
You declare a service as a provider at the module.ts level with 3 methods:
sendMessage
clearMessage
getMessage
import { Injectable } from '#angular/core';
import { Observable } from 'rxjs';
import { Subject } from 'rxjs/Subject';
#Injectable()
export class MessageService {
private subject = new Subject();
sendMessage(message: string) {
this.subject.next({ text: message });
}
clearMessage() {
this.subject.next();
}
getMessage(): Observable<any> {
return this.subject.asObservable();
}
}
This service needs imports of Observable and Subject from rxjs
In each component you want to share data with:
create a subscription object in the constructor which calls the service.getMessage() function
call rxjs subscription.unsubscribe() in ngOnDestroy for each component so you aren't leaking memory
you can hook in a function to handle the incoming subscription updates
When you have data you want to share with your other components:
Create a public method which calls the service.sendMessage() method
This will send your updated data to each component and fire those functions you've hooked in to handle the changed data
I believe the blog post I linked to and the plunkr from the post say it best and have really helped me move data around efficiently in my own app but if you have any questions I'll do my best to answer them
I have 2 components - object-list and search-filter in my app. Also I have a fetch-service with getObjects(page, filter) method. I want to implement a scenario where object-list fetches all data via getObjects method and then search-filter will apply some filters to getObjects and object-list should automatically update. Here is some code:
FetchService
objects: Observable<any>;
getObjects(page: number, filter): void {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
const offset = (page - 1)* this.pageSize;
let url = this.objectsBaseUrl;
//apply filter
if (filter) {
url = `${url}?filter=${JSON.stringify(filter)}`
}
this.objects = this.http.get(url)
.map((response: Response) => {
return response.json() || {}
})
.catch(this.handleError);
}
ObjectListComponent
constructor(private fetch: FetchService) {}
ngOnInit(): void {
this.fetch.getObjects(this.initialPage);
this.objects = this.fetch.objects; // I need an Observable object to use with async pipe with *ngFor
}
getPage(page: number) {
this.fetch.getObjects(page); //here this.objects variable probably should be update because this methods replaces this.fetch.objects
}
SearchFilter
constructor(private fetch: FetchService) {}
apply() {
//some filter calculations
this.fetch.getObjects(1, this.filter);
}
I don't use subscribe to objects because I put it to async pipe in *ngFor. But as far as I'm concerned async pipe uses subscribe inside. The problem is that the list updates only once when ngOnInit fires. What's going wrong?
The SearchFilter component should NOT be in charge of fetching the data.
Here's how I would do it:
1) Create 3 components
A parent component, aka "smart component", to handle all the logic of listening to filter changes and fetching the data with FetchService. The parent component has two children displayed in its template:
First child: SearchFilterComponent is a "dumb component" (or presentational component). Its only job is to emit an #Output event every time the filters change, passing the latest filter values to its parent.
Second child: ObjectListComponent is also a "dumb component". Its only job is to display the list of objects provided by its parent component via an #Input property.
2) Implement the following workflow
When filters change in SearchFilterComponent, emit an #Output event passing the latest filter values, e.g. this.filtersChanged.emit(filters).
In the parent component, listen to filter changes with <search-filter (filtersChanged)="getObjects($event)">. The getObjects(filters) method will re-fetch the objects on every filter change; it should store the fetched objects in a property of the parent component, let's call it results.
Then, the parent component passes results to its child component ObjectListComponent via an #Input property called objects: <object-list [objects]="results">. The object list should refresh automatically every time the input changes.
Hopefully my explanations will make sense. Read up on #Input and #Output on the angular.io site if you're not familiar with those. I don't have time to create a Plunkr, so please post questions if anythings seems unclear.