AngularのComponentで{children}みたいなことをしたい

状況

AngularでアプリケーションをラップするようなContainer Componentを作ろうとしたら

解決

Reactで言うところの{children}にあたる、コンポーネントの小要素を表示できるようなスニペットがなかなか見つかりませんでした

調べて見ると、Angularでは小要素は<ng-content>というタグがこれに当たるようです

<!-- React -->
<div className="container">
  {children}
</div>

これが

<!-- Angular -->
<div class="container">
  <ng-content></ng-content>
</div>

こうなります

おわりに

Reactの脳みそで検索をかけていたのでangular childrenみたいな感じで調べていましたが、いまいちヒットせず、、

同じような方がこの記事にたどり着いてくれたら嬉しいです

参考

• Creating a container component in Angular2