title: Loading Dynamic Components using ngTemplate in ngFor
body: <p>I am trying to set up a dynamic expansion panel like this:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;mat-accordion&gt;
    &lt;mat-expansion-panel *ngFor="let category of categories"&gt;
      &lt;mat-expansion-panel-header&gt;
        &lt;mat-panel-title&gt;
          {{category.name}}
        &lt;/mat-panel-title&gt;
      &lt;/mat-expansion-panel-header&gt;
      &lt;ng-template #category&gt;
        &lt;a&gt;Test&lt;/a&gt;
      &lt;/ng-template&gt;
      &lt;mat-action-row&gt;
        &lt;button mat-button color="primary" (click)="nextStep()"&gt;Next&lt;/button&gt;
      &lt;/mat-action-row&gt;
    &lt;/mat-expansion-panel&gt;
  &lt;/mat-accordion&gt;
  </code></pre>
  
  <p>and in my Component I am trying to access each of the templates like this:</p>
  
  <pre><code>@ViewChildren('category') components: QueryList&lt;CategoryDirective&gt;;
  </code></pre>
  
  <p>and</p>
  
  <pre class="lang-js prettyprint-override"><code>ngAfterViewInit() {
      const viewContainerRef = this.adHost;
      if (!_.isUndefined(this.categories) &amp;&amp; !_.isUndefined(this.components)) {
        this.components.changes.subscribe(() =&gt; {
          this.components.toArray().forEach(el =&gt; {
              console.log('ngAfterViewInit', el);
          });
        });
      }
    }
  </code></pre>
  
  <p>For each of the categories, I have a component property which I want to load in ngTemplate.</p>
  
  <p><a href="https://i.stack.imgur.com/vHN4a.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vHN4a.png" alt="enter image description here"></a></p>
  
  <p>How do I do that?</p>