It is recommended to utilize ReactiveForms in your scenario, however, you can still proceed with the following approach:
<mat-form-field appearance="fill">
<mat-label>Select Member</mat-label>
<mat-select
#model="matSelect"
(selectionChange)="getAthleteAnalytics(model)"
id="member-select"
>
<mat-option *ngFor="let member of members" [value]="member.id">
{{ member.firstName }} {{ member.lastName }}
</mat-option>
</mat-select>
</mat-form-field>
Below is the TypeScript code for the component:
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular ' + VERSION.major;
latestSelectedValue :number |undefined;
members = [
{id: 1 , firstName:"Ahmed" , lastName:"Mostafa"},
{id: 2 , firstName:"Mohamed" , lastName:"Mostafa"},
{id: 3 , firstName:"Ebrahem" , lastName:"Mostafa"},
{id: 4 , firstName:"Hba" , lastName:"Mostafa"},
]
getAthleteAnalytics(model: MatSelect): void {
// Obtain the selected value here
this.latestSelectedValue = model.value;
// Reset the selection after 3 seconds
setTimeout(()=>{
this.resetSelection(model)
},3000)
}
resetSelection(select: MatSelect){
select.value = null;
}
}
For a complete example, visit this stackblitz link:
here