CODEWITHSUNDEEP
angulartypescriptselect
Sergio Mendez
Sergio Mendez

Reputation: 1519

mat-select multiple set the checked options from an array, Angular4

Angular 4.

I need help to set the options of a mat-select so here is the problem:

1.First I got two variables: options and checkedOptions

options: string[];
checkedOptions: string[] //This comes from the BD;

2.So options are all the options and checkedOptions comes from the BD, something like this:

options = ["o1", "o2", "o3", "o4", ... "oN"]
checkedOptions = ["o2", "o4"]

3.I print the options like this:

<mat-form-field floatPlaceholder="always" color="accent" class="input-all">
  <mat-select multiple placeholder="{{ par.label }}">
    <mat-option *ngFor="let op of options" [value]="op">{{ op }}</mat-option>
  </mat-select>
</mat-form-field>
  1. So in the mat-select are all the options... but what I want is, in th options list, just check which are in the checkedOptions list. How do I do that?

Please help.

Upvotes: 7

Views: 10822

Answers (1)

user6749601
user6749601

Reputation:

You have to use ngModel inside your mat-select-tag and bind it to your selection list, in this case. Here is the solution:

HTML

<mat-form-field floatPlaceholder="always" color="accent" class="input-all">

   <mat-select [(ngModel)]="checkedOptions" multiple placeholder="{{ par.label }}">

       <mat-option *ngFor="let op of options" [value]="op">{{ op }}</mat-option>

   </mat-select>

</mat-form-field>

Upvotes: 5

Related Questions