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?

this is in the wrong context. In the documentation it says:

Please note, that this keyword within event handler always points to Swiper instance

Try without mySwiper, only this.clickedSlide.