After referencing this guide: Parent and children communicate via a service
I have decided to utilize a shared service instead of EventEmitter. The reason being that EventEmitter only facilitates communication between parent and child components, which doesn't align with my current scenario where both components need to interact through the same Service (MasterdataService).
Despite setting up the subscription, it seems that the announcement is not being intercepted. There are no visible errors in the browser console except for the log indicating that the announcement has been triggered. I am unsure of what I might be overlooking here.
MasterdataService
import {Injectable} from 'angular2/core';
import {Subject} from 'rxjs/Subject';
@Injectable()
export class MasterdataService {
private _updateAnnouncedSource = new Subject<string>();
updateAnnounced$ = this._updateAnnouncedSource.asObservable();
announceUpdate(value: string) {
console.log('announcement to update list has been triggered');
this._updateAnnouncedSource.next(value);
}
}
MasterdataComponent (responsible for announcing the update)
@Component({
providers: [MasterdataService]
})
export class MasterdataComponent {
constructor(private masterdataService: MasterdataService) {}
newMerchant(merchantIdInput: HTMLInputElement, merchantNameInput: HTMLInputElement) {
this.masterdataService.announceUpdate('newMerchant');
}
}
MasterdataListComponent (subscribed to the Subject)
@Component({
providers: [MasterdataService]
})
export class MasterdataListComponent {
subscription:Subscription;
constructor(private masterdataService:MasterdataService) {
this.subscription = this.masterdataService.updateAnnounced$.subscribe(
value => {
console.log('update announcement received... updating list with value ', value);
this.merchants = this.masterdataService.getAllMerchants();
})
}
}