7. ng-content — 中身を差し込めるコンポーネント

カードや枠線付きパネルのように「外側の見た目は共通だが、中身は使う側で決めたい」部品を作るには <ng-content /> を使います。子のテンプレートに <ng-content /> を置くと、親が <app-card>ここの中身</app-card> のようにタグで囲んだHTMLが、その場所に差し込まれて表示されます。この仕組みをコンテンツ投影と呼びます。

実務では、共通の枠(余白・影・角丸など)を持つカードやダイアログ、レイアウト用のラッパーをこの形で作ります。中身をinputの文字列で渡そうとすると見出しもボタンも画像も渡せず破綻しますが、ng-content なら任意のHTMLをそのまま流し込めます。

差し込み先を複数に分けたいときは <ng-content select=".header" /> のように select で受け口を指定できます。親側で class="header" を付けた要素はヘッダーの口へ、それ以外は通常の口へ、と振り分けられます。まずは select なしの1つの口から覚えれば十分です。

サンプルコード(フレームワーク環境が必要なため表示のみ)

import { Component } from '@angular/core';

@Component({
  selector: 'app-card',
  // <ng-content /> の位置に、親が囲んだHTMLが差し込まれる
  template:
    '<div class="card">' +
    '  <ng-content />' +
    '</div>',
  styles: ['.card { border: 1px solid #ccc; border-radius: 8px; padding: 16px; }'],
})
export class CardComponent {}

// 親側はタグで中身を囲むだけ。任意のHTMLを渡せる:
// <app-card>
//   <h2>お知らせ</h2>
//   <p>本日のメンテナンスは完了しました。</p>
// </app-card>

公式ドキュメントで詳しく ↗