mat-select in a for-loop, setting the "selected" in dropdown - angular

Question

I am looping through my "menuOptions" in my html in order to output multiple options in a dropdown menu within a mat-accoridion (an angular material api)

i want the value to be the value on every select drop down, so i set my [(value)] to the element in my for loop (shown below)

<mat-option *ngFor="let option of menuOptions" [value]="option" (click)="selectConfig(option)">
      {{option}}
</mat-option>

However, I want one to be autoselected on my first load.... (the first menu option in the array menuOption autoselected) i can't just set option in my typescript file because i only have menuOptions (array) available. option is the element i'm looping over in my for loop.

Any ideas how to set the option another way?

Thanks!

uminder uminder · Accepted Answer · 2019-12-19T17:48:32

The selected value needs to be defined in the enclosing mat-select element.

<mat-select [value]="selectedMenuOption">

This presumes you have a public member named selectedMenuOption in your component.

When defining two-way binding through [(value)], you can even get rid of the click event handler defined for your mat-option elements.

<mat-select [(value)]="selectedMenuOption">

The following StackBlitz from Angular Material Examples nicely illustrates this.

mat-select in a for-loop, setting the "selected" in dropdown - angular

1 Answers