Angular 18 @let syntax in template shows type as any instead of inferred type

I’m trying out the new @let syntax introduced in Angular 18 to simplify assigning values inside templates.

However, I noticed that the type is always inferred as any, even though the underlying observable is properly typed in TypeScript.

For example:

@Component({
selector: 'app-meeting-events',
templateUrl: './meeting-events.component.html',
standalone: true,
imports: [CommonModule],
})
export class MeetingEventsComponent {
// Observable emits an array of events
meetingEvent$: Observable<Event[]> = of([
{ id: 1, title: 'Team Sync' },
{ id: 2, title: 'Planning' },
]);
}

export interface Event {
id: number;
title: string;
}


Template using @let:

@let events = meetingEvent$ | async;

<ul>
<li *ngFor="let e of events">
{{ e.title }}
</li>
</ul>


When I hover over events in VS Code (Angular Language Service), it shows any.

But when I use the classic *ngIf as syntax, the type is correctly inferred:

<ng-container *ngIf="meetingEvent$ | async as events">
<ul>
<li *ngFor="let e of events">
{{ e.title }}
</li>
</ul>
</ng-container>


My question:

1. Is this a known limitation of the new @let syntax?
2. Is there a way to make the Angular Language Service infer the correct type when using @let?

Stackblitz_REF

Continue reading...