Q: Angular animate on property change 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? 

A: 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': '*' }))
    ]),
]);


A: ANswering to your question 

How can I trigger an animation when an @Input() property value
  changes?

You can have an input property in a child component as
Input() FadeDirection: string = "FadeFromRight";

and use this input property as a state to assign to the animation trigger as
[@animatecomponent]="FadeDirection"

and for a set of discrete states, define the transition effects as
transition('void => FadeFromRight', [ ... ])

Sample created at https://stackblitz.com/edit/angular-routes-animations
