Control Flow in Components - `@if`

Deciding what to display on the screen for a user is a common task in application development. Many times, the decision is made programmatically using conditions.

To express conditional displays in templates, Angular uses the @if template syntax.

NOTE: Learn more about control flow in the essentials guide.

In this activity, you'll learn how to use conditionals in templates.

<hr/>

The syntax that enables the conditional display of elements in a template is @if.

Here's an example of how to use the @if syntax in a component:

angular-ts

@Component({
  ...
  template: `
    @if (isLoggedIn) {
      <p>Welcome back, Friend!</p>
    }
  `,
})
export class App {
  isLoggedIn = true;
}

Two things to take note of:

There is an @ prefix for the if because it is a special type of syntax called Angular template syntax
For applications using v16 and older please refer to the Angular documentation for NgIf for more information.

<docs-workflow> <docs-step title="Create a property called `isServerRunning`"> In the `App` class, add a `boolean` property called `isServerRunning`, set the initial value to `true`. </docs-step> <docs-step title="Use `@if` in the template"> Update the template to display the message `Yes, the server is running` if the value of `isServerRunning` is `true`. </docs-step> <docs-step title="Use `@else` in the template"> Now Angular supports native template syntax for defining the else case with the `@else` syntax. Update the template to display the message `No, the server is not running` as the else case.

Here's an example:

angular-html

template: `
@if (isServerRunning) {
  ...
} @else {
  ...
}
`;

Add your code to fill in the missing markup.

</docs-step> </docs-workflow>

This type of functionality is called conditional control flow. Next you'll learn how to repeat items in a template.

Control Flow in Components - `@if`

Control Flow in Components - @if

Control Flow in Components - `@if`