Control Flow

Control flow of template blocks for conditionally showing, hiding and repeating elements.

@if

Conditionally displays its content when its condition expression is truthy.

@if (a > b) {
    {{ a }} is greater than {{ b }}
} @else if (b > a) {
    {{ a }} is less than {{ b }}
} @else {
    {{ a }} is equal to {{ b }}
}

Referencing the conditional expression's result

The @if conditional supports saving the result of the conditional expression into a variable for reuse inside of the block.

@if (user.profile.settings.startDate; as startDate) {
  {{ startDate }}
}

@switch

This block provides an alternate syntax to conditionally render data.

The value of the conditional expression is compared to the case expression using ===.

Optionally use @default block. Its contents only displays if none of the preceding case expressions match the value.

@switch (userPermissions) {
  @case ('admin') {
    <app-admin-dashboard />
  }
  @case ('reviewer') {
    <app-reviewer-dashboard />
  }
  @case ('editor') {
    <app-editor-dashboard />
  }
  @default {
    <app-viewer-dashboard />
  }
}

@for

To render content of a block for each item in a collection.

The collection can be any javascript iterable.

But there are performance advantages of using a regular Array.

@for (item of items; track item.id) {
    {{ item.name }}
}

track

For tracking changes in the collection.

Using track can significantly enhance your application's performance.

• For collections that do not undergo modifications like (no items moved, added, or deleted), using track $index is enought.

• But for collections with mutable data or frequent changes, select a property that uniquely identifies each item to use as your track expression.

@empty

To define fallback content if the items list is empty.

@for (item of items; track item.id) {
    {{ item.name }}
} @empty {
    <span>Nothing to show..</span>
}

$index and others

There are several implicit and always available variables that Angular provides in @for or ngFor blocks.

• $count: Number of items in a collection iterated over.

• $index: Index of the current row.

• $first: Whether the current row is the firts row.

• $last: Whether the current row is the last row.

• $even: Whether the current index is even.

• $odd: Whether the current index is odd.