@if syntax does not display projected content

[bertrand-ravier]

Which @angular/* package(s) are the source of the bug?

common

Is this a regression?

Yes

Description

I am having trouble projecting content with ng-content within the if condition of the template, whether using the new @if syntax or the Angular ngIf directive. However, there is no issue within the else block.

I want to conditionally display projected content with or without additional elements in a child component.

Here's a snippet from my child component's template:

@if(test) {
Test
<ng-content></ng-content>
Test 2
} @else {
<ng-content></ng-content>
}

Here's a snippet from my parent component's template:

<app-my-child-component [test]="true">
    <h3>Awesome title</h3>
  </app-my-child-component>

I would appreciate any insights or assistance in resolving this discrepancy with the new control flow syntax. Thank you!

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

When true is binded, I see: Test Test 2.
When false is provided, I see: Awesome title.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.0.5
Node: 20.9.0
Package Manager: npm 10.1.0
OS: darwin arm64

Angular: 17.0.5
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, ssr

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.5
@angular-devkit/build-angular   17.0.5
@angular-devkit/core            17.0.5
@angular-devkit/schematics      17.0.5
@angular/cdk                    17.0.1
@angular/material               17.0.1
@schematics/angular             17.0.5
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else?

I use Angular SSR.

[JoostK]

This is because of #7795, unrelated to @if syntax (i.e. ngIf has the same behavior). It can be made to work using an ng-template.

[bertrand-ravier]

Thank you for your solution.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}