Angular animate on property change

Question

I have a custom navigable panel for a list of items. The panel contains one databound component, surrounded by two buttons for navigating to previous and next data. The databound component displays the currently active data. Now, I wish to show some animation when the data object changes. I am new with angular animation and finding it hard to find an example that suits my scenario. How can I trigger an animation when an @Input() property value changes?

Answer 1

If you're not talking about router animations, I think you'll have to maintain an animation state using an @Input() setter and the animations done function. Example here https://stackblitz.com/edit/angular-lmmixg

Child component ts:

  @Input() set data(data: any) {
    this.dataState = 'entering';
    this._data = data;
  }

  get data() { return this._data };

  _data: any;

  dataState: 'entering' | 'done' = 'done';

Child component html:

<div [@dataChange]="dataState" (@dataChange.done)="dataState = 'done'">{{ data }}</div>

Animation ts:

export const dataChange: AnimationTriggerMetadata = trigger('dataChange', [
    transition('done => entering', [
        style({
            'margin-left': '90%'
        }),
        animate('200ms ease',
            style({ 'margin-left': '*' }))
    ]),
]);