Cacher is the code snippet organizer for pro developers

ng-component {
  display: block;
}

import { Component, HostBinding } from '@angular/core';
import { trigger, state, animate, style, transition, query } from '@angular/animations';
import { Router } from '@angular/router';

@Component({
  selector: 'app-recipe-app',
  templateUrl: './recipe-app.component.html',
  styleUrls: ['./recipe-app.component.scss'],
  animations: [
    trigger("routeFade", [
      transition("*<=>*", [
        query(":enter", [style({ opacity: 0 })],{ optional: true }),
        query(":enter", [ animate(".1s", style({ opacity: 1 }))], { optional: true })
      ]),
    ])
  ]
})
export class RecipeAppComponent {
  @HostBinding('@routeFade') routeAnim = "";
  animCounter=0;
  constructor(private router: Router) {
    router.events.subscribe(e => this.routeAnim = "*"+this.animCounter++);
  }
}