Angular Template Syntax and Control Flow

Flashcards covering Angular v17+ Template Syntax, including @if, @for, @switch, @let, and @defer control flow mechanisms.

@if

The Angular control flow syntax that replaced *ngIf for conditional rendering.

@else / @else if

The new control flow syntax used within @if blocks to handle alternative conditions.

@for

The Angular control flow syntax that replaced *ngFor, used for iterating over arrays or any iterables.

track

A required property in the @for syntax used to provide a stable DOM identity for items, leading to fewer re-renders.

$$index$$

A context variable representing the current item index; only acceptable in track for static lists.

@empty

A specific block within @for that displays fallback content when the iterable contains no items.

@switch

The control flow syntax replacing *ngSwitch, which handles multiple cases without needing break statements.

@case

The block used inside @switch to match specific expression values; it does not support fall through.

@default

The fallback block used within @switch when no @case matches the provided expression.

@let

A syntax used to create a local, non-reassignable template variable whose scope is restricted to the current template block.

@defer

A control flow block used to lazy-load template content, including standalone components and dependencies, to improve initial load speed.

Browser idle

The default trigger for the @defer block.

on viewport

A @defer trigger that initiates loading when the content enters the browser viewport.

on hover

A @defer trigger that initiates loading when a user hovers over the designated area.

on interaction

A @defer trigger that initiates loading when a user interacts with the content, such as through a click.

on timer($5\,s$)

A @defer trigger that initiates loading after a specified duration, such as $5\,s$.

when [condition]

An immediate @defer trigger that activates once a specified condition evaluates to true.

@placeholder

A block displayed before the loading of deferred content begins.

@loading

A block displayed during the time that the deferred content is being loaded.

@error

A block displayed if the loading process for deferred content fails.

Angular $17$

The version of Angular that introduced the new @ symbol-based control flow compiler syntax.

Context Variables

Variables available within @for blocks including $\$index$, $\$count$, $\$first$, $\$last$, $\$even$, and $\$odd$.

prefetch

An option in the @defer syntax that allows resources to be downloaded before the content is rendered.

hydrate

An option used with @defer blocks to improve Server-Side Rendering (SSR) hydration.

@if(expr; as value)

The syntax for capturing the result of a conditional expression into a local variable within an @if block.

track item.id

The recommended practice for the @for track property, utilizing a unique stable primitive key.