How can I communicate between two child components in angular? [duplicate]

Question

I'm very new in angular 2. I have a problem to communicate between two components. When I have a layout with a parent and some child components, it's easy to set variables of the child components with the @Input annotation.

But now I have a layout of one parent component (which is mostly for the layout) and two child components:

The child component 2 have a bunch of buttons, which creates only a simple message. Now I want to display this message in child component one.

How do I resolve it? Thanks in advance

Answer 1

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

Answer 2

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