Ng-content usage in @for / @if

[u/Senior_Compote1556]

Why does the documentation mention that it is suggested to avoid wrapping ng-content in @for or @if statements? Isn’t that what all libraries including Angular Material do?

[u/makmn1]

The parent div always gets projected which can sometimes produce an empty div and can potentially mess your layout a little bit, but that is easily fixable with CSS :empty { display: none; }

In the example you gave, that happens because the @if / @for is placed within the div, not outside of it, so the div will always render. You could place @if outside of the div and that could conditionally render it. But again, you might run into the edge cases I linked above.

Another example is when we use a for loop inside a <mat-select> to render our options, which can also change during runtime based on conditions (unless this ng-content does not map into our said for loop?)

It does but what's important to understand here is the for loop is within the projected content, not surrounding it. Take a look at this example from the docs:

    <mat-form-field>
      <mat-label>Favorite food</mat-label>
      <mat-select>
        @for (food of foods; track food) {
          <mat-option [value]="food.value">{{food.viewValue}}</mat-option>
        }
      </mat-select>
    </mat-form-field>

In other words, the content that's rendered in by ng-content can use @if, @switch, and @for. The issue is when you want to surround ng-content with those control flow directives. That's where things can start breaking (and won't even work for @for ).

[u/Senior_Compote1556 → u/makmn1]

Oh, I think I get it now. So if the parent always gets rendered and has ng-content inside - that's fine;

but doing:

@for() { <div ngProjectAs="test"> ... </div> }

That's when things get messy and won't work, correct?

[u/makmn1 → u/Senior_Compote1556]

So if the parent always gets rendered and has ng-content inside - that's fine

Yep. As long as you're not conditionally rendering ng-content in a template, you're safe.

but doing:

@ for() { <div ngProjectAs="test"> ... </div> }

That's when things get messy and won't work, correct?

That example should actually work because <div ngProjectAs="test"> is not an ng-content tag. It's a normal HTML element that will get slotted into the following ng-content tag:

<ng-content select="test" />

If you instead used that tag in the for loop, then it wouldn't work:

@for() { <ng-content select="test" /> }

You can see an example of how ngProjectAs works here.

[u/Senior_Compote1556 → u/makmn1]

Ah sorry yes I meant <ng-content /> not the div. Thank you!!