Multiple ng-content in component under @if

I am trying to conditionally display <ng-content> within a <div> based on a condition. However, for some reason, the <ng-content> inside the <div> never gets shown, even when the condition is true. The content renders correctly under the @else block, but when the @if condition is met, the content in the <div> is not visible.

Here is a simplified version of the code:

<app-header />
<div class="container">
@if (innerWidth <= 768) {
@if (open()) {
<div class="container2" style="width: 450px; z-index: 15;">
<ng-content />
</div>
}
} @else {
<ng-content />
}
<!-- <app-vehicles /> -->
<!-- <app-tracking-data /> -->
<app-map />
</div>


Expected Behavior: The <ng-content> inside the @if block should be shown when innerWidth <= 768 and open() returns true.

Actual Behavior: The <ng-content> within the conditional <div> never gets displayed, while the content in the @else block works as expected.

Continue reading...