angularangular-ng-if

Angular - NgIf not working on component: "NG0303: Can't bind to 'ngIf' since it isn't a known property of 'p'."


I'm trying to use a ngif directive on a component, but keep getting the following error on the console: "NG0303: Can't bind to 'ngIf' since it isn't a known property of 'p'.", and the element just doesn't appear. Also, I'm using po-ui framework for some elements.

Here goes the ts and html codes of the component:

cadastro-usuario.component.ts:

import { Component, OnInit } from '@angular/core';
import { PoButtonGroupModule } from '@po-ui/ng-components';
import { PoButtonGroupItem } from '@po-ui/ng-components';

@Component({
  selector: 'app-cadastro-usuario',
  templateUrl: './cadastro-usuario.component.html',
  styleUrls: ['./cadastro-usuario.component.css']
})
export class CadastroUsuarioComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
  
  buttons: Array<PoButtonGroupItem> = [
    { label: 'Vínculo', action: this.vinculo.bind(this) },
    { label: 'Endereço', action: this.endereco.bind(this) },
    { label: 'Contatos', action: this.contatos.bind(this) },
  ];

  vinculo() {
  alert("vinculo");
  }
  
  endereco() {
  alert("endereco");
  }
  
  contatos() {
  alert("contatos");
  }
}

cadastro-usuario.component.html:

<p style="display:inline-block; margin-left:80px; margin-top:20px; width: 600px;">
    <po-button-group class="po-md-12" [p-buttons]="buttons"> </po-button-group>
</p>

<br>

<p *ngIf="true" style="display:inline-block; margin-left:80px; margin-top:20px; width: 300px;">
    <po-input name="vinculo" p-label="Vínculo"> </po-input>
</p>

Solution

  • I guess this is a possible duplicate nevertheless you should import

    CommonModule and BrowserModule

    under the module of your component and if you are not sure just add it the app.module.ts file like this :

    1 Imports :

    import { CommonModule } from '@angular/common';
    import { BrowserModule } from '@angular/platform-browser';
    

    2 Under NgModule :

    @NgModule({
      imports: [
        CommonModule,
        BrowserModule
    ...