How to register one animation for the entire routing?

Question

Angular

Good day,
How can I write one animation for the entire routing? In order not to write in each component

import { fadeInAnimation } from '../shared/animations';

@Component({
    ...
    animations: [fadeInAnimation],
    host: {'[@fadeInAnimation]': ''}
})

Answer 1

Everything turned out to be easier than I thought. Thanks link

<div [@visibilityChanged]="visibility">
  <router-outlet></router-outlet>
</div>

@Component({
    selector: 'app-main-layout',
    templateUrl: './main-layout.component.html',
    animations: [
        trigger('visibilityChanged', [
            state('shown', style({opacity: 1, transform: 'translateY(0)'})),
            state('hidden', style({opacity: 0, transform: 'translateY(10px)'})),
            transition('hidden => shown', animate('.3s ease-out')),
        ]),
    ],
})
export class MainLayoutComponent {

    visibility: string = 'hidden';

    constructor(private router: Router) {
        let el = this;
        router.events.subscribe(event => {
            if (event instanceof NavigationStart)
                if (event.url != router.url)
                    el.visibility = 'hidden';
            if (event instanceof NavigationEnd)
                setTimeout(() => el.visibility = 'shown', 10);
        });
    }

}