delete selectors
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++);
}
}