Here is a custom progress bar component I created:
@Component ({
selector: 'progress-bar',
templateUrl: './progress-bar.component.html',
styleUrls: ['./progress-bar.component.css']
})
export class ProgressBarComponent {
}
This is the HTML file for the progress bar:
<div class="step-by-step">
<ul class="unstyled clearfix">
<li class="step step-ok"><span>Step One</span></li>
<li class="step step-ok"><span>Step Two</span></li>
<li class="last-step step-ok"><span>Step Three</span></li>
</ul>
</div>
Below is an example of how the app component looks like:
import {Component} from "@angular/core";
@Component ({
selector: '',
templateUrl: `<navbar-component></navbar-component>
<progress-bar></progress-bar>
<router-outlet></router-outlet>`
})
export class AppConfigurationComponent {
}
I have created separate components for each page in my app (three in total). The goal is to be able to dynamically set the CSS class of the progress bar as I navigate through the pages.
Image of the progress bar can be found here.