Menu
I have three components in an Angular 2 app: C0, C1 and C2. The first one (C0) represents an html template, having multiple child components (ui elements). Now, if someone clicks on a button in C1 (menu), how may I notify C2 (calendar) about that?
I tried some examples from the component communication page from the angular site. I ended up with an approach, where I took an EventEmitter at C1, to notify the parent C0. And then used a setter to notify C2.
This works, but seems very messy, even for a hand full of events. This cant be the solution, if my app might have hundreds of events in the end.
Is there a better way, to handle such kind of communication?
315
When user focus on ParentComponent's input element, you want to call ChildComponent's doSomething() method. Simply do this: Give app-child selector in parent. component.
Configuring the child componentlinkThe EventEmitter then relays the data to the parent component. Import Output and EventEmitter in the child component class: content_copy import { Output, EventEmitter } from '@angular/core'; In the component class, decorate a property with @Output() .
I think you should add an EventEmitter to C1 as you mentioned.
You can bind to a method on C2 without involving C0 by adding a template variable to C2 and refer to it using it like:
<c1 (customEvent)="c2.onClick($event)"></c1>
<c2 #c2></c2>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
