Binding (@Input & @Output) - Databinding is the most basic way to communicate between components
To bind a value to the @Input - [counter]="counter"
To listen to the @Output - (counterChange)="onCounterChange($event)"
To establish two way binding - ([counter])=”counter”
Reference (@ViewChild & @ContentChild) - Another common way of communication is through reference. In simple to directly grab the instance reference of the specific component and manipulate it programmatically.
Provider (Service) - Provider is a more high-level alternative to communication powered by the Angular dependency injection. Instead of establishing the direct relation between components, a standalone injectable (service) is used as a middleman b/w them. This approach is very useful for communication between components without close proximity, such as between the navbar and the login component. Yet, the major drawback is having huge amount of extra code as an extra service has to be maintained. Hence, it is highly recommended not to use service for scenarios that binding or reference can tackle well.
Template Outlet (ngTemplateOutlet) - Template outlet is definitely one of the least known feature of Angular. Yet, it is in fact, one the most powerful tools for communication b/w dynamic components.
0 Comments