title: How to show preselected values in Angular ng-multiselect-dropdown
body: <p>Does anyone know why my selectedItems are not displaying as selected on the multiselect-dropdown? Im passing the same data inside the [data] and [(ngModel)] so everything should show as selected in the dropdown but nothing is showing as selected.</p>
  <p><strong>drop-down-select-modal.component.html</strong></p>
  <pre><code>&lt;ng-multiselect-dropdown 
                      [data]=&quot;listData&quot;
                      [(ngModel)]=&quot;selectedItems&quot;
                      [settings]=&quot;settings&quot;
                      (onSelect)=&quot;onItemSelect($event)&quot;
                      (onSelectAll)=&quot;onSelectAll($event)&quot;
                      (onDeSelect)=&quot;onItemDeSelect($event)&quot;
                      formControlName=&quot;selectedItems&quot;
                      &gt;
                  &lt;/ng-multiselect-dropdown&gt;
  </code></pre>
  <p><strong>drop-down-select-modal.component.ts</strong></p>
  <pre><code>import { Component, Input, ViewChild, Output, EventEmitter, OnDestroy, OnInit } from '@angular/core';
  import { ModalDirective } from 'ngx-bootstrap';
  import { FormBuilder, FormArray, FormGroup, FormControl, Validators } from '@angular/forms';
  
  @Component({
    moduleId: module.id,
    selector: 'drop-down-select-modal',
    templateUrl: './drop-down-select-modal.component.html',
    styleUrls: ['./drop-down-select-modal.component.scss']
  })
  export class DropDownSelectModalComponent implements OnInit {
    @Input() tag: any;
    @Input() mode = '';
    @Input() listData: any;
    @Output() updateCauseOfAnomaly = new EventEmitter();
    @ViewChild('staticModal2') public staticModal2: ModalDirective;
    @ViewChild('adminForm') public adminForm: FormGroup;
    @Input() selectedItems: any;
  
    tempForm: FormGroup;
  
    settings = { singleSelection: false,
      idField: 'id',
      textField: 'description',
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      itemsShowLimit: 10,
      
      classes:&quot;myclass custom-class&quot;,
      // allowSearchFilter: true,
      enableCheckAll:false};
  
  copyList = []
  
    constructor(private fb: FormBuilder) { 
    }
  
    ngOnInit() {
      this.settings = { singleSelection: false,
        idField: 'id',
        textField: 'description',
        selectAllText: 'Select All',
        unSelectAllText: 'UnSelect All',
        itemsShowLimit: 10,
        classes:&quot;myclass custom-class&quot;,
        // allowSearchFilter: true,
        enableCheckAll:false};
  
    }
  
  
  
    public show() {
      this.staticModal2.show();
     
    }
  
    public ok() {
      this.updateCauseOfAnomaly.next(this.selectedItems);
      this.staticModal2.hide();
      this.adminForm.reset();
    }
  
    onItemSelect(item: any, role: any) {
      console.log(item);
  }
  
  OnItemDeSelect(item: any, role: any) {
    
       console.log(item);
  }
  
  onSelectAll(items: any, role: any) {
      console.log(items);
  }
  
  onDeSelectAll(items: any, role: any) {
      console.log(items);
  }
  
  }
  </code></pre>
  <p><strong>dropdown.component.html</strong></p>
  <pre><code>&lt;drop-down-select-modal [tag]='currentTag2' #staticModal2 (updateCauseOfAnomaly)='updateCauseOfAnomaly($event)' [mode]='mode' [listData]='this.causeOfAnomalyFiltered.dropDownValues' [selectedItems]='this.causeOfAnomalyFiltered.dropDownValues'&gt;&lt;/drop-down-select-modal&gt;
  </code></pre>