Angularコンポーネント投影の詳細な説明

<div class="wrapper">
  <h2>私は子コンポーネントです</h2>
  <div>このdivは子コンポーネントで定義されています</div>
  <コンテンツ></コンテンツ> 
</div>

<div class="wrapper">
  <h2>私は親コンポーネントです</h2>
  <div>このdivは親コンポーネントで定義されています</div>
  <アプリの子2>
    <div>この div は子コンポーネントに投影される親コンポーネントです</div>
  </app-child2>
</div>

.ラッパー{
    背景: ライトグリーン;
}

.ラッパー{
    背景: シアン;
} 

<div class="wrapper">
  <h2>私は子コンポーネントです</h2>
  <ng-content セレクター=".header"></ng-content>
  <div>このdivは子コンポーネントで定義されています</div>
  <ng-content セレクター=".footer"></ng-content> 
</div>

<div class="wrapper">
  <h2>私は親コンポーネントです</h2>
  <div>このdivは親コンポーネントで定義されています</div>
  <アプリの子2>
    <div class="header">これはページ ヘッダーです。この div は子コンポーネントに投影される親コンポーネントです。タイトルは {{title} です。}</div>
    <div class="footer">これはフッターです。この div は子コンポーネントに投影される親コンポーネントです</div>
  </app-child2>
</div> 

<div [innerHTML]="divContent"></div>

divContent="<div>プロパティ バインディング innerHTML</div>";