Implement Wizard in angular2?

Question

I need to implement wizard in angular2. And I have a idea but I dn't know how to implement. This is my idea:

I want create one component, it will be common component. With steps and Next/Back button. Like this

@Component({
    selector: 'div',
    providers: [],
    template: ' <ul class="steps">
        <li *ngFor="#step of steps; #i = index" class="steps-item">
            <a href="#" class="steps-link" [attr.value]="step.value">{{step.name}}</a>
        </li>
    </ul>
    <form >
        <template></template>
        <div>
            <button type="button">Back</button>
            <button type="submit">Submit</button>
        </div>
    </form>',
    pipes: [TranslatePipe],
    directives: []
})

export class WizardComponent {
    steps: any;

    constructor() {
        this.steps = [
            {'name': 'step 1', 'value': '1'},
            {'name': 'step 2', 'value': '2'},
            {'name': 'step 3', 'value': '3'}
        ];
    }
}

And then every component will extend form WizardComponent, to re-use all HTMl and next/back function. Something like that.

Any solution for me, thanks.

Not sure what your wizard should be used for but see my answer for an approach. — Günter Zöchbauer, Apr 12 '16 at 16:37

score 11 · Accepted Answer · edited May 23 '17 at 12:17

Helper to add components using `ngFor

export class DclWrapper {
  @ViewChild('target', {read: ViewContainerRef}) target;
  @Input() type;
  cmpRef:ComponentRef;
  private isViewInitialized:boolean = false;

  constructor(private dcl:DynamicComponentLoader) {}

  updateComponent() {
    // should be executed every time `type` changes but not before `ngAfterViewInit()` was called 
    // to have `target` initialized
    if(!this.isViewInitialized) {
      return;
    }
    if(this.cmpRef) {
      throw 'currently changing type after the component was added is not supported'
    }
    this.dcl.loadNextToLocation(this.type, this.target).then((cmpRef) => {
      this.cmpRef = cmpRef;
    });
  }

  ngOnChanges() {
    this.updateComponent();
  }

  ngAfterViewInit() {
    this.isViewInitialized = true;
    this.updateComponent();  
  }
}

Your wizard component using the DclWrapper component

@Component({
    selector: 'my-wiz',
    providers: [],
    template: ' <ul class="steps">
        <li *ngFor="#step of steps; #i = index" class="steps-item">
          <dcl-wrapper [type]="step"></dcl-wrapper>  
        </li>
    </ul>
    <form >
        <template></template>
        <div>
            <button type="button">Back</button>
            <button type="submit">Submit</button>
        </div>
    </form>',
    pipes: [TranslatePipe],
    directives: [DclWrapper]
})
export class WizardComponent {
    @Input() steps;

    constructor() {}
}

Some example components for each step

@Component({
  selector: 'step1',
  template: `<h2>step1</h2>`

})
export class Step1 {
}

@Component({
  selector: 'step2',
  template: `<h2>step2</h2>`

})
export class Step2 {
}

@Component({
  selector: 'step3',
  template: `<h2>step3</h2>`

})
export class Step3 {
}

Using it all together

@Component({
  selector: 'my-app',
  directives: [Tabs]
  template: `
  <h2>Hello {{name}}</h2>
  <my-wiz [steps]="steps"></my-tabs>
`
})
export class App {
  Steps = [Step1, Step2, Step3];
}

A similar use case (with a Plunker example) Angular 2 dynamic tabs with user-click chosen components

Implement Wizard in angular2?

1 Answers1