[解決済み] コンポーネントタグの間にコンテンツをレンダリングする

質問

コンポーネントがレンダリングされるとき、その中のコンテンツは無視される、など。

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: '<div>{{title}}</div>',
})
export class AppComponent {
  title = 'app works!';
}

のように使う。

<app-root>Ignored content</app-root>

レンダリングします。

<div>app works!</div>

しかし、PrimeNgのダイアログを見ると、このようなコンポーネントを使っています。

<p-dialog [(visible)]="display">
    <p-header>
        Header content here
    </p-header>
    Content
    <p-footer>
        Footer content here
   </p-footer>
</p-dialog>

として Header content here , Content と Footer content here がコンポーネント内にある場合、なぜそれらが無視されないのでしょうか、そしてどうすればこれを実現できるのでしょうか？

どのように解決するのですか？

追加 <ng-content></ng-content> を、コンテンツを投影すべきコンポーネントのテンプレートに追加します。

@Component({
  selector: 'app-demo',
  template: '<div>{{title}}</div>
             <br>
             <ng-content></ng-content>',
})
export class DemoComponent {
  title = 'Works!';
}

映し出されるコンテンツ

<app-demo>This is projected content!</app-demo>

と出力されます。

Works!
This is projected content!

Angular Content Projection（Angular 1 Transclusion）については、こちらの記事が参考になります。 ng-contentを使ったAngular 2のトランスクルージョン