Индикатор выполнения Angular 2 Multi Step Form с

Question

Я пытаюсь создать поток, который очень похож на ( http://plnkr.co/edit/M03tYgtfqNH09U4x5pHC?p=preview), но с angular2. У меня есть готовые потоки, хотя я не принимаю во внимание состояние или данные, но меня больше интересует индикатор выполнения, и я полностью растерялся относительно того, с чего начать индикатор выполнения и как подойти к нему. Я был бы очень признателен за любую помощь в этом. Вот основная схема компонента, который у меня есть, который статичен, ничего не делает.

`import { Component, NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { Routes, RouterModule } from '@angular/router';
import {ManualDemographics} from '../../manual-demographics';

@Component({
  selector: 'progress-wizard',
  providers: [ ],
  styleUrls: [ './multistep-progress-wizard.style.scss' ],
  templateUrl: './multistep-progress-wizard.template.html'
})

export class ProgressWizard {
  constructor(
    private zone: NgZone,
    private router: Router){}
}
export const ROUTES: Routes = [
  { path:'manualDemographics', component: ManualDemographics}
];`

заранее большое спасибо

Answer 1

Я думаю, что Stepper Material UI сделает именно то, что вам нужно, и очень прост в реализации:

https://material.angular.io/components/stepper/overview

Вам также нужно только импортировать модуль MatStepperModule, так что не нужно много накладных расходов.