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);
}
}
For that you need to :
Change (change)="changeClient($event)"
to (change)="changeClient($event.value)"
and from [value]="client.clientName"
to [value]="client.id"
<mat-form-field>
<mat-select placeholder="Client*" #clientValue (change)="changeClient($event.value)">
<mat-option *ngFor="let client of clientDetails" [value]="client.id">
{{client.clientName}}
</mat-option>
</mat-select>
</mat-form-field>
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.
You can also subscribe to the values change of the mat-select
by using the ViewChild
decorator and ngAfterViewInit
which is less 'html-intrusive'.
Here is an example :
[HTML]
<mat-form-field [floatLabel]="auto">
<mat-label>Type</mat-label>
<mat-select #matSelect required> //the #matSelect is important here
<mat-option *ngFor="let type of types" [value]="type.value">
{{type.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
[TS]
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatSelect } from '@angular/material';
@Component({
selector: 'app-export-security-pack-material',
templateUrl: './export-security-pack-material.component.html',
styleUrls: ['./export-security-pack-material.component.scss']
})
export class ExportSecurityPackMaterialComponent implements AfterViewInit {
constructor() {}
types: Object[] = [
{ value: 'example-value-0', viewValue: 'ExampleViewValue0'
},
{ value: 'example-value-1', viewValue: 'ExampleViewValue1' }
];
@ViewChild('matSelect') matSelect: MatSelect;
//Reference Variable //variable Name //Type
ngAfterViewInit() {
this.matSelect.valueChange.subscribe(value => {
console.log(value);
});
}
}
With this your value should be logged in the development console Ctrl+Shift+I
or F12
everytime you change your selector value.
or you can literally just do this if you dont need onchange :
[HTML]
<mat-form-field [floatLabel]="auto">
<mat-label>Type</mat-label>
<mat-select [(value)]="matSelectValue" required> <---
<mat-option *ngFor="let type of types" [value]="type.value">
{{type.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
来源:https://stackoverflow.com/questions/48705555/how-to-get-id-of-selected-value-in-mat-select-option-in-angular-5