Can't bind to 'ngIf' since it isn't a known property of 'ion-col'

Question

I want to render the column, only if the rule is met, but it doesn't recognize me.

ANGULAR

HTML
<div class="middlePoint">
    <ion-row>
      <ion-col class="col-12 text-center titles mt-5"> Ingresa tu PIN </ion-col>
      <ion-col class="col-12 mt-2">
        <ul class="pinCircle">
          <li [class]="mePin.length > 0 ? 'active' : ''"></li>
          <li [class]="mePin.length > 1 ? 'active' : ''"></li>
          <li [class]="mePin.length > 2 ? 'active' : ''"></li>
          <li [class]="mePin.length > 3 ? 'active' : ''"></li>
        </ul>
      </ion-col>
      <ion-col class="mt- 2" size="12" *ngIf="messageError.length > 0">
        <h3 class="text-center color-white">{{ messageError }}</h3>
      </ion-col>
      <ion-col size="12" class="my-loading" *ngIf="loading === true">
        <ion-spinner name="dots"></ion-spinner>
      </ion-col>
    </ion-row>
</div>

COMPONENT.TS
    
@Component({
  selector: "app-pin",
  templateUrl: "./pin.component.html",
  styleUrls: ["./pin.component.scss"],
})
export class PinComponent implements OnInit {
  public messageError: string = "";
  public loading: boolean = true;
  public circlePin: any = 0;
  public mePin: any = "";

I want to render the column, only if the rule is met, but it doesn't recognize me.

Answer 1

Instead of adding *ngIf to <ion-col>.

Try using:

<ng-container *ngIf="condition">
  …
</ng-container>

https://angular.io/api/core/ng-container#usage-notes

Also, check if your Module have CommonModule import.