title: Angular 7 add innerHTML dynamically binding
body: <p>I am trying to set up a system which loads the html page from a stored html file and renders it with angular. How to bind property and event in this file, I'm trying to inject it with innerHTML.</p>
  <p><strong>ParentComponent.ts</strong></p>
  <pre><code>genericAttribut =&quot;Hello&quot;
  
  getHtmlContent(){
      id =1;
      this.service.getHtmlContent(id).subscribe((data)=&gt;
      myTemplate =data;
  });
  }  
  genericFunction(){
  console.log(&quot;fire&quot;);
  }
  </code></pre>
  <p><strong>ParentComponent.html</strong></p>
  <pre><code>&lt;div [innerHTML]=&quot;myTemplate | safeHtml&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p><strong>Template-1.html</strong></p>
  <pre><code>&lt;button (click)=&quot;genericFunction()&quot;&gt;{{genericAttribut}}&lt;/button&gt;
  </code></pre>
  <p>When i try this, angular don't do the binding.</p>