Angular - bootstrap carousel - How to bind active item

How to achieve this :
When I click on right arrow of the carousel, I want to trigger a method with the item index as parameter.
Some thing like <button ... (...)="eventHandler(index)" ..>

Below the code to be modified to achieve passing index param (the code is working)

<div id="carouselId" class="carousel slide">
<div class="carousel-inner" >
<div class="carousel-item active">
<img [src]="videoFirstItem.safeUrl">
</div>
<div class="carousel-item" *ngFor="let item of videoItems">
<img [src]="item.safeUrl">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselId" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselId" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>


const PAGE_INDEX:number=0
const NB_ITEMS_PER_PAGE:number=4

@Component({
selector: 'app-image-carousel',
templateUrl: './image-carousel.component.html',
styleUrls: ['./image-carousel.component.css']
})
export class ImageCarouselComponent implements OnInit {

videoFirstItemisplayableVideo=new DisplayableVideo
videoItemsisplayableVideo[]=new Array<DisplayableVideo>

constructor(
private backendVideRetrieverService: BackendVideRetrieverService
){}

ngOnInit(): void {
this.backendVideRetrieverService.getVideosByPage(PAGE_INDEX, NB_ITEMS_PER_PAGE).subscribe(
(displayableVideosisplayableVideo[]) => {
this.videoFirstItem = displayableVideos[0]
this.videoItems=displayableVideos.slice(1)
}
)
}
}


Below the code that is not working but gives an idea of what I want to do

<div class="carousel-item" *ngFor="let item of videoItems; let index = index">
....
<button class="carousel-control-next" ... data-bs-slide="next" (clilk)="eventHandler(index)">


eventHandler(index:number){
if(index == lastItemIndex){
getMoreVideo()
}
}


link to app I am working on :
https://peertubeseeker.com/#/(navbar:viewersitems//body:viewers)

Continue reading...