To facilitate communication between a parent and child component in Angular, you can create a shared service where you define an Observable. This Observable can be subscribed to from the child component, allowing you to take action when receiving values from the parent.
//communication.service.ts
import { Injectable, Inject } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class CommunicationService {
private notification = new Subject<any>();
/**
* Observable streams for notifications
*/
notificationObservable$ = this.notification.asObservable();
constructor(){}
public notifyChild(data: any) {
if (data) {
this.notification.next(data);
}
}
}
//parent.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { CommunicationService } from './communication.service';
@Component({
selector : 'parent-component',
templateUrl : './parent.component.html'
})
export class ParentComponent implements OnInit, OnDestroy {
constructor( private communicationService: CommunicationService ){
}
ngOnInit() {
this.communicationService.notifyChild({message: 'Hello from parent'});
}
}
//child.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { CommunicationService } from './communication.service';
@Component({
selector : 'child-component',
templateUrl : './child.component.html'
})
export class ChildComponent implements OnInit, OnDestroy {
private subscription: Subscription;
constructor( private communicationService: CommunicationService ){
}
ngOnInit() {
this.subscription = this.communicationService.notificationObservable$.subscribe((res) => {
if (res.hasOwnProperty('message')) {
console.log(res.message);
// perform additional actions here
}
});
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}