title: How to load dynamic HTML into DIV with component? Angular5
body: <p>I have been trying to find the solution of this problem from two days. Unfortunately, I can not get what I want. I am using Angular5.</p>
  
  <pre><code>&lt;div class="form-group col-md-12" [innerHTML]="GetItemsOfHolder(item.children[1],1,
  'UserConfigGroupsLabelHolder') | keepHtml"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This is what my function looks like:</p>
  
  <pre><code>GetItemsOfHolder(item: any,divName:string, recursive: boolean = false,typeName:string="") 
  {
  return html;
  }
  </code></pre>
  
  <p>Everything works fine, unless The html which I am returning contains one package named <a href="https://www.npmjs.com/package/ng2-select2" rel="noreferrer"><strong>Select2</strong></a>
  This is what I use to add the html into this div it works very fine. Until I wanted to add the dynamic package. </p>
  
  <p>What I mean is return html contains the package component like this:</p>
  
  <pre><code>itemhtml +="&lt;select2 data-type='"+holderItem.itemType+"' 
  [data]='this.dropdownData."+holderItem.name+"'&gt;&lt;/select2&gt;"  
  </code></pre>
  
  <p>This just returns the plain text to the browser and doesn't work as expected.</p>
  
  <p>What I want is the string to be turned into component or any other way which works and generates the select2 dropdown.</p>
  
  <p>I have been trying to search so many things.But it doesn't works
  <a href="https://stackoverflow.com/questions/38888008/how-can-i-use-create-dynamic-template-to-compile-dynamic-component-with-angular">This is good but I can not understand this</a>   And dynamiccomponentloading is deprecated.            </p>
  
  <p>Can anyone please give me an idea How can I resolve this problem? Any example would be a great.</p>