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;
        }
    }

CodePudding user response：

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();
    }
  }
}