cwun / angular-multi-step-wizard Goto Github PK
View Code? Open in Web Editor NEWTutorials on building an Angular 4 Multi-Step Wizard with its own Router
Home Page: http://bit.ly/2vVFPY8
Tutorials on building an Angular 4 Multi-Step Wizard with its own Router
Home Page: http://bit.ly/2vVFPY8
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 }
];
Button clicks in Chrome/Safari are getting considered as a submit. This is causing data to be lost with each click. Need to add explicit type parameter.
#Hi,
thanks for the great work, I want to stop user to go back after pressed goNext(), can you help me with the implantation?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.