|
1 | | -# Angular @if Control Flow Example |
| 1 | +--- |
| 2 | +title: 'Using the @if Built-in Control Flow Block' |
| 3 | +summary: 'Demonstrates how to use the @if built-in control flow block to conditionally render content in an Angular template based on a boolean expression.' |
| 4 | +keywords: |
| 5 | + - '@if' |
| 6 | + - 'control flow' |
| 7 | + - 'conditional rendering' |
| 8 | + - 'template syntax' |
| 9 | +related_concepts: |
| 10 | + - '@else' |
| 11 | + - '@else if' |
| 12 | + - 'signals' |
| 13 | +related_tools: |
| 14 | + - 'modernize' |
| 15 | +--- |
2 | 16 |
|
3 | | -This example demonstrates how to use the `@if` control flow block in an Angular template. The visibility of a `<div>` element is controlled by a boolean field in the component's TypeScript code. |
| 17 | +## Purpose |
4 | 18 |
|
5 | | -## Angular Template |
| 19 | +The purpose of this pattern is to create dynamic user interfaces by controlling which elements are rendered to the DOM based on the application's state. This is a fundamental technique for building responsive and interactive components. |
6 | 20 |
|
7 | | -```html |
8 | | -<!-- The @if directive will only render this div if the 'isVisible' signal in the component is true. --> |
9 | | -@if (isVisible()) { |
10 | | -<div>This content is conditionally displayed.</div> |
| 21 | +## When to Use |
| 22 | + |
| 23 | +Use the `@if` block as the modern, preferred alternative to the `*ngIf` directive for all conditional rendering. It offers better type-checking and a cleaner, more intuitive syntax within the template. |
| 24 | + |
| 25 | +## Key Concepts |
| 26 | + |
| 27 | +- **`@if` block:** The primary syntax for conditional rendering in modern Angular templates. It evaluates a boolean expression and renders the content within its block if the expression is true. |
| 28 | + |
| 29 | +## Example Files |
| 30 | + |
| 31 | +### `conditional-content.component.ts` |
| 32 | + |
| 33 | +This is a self-contained standalone component that demonstrates the `@if` block with an optional `@else` block. |
| 34 | + |
| 35 | +```typescript |
| 36 | +import { Component, signal } from '@angular/core'; |
| 37 | + |
| 38 | +@Component({ |
| 39 | + selector: 'app-conditional-content', |
| 40 | + template: ` |
| 41 | + <button (click)="toggleVisibility()">Toggle Content</button> |
| 42 | + |
| 43 | + @if (isVisible()) { |
| 44 | + <div>This content is conditionally displayed.</div> |
| 45 | + } @else { |
| 46 | + <div>The content is hidden. Click the button to show it.</div> |
| 47 | + } |
| 48 | +`, |
| 49 | +}) |
| 50 | +export class ConditionalContentComponent { |
| 51 | + protected readonly isVisible = signal(true); |
| 52 | + |
| 53 | + toggleVisibility(): void { |
| 54 | + this.isVisible.update((v) => !v); |
| 55 | + } |
11 | 56 | } |
12 | 57 | ``` |
13 | 58 |
|
14 | | -## Component TypeScript |
| 59 | +## Usage Notes |
| 60 | + |
| 61 | +- The expression inside the `@if ()` block must evaluate to a boolean. |
| 62 | +- This example uses a signal, which is a common pattern, but any boolean property or method call from the component can be used. |
| 63 | +- The `@else` block is optional and is rendered when the `@if` condition is `false`. |
| 64 | + |
| 65 | +## How to Use This Example |
| 66 | + |
| 67 | +### 1. Import the Component |
| 68 | + |
| 69 | +In a standalone architecture, import the component into the `imports` array of the parent component where you want to use it. |
15 | 70 |
|
16 | 71 | ```typescript |
| 72 | +// in app.component.ts |
17 | 73 | import { Component } from '@angular/core'; |
| 74 | +import { ConditionalContentComponent } from './conditional-content.component'; |
18 | 75 |
|
19 | 76 | @Component({ |
20 | | - selector: 'app-example', |
21 | | - templateUrl: './example.html', |
22 | | - styleUrl: './example.css', |
| 77 | + selector: 'app-root', |
| 78 | + imports: [ConditionalContentComponent], |
| 79 | + template: ` |
| 80 | + <h1>My Application</h1> |
| 81 | + <app-conditional-content></app-conditional-content> |
| 82 | +`, |
23 | 83 | }) |
24 | | -export class Example { |
25 | | - // This boolean signal controls the visibility of the element in the template. |
26 | | - protected readonly isVisible = signal(true); |
27 | | -} |
| 84 | +export class AppComponent {} |
28 | 85 | ``` |
0 commit comments