More than 5 years have passed since last update.

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

Last updated at 2019-09-04Posted at 2019-08-07

##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>

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