Angular/ng-bootstrap - Change Progressbar with current slide

Question

My intention is to change the progress bar's width with every slide. I'm currently using the progress bar given by bootstrap. So far I'm calling an event in HTML with every slide. This event fetches this information about the slide:

Console:
{prev: "ngb-slide-0", current: "ngb-slide-1", direction: "left"}

The progress bar fetches its information regarding the width from currentSlide (app.component.ts), which works fine:

<div class="progress">
    <div class="progress-bar" role="progressbar" [style.width.%]="currentSlide"></div>
  </div>

Typescript progression so far:

export class AppComponent {

  public currentSlide: number;

  images = ['assets/images/image1.jpg', 'assets/images/image2.jpg', 'assets/images/image3.jpg'];

  changeProgress(slide: any): void {
    console.log(slide);
  }
}

My solution path in words:

if current: ngb-slide-0 then currentSlide = 33,33
if current: ngb-slide-1 then currentSlide = 66,66 
if current: ngb-slide-2 then currentSlide = 100

How to transform these words into code?
Thanks in advance, Tim



Rest of html (Slider example):

<div class="container">
  <div class="row">
    <div class="col-12">
      <ngb-carousel *ngIf="images" (slide)="changeProgress($event)">
        <ng-template ngbSlide>
          <img [src]="images[0]" alt="First slide">
        </ng-template>
        <ng-template ngbSlide>
          <img [src]="images[1]" alt="Second slide">
        </ng-template>
        <ng-template ngbSlide>
          <img [src]="images[2]" alt="Third slide">
        </ng-template>
      </ngb-carousel>
    </div>
  </div>
</div>

Answer 1

Create a variable that holds the current percentage of the progress in the slides and change that value when you fire the changeProgress method and bind that percentage to your progress bar like so :

<div class="progress-bar active" role="progressbar" [style.width.%]="currentPercentage"
             [attr.aria-valuenow]="currentPercentage" aria-valuemin="0" aria-valuemax="100">{{this.currentPercentage}}%</div>

and in your component it should look something like this

export class AppComponent {

  public currentSlide: number;
  public currentPercentage: number;

  images = ['assets/images/image1.jpg', 'assets/images/image2.jpg', 'assets/images/image3.jpg'];

  changeProgress(event: any): void {
    this.currentSlide = Number(event.current.substring(10));//10 because you want to remove the string 'ngb-slide-' and get only the selected image
    this.currentPercentage = this.currentSlide / this.images.length * 100;
  }
}

Hope this helps! and like so you can in the future add more images to your slide show and have a dynamic code ( i would suggest using a ng-For to display all ng-templates of your carrousel)

Answer 2

Try this code :

// Add the caroussel to you component class, so you can access the slides array
@ViewChild(NgbCarousel) ngbCarousel;

....

changeProgress(slide: any): void {
    // Find the current slide index.
    let slideIndex = this.ngbCarousel.slides._results.findIndex( elem => {
      return elem.id == slide.current;
    });

    // Convert it to a percentage
    this.currentPercentage = (slideIndex + 1) / this.images.length * 100;
}