neuronetpl/ng2-steps

Steps component for angular2 where each step is different component and everything is wired together.

ng2-steps

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)

ng2-steps's Issues

Example link have bug

it possible have any example on single step?
and any other example?
THANKS

issue set this up in a project

Hi
I'm trying to add this component to a project and I'm getting the following error (see below).

I've checked the source code but I can't see why its erroring.

error_handler.js:54 EXCEPTION: Error in ./StepsBodyComponent class StepsBodyComponent - inline template:5:69 caused by: this.compiler.compileComponentAsync is not a function
ErrorHandler.handleError @ error_handler.js:54
next @ application_ref.js:348
schedulerFn @ async.js:93
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:79
NgZone.triggerError @ ng_zone.js:333
onHandleError @ ng_zone.js:294
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
drainMicroTaskQueue @ zone.js:433
ZoneTask.invoke @ zone.js:349
error_handler.js:56 ORIGINAL EXCEPTION: this.compiler.compileComponentAsync is not a function