I have created a function in my service which looks like this:
public refresh(area: string) {
this.eventEmitter.emit({ area });
}
The area parameter is used to update all child components when triggered by a click event in the parent.
// Child Components
this.myService.eventEmitter.subscribe((data) => {
if (!this.isLoading && data.area === 'childFirst') {
this.loadData();
}
});
this.myService.eventEmitter.subscribe((data) => {
if (!this.isLoading && data.area === 'childSecond') {
this.loadData();
}
});
this.myService.eventEmitter.subscribe((data) => {
if (!this.isLoading && data.area === 'childThird') {
this.loadData();
}
});
// Parent Component
// TS
showChildFirst() {
this.navService.sendNavEventUpdate('childFirst');
}
showChildSecond() {
this.navService.sendNavEventUpdate('childSecond');
}
showChildThird() {
this.navService.sendNavEventUpdate('childThird');
}
public refresh(area: string) {
this.myService.refresh(area);
}
// HTML
<!-- Refresh your childs -->
<button type="button" (click)="refresh()">Refresh</button>
If I call the function with refresh('childFirst'), only the first child component gets updated. Is there a way to modify the function to refresh all child components at once?