Bootstrap multiselect dropdown [selected] attribute not working with [(ngModel)]

Question

Link to demo: https://stackblitz.com/edit/angular-gq35ac?file=src%2Fapp%2Fapp.component.html

<select 
  class="form-control"
  [(ngModel)]="selectedColumnModel"
  (change)="onColumnSelect(selectedColumnModel)" 
  style="height: 150px; width: 200px"
  multiple
>
  <option 
    *ngFor="let column of columns; let i = index;" 

    [ngValue]="column"
    [selected]="selectedColumns[i]?.title == column.title"
  >
    {{ column.title }}
  </option>
</select>

I have a multi-select drop-down, on page load I want some values to be preselected.

If I delete [(ngModel)] it is working perfectly, how can I make it work with [(ngModel)]

Some people suggested using [compareWith]. Here is the link: https://angular.io/api/forms/SelectControlValueAccessor

But I'm not sure how to use that here. Please Help.

Try ngx-bootstrap for this sort of functionality. These bootstrap behaviours generally don't play well with angular out of the box. That's why libraries like ngx-bootstrap exist. — reckface

Sachila Ranawaka Sachila Ranawaka · Accepted Answer · 2018-07-03T11:17:17

assign the preselected values to selectedColumnModel

selectedColumnModel = ['UID','NAME','BRANCH' ];

demo

Bootstrap multiselect dropdown [selected] attribute not working with [(ngModel)]

1 Answers