How can I communicate between two child components in angular?
Beside the solutions using the @Input
/@Output
and a parent component as a 'bridge', a common way would also be introducing a shared service. The service needs to be provided in a parent component so the children can share single instance of the service (How do I create a singleton service in Angular 2?).
Basic example using the BehaviorSubject as a delegate:
@Injectable()
export class SharedService {
messageSource: BehaviorSubject<string> = new BehaviorSubject('');
constructor() { }
}
Child component 1:
export class ChildComponent1 {
constructor(private sharedService: SharedService) { }
sendMessage(): void {
this.sharedService.messageSource.next('Hello from child 1!');
}
}
Child component 2:
export class ChildComponent2 {
constructor(private sharedService: SharedService) { }
ngOnInit(): void {
this.sharedService.messageSource.subscribe((message) => {
console.log('Message: ', message); // => Hello from child 1!
});
}
}
See also: Angular2 - Interaction between components using a service
A simple way is to set an output with @Output in your child component2 as an eventemitter and emit a event with the message passed as a data of it when a button is clicked. Then, listen to this event in your parent component and update a property that is set as an input of your child component1 when the event occurs.
The image below is an example that clearly show the mechanism
You can use template variables to reference siblings:
<child1 #child1></child1>
<child2 (someOutput)="child1.doSomething($event)"></child2>