Angular 17 multiple content projection Error

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?

Continue reading...