Angular 17 multiple content projection Error

Issue

I am learning Angular multiple content projection from new Angular 17 docs. When I am using example from doc I am getting error:

profile.component.html::

<div class="red">
  <ng-content select="profile-header"></ng-content>
</div>

<div class="green">
  <ng-content></ng-content>
</div>

<div class="blue">
  <ng-content select="profile-footer"></ng-content>
</div>

In app.component.html::

<app-profile>
    <profile-header><h2>Header 1</h2></profile-header>
    <p>This is projected content</p>
</app-profile>

I am getting this error::

NG8001: 'profile-header' is not a known element:

How can I resolve it?

Solution

The select is the equivalent of javascript query selector ( [<<attribute name>>] ) so you can do the attribute selector like so.

app.component.html

<app-profile>
    <h2 header>Header 1</h2>
    <p>This is projected content</p>
    <h2 footer>Footer 1</h2>
</app-profile>

profile.component.html:

<div class="red">
  <ng-content select="[header]"></ng-content>
</div>

<div class="green">
  <ng-content></ng-content>
</div>

<div class="blue">
  <ng-content select="[footer]"></ng-content>
</div>

docs here

Answered By - Naren Murali