Angular ng-multiselect-dropdown not showing data

Question

Hello I am facing problems with my dropdown list that has static data. This is how it looks like

This is my code for this related sections.

In app.component.ts:

export class ResultsComponent implements OnInit, OnDestroy {
    dropdownYear = [];
    selectedYear = [];
    yearSettings:IDropdownSettings = {};
    constructor() {
    async ngOnInit() {
     this.dropdownYear = [
      {item_id:1, item_text:'2000'},
      {item_id:2, item_text:'2001'},
      {item_id:3, item_text:'2002'},
      {item_id:4, item_text:'2003'},
      {item_id:5, item_text:'2004'},
      {item_id:6, item_text:'2005'},
      {item_id:7, item_text:'2006'},
      {item_id:8, item_text:'2007'},
      {item_id:9, item_text:'2008'},
      {item_id:10, item_text:'2009'},
      {item_id:11, item_text:'2010'},
      {item_id:12, item_text:'2011'},
      {item_id:13, item_text:'2012'},
      {item_id:14, item_text:'2013'},
      {item_id:15, item_text:'2014'},
      {item_id:16, item_text:'2015'},
      {item_id:17, item_text:'2016'},
      {item_id:18, item_text:'2017'},
      {item_id:19, item_text:'2018'},
      {item_id:20, item_text:'2019'},
      {item_id:21, item_text:'2020'},
      {item_id:22, item_text:'2021'},
      {item_id:23, item_text:'2022'},
      {item_id:24, item_text:'2023'}
     ];
     this.selectedYear = [{item_id:22, item_text:'2021'}];
     this.yearSettings = {
        singleSelection: true,
        closeDropDownOnSelection: true,
        idField: 'item_id',
        textField: 'item_text',
        allowSearchFilter: true,
        searchPlaceholderText: 'Type here to search'
      };
     }
    }

In app.component.html:

<ng-multiselect-dropdown
     [placeholder]= "'Select Year Here'"
     [settings]= "yearSettings"
     [data]="dropdownYear"
     [(ngModel)]="selectedYear"
     (onSelect)="onYearSelect($event)"
>
</ng-multiselect-dropdown>

I can't see any problem with my code but the data is not showing.

Answer 1

You need to define in the settings the textField property to point to the name in the data.

this.dropdownList = [
   { id: 1, itemName: 'Mumbai' },
];
this.dropdownSettings = {
  singleSelection: false,
  idField: 'id',
  textField: 'itemName', <--- IMPORTANT, NEEDS TO MATCH THE PROPERTY OF THE NAME IN THE DATA GIVEN
  selectAllText: 'Select All',
  unSelectAllText: 'UnSelect All',
};

Answer 2

I found a workaround...

The problem is when the data property is bound to the component, the settings value is null because it hasn't been bound yet.

Apparently the binding order in the newer versions of Angular has changed and are bound in the order they are listed on the component:

<ng-multiselect-dropdown [placeholder]="' '"
                                 [data]="itemList"
                                 [settings]="dropdownSettings"
                                 name="dropList">
</ng-multiselect-dropdown>

becomes:

<ng-multiselect-dropdown [placeholder]="' '"
                                 [settings]="dropdownSettings"
                                 [data]="itemList"
                                 name="dropList">
        </ng-multiselect-dropdown>

I do think the code needs to be updated to handle this scenario.