ng-template - typed variable : <p>How can parent component recognise type of <code>let-content</code> which comes from  <code>ngTemplateOutletContext</code>? Now <code>{{content.type}}</code> works correctly, but IDE says:</p>

<blockquote>
  <p>unresolved variable type</p>
</blockquote>

<p>How can I type it as <code>Video</code>?</p>

<p><strong>parent.component.ts:</strong></p>

<pre><code>export interface Video {
  id: number;
  duration: number;
  type: string;
}

public videos: Video = [{id: 1, duration: 30, type: 'documentary'}];
</code></pre>

<p><strong>parent.component.html:</strong></p>

<pre><code>&lt;ul&gt;
  &lt;li *ngFor="let video of videos"&gt;
    &lt;tile [bodyTemplate]="tileTemplate" [content]="video"&gt;&lt;/app-card&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;ng-template #tileTemplate let-content&gt;
  &lt;h5 class="tile__type"&gt;{{content.type}}&lt;/h5&gt;
&lt;/ng-template&gt;
</code></pre>

<p><strong>tile.component.ts:</strong></p>

<pre><code>@Component({
  selector: 'tile',
  templateUrl: './tile.component.html',
  styleUrls: ['./tile.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CardComponent {
  @Input() tileTemplate: TemplateRef&lt;any&gt;;
  @Input() content: Video;
}
</code></pre>

<p><strong>tile.component.html:</strong></p>

<pre><code>&lt;div
...
  &lt;ng-container
    [ngTemplateOutlet]="tileTemplate"
    [ngTemplateOutletContext]="{ $implicit: content }"&gt;
  &lt;/ng-container&gt;
...
&lt;/div&gt;
</code></pre>
