Angular animations within same component

Question

Im trying to add animations to my entire website. The problem im facing is that within the same component, but a new route, my animation isn't working. I've set my animation up to activate when the route changes.

This is my routing setup:

const routes: Routes = [
      {path: '', redirectTo: '/home', pathMatch: 'full'},
      {path: 'not-found', component: PageNotFoundComponent},
      {path: 'home', component: HomeComponent, data: { state: 'home'}},
      {path: 'stage', component: StageComponent, data: { state: 'stage'}},
      {path: 'documenten', component: DocumentenComponent, data: { state: 'documenten'}},
      {path: 'competenties/:uid', component: CompetentieComponent, data: { state: 'competenties/:uid'}}
];

This is my animation:

    export const routerTransition = trigger('routerTransition', [
    transition('* <=> *', [
        query(':enter, :leave', style({position: 'fixed', width: '100%'})
            , {optional: true}),
        group([
            query(':enter', [
                style({transform: 'translateX(100%)'}),
                animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
            ], {optional: true}),
            query(':leave', [
                style({transform: 'translateX(0%)'}),
                animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'}
            ], {optional: true}),
        ])
    ]),
    ]);

This is the HTML used to call the animation

<div [@routerTransition]="getState(o)">
     <router-outlet #o="outlet"></router-outlet>
</div>

This is the TypeScript for the template:

import {routerTransition} from './animations';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    animations: [routerTransition]
})

export class AppComponent {
    public getState(outlet) {
        return outlet.activatedRouteData.state;
    }
}

I've tried using :increment as a transition but it doesn't seem to work. I'm completely new to the angular animations so any advice/help is appriciated!

Thanks!

Answer 1

The problem is component is reused and angular treat it as no change in this case and hence no transition animation is triggered.

This post provided a solution https://medium.com/frontend-coach/angular-router-animations-what-they-dont-tell-you-3d2737a7f20b