3

I'm trying to animate a row in mat-table when it's added or when it's changed. I have the following animations:

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

export const rowUpdate =
  trigger('rowUpdate', [
    transition('void => *', animate('5000ms', keyframes([
      style({backgroundColor: 'initial', boxShadow: 'none', offset: 0} ),
      style({backgroundColor: 'red', boxShadow: '0 0 5px red', offset: 0.1} ),
      style({backgroundColor: 'initial', boxShadow: 'none', offset: 1} ),
    ])))
  ]);

And I call it on HTML:

<tr mat-row *matRowDef="let row; columns: displayedColumns;" [@rowUpdate]="">

When i change or update a row It works propertly, the problem is that I can hide/show columns and when I add a new column all table highlight and I want that this occurs only when I add/change row, not when I add new columns.

Any idea of how could I control this?

EDIT 1: I've tried this solution to: hightlight via css

But I've another problem, when I sort the table the animation appears again and I don't want it. I've tried to delete the class but I'm not able.

SantiSori
  • 381
  • 2
  • 15
  • see `trackBy` in [material table guide](https://material.angular.io/cdk/table/overview). it allows to tell mat table which of your rows are already been drawn – Andrei Jan 31 '20 at 07:53
  • @Andrei how could I do this? I've never used this trackBy. – SantiSori Jan 31 '20 at 08:03
  • write `trackByItem(index: number, item: any) {return item;}` on your component and bind ``
     – Andrei Jan 31 '20 at 08:05
  • @Andrei yes, I know this, but how can I prevent animmation when I add a new column? – SantiSori Jan 31 '20 at 08:08
  • I asumed animation is happening because angular doesn't know whether it is new item or old. If that is not the reason it need further investigation – Andrei Jan 31 '20 at 08:09
  • @Andrei the reason is that when I change the value of displayedColumns, the definition of row change I think. – SantiSori Jan 31 '20 at 08:11

0 Answers0