how to use ng-multiselect-dropdown without [(ngModel)]

Question

i am using the ng-multiselect-dropdown with angular 14. i want to use this module with singleSelection without initial data i mean without [(ngModel)] to show placeholder firstly but i got error.this is my code below this is my html code

  <ng-multiselect-dropdown
               [placeholder]="'search the country'" [settings]="dropdownSettings"
               [data]="dropdownList">
  </ng-multiselect-dropdown>

this is typescript code

and i got this error when selecting an option from dropdown

any help will be highly appreciated.

Answer 1

You could alternativly wrap it in a Angular Reactive Form as following:

HTML:

<form [formGroup]="myForm">
    <ng-multiselect-dropdown
        name="city"
        [placeholder]="'Select City'"
        [data]="cities"
        formControlName="city"
        [disabled]="disabled"
        [settings]="dropdownSettings"
        (onSelect)="onItemSelect($event)">
    </ng-multiselect-dropdown>
</form>

Typescript:

import { FormBuilder, FormGroup } from '@angular/forms';
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'multiple-demo',
    templateUrl: './multiple-demo.html'
})
export class MultipleDemoComponent implements OnInit {
    myForm:FormGroup;
    disabled = false;
    ShowFilter = false;
    limitSelection = false;
    cities: Array = [];
    selectedItems: Array = [];
    dropdownSettings: any = {};
    constructor(private fb: FormBuilder) {}

    ngOnInit() {
        this.cities = [
            { item_id: 1, item_text: 'New Delhi' },
            { item_id: 2, item_text: 'Mumbai' },
            { item_id: 3, item_text: 'Bangalore' },
            { item_id: 4, item_text: 'Pune' },
            { item_id: 5, item_text: 'Chennai' },
            { item_id: 6, item_text: 'Navsari' }
        ];
        this.selectedItems = [{ item_id: 4, item_text: 'Pune' }, { item_id: 6, item_text: 'Navsari' }];
        this.dropdownSettings = {
            singleSelection: false,
            idField: 'item_id',
            textField: 'item_text',
            selectAllText: 'Select All',
            unSelectAllText: 'UnSelect All',
            itemsShowLimit: 3,
            allowSearchFilter: this.ShowFilter
        };
        this.myForm = this.fb.group({
            city: [this.selectedItems]
        });
    }

    onItemSelect(item: any) {
        console.log('onItemSelect', item);
    }
    onSelectAll(items: any) {
        console.log('onSelectAll', items);
    }
    toogleShowFilter() {
        this.ShowFilter = !this.ShowFilter;
        this.dropdownSettings = Object.assign({}, this.dropdownSettings, { allowSearchFilter: this.ShowFilter });
    }

    handleLimitSelection() {
        if (this.limitSelection) {
            this.dropdownSettings = Object.assign({}, this.dropdownSettings, { limitSelection: 2 });
        } else {
            this.dropdownSettings = Object.assign({}, this.dropdownSettings, { limitSelection: null });
        }
    }
}

As per their demo found here:

https://nileshpatel17.github.io/ng-multiselect-dropdown/

Hope this will help you.