Warning when using @if() {} with content projection in Angular - ngtsc(-998011)

<mat-form-field>
<input matInput
type="text"
id="confirmationKey"
placeholder="code de confirmation"
formControlName="confirmationKey"
>
<mat-hint>Saisissez la clé de confirmation reçue par e-mail.</mat-hint>
@if(formErrorHandler.getErrorMsg(confirmationKeyControl?.errors); as errorMsg ){
**<mat-error>{{errorMsg}}</mat-error>**
}
</mat-form-field>

Warning message :

Node matches the "mat-error, [matError]" slot of the "MatFormField" component, but will not be projected into the specific slot because the surrounding @if has more than one node at its root. To project the node in the right slot, you can:

1. Wrap the content of the @if block in an that matches the "mat-error, [matError]" selector.
2. Split the content of the @if block across multiple @if blocks such that each one only has a single projectable node at its root.
3. Remove all content from the @if block, except for the node being projected.

This check can be disabled using the extendedDiagnostics.checks.controlFlowPreventingContentProjection = "suppress" compiler option.ngtsc(-998011)

Steps I Tried:

I wrapped the content of the @if block in an to match the mat-error slot, but the warning persists. I split the logic into separate @if blocks, ensuring that each block has only one projectable node, but I still see the warning.

I don't wanna disabled extendedDiagnostics.checks.controlFlowPreventingContentProjection = "suppress".

What am I missing in handling @if with content projection? How can I correctly structure this to eliminate the warning?

Continue reading...