How to detect a click on a slide in Swiper?

Question

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?

Answer 1

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.

Answer 2

Without any effort you can change function to arrow function and your function scope will be binded to this. Thus you can access swiper this way!

Another solution is with ViewChild decorator @ViewChild('swiper-container')