Change the animation of a component conditionally

Question

I would like for a component to choose the animation conditionally to the value of the variable inc. But even if the value changes the realized animation always remains the same, the change is not captured.

    trigger('slideInOut', [
  transition(':enter', [
    style({transform: 'translateY(75%)'}),
    animate('400ms ease-in', style({transform: 'translateY(0%)', backgroundColor:"red"}))
  ]),
  transition(':leave', [
    animate('400ms ease-in', style({transform: 'translateY(-75%)'}))
  ])
]),
trigger('slideInOutReverse', [
  transition(':enter', [
    style({transform: 'translateY(-75%)',backgroundColor:"blue"}),
    animate('400ms ease-in', style({transform: 'translateY(0%)'}))
  ]),
  transition(':leave', [
    animate('400ms ease-in', style({transform: 'translateY(75%)'}))
  ])
])

<div *ngIf="hide" [@slideInOut]="inc" [@slideInOutReverse]="!inc">{{mapLength}} </div>

Answer 1

You need to remove brackets because you have the ngif directive, like so:

<div *ngIf="hide" @slideInOut>{{mapLength}}</div>

And you dont necessary need @slideInOutReverse because you use the aliases:enter to target HTML elements that are inserted to the view and:leave when it's removed.

See the official documentation

Answer 2

You could conditionally render the element with the right animation eg

<div *ngIf="hide && inc" [@slideInOut]>{{mapLength}} </div>
<div *ngIf="hide && !inc" [@slideInOutReverse]>{{mapLength}} </div>

I have always had trouble with making Angular animations deal in conditionals or dynamic values using the declarative animation syntax like you are doing here, but maybe this will help.