Quote from Eben Monney on February 25, 2018, 6:14 am

Yes. From the template take a look at the file user-preferences.component.html. You'll see the below line which is an example of using mat-select:

<mat-select [(ngModel)]="configurations.language" placeholder="{{'preferences.Language' | translate}}">
    <mat-option *ngFor="let language of languages" [value]="language.locale">
        <span class="vertical-center">{{'preferences.' + language.name | translate}}<i *ngIf="language.isDefault" style="font-size: 0.75em;"> (default)</i></span>
    </mat-option>
</mat-select>

Note that the mat-select has a binding to [(ngModel)]="configurations.language". That is equivalent to the selected value and will affect the value that is selected when the page reloads.

Also filtering the array source the mat-options are generated from will filter the values displayed in the mat-select.

For an example of filtering source data see the applyFilter method from the snippet below. The snippet is obtained from the user-preferences.component.html file:

 <div class="search-box">
        <mat-form-field>
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="{{'users.management.Search' | translate}}">
        </mat-form-field>
</div>

Please see link below for further examples and documentations on the mat-select component: https://material.angular.io/components/select/overview