How to get Id of selected value in Mat-Select Option in Angular 5

Question

How to get the id of selected option value in mat-select angular 5. Get only value of selected option in onchangeevent. but how can get id of selected option value.

 client.component.html
<mat-form-field>
    <mat-select placeholder="Client*" #clientValue  (change)="changeClient($event)">
    <mat-option  *ngFor="let client of clientDetails"   [value]="client.clientName">
      {{client.clientName |  json}}
    </mat-option>
  </mat-select>
</mat-form-field>

client.component.ts file
export class Client{
     changeClient(event){
     console.log(event);
 }
}

Answer 1

The question is specific to Angular 5 but for others coming here with a newer version of Angular, the (change) event won't work for mat-select.

In Angular 6 the (change) event has been changed to (selectionChange).

So it would be:

<mat-form-field>
    <mat-select placeholder="Client*" #clientValue  (selectionChange)="changeClient($event.value)">
    <mat-option  *ngFor="let client of clientDetails" [value]="client.id">
      {{client.clientName}}
    </mat-option>
  </mat-select>
</mat-form-field>

And in the component:

changeClient(value) {
    console.log(value);
}

From this answer and the documentation.