@if block

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

3 snippets

8 mins

v.18

Fabio Biondi

Google Developer Expert
Microsoft MVP

# @if block

SWITCH LAYOUT

The @if block conditionally displays its content when its condition expression is truthy.
Source: Angular Doc

In this example:

Clicking the button triggers the toggle method.
toggle changes the visible signal's value.
The <h1> element is displayed or hidden based on the visible signal's state.

src/app.component.ts

# @if @else

Topics

Courses

Bookmarks

there are no topics

Send your feedback

@if block

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

3 snippets

8 mins

v.18

Fabio Biondi

Google Developer Expert
Microsoft MVP

# @if block

SWITCH LAYOUT

The @if block conditionally displays its content when its condition expression is truthy.
Source: Angular Doc

In this example:

Clicking the button triggers the toggle method.
toggle changes the visible signal's value.
The <h1> element is displayed or hidden based on the visible signal's state.

src/app.component.ts

# @if @else

SWITCH LAYOUT

The @if block might have one or more associated @else blocks. Immediately after an @if block, you can optionally specify any number of @else if blocks and one @else block
Source: Angular Doc

In this example

Clicking "Sign In" button triggers signIn(), setting logged to true, showing the "Hi Dev" message and "Logout" button.
Clicking "Logout" button triggers logout(), setting logged to false, showing the "Login" message and "Sign In" button.

src/app.component.ts

Angular Cookbook: The Basics

Send your feedback

Angular Cookbook: The Basics

# @if block

In this example:

# @if @else

Send your feedback

# @if block

In this example:

# @if @else

# Simulate a TabBar - @if version

In this example