javascriptangularangular-componentsangular-inputangular-output

The reason for using the eventemitter to send data from the parent component to the child (Angular)


While learning Angular, I realized that there is no need to use eventemitter to send data from the parent component to the child component, while the eventemitter must be used to send data from the child component to the parent component.


Solution

  • I think the reason is (as most of the time with Angular) Change Detection. Once a parent property changed the component will try to detect changes. This will also trigger change detection in the child components (as properties can be just passed to child components).

    This means that the implicit flow of data is from parent to child, which will result in only needing to support change detection in this direction. If the other direction would also be supported, you can basically rerender your whole application for any change.

    This is the reason why there needs to be an explicit flow of propagating changes from children to parents. Therefore the EventEmitter is used.

    Keep in mind that you are dealing with a tree structure. Handling changes down the tree is easy (traverse the tree), but handling them in both directions (traverse up and down) leads to the whole tree being traversed each time.

    Please notice that all other frameworks I know of use the same approach. Props (like in React) can be passed to children implicitely and changes can "bubble" up the Component tree using explicit events (or function calls).