Initializing leaflet map in angular2 component after DOM object exists

Question

I\'m currently trying to create a leaflet map inside an angular material2 tab-group as below

import {Component, NgModule} from \'@angular/core\         


        

Answer 1

Looks like referencing directly the map container Element (through @ViewChild) is working without issue.

import {Component, ViewChild} from '@angular/core';
import 'leaflet';

@Component({
    selector: 'minimap',
    template: `
`
})
export class MiniMap implements OnInit {
    @ViewChild('mapDiv') mapContainer;

    ngOnInit() {
        this.map = L.map(this.mapContainer.nativeElement);
    }
}

Updated Plunk: https://plnkr.co/edit/HGWb3J1f5HL8shFW9EUN?p=preview

However, it seems that you need to re-initialize the map size once the tab is revealed (at least the first time). See Data-toggle tab does not download Leaflet map