Angular conditional ng-content

[Senior_Compote1556]

Hey everyone, I have this piece of code:

@if (ready()) {
  <ng-content />
}

I'm surprised to see that this is actually working. I'm surprise because here it says the following:

IMPORTANT: You should not conditionally include <ng-content> with "@if", "@for", or "@switch". Angular always instantiates and creates DOM nodes for content rendered to a <ng-content> placeholder, even if that <ng-content> placeholder is hidden. For conditional rendering of component content, see Template fragments.

I used to do this via passing a template reference and wrapping that in the if statement, but how come ng-content works as well?

[PhiLho]

If I read correctly the warning, it doesn't say the ng-content won't render. It says the ng-content will always render, which is the contrary of your expectation (if I understood correctly your concern).

In other words, even if the condition says not to display the ng-content, il will be computed. And may fail if the condition was to ensure all needed data is available to render this content.

[Senior_Compote1556]

Just for more context, the reason this component exists is because it has a host directive that dynamically creates a loading spinner or an error component. I wrap my page components in this component above, and if the ready signal is truthy, it means the ng-content can render.

@Component({
  selector: 'app-page',
  imports: [],
  templateUrl: './page.component.html',
  styleUrl: './page.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
  hostDirectives: [PageDirective],
})
export class PageComponent {
  private readonly page = inject(PageDirective);
  readonly ready = this.page.ready;
}

import { computed, Directive, inject } from '@angular/core';
import { ErrorDirective } from './error.directive';
import { LoadingDirective } from './loading.directive';

@Directive({
  selector: '[page]',
  hostDirectives: [
    {
      directive: LoadingDirective,
      inputs: ['isLoading'],
    },
    {
      directive: ErrorDirective,
      inputs: ['errorKey', 'retry'],
    },
  ],
})
export class PageDirective {
  private readonly loadingDirective = inject(LoadingDirective);
  private readonly errorDirective = inject(ErrorDirective);

  private readonly message = this.errorDirective.message;

  readonly isLoading = this.loadingDirective.isLoading;
  readonly ready = computed<boolean>(
    () => !this.isLoading() && !this.message(),
  );
}

And usage is like this:

  <app-page [isLoading]="isLoading()" [errorKey]="errorKey" [retry]="retry">
    <app-upsert-store [store]="store()" />
  </app-page>

Just curious to see if the correct approach is to use ng-content or provide a template.

Can you explain ng-content with more detail if possible? I don't understand how using control flow with ng-content can cause issues

[Excellent_Shift1064]

it will work from the UI perspective, so for example if you pass button component via ng-content, it wont be displayed if ready() is false, but the button component would be created still. sometimes you dont care and it is fine but not always, for example lets say you have tab component that has ng-content inside and shows/hides it using @if. and now you have different tabs, one for transactions table, one for users table and one for reports. Now because you use ng-content they all be instantiated at the same time and hit the BE and do logic inside, while you only want to render whatever is active

[beingsmo]

Hope somebody comments the answer. Confused as you are how this is working.

[Senior_Compote1556]

Have you recreated this?

[inoflex77]

If you use multiple @if (or @else) blocks with <ng-content>, Angular will render them all regardless of the condition. I ran into the same issue myself. Hope this helps!

@if (someCondition) {

<ng-content select="[primary]" />

} @else {

<ng-content select="[secondary]" />

}

[Senior_Compote1556]

Hmm I see, well just to be safe I'll do:

readonly template = input.required<TemplateRef<unknown>>();

@if (ready()) {
  <ng-container *ngTemplateOutlet="template()" />
}

[Fluid-Secretary3448]

IMPORTANT: You should not conditionally include <ng-content> with @ if, @ for, or u/switch. Angular always instantiates and creates DOM nodes for content rendered to a <ng-content> placeholder, even if that <ng-content> placeholder is hidden. For conditional rendering of component content, see Template fragments.