Unidirectional data flow vs two-way binding
There are two approaches about how data should flow in WebApps, Unidirectional data flow (React) and two-way binding (Angular).
The React way
React approach tell us to manage the data in a unidirectional way, from parent to child. In essence this means child components are not able to update the data that is coming from parent component. In React, data coming from parent is called props.
Whether you declare a component as a function or a class, it must never modify its own props.
So what if a Child needs to talk back to its Parent, is it not allowed to do so?. If a Child Component needs to send a message to its Parent, it has to use a special technique, inversal data flow (talk about it later).
Since Props are immutable, the code below is wrong:
But surprisingly this is not a “problem” on Angular, or is it?
The Angular way
Disclaimer: Angular does not call them Props (instead Input binding). But for comparison purposes, let’s think on them in that way.
Input Binding
Use decorators to indicate Angular that this data (Props) is coming from a Parent component.
But there is a problem here, Parent component is not aware of this change. Let’s add a new button on Parent to track title var.
Emitting events (Angular)
Angular has its own way of telling a Parent components above any change in its children. The child component exposes an EventEmmiter property with which it emits events when something happens. The Parent binds to that event property and react to those events. ( 🤔 inverse data flow?).
This way you guaranty to notify any child change to its Parent component. Anyway, this looks familiar, doesn’t it?
Emitting events in React
In react they called it, Inverse Data Flow.
Back in the React land and since we have to produce a call to render method on Parent component in order to apply changes to UI, let’s change the state.
