ng-select - Data not loading correctly according to JSON

Question

I am trying to load drop-down data using the below function. (using ng-select library)

loadBranches() {
  this.registrationService.getBranchName().subscribe(data => {
    console.log(data);
     this.branchModel$ = data['data']['branchArr'];

  });
}

Currently, my console log data is loaded correctly. please check the below screenshot:

This is my HTML code.

<ng-select [items]="branchModel$ | async" bindLabel="branchName" required
    (change)="getBankInfo($event);" name="branchName" bindValue="title"
     placeholder="Select Branch" [(ngModel)]="reserve.branchName">
</ng-select>

but this approach did not work. Can you help me to load this drop-down?

Answer 1

Expect that branchModel$ is Observable<any[]> type.

Solution

Hence you need to cast your array as Observable with of rxjs operator.

import { of } from 'rxjs';

this.branchModel$ = of(data['data']['branchArr']);

Sample Solution on StackBlitz