title: Initializing leaflet map in angular2 component after DOM object exists
body: <p>I'm currently trying to create a leaflet map inside an angular material2  <code>tab-group</code> as below</p>
  
  <pre><code>import {Component, NgModule} from '@angular/core'
  import {BrowserModule} from '@angular/platform-browser'
  import { MaterialModule } from '@angular/material';
  
  import { Component, OnInit, OnDestroy } from '@angular/core';
  import 'leaflet';
  
  @Component({
    selector: 'minimap',
    template: `&lt;div #minimap [id]="id" class=leaflet-map&gt;&lt;/div&gt;`
  })
  export class MiniMap implements OnInit, OnDestroy {
    map: L.Map = null;
    id: string;
  
    constructor() { 
      this.id = "map" + Date.now();
    }
  
    ngOnInit() {
      this.map = L.map(this.id).setView([54.5, -115.0], 13);
      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution:
        '&amp;copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
      }).addTo(this.map);
    }
  
    ngOnDestroy() { }
  }
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;div&gt;
        &lt;h2&gt;Hello {{name}}&lt;/h2&gt;
        &lt;md-tab-group&gt;
        &lt;md-tab label="tab 1"&gt;
        tab 1 content
        &lt;/md-tab&gt;
        &lt;md-tab label="tab 2"&gt;
        tab 2 content
        &lt;/md-tab&gt;
        &lt;md-tab label="map tab"&gt;
        &lt;minimap&gt;&lt;/minimap&gt;
        &lt;/md-tab&gt;
        &lt;/md-tab-group&gt;
      &lt;/div&gt;
    `,
  })
  export class App {
    name:string;
    constructor() {
      this.name = 'Angular2'
    }
  }
  </code></pre>
  
  <p><a href="https://plnkr.co/edit/dLwhv3XoMWMYFkqztkuR?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/dLwhv3XoMWMYFkqztkuR?p=preview</a></p>
  
  <p>Unfortunately when it tries to create the map in the component it throws an error saying that the map container doesn't exist yet. my interpretation is that the code is currently running before the DOM object is created. </p>
  
  <p>What is the correct way of creating the map such that the code is called when the DOM object exists??</p>