Conditional Blocks

## The built-in conditional block Angular v17 added **control flow blocks** to the template language. The conditional family is: ```html @if (order.status === 'cancelled') { <p class="banner banner--error">This order was cancelled.</p> } @else if (order.status === 'shipped') { <p class="banner">On its way.</p> } @else { <p class="banner">We are preparing your order.</p> } ``` The rules the parser enforces: - `@if` takes **one expression** in parentheses, optionally followed by an `as` alias. - **Any number** of `@else if` blocks may follow. - **At most one** `@else`, and it must be **last**; it takes no parameters. - A branch renders when its expression is **truthy** by JavaScript rules; the first truthy branch wins and the rest are skipped. Because the blocks are syntax, not directives, there is nothing to import. A standalone component can use `@if` with an empty `imports` array. ## What it replaces Before v17 the same template needed the `NgIf` structural directive: ```html <p *ngIf="order.status === 'cancelled'; else notCancelled">Cancelled.</p> <ng-template #notCancelled> <p *ngIf="order.status === 'shipped'; else preparing">On its way.</p> </ng-template> <ng-template #preparing> <p>We are preparing your order.</p> </ng-template> ``` | Concern | `*ngIf` | `@if` | |---|---|---| | Else branch | a `#ref` to an `<ng-template>` placed elsewhere | an `@else { }` block right after | | Else-if | nest another `*ngIf` inside the else template | `@else if (...) { }` | | Imports | `NgIf` or `CommonModule` in the component | none | | Multiple root nodes | wrap in `<ng-container *ngIf>` | put them straight in the block | | Status | deprecated since v20, intended for removal | current recommendation | The `*` form is shorthand for wrapping the element in an `<ng-template>`, and the else branch has to be a named template because a directive can only receive other templates through inputs. The block syntax removes that indirection: the branches sit next to each other in reading order. ## What happens at runtime The compiler turns the whole `@if` chain into one instruction that evaluates the conditions in order during change detection and returns the index of the branch to show (or none). Then: 1. If the **chosen branch changed**, Angular destroys the previous branch's view and creates the new one. 2. If the **same branch** is still chosen, the existing view is kept and simply updated. 3. If **no branch** matches and there is no `@else`, nothing is rendered. Destroying a branch destroys its components and directives and runs their cleanup, the same as removing any view. That is intended: an `@if` is for showing different content, not for hiding content that should keep its state. ## Narrowing inside the branches Under strict template type checking, the compiler reproduces the chain as real TypeScript `if` statements, so a branch body is type-checked with the condition's narrowing applied. `@if (order.shipment) { {{ order.shipment.carrier }} }` compiles without a possibly-undefined error, because `order.shipment` is a property path TypeScript can narrow. Each `@else if` and the `@else` also see the **negation** of the earlier conditions, so an `@else` after `@if (status === 'cancelled')` knows the status is not `'cancelled'`. Narrowing does not apply to calls: `@if (order()) { {{ order().id }} }` still sees `order()` as possibly empty, which is where the `as` alias or an `@let` variable helps. The same guards are applied to event handlers inside the branch, so a `(click)` in the branch body is checked with the narrowed type too. ## Common mistakes - Putting `@else` before an `@else if`: the parser reports that the `@else` block must be last. - Writing two `@else` blocks: only one is allowed. - Expecting `@if` to hide content while preserving component state; for that, bind a class or the `hidden` attribute instead. - Keeping `NgIf` or `CommonModule` in `imports` after migrating; under strict templates the `unusedStandaloneImports` diagnostic (NG8113) can flag an import the template no longer uses. ## When the old syntax still appears Most production codebases still contain `*ngIf`, and it keeps working in v22 as a deprecated API. Interviewers often ask candidates to read both forms, so it is worth being able to translate one into the other in both directions, including `*ngIf="value$ | async as value"`, which becomes `@if (value$ | async; as value)`.