ng-ytl-zorro-antd/src/showcase/nz-demo-steps/nz-demo-steps-change.component.ts

An enterprise-class UI components based on Ant Design and Angular

import { Component } from '@angular/core';
import { NzMessageService } from '../../../index.showcase';

@Component({
  selector: 'nz-demo-steps-change',
  template: `
    <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>
  `,
  styles  : [
      `
      .steps-content {
        margin-top: 16px;
        border: 1px dashed #e9e9e9;
        border-radius: 6px;
        background-color: #fafafa;
        min-height: 200px;
        text-align: center;
        padding-top: 80px;
      }

      .steps-action {
        margin-top: 24px;
      }
    `
  ]
})
export class NzDemoStepsChangeComponent {
  current = 0;

  index = 'First-content';

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

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

  done() {
    this._message.success('done');
  }

  changeContent() {
    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';
      }
    }
  }

  constructor(private _message: NzMessageService) {
  }
}