Topic: Angular: Add click event to bootstrap MD tab

MPL premium asked 1 month 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 1 month 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: Premium
  • 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