@let keyword

modern Angular (v18.1+), the @let syntax is almost always used alongside the new control flow (@if, @for).

Here is a basic, clean example of a User Dashboard component that calculates a discount and handles an asynchronous name.

The Modern Syntax Example

This example demonstrates how @let simplifies template logic without needing extra <div> or <ng-container> wrappers.

Why this is better than the "Old Way"

1. No "Falsy" Bugs: With the old *ngIf="value$ | async as val", if the value was 0 or false, the whole block would disappear from the screen. @let simply stores the value, so the UI stays visible even if the value is 0.
2. Flat Templates: You don't have to nest five <ng-container> tags just to alias five different Observables. You just list your @let declarations at the top.
3. Performance: In the finalPrice example above, the math product.price - discount is calculated once when the data changes, rather than being recalculated every time Angular runs change detection for that specific text binding.

Key Rules for @let

1. Location: You must declare @let before you use it (no hoisting).
2. Scope: If you declare @let inside an @if block, it is only available inside that block.
3. Read-Only: You cannot change the value of a @let variable via a button click or event (e.g., <button (click)="myVar = 5"> will not work). It is meant for presentation logic only.