Steps component for angular2 where each step is different component and everything is wired together.
Main component that contain steps:
import { StepsService, StepsBodyComponent, StepsHeaderComponent } from '../your_path/ng2-steps/ng2-steps';
import {Step1Component} from './step1.component';
import {Step2Component} from './step2.component';
import {Step3Component} from './step3.component';
import {Step4Component} from './step4.component';
@Component({
moduleId:module.id,
templateUrl:`templates/steptest.html`,
providers:[StepsService],// <---- don't forget
directives:[StepsBodyComponent,StepsHeaderComponent]// <---- don't forget
})
export class StepTestComponent implements OnInit{
public myData:any={};
public step:number=1;
public stepsData=[
{title:'first',content:Step1Component},
{title:'second',content:Step2Component},
{title:'third',content:Step3Component},
{title:'fourth',content:Step4Component}
];
constructor(private steps:StepsService){}
ngOnInit(){
this.steps.setSteps(this.stepsData);
this.steps.setCurrentStep(1);
this.steps.getCurrentStep((currentStep)=>{
this.step=currentStep;
});
this.steps.getData((data)=>{ // subscribe to data from each component
this.myData=data;
}/*, name */);// second parameter is name if we want only specific data from object
}
prev(){
this.steps.prevStep();// service will go through the steps
}
next(){
this.steps.nextStep();
}
}
<ng2-steps-header></ng2-steps-header>
<div class="steps-buttons">
<button (click)="prev()" [disabled]="step==1"> Previous page</button>
<button (click)="next()" [hidden]="step==4"> Next page</button>
</div>
<span>currentStep: {{step}}</span>
<ng2-steps-body></ng2-steps-body>
<div class="steps-buttons">
<button (click)="prev()" [disabled]="step==1"> Previous page</button>
<button (click)="next()" [hidden]="step==4"> Next page</button>
</div>
Individual steps:
import {Component,Input} from '@angular/core';
import { StepsService } from '../your_path/ng2-steps/ng2-steps';
@Component({
moduleId:module.id,
templateUrl:'your_path/templates/step1.html'
})
export class Step1Component{
private someData:any={};
private otherCompsData:any={}
constructor(private steps:StepsService){}
updateData(data){
this.someData=data;
this.steps.setData('someData',data);// this will publish data to other components
}
ngOnInit(){
// subscribe for specific data from other components
// each time some other component update data - we will have info
// getData is subscribing and unsubscribing on destroy for us
this.steps.getData((oData)=>{
this.otherCompsData=oData;
},'otherData');
}
}
(author:oprogramowanie dedykowane)