Search code examples
htmlangularangular17ng-contentangular-content-projection

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?


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