title: How to parse a html string with structural directive in angular
body: <p>I am trying to parse a html string with structural directive inside <code>ng-template</code>. But it is displayed as a string. My exceptions was the structural directive will iterate three times and it will show three <code>li</code>. How can I achieve that?</p>
  <p>Here is my code</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, VERSION } from '@angular/core';
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
  })
  export class AppComponent {
    data = `&lt;div&gt;&lt;li *ngFor=&quot;let d of [1,2,3]&quot;&gt;{{d}}&lt;/li&gt; &lt;/div&gt;`;
  }
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>&lt;section&gt;
    &lt;ng-container
      [ngTemplateOutlet]=&quot;template&quot;
      [ngTemplateOutletContext]=&quot;{ html: data }&quot;
    &gt;&lt;/ng-container&gt;
  &lt;/section&gt;
  
  &lt;ng-template #template let-html=&quot;html&quot;&gt;
    {{ html }}
  &lt;/ng-template&gt;
  </code></pre>
  <p><a href="https://stackblitz.com/edit/angular-ivy-tghb5l" rel="nofollow noreferrer">Sample code here</a></p>