0

Please or Register to create posts and topics.

Angular Material - mat-select filtering

Hi, I am using mat-select and it has a lot of options. Do you have any example of where it can filter (similar to autocomplete) and when the page loads, show the value previously selected? Thank you

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