Step-progress-bar NPM

Features

Step success style
Step fail style
Steps reseting

Dependencies

Angular 6 or higher

Install

npm i step-progress-bar

Setup

Add to NgModule: add StepProgressBarModule to desired NgModule,

import { CommonModule } from '@angular/common';

import {StepProgressBarModule} from 'step-progress-bar'

@NgModule({
  imports: [
    CommonModule,
    StepProgressBarModule // StepProgressBarModule added
  ],
  bootstrap: [App],
  declarations: [App]
})
class MainModule {}

Use

Add redesprou-step-progress-bar in desired hmtl page, providing the desired number of steps

...
<div>
    <redesprou-step-progress-bar steps="5"></redesprou-step-progress-bar>
</div>
...

Create a ViewChild for StepProgressBarComponent and call is methods as needed

import { StepProgressBarComponent } from 'step-progress-bar/lib/step-progress-bar/step-progress-bar.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {

  @ViewChild(StepProgressBarComponent, {static: false}) stepProgressBarComponent: StepProgressBarComponent;

  success() {
    this.stepProgressBarComponent.setSuccess();
  }

  fail() {
    this.stepProgressBarComponent.setFail();
  }

  reset() {
    this.stepProgressBarComponent.reset();
  }
}