(Angular12) UI is not updating when a filter is applied (shows the same number of table rows every time)

Question

I have a value called numberOfAnimals that's moving from a parent component to a child. The numberOfAnimals determines how many table rows are generated in the UI. But when a change happens (ie the users filters to show a specific type of animal), the UI ignores the specificity and continues to generate a row for each animal. There's a number to show all eligible animals (which is numberOfAnimals ), and that does change properly depending on which animals are filtered.

Here's some screencaps showing what happens when all of the animals are shown:

And here's what I'm seeing when the filter is selected. I'm not supposed to see the cheetah there, but the value of 2 is correct:

I'd suspected that there was an issue with timing, to which the UI was too slow for the component, but the more I think about it the more I believe that it's not the case.

I have this.dataSource.data and it's what the UI is looking for when each row is generated. When the filter is applied, it stays the same number rather than changing to the new value, and I believe that there's something causing it to not change, but I don't know what. I think that if I can get to the bottom of that, then I can get the right number of rows to show.

I'm pretty new to Angular and TS, so I apologize if my syntax and/or wording is rusty.

---

Here's some code with comments:

animals-dropdown.component.ts

pageIndex = 0;
pageSize = 10;
resultsLength = 0;
dataSource = new MatTableDataSource();

@Input() numberOfAnimals: number; // coming from parent.component.ts

constructor(
    private eligibleAnimalsSvc: EligibleAnimalsService,
    private cdr: ChangeDetectorRef
)

ngOnInit() {
    console.log('numOfAnimals before call: ', this.numberOfAnimals) // === 11
    this.getEligibleAnimals();
}

getEligibleAnimals(): void {
    this.loading = true; // this is defined in original code
    const num: number = this.pageSize;
    const start: number = (this.pageIndex * this.pageSize) + 1;
    this.targetingCriteria$.pipe(take(1)).subscribe((c: any) => {
      this.eligibleAnimalsSvc.get(true, c, c.animalId, num, start).subscribe((response: CollectionResponse<SearchAnimalsResponse>) => {
        this.resultsLength = response.total;
        this.dataSource.data = response.list;
        console.log('dataSrc: ', this.dataSource.data)
        // ^ this is ~always~ the same # of animals, even when the filter is applied. So when this.numberOfAnimals changes from 11 to 2, for instance, this.dataSource is always at 11.

        console.log('numOfAnimals after call: ', this.numberOfAnimals)
        // ^ this is 11 when every animal is shown
        // ^ and correctly changes to the right # of animals when the filter is applied
        this.loading = false;
        this.cdr.detectChanges();
      });
      
    });
  }

Template:

<mat-panel-title>
       Eligible animals: &nbsp;
       <span>{{ this.numberOfAnimals | number }}</span>
</mat-panel-title>

<div *ngIf="this.resultsLength">
  <table mat-table [dataSource]="dataSource" id="eligible-animals">
  // table headers here (including matColumnDef="location" for Col1 and matColumnDef="animalName" for Col2)
          <tr mat-header-row *matHeaderRowDef="['location', 'animalName']"></tr>
          <tr mat-row *matRowDef="let row; columns: ['location', 'animalName'];" (click)="openAnimalRow(row.animalId)" [attr.data-atm]="'animal-' + row.animalId"></tr>
  </table>
</div>

---

Here's a snippet of what this.dataSource console logs:

(10) [{...}, {...}, {...}, etc]
0 :
  addressCity: "Bronx",
  addressPostalCode: "NY",
  animalType: "Cheetah"
  animalId: "12345", // this is supposed to be a string
  isActive: true,
  locationName: "Bronx Zoo"

Answer 1

Use the ngOnChange() hook. This will allow you to upload the @Input() data once you see that the oldValue is different from the current value. Your table will update instantly!