How to add “other” option to mat-select in Angular 5 / Material 2

Question

I have a mat-select drop-down menu in angular 5. I would like to have an "other" option that, if selected, displays a text field with a manual input. How can I achieve this? My idea was to address another ngModel Boolean field, which then allows a *ng-if to display the text field, but even if it would work (I don't know how) it doesn't seem very elegant....

<mat-form-field>
    <mat-select [(ngModel)]="regime" name="regime-input">
        <mat-option [value]=1>daily</mat-option>
        <mat-option [value]=7>weekly</mat-option>
        <mat-option [value]=30>monthly</mat-option>
        <mat-option [value]=0>bei Bedarf</mat-option>
        <mat-option >other</mat-option>
    </mat-select>
</mat-form-field>

Your idea is the way to do it. I suggest you try it out and update the question if you have any trouble. — acdcjunior

Ingo Bürk Ingo Bürk · Accepted Answer · 2018-03-10T17:17:59

You can use a simple reference to show an input conditionally:

<mat-form-field>
    <!-- Notice the "#regimeWidget"! -->
    <mat-select [(ngModel)]="regime" name="regime-input" #regimeWidget>
        <mat-option [value]=1>daily</mat-option>
        <mat-option [value]=7>weekly</mat-option>
        <mat-option [value]=30>monthly</mat-option>
        <mat-option [value]=0>bei Bedarf</mat-option>
        <mat-option >other</mat-option>
    </mat-select>
</mat-form-field>

<ng-container *ngIf="!regimeWidget.value">
    <!-- Add your input here -->
    <span>You selected "Other"</span>
</ng-container>

This relies on the "other" option having an undefined (or null) value.

How to add “other” option to mat-select in Angular 5 / Material 2

1 Answers