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

Question

 <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?

Answer 1

I solved the alert problem by moving the test, like this :

<mat-error>
  @if (cityControl?.errors; as errors) {
      @if(formErrorHandler.getErrorMsg(errors); as errorMsg ) {
           <span>{{errorMsg}}</span>
       }
  }
</mat-error>