Stacked bootstrap progress bars using Angular?

Bootstrap 4 and earlier versions allow stacking multiple bars in a progress bar, as illustrated at https://v4-alpha.getbootstrap.com/components/progress/ with code:

<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>


However, ng-bootstrap seems to allow only one bar for NgbProgressbar as illustrated at https://ng-bootstrap.github.io/#/components/progressbar with code:

<p><ngb-progressbar type="success" [value]="25"></ngb-progressbar></p>


I see some code at https://embed.plnkr.co/rx4RJUFjHqGYMA3jRxDL/ for stacked progress bars using Bootstrap 3 and a beta version of Angular 2, but it uses deprecated calls such as to CORE_DIRECTIVES and when I tried to run the code without that and in an Angular 4 / Bootstrap 4 environment the output was quite mangled.

Anyone know of a good way to get stacked progress bars in Angular 4 with Bootstrap 4?

Continue reading...