How to get swiper autoplayTimeLeft in Angular

I'd like to create my own pagination, with a bar filling himself while the autoplay is playing

I see that swiper do have an autoplayTimeLeft method, but I cannot figure out how to use it.

This is what I've tried so fare, but the method wont trigger anything.

<swiper-container #swiperRef init="false" (autoplayTimeLeft)="setTimeLeft($event)">
</swiper-container>

I'm instantiating the swiper as follow

You should use it as an event. Then, in the _initSwiper() method, you can do the following:

percentage:number=0;
private _initSwiper() {
  const options: SwiperOptions = {...}

  const swiperEl = this._swiperRef.nativeElement
  Object.assign(swiperEl, options)

  swiperEl.initialize()

  if (this.swiper) this.swiper.currentBreakpoint = false // Breakpoint fixes
  this.swiper = this._swiperRef.nativeElement.swiper
  
  // Autoplay Time Left Event
  this.swiper.on('autoplayTimeLeft',(swiper:Swiper, timeLeft:number, percentage:number)=>{
    // Here write the code you need
    console.log(swiper, timeLeft, percentage);
    this.percentage=percentage;
  });
}

Here's an example similar to what you want to achieve.

As I show in the image in my question, I've needed to know the active index for me to be able to show the white line with css.

The autoplay feature have sadly a little bug and it is impossible to get the correct swiper.activeIndex since it does never reset to 0.

I had to implement a custom feature and wished to share it with you.

percentage:number = 0
activeIndex = 0
defaultDelay = 500
slides = ['1', '2', '3']

private _initSwiper() {
  const options: SwiperOptions = {...}

  const swiperEl = this._swiperRef.nativeElement
  Object.assign(swiperEl, options)

  swiperEl.initialize()

  if (this.swiper) this.swiper.currentBreakpoint = false // Breakpoint fixes
  this.swiper = this._swiperRef.nativeElement.swiper
  
  // Custom Autoplay Time
  this.doAutoplay(this.defaultDelay, this.activeIndex)

  // If the user manually change the slide
  this.swiper.on('slideChange', (swiper: Swiper) => {
    this.activeIndex = swiper.activeIndex
    this.doAutoplay(this.defaultDelay, this.activeIndex)
  })
}


doAutoplay(delay: number, index: number) {
  if (this.activeIndex !== index) return

  this.percentage = 100 - (delay / this.defaultDelay) * 100 + '%'

  if (delay <= 0) {
    setTimeout(() => {
      if (this.activeIndex + 1 === this.slides.length) this.swiper.slideTo(0)
      else this.swiper.slideTo(this.activeIndex + 1)
    }, 300)
    return
  }

  setTimeout(() => {
    this.doAutoplay(delay - 10, index)
  }, 10)
}