Reputation: 2078
<mat-form-field [ngClass]="classes">
<mat-select [placeholder]="placeholder" [(ngModel)]="selectValue" [multiple]="true" #multiSelect (change)="onChange()"
#itemSelect="ngModel">
<ngx-mat-select-search [formControl]="multiFilterCtrl"></ngx-mat-select-search>
<mat-option *ngFor="let option of filteredMulti | async" [value]="option.id">
{{option.name}}
</mat-option>
</mat-select>
</mat-form-field>
Angular material multiselect how to set values to multiselect dropdown comming from api?
Upvotes: 1
Views: 4145
Reputation: 841
if you are trying to set the selected values, you can
// ...data coming from the api and saved to this.filteredMulti
this.filteredMulti.take(1).subscribe(() =>
// set your model
selectValue = apiData.selectValue
// setting the compareWith property to a comparison function
// triggers initializing the selection according to the initial value
// this needs to be done after the filteredMulti are loaded initially
// and after the mat-option elements are available
this.multiSelect.compareWith = (a: number, b: number) => a === b;
});
See https://github.com/bithost-gmbh/ngx-mat-select-search/blob/master/src/app/examples/02-multiple-selection-example/multiple-selection-example.component.ts for a full example
Upvotes: 3