form_metacase/node_modules/@angular/cli/lib/code-examples.db

SQLite format 3

@  
.Š
ø		4LÇÕ`Ö[
ä	4ƒ-	7†triggerexamples_after_insertexamplesCREATE TRIGGER examples_after_insert AFTER INSERT ON examples BEGIN
      INSERT INTO examples_fts(
        rowid, title, summary, keywords, required_packages, related_concepts, related_tools,
        content
      )
      VALUES (
        new.id, new.title, new.summary, new.keywords, new.required_packages,
        new.related_concepts, new.related_tools, new.content
      );
    ENDu33
�tableexamples_fts_configexamples_fts_configCREATE TABLE 'examples_fts_config'(k PRIMARY KEY, v) WITHOUT ROWIDy55
�tableexamples_fts_docsizeexamples_fts_docsizeCREATE TABLE 'examples_fts_docsize'(id INTEGER PRIMARY KEY, sz BLOB)�--
�Atableexamples_fts_idxexamples_fts_idxCREATE TABLE 'examples_fts_idx'(segid, term, pgno, PRIMARY KEY(segid, term)) WITHOUT ROWIDs//
�tableexamples_fts_dataexamples_fts_dataCREATE TABLE 'examples_fts_data'(id INTEGER PRIMARY KEY, block BLOB)‚,%%„tableexamples_ftsexamples_ftsCREATE VIRTUAL TABLE examples_fts USING fts5(
      title,
      summary,
      keywords,
      required_packages,
      related_concepts,
      related_tools,
      content,
      content='examples',
      content_rowid='id',
      tokenize = 'porter ascii'
    )‚E
„]tableexamplesexamplesCREATE TABLE examples (
      id INTEGER PRIMARY KEY,
      title TEXT NOT NULL,
      summary TEXT NOT NULL,
      keywords TEXT,
      required_packages TEXT,
      related_concepts TEXT,
      related_tools TEXT,
      experimental INTEGER NOT NULL DEFAULT 0,
      content TEXT NOT NULL
    )y

�EtablemetadatametadataCREATE TABLE metadata (
      key TEXT PRIMARY KEY NOT NULL,
      value TEXT NOT NULL
    )/C
indexsqlite_autoindex_metadata_1metadata
ÅìÅ
ßßî!
created_at)	schema_version
title: 'Using the @if Built-in Control Flow Block'
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.'
keywords:
  - '@if'
  - 'control flow'
  - 'conditional rendering'
  - 'template syntax'
related_concepts:
  - '@else'
  - '@else if'
  - 'signals'
related_tools:
  - 'modernize'
---

## Purpose

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.

## When to Use

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.

## Key Concepts

- **`@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.

## Example Files

### `conditional-content.component.ts`

This is a self-contained standalone component that demonstrates the `@if` block with an optional `@else` block.

```typescript
import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-conditional-content',
  template: `
    <button (click)="toggleVisibility()">Toggle Content</button>

    @if (isVisible()) {
      <div>This content is conditionally displayed.</div>
    } @else {
      <div>The content is hidden. Click the button to show it.</div>
    }
  `,
})
export class ConditionalContentComponent {
  protected readonly isVisible = signal(true);

  toggleVisibility(): void {
    this.isVisible.update((v) => !v);
  }
}
```

## Usage Notes

- The expression inside the `@if ()` block must evaluate to a boolean.
- This example uses a signal, which is a common pattern, but any boolean property or method call from the component can be used.
- The `@else` block is optional and is rendered when the `@if` condition is `false`.

## How to Use This Example

### 1. Import the Component

In a standalone architecture, import the component into the `imports` array of the parent component where you want to use it.

```typescript
// in app.component.ts
import { Component } from '@angular/core';
import { ConditionalContentComponent } from './conditional-content.component';

@Component({
  selector: 'app-root',
  imports: [ConditionalContentComponent],
  template: `
    <h1>My Application</h1>
    <app-conditional-content></app-conditional-content>
  `,
})
export class AppComponent {}
```

!áï!�8„€€€€
žt,01

‚"

a



!3%T*ll

ltern

f
n



�
d

X�gular



n1�

i

‚pp

�<�compon

‚^lic


M‚	
r

E	chitectur

‚)rai

‚0
s

b
base



-
e

‚
tter

qlock
	



M!B!oolean



"nkuild

V
t




t

‚ton

�@
y

A
call

‚
n

‚heck

slass

�]�eaner

vick


�Aommon

‚pon

ZH
S	
ncept

-Sdit


(G!_0ion



�6
alcontentcompon

�^jtain

�&ent



{!
yrol





re

�9�
reat

=
demonstr



� irect

jsplai

�M
v

�H
om

Iynam

>
element

D
s


.� Cvalu


�jxampl

�_*port

�\�ress



#nW
fals

‚ile

�low




	or


Urom

�7T;undament

S
h1


‚Ridden

�Tow




‚
if
.





2!-*mport

�4q	
n


	


n�!sid

�oteract

Yfac

@
o

‚-uit

x
s

;K*
-vis

�G
t

oGb
kei

}yword

$
method

‚odern


42&re

wust

�s
y

‚S
ngif

iote

�l
of


8�{fer

p
n



 -ption


�0e
r

‚
parent

‚3ttern


:�Irefer

eimari

�operti

‚tect

�_urpos

5
readonli

�`lat

,nder
 



*
�spons

Woot

‚N

s

Nelector

�;�
f

�%how

�Yignal


1�.tandalon

�'�te

Oummari

yntax


+P
techniqu

Tmplat




T7�hat

�)
e
<


((	
i

9T)*itl


o
 


'

s+ggl

�Cevis


�B$ol

3rue


�J
s

�!� ype

rscript

�3�

updat

�h
s



P�ag

�ker

?

v


�ioid

�e
want

‚7hen


[�>re

‚5ich


C�<ith

�.in

z
you

‚6