Steps are invalid if animation is added
Opened this issue · 0 comments
mfish0005 commented
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 }
];