Angular: Add click event to bootstrap MD tab


Topic: Angular: Add click event to bootstrap MD tab

MPL pro premium asked 2 years ago

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);

} }

```


Arkadiusz Idzikowski staff answered 2 years ago

The click event will not work in this case because this element is not rendered directly in the tabs template, we just take the information about the tab content and title and use it to create a custom HTML code.

You can listen to the activeTabChange event on the mdb-tabs component.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 3.0.0
  • Device: Laptop
  • Browser: All
  • OS: Linux
  • Provided sample code: No
  • Provided link: No