What's the 'Angular way' of a child updating a parent?

Question

There seems to be a few ways of skinning this cat, but I want to know the best (practice) and why.

If I want to collect some data in child-cmp and pass it to parent-cmp, I can:

Wrap an object with a function from parent and pass it as an input to child, calling the function on the input.
Make an EventEmitter function in child-cmp and emit the result, collecting the data in parent-cmp.
Access the child through @ViewChild() and directly call it's methods.
Create an ngModel (only if in a form?) with the data to be collected

I'm sure there's more. I feel like using the Event emitter is the most Angulary thing to do, for a non form based component. But I can't really explain why with a good technical foundation. Thoughts?

`@Output()` is the first thing to choose when there are no specific reasons for other options. A shared service is another option, especially when there is no direct parent child relation. — Günter Zöchbauer, Jul 28 '17 at 09:19
Pretty much what I thought, but why? Is it optimised under the hood? — Ben Taliadoros, Jul 28 '17 at 09:20
It creates the least amount of coupling between the components. If you want to use the child in another parent component, this is the easiest way. This is all what Angular components are - reusability. — Günter Zöchbauer, Jul 28 '17 at 09:21
It's a good point, feel free to write as an answer and ill accept — Ben Taliadoros, Jul 28 '17 at 09:32

score 2 · Accepted Answer · answered Jul 28 '17 at 09:44

@Output() is the first thing to choose for connecting a child with a parent, when there are no specific reasons for other options.
It creates the least amount of coupling between the components. If you want to use the child in another parent component, this is the easiest way. This is all what Angular components are - reusability.
A shared service is another option, especially when there is no direct parent child relation.
*ngModel (implementing ControlValueAccessor in the child component) is a good idea if the component should be used in forms.

avoid

Acquiring a reference of the child using @ViewChild() makes the parent dependent on the child component implementing a specific interface.
Wrap an object with a function (or otherwise passing method or object references)
passing methods around introduces strong coupling. Use rather a shared service. A shared service also is a class instance with a method, but it's a standard way in Angular every developer is used to, and it's more explicit. To push updates to participating components, use

What's the 'Angular way' of a child updating a parent?

1 Answers1