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

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

ANGULAR

HTML
<div >
    <ion-row>
      <ion-col > Ingresa tu PIN </ion-col>
      <ion-col >
        <ul >
          <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  size="12" *ngIf="messageError.length > 0">
        <h3 >{{ messageError }}</h3>
      </ion-col>
      <ion-col size="12"  *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.

CodePudding user response：

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.

CodePudding user response：

Check if you have imported CommonModule in your site.module.ts like this:

import { CommonModule } from '@angular/common';

@NgModule({
imports: [CommonModule],
declarations [Page]
})