Angular - 5.13-Project content into components with ng-content

So far, to pass data into a component, we have used property binding with @Input(). But there is another situation: when you want to pass an entire block of HTML into a component from the outside. This is the role of ng-content, Angular's content projection mechanism.

The default behavior

When you place HTML between the opening and closing tags of a component, that content is lost by default. Angular simply removes it from the DOM. For example:

<app-server-element>
  <p><strong>Name:</strong> test server</p>
</app-server-element>

Without any specific configuration, the paragraph above will not appear anywhere. No error is thrown, but the content is ignored.

Marking the location with ng-content

For Angular to display this content, you must tell it where to place it inside the component's template. You do this with the <ng-content></ng-content> directive. It has no template of its own: it acts as a hook where Angular inserts whatever it finds between the component's tags.

<!-- server-element.component.html -->
<div class="panel">
  <div class="panel-body">
    <ng-content></ng-content>
  </div>
</div>

With this addition, the HTML placed between <app-server-element> and </app-server-element> is projected at the location of the ng-content.

Why it is useful

Content projection is valuable for building generic, reusable components: a panel, a card, a tab system, a modal dialog. In all these cases, the wrapper (the style, the structure) belongs to the component, but the content varies on each use.

You might think of passing this HTML through property binding, but that is not suitable: Angular escapes HTML received that way to protect against cross-site scripting (XSS) attacks. ng-content is the clean, purpose-built way to project structured content into a component.