title: How to utilize Angular 4 components when creating Leaflet Extended Control?
body: <p>I am working now a few weeks with <strong>Leaflet</strong> and <strong>Angular CLI</strong> on a project involving geo map and in-door maps (Leaflet custom maps). </p>
  
  <p>The application is conceptually very simple. I have to provide the user with a list of in-door locations (e.g. room) in a form of a simple location tree table, where, on user click, a new in-door map must be called. Also, I have to make a custom search box with a few filtering options for searching through sets of structured data and plotting the data on the maps in a form of Leaflet markers.</p>
  
  <p>The question I have is the following: <strong>What would be the best way to implement the 2 above mentioned controls (location tree and search box)</strong>, taking into account the nature of the app and the technology I am working with (<strong>Leaflet library</strong> and <strong>Angular CLI</strong> (<strong>angular 4.x</strong>))? </p>
  
  <p>From my point of view, I can see 2 options by now:</p>
  
  <p><strong>1)</strong> Create the controls (location tree and search box with filters) using Leaflet <em>L.control.extended</em> (negative(-): seems to me that I have to statically type html in the <em>L.control.extended 'onAdd'</em> function in order to create the controls -> no possible Angular 4 templating engine advantages)</p>
  
  <p><strong>2)</strong> Create the controls using Angular 4 Component's templates, in Angular 4 fashion, neglecting the very existence of Leaflet <em>L.control.extended</em>  (negative: It seems to me that this option unnecessary complicates the app + intuitively seems wrong since Leaflet extended control seems 'as born' for such types of problems)</p>
  
  <p>It would be great if I could dynamically nest Angular component inside Leaflet custom control somehow. Any suggestions?</p>