Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

@if

The @if block conditionally displays its content when its condition expression is truthy.

See more...

Syntax

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

Description

Content is added and removed from the DOM based on the evaluation of conditional expressions in the @if and @else blocks.

The built-in @if supports referencing of expression results to keep a solution for common coding patterns:

      
      @if (users$ | async; as users) {
  {{ users.length }}
}