I have a Angular component "MapComponent" where I use Javascript inside ngAfterViewInit() function to initialize the Leaflet map. I also bind a onClick function to map component. My goal is to log a MapComponent member to the console when the map is clicked. When I the onMapClick function is triggered by the click event on the map, this is interpreted as the map but not the MapComponent. How can I achieve to get access to the MapComponent members inside onMapClick function?

import { Component, OnInit } from '@angular/core';
import { LeafletMouseEvent, Map } from 'leaflet';
declare let L: any;

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

  private name = 'Test';
  private view = [52, 9];
  private start = [52.373920, 9.735603];
  private end = [52.021111, 8.534722];

  constructor() { 
    
  }


  onMapClick(e: LeafletMouseEvent) {
    console.log( this.name );
  }

  


  ngAfterViewInit(){
    
    // Creating map element
    const map = L.map('map', {tap: false, zoomControl: false}).setView( this.view, 13);

    // Creating tile layer
    const tiles = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    });

    // Adding tile layer to map
    tiles.addTo(map);
  

    map.fitBounds([
      this.start,
      this.end
  ]);

    
  map.on('click', this.onMapClick);

  };


  

  // ngOnInit 
  ngOnInit( ): void {

  }
}