List value not dynamically updating after initializing

[rahuldpi]

I have 2 input fields. I would like to populate data in the 2 field based on the option that user selects in the first field. However the value is not getting updated. I'm using HttpClient method to fetch the data.

HTML

<div class="form-group" [class.has-error]="clientId.invalid && (clientId.dirty || clientId.touched)">
              <label class="col-sm-2 control-label">* Pharma/Client</label>
              <div class="col-sm-5">
                <ng-select formControlName="clientId" *ngIf="clientList.length > 0" [items]="clientList" [disabled]="disabledClient" (data)="refreshValue($event)"
                  (selected)="clientSelected($event)" (removed)="clientSelected($event)" placeholder="Select"></ng-select>
              </div>
            </div>

 <div class="form-group" [class.has-error]="brandId.invalid && (brandId.dirty || brandId.touched)">
              <label class="col-sm-2 control-label">* Brand</label>
              <div class="col-sm-5">
                <ng-select formControlName="brandId" *ngIf="initbrandList.length > 0" [items]="initbrandList" [active]="initbrandList" [disabled]="disabledBrand" (data)="refreshValue($event)"
                  (selected)="brandSelected($event)" (removed)="brandRemoved($event)" placeholder="Select"></ng-select>
              </div>
            </div>

TS:

export class AddRequestComponent implements OnInit {
 private clientList:any[] = [];
  private initbrandList:any[];
  private brandList:any[] = [];
  private value:any = {};

ngOnInit(): void {
 this.agencyList.push({
        id: "0",
        text: "Others"
     });
}

clientSelected(value:any) {
    console.log('Selected value is: ', value);
    this.disabledBrand = false;
    if (value.text == "Others"){
      this.clientOtherVisibility = true;
    }
    this.devRequestService.getListOfBrands(value.id).subscribe((data) => {
      this.brands = data;

      this.brands.forEach((value) => {
        return this.brandList.push({
          id: value.code,
          text: value.name
        });
      });
      this.brandList.push({
        id: "0",
        text: "Others"
      });
    });
    console.log(this.brandList);
  }

  clientRemoved(value:any) {
    console.log('Removed value is: ', value);
    this.disabledBrand = true;
    this.clientOtherVisibility = false;
  }

  brandSelected(value:any) {
    console.log('Selected value is: ', value);
    if (value.text == "Others"){
      this.brandOtherVisibility = true;
    }
  }

  brandRemoved(value:any) {
    console.log('Removed value is: ', value);
    this.brandOtherVisibility = false;
  }

  public refreshValue(value:any):void {
    this.value = value;
  }
}

[manniniandrea]

You have to let angular know something has changed by replacing the "brandList" array with a new one:

this.brandList.push(option); // this will not work

this.brandList = newBrandList; // this will work