Angular 2 Extended Family Component Communication (without parent or external service)

I need a very easy-to-understand solution to achieve extended family (i.e., Uncle to Nephew, Niece to Aunt, self to cousin) communication between components/directives without a common parent/ancestor, external service, or ngModel.

As an illustration (though the code is overwhelming), Angular Material 2 uses this example for an autocomplete:

<md-input-container>
<input mdInput placeholder="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
</md-input-container>

<md-autocomplete #auto="mdAutocomplete">
<md-option *ngFor="let state of filteredStates | async" [value]="state">
{{ state }}
</md-option>
</md-autocomplete>


The magic pieces being the [mdAutocomplete]="auto" on the mdInput directive input, and the practically inversed #auto="mdAutocomplete" on the md-autocomplete component.

They have an uncle-to-nephew communication relationship and vice versa with no concern of a common ancestor component, ngModel, or external service that I'm aware of, but, please, correct me if I'm wrong.

So, how do I pull this type of two way communication off as in the example above?

By the way, this was helpful, but only a one-way example: passing data between siblings Angular2 using observables

Continue reading...