Parent and Child not staying in sync in Angular 17

Question

I am working with Angular 17 and using @Input and @Output to sync between Parent and Child. The problem is that the syncing is not consistent between the 2. (See attached screen shot). At some point the sync fails and afterward, the child appears to remain 1 record behind the parent. For example, in the screen shot a failure has occurred and "Apartment Owners" failed to load. When the next selection is made in the dropdown, "Apartment Owners" will load in child, with the child remaining 1 step behind the parent with each new selection.

What am I missing? I have tried to manually update the child by emitting an event, but that did not work either.

Thanks!

  async loadAccount(accountID: string) {
this.accountsService.GetAccount(accountID).subscribe((response: Account) => {
  this.page.data.account = response;
  this.onPageUpdate.emit(this.page);   
});    

}

Answer 1

I found the cause of my problem. My mistake was using onChangeSelected which occurs on the mat-option element. onChangeSelected is for cases when multiselect is used and will fire multiple times. The solution was to use selectionChange on the mat-select element. My html now looks like this:

    <mat-form-field>
  <mat-select #AccountLookup placeholder="**Company **" (selectionChange)="loadAccount($event.value)">
    <mat-option *ngFor="let account of page.accountList| accountLookupFilter: page.selectedAccountStatus"
      [ngClass]="account.statusCode == 2 ? 'alert-error' : 'alert-success'" [value]="account.value">
      {{ account.label }}
    </mat-option>
  </mat-select>
</mat-form-field>

@Naren Murali - Thank you for your time and help