Angular: Add click event to bootstrap MD tab

Hi all I have the following:

<mdb-tab (click)="showRouteMap()" title="Route Map"> <div id="map" style="width: 100%!important; height: 800px"></div> </mdb-tab>

however when I click the tab nothing happens. I also don't see the click event when I inspect element as if it is being ignored.

Wondering if anyone can help with this?

Thanks

.html:

<mdb-tab title="Airports">
</mdb-tab>

<mdb-tab (click)="showRouteMap()" title="Route Map">
  <div id="map" style="width: 100%!important; height: 800px"></div>
</mdb-tab>

.ts:

``` import {Component, OnInit} from '@angular/core'; import * as L from "leaflet";

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

constructor( ) { }

async ngOnInit(): Promise { }

public async showRouteMap() { // Allow the dom to load await new Promise(r => setTimeout(r, 2000));

const map = L.map("map").setView([0.0, 0.0], 3);
let googleRoadMap = L.gridLayer.googleMutant({
  type: 'terrain',

});

googleRoadMap.addTo(map);

L.control.fullscreen({
  position: 'topleft',
  forceSeparateButton: true,
  forcePseudoFullscreen: true,
  fullscreenElement: false
}).addTo(map);

} }

```