Components: animate the new row added to the mat-table

Created on 14 Mar 2018 · 9Comments · Source: angular/components

Bug, feature request, or proposal:

while adding a new row element to the mat-table, notify the user what row has been added new to the list of rows

What is the expected behaviour?

being able to notify the user where the new row has been added

What is the current behaviour?

no indication of when the data changed

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

What is the use-case or motivation for changing an existing behavior?

allow the user to identify where the new row has been added

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 5.2, Chrome

Is there anything else we should know?

Source

oscarlagatta

Most helpful comment

You can achieve that by creating a custom animation and apply it to the <mat-row>

First you can create a file to contain all your animations. For example: template.animations.ts

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)' }))
        ])
      ])
    ]);

The animation is rowsAnimation and it has the transition void => *that applies when the element enters the view, regardless of what state it will have later.

More info about animations:
https://angular.io/guide/animations

In your html template, add the animation to the <mat-row>

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

In your ts file, import the animation from the previous file and provide it to the animation array in the component declaration:

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

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

Now each time you add new data to the datasource the animation appears

I have created a StackBlitz with the full example:
https://stackblitz.com/edit/angular-material-addrow-example

patrickqsos on 16 Mar 2018

👍9 🎉4 🚀1 ❤1

All 9 comments

You can achieve that by creating a custom animation and apply it to the <mat-row>

First you can create a file to contain all your animations. For example: template.animations.ts

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)' }))
        ])
      ])
    ]);

The animation is rowsAnimation and it has the transition void => *that applies when the element enters the view, regardless of what state it will have later.

More info about animations:
https://angular.io/guide/animations

In your html template, add the animation to the <mat-row>

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

In your ts file, import the animation from the previous file and provide it to the animation array in the component declaration:

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

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

Now each time you add new data to the datasource the animation appears

I have created a StackBlitz with the full example:
https://stackblitz.com/edit/angular-material-addrow-example

patrickqsos on 16 Mar 2018

👍9 🎉4 🚀1 ❤1

Closing, as noted in the response above, you should be able to control the animation of rows using Angular's Animations API.

josephperrott on 26 Mar 2018

Thanks Joe and Patrick

On Mon, Mar 26, 2018 at 4:45 PM, Joey Perrott notifications@github.com
wrote:

Closed #10417 https://github.com/angular/material2/issues/10417.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/angular/material2/issues/10417#event-1541203153, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AEW4ET51cNQCWUjbKDTMdPlNrPuvXBgUks5tiQ02gaJpZM4SqJc0
.

oscarlagatta on 26 Mar 2018

Hi @patrickqsos can we add a manual data instead of pushing some random data into it

chethan1095 on 24 Apr 2018

@chethan1095 Yes. the stackblitz example has a function createNewUser that returns an instance of UserData with random data that is added to the datasource of the mat-table. Inside that function you can manually call your backend or retrieve info from some service to get data you need

patrickqsos on 24 Apr 2018

I have been searching for a while on how to do this. In material they demonstrate everything in the overview but there is no link for developers to find out how to do it. Luckily your code survived here and probably will try that. I never actually realised the animations need to be done in Angular and not with Material.

Not sure but your angualr guides link goes to a not found git hub page instead of
https://angular.io/guide/animations

And the stackblitz has been obliterated.

Am a complete noob at this but have seen a few Stack Overflow questions with no answers.

ppumkin on 7 Aug 2018

@patrickqsos

I was actually looking the same thing. but unfortunately the link you shared is not working.
https://stackblitz.com/edit/angular-material2-issue-mxouqy
Could you please help us.