How to implement a Angular 2+ step progress bar - html

Question

I want to implement a 7 step progress bar in Angular2+ TypeScript+SCSS+HTML like shown in above image. I don't know how to proceed.
I have 7 steps(created, assigned, inprogress and so on) and three different paths (all 7 steps, blocked after 3 steps, rejected at initial step)
My thoughts:
Draw a line, add icons and then change icons once step is completed. should I use routing here?
add image/icons then add lines in between?
add default line, then add icons/images over it and colour the completed steps?
I am doing for a website so the words below the icons/images should resize accordingly and should work for phone size although not required at this point of time. Angular stepper has buttons and a bit complex for me. I am implementing in already existing website with internal calls for status variable. It will be placed in top right corner of the website.
Also it is ok to grey out 2 previous steps of current steps and showing next step in grey.
It's been quite confusing how to go about it, I am a very new to Angular2+.

Answer 1

I did something somewhat similar awhile back, but ended up scrapping it so it is not super clean. I also was just writing the name of the statuses and coloring them differently instead of having icons with labels underneath. Mine would switch to a vertical view on small screen sizes. Not sure if it will help much, but here's the html:
<div
*ngIf="appeal && statuses && statuses.length > 0 && childVisible"
fxLayout="row"
fxLayoutAlign="start center"
fxLayout.lt-md="column"
class="py-24"
>
<ng-container *ngFor="let status of statuses; let last = last; let index = index">
<span [ngClass]="{ 'green-fg': index <= selection, 'orange-fg text-bold': index === selection }">{{
status.statusDescription
}}</span>
<mat-divider
fxHide.lt-md="true"
fxHide="false"
inset="true"
fxFlex="1 0 15px"
*ngIf="!last"
class="my-0 mx-8"
></mat-divider>
<mat-divider
fxHide.lt-md="false"
fxHide="true"
vertical="true"
inset="true"
fxFlex="1 0 10px"
*ngIf="!last"
class="mx-0 my-4"
></mat-divider>
</ng-container>
</div>

Answer 2

hi i find a solution: this component call "stepper" in angular material have this solucion
example:
HTML
<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
{{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
</button>
<mat-stepper [linear]="isLinear" #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Fill out your name</ng-template>
<mat-form-field appearance="fill">
<mat-label>Name</mat-label>
<input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup" label="Fill out your address">
<form [formGroup]="secondFormGroup">
<mat-form-field appearance="fill">
<mat-label>Address</mat-label>
<input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY" required>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
<p>You are now done.</p>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
</mat-stepper>
ts
import { Component } from '#angular/core';
import { FormBuilder, Validators } from '#angular/forms';
/**
* #title Stepper overview
*/
#Component({
selector: 'stepper-overview-example',
templateUrl: 'stepper-overview-example.html',
styleUrls: ['stepper-overview-example.css'],
})
export class StepperOverviewExample {
firstFormGroup = this._formBuilder.group({
firstCtrl: ['', Validators.required],
});
secondFormGroup = this._formBuilder.group({
secondCtrl: ['', Validators.required],
});
isLinear = false;
constructor(private _formBuilder: FormBuilder) { }
}
in here link find you the documentation here https://material.angular.io/components/stepper/overview