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

Try reading the documentation for the lifecycle hook:

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

Answer 2

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: `<div #mapDiv></div>`
})
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