ng-templateとng-container
テンプレートフラグメントを定義してホストします
「ng-templateとng-container」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
描画されないテンプレート
<ng-template>は、何かによって明示的にインスタンス化されるまで描画されないマークアップのまとまりを定義します。これは*ngIfのような構造ディレクティブの基盤です。
テンプレートの定義
<ng-template>内のコンテンツは非アクティブな状態で保持されます。別の場所で使用するには、参照変数を付けます。
<ng-template #empty>
<p>No items found.</p>
</ng-template>ngTemplateOutletによる描画
ngTemplateOutletを使うと、参照によってテンプレートを描画できます。
<ng-container *ngTemplateOutlet="empty"></ng-container>
<ng-template #empty>
<p>No items found.</p>
</ng-template>なぜng-containerを使うのか
<ng-container>は論理的な非DOMグループ化要素です。DOMに余分なラッパー要素を追加せずに、ディレクティブを適用したりノードをグループ化したりできます。
ラッパーdivを避ける
ng-containerがない場合、ディレクティブを適用するためだけに不要な<div>を追加することがあります。ng-containerは描画結果から消えるため、DOMには残りません。
<ng-container *ngIf="user">
<h2>{{ user.name }}</h2>
<p>{{ user.email }}</p>
</ng-container>制御フローのグループ化
ng-containerは、DOMを追加せずに新しい制御フローブロックを囲む場合に便利です。
<ng-container *ngIf="ready">
@for (item of items; track item.id) {
<li>{{ item.name }}</li>
}
</ng-container>テンプレートコンテキスト
テンプレートはコンテキストオブジェクトを受け取り、let-変数を通じて値を公開できます。
<ng-template #row let-name="name">
<p>{{ name }}</p>
</ng-template>
<ng-container
*ngTemplateOutlet="row; context: { name: 'Ada' }">
</ng-container>デフォルトのコンテキスト値
特殊な$implicitコンテキスト値は、キーを割り当てていないlet-変数にバインドされます。
<ng-template #item let-value>
<span>{{ value }}</span>
</ng-template>
<ng-container
*ngTemplateOutlet="item; context: { $implicit: 42 }">
</ng-container>テンプレートは第一級の値
<ng-template>に付けた#refはTemplateRefです。@Inputとして渡すことで、コンポーネントから利用側にUIの一部をカスタマイズさせられます。
emptyTemplate = input<TemplateRef<unknown>>();ホストとしてのng-container
ng-containerは、動的なコンポーネントやテンプレートのアウトレットホストとしても便利で、DOMをすっきり保てます。
<ng-container *ngComponentOutlet="widgetComponent">
</ng-container>使い分け
ng-template：遅延または再利用するマークアップ。ng-container：余分なDOMを追加せずにノードをグループ化し、ディレクティブのホストになる要素。これらは組み合わせて使うこともよくあります。
理解度チェック
ng-templateとng-containerについての理解度を確認します。
まとめ
<ng-template>は非アクティブでインスタンス化可能なマークアップを保持し、オプションのコンテキストとともにngTemplateOutletで描画することを学びました。また、<ng-container>はDOMを追加せずにノードをグループ化したり、ディレクティブのホストになったりします。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 38
- レッスン
- 144
よくある質問
「ng-templateとng-container」レッスンは無料ですか？
はい。「ng-templateとng-container」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「ng-templateとng-container」で何を学びますか？
テンプレートフラグメントを定義してホストします ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「ng-templateとng-container」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 単一スロットのコンテンツプロジェクション
- selectによるマルチスロットプロジェクション
- ng-templateとng-container
- TemplateRefとViewContainerRef