@ifによる条件付きレンダリング
@ifと@elseでコンテンツを条件付きで表示します。
「@ifによる条件付きレンダリング」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
組み込みの制御フロー
最新の Angular テンプレートには、アット記号で記述する組み込みの制御フローブロックがあります。従来の構造ディレクティブに代わるもので、インポートは不要です。
if ブロック
at-if ブロックは、条件に応じてコンテンツをレンダリングします。アット記号の後に if という語、括弧内の条件、そして中かっこ内のコンテンツを記述します。
// template:
// @if (loggedIn) {
// <p>Welcome back!</p>
// }ngIf の置き換え
これは従来の *ngIf 構造ディレクティブに代わるものです。新しい構文はテンプレート言語の一部なので、インポートする必要はありません。
条件内で Signal を読み取る
条件には、signal の呼び出しを含む任意の式を指定できます。
// @if (count() > 0) {
// <p>You have items</p>
// }else ブロック
at-else ブロックは、条件が false の場合に代替コンテンツを表示します。if ブロックの閉じ中かっこの直後に記述します。
// @if (user) {
// <p>Hello {{ user.name }}</p>
// } @else {
// <p>Please log in</p>
// }else if の連鎖
at-else if を使って条件を連鎖させ、最後に at-else を記述できます。
// @if (score >= 90) { <p>A</p> }
// @else if (score >= 80) { <p>B</p> }
// @else { <p>C</p> }条件の結果を保存する
at-if ブロックでは、as キーワードを使って条件の結果をローカル変数にバインドできます。null ではない値への絞り込みに便利です。
// @if (user(); as u) {
// <p>{{ u.name }}</p>
// }新しい構文を使う理由
組み込みの制御フローは、構造ディレクティブよりも読みやすく、型チェックに対応し、効率的です。従来のディレクティブで使われていたマイクロ構文やアスタリスクも不要になります。
コンテナー要素は不要
従来のパターンとは異なり、at-if ブロックにはラッパー要素や ng-template は必要ありません。中かっこ自体が条件付きコンテンツの範囲を示します。
ブロックを入れ子にする
制御フローブロックは自由に入れ子にできます。at-if の中に別の at-if や at-for などを含めることができます。
バインディングと組み合わせる
at-if ブロック内では完全なテンプレート言語を使用できます。補間、プロパティバインディング、イベントバインディングはすべて通常どおり機能します。
クイックチェック: 条件分岐
新しい条件分岐構文を確認します。
振り返り: 条件分岐
条件付きレンダリングには at-if ブロックを使用し、別の条件には at-else と at-else if を使用することを学びました。また、as キーワードを使って結果を取得できます。これは star-ngIf に代わるもので、インポートは不要です。次は、at-for によるループ処理です。
よくある質問
「@ifによる条件付きレンダリング」レッスンは無料ですか？
はい。「@ifによる条件付きレンダリング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「@ifによる条件付きレンダリング」で何を学びますか？
@ifと@elseでコンテンツを条件付きで表示します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「@ifによる条件付きレンダリング」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- @ifによる条件付きレンダリング
- @forによるループ
- @switchによる切り替え
- @deferによる遅延読み込み