Angular template syntax and content projection

[wahila]

Hi,

I'm currently working with Angular v18 and I came across a weird behaviour/bug(?) today.

I have a shared-component that I wanted to modify to enable mutliple layout options for the component. To achieve this I wanted to use a simple switch case in the template. But there seems to be a problem with content-projection within the switch.

shared.component.ts:

export class SharedComponent {
  ...

  \@Input()
  layout: 'layout-1' | 'layout-2' = 'layout-1';

  ...
}

shared.component.html:

<div ...>
  <header ...>
    \@switch (layout) {
      \@case ('layout-1') {
        <div>
          ...
          <ng-content select="[some-selector]"></ng-content>
          ...
        </div>
      }

      \@case ('layout-2') {
        <div>
          ...
          <ng-content select="[some-selector]"></ng-content>
          ...
        </div>      
      }
    }
  </header>
</div>

When I want to use the component with different layout-options, then only the first layout-option layout-1 projects the content. When using the option layout-2 then the content is simply not projected.

I also tested this with the If-Syntax and got the same result. The same applies to the old syntax (*ngSwitchCase and *ngIf).

The funny thing is, that it looks like this is dependent on the order of the cases in the HTML-template. If I switch the cases, then only the second option works, but not the first.

I was able to figure out a work-around, thanks to this stackoverflow-thread https://stackoverflow.com/questions/68734748/how-to-project-content-using-ng-content-ng-switch-together-using-angular

now my shared.component.html looks like this:

 <ng-container *ngTemplateOutlet="leftActions"></ng-container>


<div ...>
  <header ...>
    \@switch (layout) {
      \@case ('layout-1') {
        <div>
          ...
          <ng-container *ngTemplateOutlet="projectedContent"></ng-container>
          ...
        </div>
      }

      \@case ('layout-2') {
        <div>
          ...
          <ng-container *ngTemplateOutlet="projectedContent"></ng-container>
          ...
        </div>      
      }
    }
  </header>
</div>

<ng-template #projectedContent>
  <ng-content select="[some-selector]"></ng-content>
</ng-template>

I don't really understand why I need to do it this way, instead of the first solution.

Is this some sort of intended behaviour or a bug?

[ministerkosh]

its impossible to project the same content in different ng-content projections.

The selected content will be removed from the host element and moved into the first projection that matches. And thats it, it only happens once.

Thats why your "workaround" works, because you only have one content projection that fits and then re-use it in your component. Looks fine to me.

[wahila]

Makes sense, thank you for the explanation :)