title: Leaflet customcontrol - Angular 2+
body: <p>I need to integrate a custom form control in my Angular2+ component:</p>
  
  <pre><code>export class HeatMapComponent {
  ...
    onMapReady(map: L.Map) {
      let div = L.DomUtil.create('div', 'info');
      let info = new L.Control();
      info.onAdd = () =&gt; {
        return div;
      };
      info.addTo(map);
    }
  } 
  </code></pre>
  
  <p>And the .hmtl file like this:</p>
  
  <pre><code>    &lt;div class="map container-fluid"
       leaflet [leafletOptions]="options"
       [leafletLayersControl]="layersControl"
       (leafletMapReady)="onMapReady($event)"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The .css:</p>
  
  <pre><code>...
  
      .info {
        padding: 2rem 1rem;
        margin-left: 70rem;
        margin-right: 15rem;
        font: 1rem/1.5rem Arial, Helvetica, sans-serif;
        background: white;
        background: rgba(255,255,255,0.8);
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
        border-radius: 5px;
      }
  </code></pre>
  
  <p>In the leaflet documentation it's written in JS like this: </p>
  
  <pre><code>var info = L.control();info.onAdd = function (map) {
  this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
  this.update();
  return this._div;
  }; 
  // method that we will use to update the control based on feature properties passed
  info.update = function (props) {
      this._div.innerHTML = '&lt;h4&gt;US Population Density&lt;/h4&gt;' +  (props ?
          '&lt;b&gt;' + props.name + '&lt;/b&gt;&lt;br /&gt;' + props.density + ' people / mi&lt;sup&gt;2&lt;/sup&gt;'
          : 'Hover over a state');
  };
  
  info.addTo(map);
  </code></pre>
  
  <p>Why can't I integrate the addTo method in my onMapReady? I don't get any errors but nothing is displayed on my map.</p>