Angular Animation on Table Row not apply to all rows

Question

I have a standard mat table and have applied an animation from angular/animation api to have the rows slide in from the left when the table is loaded.

table.html

    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" *ngIf="showTable === true" 
  matSort
  matSortStart = "asc"
  matSortDirection="asc"
  matSortActive="brandName">

  <ng-container matColumnDef="brandName">
    <th mat-header-cell *matHeaderCellDef mat-sort-header><h5>Brand</h5></th>
    <td mat-cell *matCellDef="let row">{{row.brandName}}</td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header><h5>Account Number</h5></th>
    <td mat-cell *matCellDef="let row">{{row.name}}</td>
  </ng-container>

  <tr mat-header-row @rowsAnimation *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row @rowsAnimation *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

table.ts

@Component({
 selector: 'brand-account',
 templateUrl: 'brand-account.component.html',
 styleUrls: ['brand-account.component.scss'],
 animations: [rowsAnimation],
})
export class BpDiscountsComponent implements OnInit {

 displayedColumns: string[] = ['tradeAgreementGroupName', 'groupDiscount', 'definition'];
 dataSource: MatTableDataSource<TradeAgreement> = new 
 MatTableDataSource<TradeAgreement>();

private sort: MatSort;
@ViewChild(MatSort) set matPaginator(st: MatSort) {
 this.sort = st;
 this.setDataSourceAttributes();
}

setDataSourceAttributes() {
  this.dataSource.sort = this.sort;
}

rowsAnimation.ts

import { trigger, sequence, animate, transition, style } from '@angular/animations';

export const rowsAnimation = 
trigger('rowsAnimation', [
  transition('void => *', [
    style({ height: '*', opacity: '0', transform: 'translateX(-550px)', 'box-shadow': 'none' }),
    sequence([
      animate(".25s ease", style({ height: '*', opacity: '.2', transform: 'translateX(0)', 'box-shadow': 'none'  })),
      animate(".25s ease", style({ height: '*', opacity: 1, transform: 'translateX(0)' }))
    ])
  ])
]);

Right now the animations only apply for a random few of the rows when the table loads and the others just appear as they would without an animation applied. I am stuck on trying to figure out why it is applying to only a few rows in the table.

Any help or suggestions would be much appreciated.

Update It looks like mat sort is the cause of the problem but I am not sure how to fix it. Files are updated with my sorting code. Do I have to choose between sorting and an animation for my rows when the table loads?

Answer 1

After digging through it I found that my issue was timing with when I was setting MatSort and when my mat-table was being rendered in the DOM (I have a *ngIf on the table). The solution is painfully obvious but MatSort cannot be set and assigned to my dataSource.sort until the table is rendered or in my case showTable === true.

1. MatSort set to local var in ViewChild
2. Mat Table needs to be rendered
3. datasource given data
4. local matSort assigned to datasource.sort
5. Animation on works fine!