title: Render content between the component tags
body: <p>When a component is rendered, content inside it is ignored, for example:</p>
  
  <pre><code>import { Component } from '@angular/core';
  @Component({
    selector: 'app-root',
    template: '&lt;div&gt;{{title}}&lt;/div&gt;',
  })
  export class AppComponent {
    title = 'app works!';
  }
  </code></pre>
  
  <p>Using it like:</p>
  
  <pre><code>&lt;app-root&gt;Ignored content&lt;/app-root&gt;
  </code></pre>
  
  <p>Renders:</p>
  
  <pre><code>&lt;div&gt;app works!&lt;/div&gt;
  </code></pre>
  
  <p>But looking at PrimeNg dialog, they use components like this:</p>
  
  <pre><code>&lt;p-dialog [(visible)]="display"&gt;
      &lt;p-header&gt;
          Header content here
      &lt;/p-header&gt;
      Content
      &lt;p-footer&gt;
          Footer content here
     &lt;/p-footer&gt;
  &lt;/p-dialog&gt;
  </code></pre>
  
  <p>As <code>Header content here</code>, <code>Content</code> and <code>Footer content here</code> are inside the component, why are not they getting ignored and how can I achieve this?</p>