How to assign <ng-select [multiple]=isMultiple varibale dynamically?

Question

I need to change a select box behavior dynamically. The below approach is not working, because this variable we cannot set dynamically after calling a service. The component will initialize before the service getting triggered. Any workaround we have for such situations?

    <ng-select
             [multiple]=isMultiple
    
    
    ngOnInit(){
        this.testService.isMultiple().subscribe(
            (isMultiple: boolean): void => {
        this.isMultiple = true;
        }
    }

Answer 1

Trigger manual change detection using ChangeDetectorRef .

The value to the isMultiple is assigned from asynchronous operation, which takes some time for the completion of async operation and retrieval of results. So, the angular fails to auto-detect the change of isMultiple . In such cases, we have to manually trigger the change detection once the asynchronous operation has been completed.

import {ChangeDetectorRef} from "@angular/core";

@Component({...})
export class [className] {
  constructor( private _cdref: ChangeDetectorRef ) {}
    
  ngOnInit(){
    this.testService.isMultiple().subscribe(
      (isMultiple: boolean): void => {
        this.isMultiple = true;
        this._cdref.detectChanges();
    }
  }
}