ES6, any idea how to get a reference on the direct parent from a child component?


#1

Ionic2 does this with tabs https://github.com/driftyco/ionic/blob/2.0/ionic/components/tabs/tab.ts#L210

I can’t seem to achieve this with ES6.
I have children and a parent and they need to communicate, but I can’t find a good way to do this (using ES6).

I know this is more of an Angular2 thing, but the tabs mostly do what Im looking for, so I thought maybe someone would know.

Having an EventEmiter only on the child is not enough since the parent doesn’t define the children in it’s template, it juste wraps <ng-content></ng-content>


#2

:thinking: why you need it? You could send all data from the parent to the child throw @Input and return throw @Output… So I don’t understand what do you want do.


#3

I ended up using a Service that is injected as provider in the parent.
How would I send all data from the parent to the child?

The parent is something like a Tabs instance and the Children are something like multiple Tab instances. The parent does have a reference to all the children with ContentChildren, but I would like a child to be able to tell the parent when something has happened at it’s level for the parent to react accordingly. Since the parent’s template mostly defines ng-content I can’t directly use an Output for this.


#4

It’s hard to say for sure because the description of the application is so vague, but personally I find that 90% of the time that I am looking for a way for components to communicate with one another that can’t easily be done with property bindings, I end up eventually redesigning things.


#5

I use all models like services, so I haven’t this issues at now.