Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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
...
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading