title: Angular - NgIf not working on component: "NG0303: Can't bind to 'ngIf' since it isn't a known property of 'p'."
body: <p>I'm trying to use a ngif directive on a component, but keep getting the following error on the console: &quot;NG0303: Can't bind to 'ngIf' since it isn't a known property of 'p'.&quot;, and the element just doesn't appear. Also, I'm using po-ui framework for some elements.</p>
  <p>Here goes the ts and html codes of the component:</p>
  <p>cadastro-usuario.component.ts:</p>
  <pre><code>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&lt;PoButtonGroupItem&gt; = [
      { 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(&quot;vinculo&quot;);
    }
    
    endereco() {
    alert(&quot;endereco&quot;);
    }
    
    contatos() {
    alert(&quot;contatos&quot;);
    }
  }
  </code></pre>
  <p>cadastro-usuario.component.html:</p>
  <pre><code>&lt;p style=&quot;display:inline-block; margin-left:80px; margin-top:20px; width: 600px;&quot;&gt;
      &lt;po-button-group class=&quot;po-md-12&quot; [p-buttons]=&quot;buttons&quot;&gt; &lt;/po-button-group&gt;
  &lt;/p&gt;
  
  &lt;br&gt;
  
  &lt;p *ngIf=&quot;true&quot; style=&quot;display:inline-block; margin-left:80px; margin-top:20px; width: 300px;&quot;&gt;
      &lt;po-input name=&quot;vinculo&quot; p-label=&quot;Vínculo&quot;&gt; &lt;/po-input&gt;
  &lt;/p&gt;
  </code></pre>