title: How to pass template to nested component in Angular
body: <p>i am building autocomplete in NativeScript and Angular (this question is valid for pure Angular also).</p>
  
  <p>Markup looks like this:</p>
  
  <pre><code>&lt;StackLayout&gt;
  &lt;TextField #keywords [hint]="options?.hint" [(ngModel)]="occupation"
      (textChange)="keywordsInputChange$.next(keywords.text)"&gt;
  &lt;/TextField&gt;
  &lt;ng-container *ngTemplateOutlet="parentTemplate"&gt;&lt;/ng-container&gt;
  
  &lt;ScrollView orientation="vertical" height="200" *ngIf="dataItems?.length &gt; 0" class="m-r-16 m-l-16 search-view"&gt;
      &lt;ListView [items]="dataItems" (itemTap)="onItemTap($event)"&gt;
          &lt;ng-template let-item="item"&gt;
              ...
          &lt;/ng-template&gt;
      &lt;/ListView&gt;
  &lt;/ScrollView&gt;
  </code></pre>
  
  <p></p>
  
  <p>and it will be used from outside:</p>
  
  <pre><code>&lt;px-lookup (selected)="onOccupationSelected($event)" [options]="occupationLookupOptions"&gt;
      &lt;ng-template let-item&gt;
           &lt;StackLayout class="search-item" backgroundColor="red"&gt;
                 &lt;Label [text]="item.text"&gt;&lt;/Label&gt;
           &lt;/StackLayout&gt;
      &lt;/ng-template&gt;
  &lt;/px-lookup&gt;
  </code></pre>
  
  <p>As you see i would like to pass custom template to my lookup which will be used by ListView. 
  I am am retrieving that template like this</p>
  
  <pre><code>@ContentChild(TemplateRef, { static: false }) parentTemplate: TemplateRef&lt;any&gt;;
  </code></pre>
  
  <p>I can render it in lookup without any problem by defining</p>
  
  <pre><code>&lt;ng-container *ngTemplateOutlet="parentTemplate; context: { $implicit: item }"&gt;&lt;/ng-container&gt;
  </code></pre>
  
  <p>However when i am trying to put it to LietView which also requires template i cannot make it to work. I am geting errors like <em>'Error: No suitable views found in list template! Nesting level: 0'</em>  either items are rendered just as [Object object]</p>
  
  <p>I have tried these options:</p>
  
  <pre><code>&lt;ListView [items]="dataItems" (itemTap)="onItemTap($event)"&gt;
          1. Option ===&gt; &lt;ng-container *ngTemplateOutlet="parentTemplate"&gt;&lt;/ng-container&gt; --&gt;
  
          2. Option ===&gt;&lt;ng-content&gt;&lt;/ng-content&gt;
  
          3. Option ===&gt; &lt;ng-template let-item="item"&gt; (top template that is required by ListView)
              &lt;ng-container *ngTemplateOutlet="parentTemplate; context: { $implicit: item }"&gt;&lt;/ng-container&gt; (Tried to render another template with current one by passing item down the pipe)
          &lt;/ng-template&gt;
      &lt;/ListView&gt;
  </code></pre>
  
  <p>Does somebody knows the way how I can attchieve that?</p>
  
  <p>Thanks</p>