How to implement Angular Route Animations?

Question

I'm trying to implement angular route animations. I've followed the documentation as well as referred to this video: https://www.youtube.com/watch?v=7JA90VI9fAI. But I cannot get the animations working. Here is the code so far: https://stackblitz.com/edit/angular-animations-not-working

animations.ts

import { trigger, transition, animate, style, query } from '@angular/animations';

export const fader =
  trigger('routeAnimations', [
    transition('* <=> *', [
      query(':enter, :leave', [
        style({
          position: 'absolute',
          left: 0,
          width: '100%',
          opacity: 0,
          transform: 'scale(0) translateY(100%)'
        })
      ], { optional: true }),
      query(':enter', [
        animate('600ms ease', style({
          opacity: 1, transform: 'scale(1) translateY(0)'
        })),
      ], { optional: true })
    ])
  ]);

app.component.html

<a [routerLink]="['home']">Home</a>&nbsp;&nbsp;&nbsp;<a [routerLink]="['hello']">Hello</a>
<div class="route-content" [@routeAnimations]="prepareRoute(outlet)">
  <router-outlet #outlet="outlet"></router-outlet>
</div>

app.component.ts

import { Component } from '@angular/core';
import { fader } from './animations';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    fader
  ]
})
export class AppComponent  {
  name = 'Angular';
  prepareRoute(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
  }
}

styles.css

.route-content {
  position: relative;
}

Can someone please help?

Thanks in advance.

Answer 1

you need to add data: {animation: 'HomePage'} in your routes

  { path: 'home', component: HomeComponent, data: {animation: 'HomePage'} },

accoding to https://angular.io/guide/route-animations