Go back a few pages and look at the BusyIndicatorDirective
implementation that uses the renderer, specifically the constructor:
constructor(private model: NgModel ...) { }
Angular automatically locates the NgModel
directive created for the directive element and injects it into BusyIndicatorDirective
. This is possible because both directives are declared on the same host element.
The good news is that we can influence this behavior. Directives created on a parent HTML tree or child tree can also be injected. The next few sections talk about how to inject directives across the component tree, a very handy feature that allows cross-directive communication for directives that have a common lineage (in a view).
We will use StackBlitz (https://stackblitz.com/edit/angular-pzljm3) to demonstrate these concepts. SlackBlitz is an online IDE to run Angular applications!
To start with, look at the file app.component.ts
. It has three directives: Relation
, Acquaintance
, and Consumer
and...