Angular Ng2 Datepicker not refreshing disabled date automatically

Question

I was having some problem when trying to set disable date on ng2 bootstrap date picker upon selecting from drop down. Basically, upon selecting from dropdown, I will execute one API to retrieve list of date to be disable, then from there I will set it to date picker. My HTML as such:

<div class="form-container row" align="left">
    <div class="col-sm-6 form-group has-feedback">
        <label for="testVenue">TEST VENUE</label>
        <select [formControl]="bookingModel.controls.testVenue" class="form-control" [(ngModel)]="testVenue" (change)="getSelectedOption($event)">
          <option *ngFor="let b of bkVenuesList; let i=index" [value]="b.itemValue"  [selected]= "b.itemSelected == true">{{b.itemLabel}}</option> 
        </select>  
    </div>
</div>

<div class="form-container row" align="left">
    <div class="col-sm-6 form-group has-feedback">
        <label for="testDte">TEST DATE</label>
        <datepicker
            [formControl]="bookingModel.controls.testDte"
            [(ngModel)]="testDte"
            [dateDisabled]="disabledDate"
        ></datepicker>
    </div>
</div>

And my typescript, upon selecting from drop down, it will execute following function:

disabledDate: any = [];

getSelectedOption(event: Event) {
this.disabledDate = [];

this.bookingService.getBookingDate(this.testVenue+"", "N")
.subscribe(
  searchResultNew => {
      this.bkDatesList = [];
      this.bkDatesList = searchResultNew;

      this.bkDatesList.forEach((bkDVo, index) => {
        // trying to format from DD/MM/YYYY to YYYY-MM-DD
        let day = bkDVo.bookingDate.substring(0, 2);
        let month = bkDVo.bookingDate.substring(3, 5);
        let year = bkDVo.bookingDate.substring(6, 11);
        this.date = new Date();
        let disableDate = new Date(year + '-' + month + '-' + day);
        this.disabledDate.push({date:disableDate , mode: 'day'}); 
      });  
    
    this.rerender = true;
  },
  err => {
    this.errorMsg = "Internal Server Error";
    if(err && err.source ){
      this.errorMsg = err.source;
    }
    this.msgModal.show();
    this.rerender = true;
  
    console.log(err);
  }
  );

}

However, the date picker will not be refreshed automatically. For instance, I have data for disabled date on 09/12/2021 and 18/12/2021, after executing the function above, by right it should automatically set the two dates above to be disabled, but for now, I have to either go back to previous month or move forward to next month in the date picker, then come back to current month to see the reflected changes.

Any ideas on how to re-render date picker automatically? Thanks!