ng-contentで複数の要素を出し分けるselectディレクティブ

Angularのng-content

AngularでコンポートネントがHTML要素を引数として受け取りたい時、ng-content要素をりようします。

<div>
  <ng-content></ng-content>
</div>

複数の要素を受け取りたい場合

複数の要素を受け取りたい場合、select=h2のように、slectディレクティブにcssセレクターを付与することでng-contentの要素を出し分けることができます。

example.component.html

<div>
  <ng-content select="header"></ng-content>
</div>
<div>
  <ng-content select="footer"></ng-content>
</div>

利用例

<example-component>
　 <header>タイトル</header>
　 <footer>フッター</footer>
</example-component>

結果

<div>
   <header>タイトル</header>
</div>
<div>
　 <footer>フッター</footer>
</div>　 

参考