title: Add HTML elements into Angular Component
body: <p>How to add a angular html element into a component in run time.</p>
  
  <p>Let the html element is a H1 tag having angular expression.
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;{{testHeading}}&lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to insert this tag into a component. With persisting it's dynamic angular property.
  Here "testHeading" is a angular variable.</p>
  
  <p>Am trying to add the element using the following method:</p>
  
  <pre><code>addComponent(component:any){
      let componentRef = this.componentFactoryResolver
      .resolveComponentFactory(component)
      .create(this.injector);
  
      this.appRef.attachView(componentRef.hostView);
  
      const domElem = (componentRef.hostView as EmbeddedViewRef&lt;any&gt;)
      .rootNodes[0] as HTMLElement;
  
      var newcontent = document.createElement('div');
      newcontent.innerHTML = `&lt;h1&gt;${this.demoText}&lt;/h1&gt;`;
      domElem.appendChild(newcontent);
  
      document.getElementById("testid").appendChild(domElem);
  }
  </code></pre>