Angular 2: How do I use angular animations to fade in/fade out of components within <router-outlet> after the initial load?

Question

As of right now, the code is working as it should (but now how I want haha). The animation works and fades in when the page initially loads & is first initialized but the animations do not occur when I am accessing routes within the after the initial page fade in. Just wondering how I could implement my animation to each sibling route.

Any help is appreciated, thank you!

Below are my app component files where I wrote the animation. I then put the trigger into the HTML.

app.component.ts

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    animations:[
        trigger('main-router', [
            state('in', style({
                opacity: 1
            })),
            transition('void => *', [
                style({opacity: 0}),
                animate(2000)
            ]),
            transition('* => void', [
                style({opacity: 0}),
                animate(2000)
            ])
        ])
    ]
})

app.component.html

<div class="router-outlet-outer" [@main-router] >
    <router-outlet>
    </router-outlet>
</div>

Answer 1

The following blog entry by Cory Rylan should answer all of your questions.

---

On the router outlet, we create a template reference to the outlet directive with the template variable assignment #o="outlet". With this reference to the outlet directive, we can get the information of when the router outlet is active to trigger our fade animation.

<main [@fadeAnimation]="o.isActivated ? o.activatedRoute : ''">
   <router-outlet #o="outlet"></router-outlet>
</main>

https://coryrylan.com/blog/introduction-to-angular-router-animations https://stackblitz.com/edit/angular-p2vuku