CODEWITHSUNDEEP
angularangular-material
Zako
Zako

Reputation: 151

Angular : Add a "free input option" in a <mat-select>

I have this code : 

'<mat-form-field>
      <mat-select #Version >
        <mat-option value="1.36.0">1.36.0</mat-option>
        <mat-option value="1.42.0">1.42.0</mat-option>
        <mat-option value="1.43.5">1.43.5</mat-option>
        <mat-option value="1.44.2">1.44.2</mat-option>
      </mat-select>
</mat-form-field>'

Problem is, the user might need to add a new version every now and then. So I'd like to add an option where the user can fill with his keyboard a new version that is not listed in this field yet. Do you guys have any idea how to achieve that ?

https://stackblitz.com/edit/angular-xxselg

https://angular-xxselg.stackblitz.io

Upvotes: 5

Views: 10159

Answers (2)

sarora
sarora

Reputation: 914

Was looking for a similar solution and as far as I can tell, mat-select doesn't help do what you want here without adding a separate input field as detailed above, but imho, that's a bad solution from a user experience perspective.

If you simply use mat-autocomplete instead of mat-select it provides the basic functionality (select or free data entry) in a single control e.g. look at the 'Simply Autocomplete' example here

Upvotes: 2

Amit Baranes
Amit Baranes

Reputation: 8122

First of all,you need to create new string array. and use *ngFor.

You can use mat-input in order to get the new version.And, mat-button in order to update the array.

Take a look at this Stackblitz exmaple that shows how to implement that.

By the way,Your Stackblitz Example were missing the angular material styling. Added : "~@angular/material/prebuilt-themes/indigo-pink.css"; under styles.css.

More about angular material styling Here.

Upvotes: 0

Related Questions