Angular Material - Separate control and display in angular material2 - Angular Material Tutorial
This example shows how to to display specific property in dropdown but bind with the whole object.
autocomplete-overview-example.html: autocomplete-overview-example.html:
<md-input-container>
<input mdInput placeholder="State" [(ngModel)]="selection"
[mdAutocomplete]="auto" [formControl]="stateCtrl">
</md-input-container>
<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn">
<md-option *ngFor="let state of filteredStates | async" [value]="state" >
{{ state.Country }}
</md-option>
</md-autocomplete>
<p>Selected Country: {{selection | json}}</p>
<p>Selected Country Id: {{selection?.CountryID}}</p>Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy angular material tutorial , angular 4 material , angular material2 , angular material example team
autocomplete-overview-example.ts
autocomplete-overview-example.ts