Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
Angular has a new websiteHead 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 }}
}