1

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>
Vítor Magalhães
  • 13
  • 1
  • 1
  • 3
  • Is there something missing in your module like CommonModule ? – Talha Akca Jan 19 '22 at 23:11
  • Does this answer your question? [Can't bind to 'ngIf' since it isn't a known property of 'div'](https://stackoverflow.com/questions/39058075/cant-bind-to-ngif-since-it-isnt-a-known-property-of-div) – Nizar YAKOUBI Jan 19 '22 at 23:22

3 Answers3

3

In my case the component the error occurred in had not been included in the declarations and entryComponents arrays of the module it belonged to. Adding them did the trick.

Note that including the entryComponents section is no longer necessary from version 13 onwards.

Ole EH Dufour
  • 2,968
  • 4
  • 23
  • 48
1

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
...
Nizar YAKOUBI
  • 49
  • 5
0

If you are here and importing the CommonModule and Browser Module solution did not work. Double check the *ngIf statement has the correct camel casing. Having the casing for example as *ngif will throw the referenced error.

Z Money
  • 1
  • If you have a new question, please ask it by clicking the [Ask Question](https://stackoverflow.com/questions/ask) button. Include a link to this question if it helps provide context. - [From Review](/review/late-answers/33220963) – Mattew Eon Nov 25 '22 at 16:03