SlideChange(Swiper) event is not functional in Angular

I have the following situation: I'm trying to use the Swiper library to change pictures as a carousel.

I'm using Angular 16(I will soon upgrade to v18) and the latest version of Swiper, when selecting to the next picture in the list I don't get the slidechange event.

I wanted to change data in the table after changing the image in the carousel, so I needed this event.

Template:
<swiper-container [slidesPerView]="1" [centeredSlides]="true" [navigation]="true" [pagination]="{ clickable: true }" (slidechange)="onSlideChange($event)">
<swiper-slide *ngIf="topIssue.DescriptionPhoto.Base64StringData.length> 0">
<img [src]="topIssue.DescriptionPhoto.Base64StringData" /></swiper-slide>
<swiper-slide *ngIf="topIssue.FurtherActionPhoto.Base64StringData.length> 0">
<img [src]="topIssue.FurtherActionPhoto.Base64StringData" /></swiper-slide>
</swiper-container>

Component:
onSlideChange(swiper: any) {
console.log(swiper);
}

AppModule:
import { register } from 'swiper/element/bundle';


export class AppModule {
constructor() {
registerLocaleData(localeDe);
register();
}
}

Continue reading...