Sign Up

Sign In

Forgot Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

You must login to ask question.

Render content between the component tags

  • 0

When a component is rendered, content inside it is ignored, for example:

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

Using it like:

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


<div>app works!</div>

But looking at PrimeNg dialog, they use components like this:

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

As Header content hereContent and Footer content here are inside the component, why are not they getting ignored and how can I achieve this?


1 Answer

  1. Add <ng-content></ng-content> to the component’s template where the content should be projected:

      selector: 'app-root',
      template: '<div>{{title}}</div>
    export class AppComponent {
      title = 'app works!';

    Content to be projected:

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

    The output will be:

    app works!
    This is projected content!

    Here is a great article about Angular Content Projection (Angular 1 Transclusion): Transclusion in Angular 2 with ng-content

    • 0
Leave an answer

Leave an answer