Angular 2: How to pass value from one component to refresh another component on change detection?
<p>So I'm using ng2-bootstrap typeahead for a search field that I have. When I select a value returned, I want it to refresh the pane below with the details that come from the selected item.</p>

<p>In my parent component, I have this:</p>

<p>HTML:</p>

<pre><code>&lt;input [(ngModel)]="asyncSelected"
                           [typeahead]="dataSource"
                           (typeaheadLoading)="changeTypeaheadLoading($event)"
                           (typeaheadNoResults)="changeTypeaheadNoResults($event)"
                           (typeaheadOnSelect)="onSelectSearchValue($event)"
                           [typeaheadOptionsLimit]="7"
                           [typeaheadMinLength]="3"
                           [typeaheadWaitMs]="500"
                           [typeaheadOptionField]="'name'"
                           name="searchField"
                           class="form-control" style="width: 250px;" placeholder="Search Chip Families"&gt;
...
&lt;div class="container-fluid"&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
&lt;/div&gt;
</code></pre>

<p>TypeScript:</p>

<pre><code>public onSelectSearchValue(e: TypeaheadMatch): void {
    this.chipFamilyId = e.item.id;
}
</code></pre>

<p>How is it that I pass this value that comes back from the typeahead to my component that handles the call to the service to lookup the details and place it in the <code>&lt;router-outlet&gt;</code>? Using change detection didn't seem to work.</p>

<p>My child component is as follows:</p>

<p>HTML:</p>

<pre><code>&lt;div class="content" *ngIf='chipFamilies &amp;&amp; chipFamilies.length'&gt;
    &lt;ol class="breadcrumb"&gt;
        &lt;li&gt;&lt;a [routerLink]="['/home']"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a [routerLink]="['/chipFamily']"&gt;{{chipFamilies.Hierarchy}}&lt;/a&gt;&lt;/li&gt;
        &lt;li class="active"&gt;{{chipFamilies.Name}}&lt;/li&gt;
    &lt;/ol&gt;
    &lt;h2&gt;{{chipFamilies.Hierarchy}}&lt;/h2&gt;
...
</code></pre>

<p>TypeScript:</p>

<pre><code>export class ChipFamilyComponent implements OnInit, OnChanges {
    errorMessage: string;
    @Input() chipFamilyId: number = 11223;
    chipFamilies: IChipFamily[];

    constructor(private _adminService: ChipFamilyService) {

    }

    ngOnInit(): void {
        //Initially load 11223 on load
        this._adminService.getChipFamily(this.chipFamilyId).subscribe(
            chipFamilies =&gt; this.chipFamilies = chipFamilies,
            error =&gt; this.errorMessage = &lt;any&gt;error
        );
    }

    ngOnChanges(changes:{[propKey: string]: SimpleChange}) {
        debugger;
        this._adminService.getChipFamily(this.chipFamilyId).subscribe(
            chipFamilies =&gt; this.chipFamilies = chipFamilies,
            error =&gt; this.errorMessage = &lt;any&gt;error
        );
    }
}
</code></pre>