Angular Material Table, animating changes on table from a subscription

Question

To give an example of what I am trying to do:

I have an angular material table which is being sourced from a class extending DataSource. The connect method on the DataSource is subscribing to some data (e.g. Firestore).

As the data changes elsewhere the material table updates the table on the screen. No problem there. What I really want to do, is flash the change on the screen (or indicate via an animation), that this particular item has changed.

A real world example would be premiership football games, as the scores change during the game, the score changing from a subscription (observable) would use some animation (colour change for 1s example) to give feedback to the user.

I have tried:

 <ng-container matColumnDef="lost">
    <mat-header-cell *matHeaderCellDef>Score</mat-header-cell>
    <mat-cell *matCellDef="let sc"  [@changeState]="sc.score">{{ sc.score }</mat-cell>
  </ng-container>

with the sc.score being the trigger state. and have animated something like :

trigger('changeState', [
      state('inactive', style({
        backgroundColor: '#ff0000',
        transform: 'scale(1)'
      })),
      state('active',   style({
        backgroundColor: '#00ff00',
        transform: 'scale(1.1)'
      })),
      transition('* <=> *', animate('5000ms ease-in'))
    ])

(This is not the exact one I need, but just playing with the animate). As the value change being the state, I used a transition of * <=> *, hopefully means anything to anything. As for the states, I have no idea what to place in the state names, need something like :beforechange and :afterchange. Even without the states, I was expecting the value to ease in after 5s (but it happens immediate.

I have looked around the internet and I am surprised that I could not find an example of someone wanting the same (unless I'm bad at Google searching).

I came across this because I was badly Google searching for the wrong thing :D I thought Material gives us some kind of animation API but really we should be using the Angular Animations. Your problem obviously is what is the trigger name right? And that is from mat-table which isn't documented any where (unless you dig in the source code) Any way I found an answer that probably could have helped you, maybe still can, definitely help somebody in the future. — Piotr Kula

Piotr Kula Piotr Kula · Accepted Answer · 2018-08-07T12:30:47

I am not sure about your particular problem, as I originally thought the names where predefined somewhere but really these are names YOU choose (that is what I learnt from all this) And then you bind them on your HTML with tags. This is from the Angular animations documentation.

An animation state is a string value that you define in your application code. In the example above, the states 'active' and 'inactive' are based on the logical state of hero objects.

The example can be found here
https://angular.io/guide/animations

I got adding a row transition working by paraphrasing from this random Angular Github issue

First create a file to contain your animation / animations (in this example a simple slide in from left animation)

import { trigger, sequence, state, 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(".35s ease", style({ height: '*', opacity: '.2', transform: 'translateX(0)', 'box-shadow': 'none'  })),
          animate(".35s ease", style({ height: '*', opacity: 1, transform: 'translateX(0)' }))
        ])
      ])
    ]);

Then on the page where you have your table you need to edit your typescript file to declare the animation for this page (there probably is a global way to do this I am unsure though)

import { rowsAnimation } from './animations/template.animations';

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html',
  animations: [rowsAnimation],
})

Then on your template / html file you just the animation onto <mat-row

<mat-row [@rowsAnimation]="" *matRowDef="let row; columns: displayedColumns;"</matrow>

When adding items in (mine was bound using a Observable Subject as the Datasource) the text flew in from the left.

Angular Material Table, animating changes on table from a subscription

1 Answers