How to detect a click on a slide in Swiper?

I have an Angular 2 component which contains a slider from the Swiper package. I want to know which slide (its index) I have clicked on. Trying to follow Swiper documentation I have this:

import { Component, AfterViewInit } from "@angular/core";
import Swiper from "swiper";

@Component({
selector: "challenges",
templateUrl: "challenges.component.html"
})
export class ChallengesComponent implements AfterViewInit {
public mySwiper: Swiper;
public slides = [
"https://via.placeholder.com/300x200/",
"https://via.placeholder.com/300x200/",
"https://via.placeholder.com/300x200/"
];

constructor() { }

public ngAfterViewInit() {
this.mySwiper = new Swiper(".swiper-container", {
slidesPerView: 3,
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
type: "bullets",
clickable: true
},
on: {
click: function(){
console.log(this.mySwiper.clickedSlide);
}
}
});
}
}


The problem is that if I click on one slide, it gives me this error this.mySwiper is undefined. Why, if this.mySwiper is a class member?

Continue reading...