Angular Multi Step Form Wizard using NG-Zorro

Posted on by

I am doing a multistep form using Angular and NG-Zorro and I am facing an issue. I am just a beginner so bear with me, please.

Here is my code in the component.ts

pre(): void {
  this.current -= 1;
  this.changeContent();
}

next(): void {
  this.current += 1;
  this.changeContent();
}

done(): void {
  console.log('done');
}

changeContent(): void {
  switch (this.current) {
    case 0: {
      this.index = 'First-content';
      break;
    }
    case 1: {
      this.index = 'Second-content';
      break;
    }
    case 2: {
      this.index = 'third-content';
      break;
    }
    default: {
      this.index = 'error';
    }
  }
}

and the HTML

<nz-steps [nzCurrent]="current">
  <nz-step nzTitle="Finished"></nz-step>
  <nz-step nzTitle="In Progress"></nz-step>
  <nz-step nzTitle="Waiting"></nz-step>
</nz-steps>

<div class="steps-content">{{ index }}</div>
<div class="steps-action">
  <button nz-button nzType="default" (click)="pre()" *ngIf="current > 0">
    <span>Previous</span>
  </button>
  <button nz-button nzType="default" (click)="next()" *ngIf="current < 2">
    <span>Next</span>
  </button>
  <button nz-button nzType="primary" (click)="done()" *ngIf="current === 2">
    <span>Done</span>
  </button>
</div>

The problem is in the switch statement the case is only rendering a string i want to call the id of a specific division or html class on each switch, is there any way to apply that? Thanks.

Source: AngularJS Questions