How to get type checking on NgTemplateOutlet let- variable from Child Component

1 day ago 2
ARTICLE AD BOX

In below diagram you can see type checking is working correctly for the signal object, but not for the let object, even though both of them are of same type-

enter image description here

Example on stack blitz- https://stackblitz.com/edit/stackblitz-starters-hynkmzq5?file=src%2Fmain.ts

App Component:

import { Component, computed, signal } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { Child } from './app/child/child'; @Component({ selector: 'app-root', template: ` <app-child [items]="people()"> <ng-template #item let-person> {{ person.doesnotexist }} {{ firstPerson().name }} </ng-template> </app-child> `, imports: [Child], }) export class App { people = signal<Person[]>([ { name: 'Goldberg', age: 27, }, { name: 'John Cena', age: 29, }, ]); firstPerson = computed(() => this.people()[0]); } export interface Person { name: string; age: number; }

Child Component:

import { Component, contentChild, effect, input, TemplateRef } from '@angular/core'; import { NgTemplateOutlet } from '@angular/common'; @Component({ selector: 'app-child', imports: [NgTemplateOutlet], template: ` @for(item of items(); track $index) { <ng-container [ngTemplateOutlet]="itemTemplate()" [ngTemplateOutletContext]="{ $implicit: item }" /> } `, styles: ``, }) export class Child<T> { items = input.required<T[]>(); readonly itemTemplate = contentChild.required<TemplateRef<{ $implicit: T }>>('item'); }

How to make type checking work for the let object as well?

Ideally I do not want to pass entire array to a directive, just to infer the type in the solution

Read Entire Article