How to show preselected values in Angular ng-multiselect-dropdown

Question

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.

drop-down-select-modal.component.html

<ng-multiselect-dropdown 
                    [data]="listData"
                    [(ngModel)]="selectedItems"
                    [settings]="settings"
                    (onSelect)="onItemSelect($event)"
                    (onSelectAll)="onSelectAll($event)"
                    (onDeSelect)="onItemDeSelect($event)"
                    formControlName="selectedItems"
                    >
                </ng-multiselect-dropdown>

drop-down-select-modal.component.ts

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:"myclass custom-class",
    // 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:"myclass custom-class",
      // 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);
}

}

dropdown.component.html

<drop-down-select-modal [tag]='currentTag2' #staticModal2 (updateCauseOfAnomaly)='updateCauseOfAnomaly($event)' [mode]='mode' [listData]='this.causeOfAnomalyFiltered.dropDownValues' [selectedItems]='this.causeOfAnomalyFiltered.dropDownValues'></drop-down-select-modal>

Answer 1

@jonv5629, sorry my comment. You need decided if you're using ReactiveForms (using formControlName) or template driven forms (using ngModel). if you use Reactive forms and a component you need take another decision: create the FormControl in parent or create the formControl in child and pass a variable

-When you create the formControl in parent you pass the formControl in an @Input

form=new FormGroup({
  selectedItems:new FormControl()
})

Remember that you can give value to the FormControl using setValue or when you create the form

this.form.get('selectedItems').setValue([2,3,4])
//or
form=new FormGroup({
  selectedItems:new FormControl([2,3,4])
})

And your parent like

   <app-component [selectedItems]="form.get('selectedItems')">
   </app-component>

And your child

   selectedItems:FormControl()
   @Input('selectedItems') set _(value)
   {
       this.selectedItems=value as FormControl //it's necesary "cast"
                                               //as FormControl
   }

   //see that we use `[formControl]`    
   <ng-multiselect-dropdown [formControl]="selectedItems" ...>

If create the formControl in child and pass a variable, you need an Outputto say the parent that the value are change.

Some like in child

 <ng-multiselect-dropdown [formControl]="control" ...>

control=new FormControl()
subscription:any
@Input() set selectedItem(value){
   this.control.setValue(value)
}
@Output() change:EventEmitter<any>=new EventEmitter<any>
ngOnInit()
{
   this.subscription=this.control.valueChanges.subscribe(
            (res)=>this.change(res))
}
ngOnDestroy()
{
   this.subscription.unsubscribe()
}

And your parent

<app-component [selectedItems]="variable" 
    (change)="form.get('selectedItems').setValue($event)">
</app-component>

There're anothers ways as implements a custom form control (extending from ControlValueAccesor) or injecting @Host() FormGroupDirective or ...