Steps are invalid if animation is added

[mfish0005]

Hello! Thanks for the awesome tutorial! It's been very helpful. I'm just having a hard time adding animation.

I'm using Angular's built in @angular/animations. I have animation working but I think there is a problem with the workflow service. It always re-renders the first page(personal) when you click the next button. Maybe because it thinks it's invalid?

I'm sure this isn't a problem with the wizard itself. Would love to hear your thoughts as I'm a bit overwhelmed. Thanks in advance! :)

app.component.ts

import { Component, OnInit, Input }   from '@angular/core';
import { trigger,state, style, animate, transition, query } from '@angular/animations';

import { FormDataService }            from './data/formData.service';

@Component ({
    selector:     'multi-step-wizard-app',
    templateUrl: './app.component.html',
    animations: [        
        trigger('routerAnimation', [
            transition('* <=> *', [
              // Initial state of new route
              query(':enter',
                style({
                  position: 'fixed',
                  width:'100%',
                  transform: 'translateX(-100%)'
                }),
                {optional:true}),
      
              // move page off screen right on leave
              query(':leave',
                animate('500ms ease',
                  style({
                    position: 'fixed',
                    width:'100%',
                    transform: 'translateX(100%)'
                  })
                ),
              {optional:true}),
      
              // move page in screen from left to right
              query(':enter',
                animate('500ms ease',
                  style({
                    opacity: 1,
                    transform: 'translateX(0%)'
                  })
                ),
              {optional:true}),
            ])
        ])   
    ]
})

export class AppComponent implements OnInit {
    title = 'Multi-Step Wizard';
    @Input() formData;
    
    constructor(private formDataService: FormDataService) {
    }
    
    // change the animation state
    getRouteAnimation(outlet) {
        console.log("getRouteAnimation fired!")
        return outlet.activatedRouteData.animation;
    }

    ngOnInit() {
        this.formData = this.formDataService.getFormData();
        console.log(this.title + ' loaded!');
    }
}

app.component.html

<!-- Content Area -->
<div class="tab-content" [@routerAnimation]="getRouteAnimation(route)">
    <!-- Nested view  -->
    <router-outlet #route="outlet"></router-outlet>
</div>
<!-- End Content Area -->

app-routing.module.ts

export const appRoutes: Routes = [
    // 1st Route
    { path: 'personal',  component: PersonalComponent, data: { animation: 'personal' } },
    // 2nd Route
    { path: 'work',  component: WorkComponent, canActivate: [WorkflowGuard], data: { animation: 'work' }},
    // 3rd Route
    { path: 'address',  component: AddressComponent, canActivate: [WorkflowGuard], data: { animation: 'address' } },
    // 4th Route
    { path: 'result',  component: ResultComponent, canActivate: [WorkflowGuard], data: { animation: 'result' } },
    // 5th Route
    { path: '',   redirectTo: '/personal', pathMatch: 'full' },
    // 6th Route
    { path: '**', component: PersonalComponent }
];