https://medium.com/@ozak/angular-context-easy-data-binding-for-nested-component-trees-and-the-router-outlet-a977efacd48

Levent Arman ÖzakBlockedUnblockFollowFollowingApr 12Data-binding in Angular is awesome. Really. Just decorate a public property — or setter for that matter — on a component class with @Input and after a quick , voila! The property on the parent component is bound and ready to consume at will. Emitting events are just as simple: Define an EventEmitter decorate it with @Output and emit it during an internal execution. So simple, so beautiful... Implementing two-way binding is a little more complicated than this, of course. Still, its usage is fantastic: [(ngModel)]="parentProp".

Yet, in time, I discovered some difficulties around this flow. First of all, the does not offer a means to bind data to loaded components or emit events from them to parents. Second, filling a couple of intermediary components with several input properties and event emitters just to pass data through them is not only messy but also time-consuming. Your components get bloated. Besides, you end up writing lots of useless tests. Last, changing the public API of those deeply nested child components tend to become a painful practice. All parents need to be checked carefully for any traces of modified/removed properties, otherwise errors are quite likely.