Can't bind to 'ngIf' since it isn't a known property of 'div'

Question

Can't bind to 'ngIf' since it isn't a known property of 'div'.

The element is <div [ngIf]="isAuth" id="sidebar">

And the component is:

import SessionService from '../session/session.service';
import { Component } from '@angular/core';

@Component({
  providers: [],
  selector: 'navbar-left',
  styles: [require('./navbar-left.scss')],
  template: require('./navbar-left.html'),
})
export default class NavbarLeftComponent {
  public isAuth: boolean = false;

  constructor(private sessionService: SessionService) {
    this.isAuth = sessionService.sessionIsAuth();
  }
}

Not sure what exactly I'm doing wrong? This is a child component. In the parent component aka App component the ngIf works fine. Angular RC5

make sure you aren't re-using a selector name, e.g.: `selector: 'duplicatedNameHere,` — Sean, Oct 20 '20 at 10:09
Import "CommonModule" and DONT Forget to do "ng serve" twice to overcome the bad luck... — Code Spy, Jun 04 '21 at 14:37
I had this error when I forgot to add my component to "Declarations" of my module. — Michael Wyraz, Jul 19 '21 at 18:19
If you have such error in jasmine tests, make sure you have add tested component in declaration, like that "declarations: [MyComponent]" in spec file. — Experimenter, Oct 28 '21 at 12:06
Sometimes it happens because of failed plugin in IDE (VS Code, Web Storm). Check my answer here: https://stackoverflow.com/a/70368326/4079915 — Experimenter, Dec 15 '21 at 18:10
if anyone using standalone component make sure to import commonModule to components as well - imports:[CommonModule], — Ishan Fernando, Feb 17 '23 at 18:37

score 570 · Answer 1 · edited Jun 06 '20 at 03:36

570

Just for anyone who still has an issue, I also had an issue where I typed ngif rather than ngIf (notice the capital 'I').

edited Jun 06 '20 at 03:36

Kyzyl Monteiro

71
6

answered Nov 14 '16 at 09:16

dudewad

13,215
6
37
46

64

`nfIf` in my case, sometimes... :facepalm: – Brad Adams Jun 27 '17 at 23:59
It can also happen if you write: *ngIf="{{condition}}". You must not write the {{ }}. *ngIf="condition" is working. – Nis Jul 18 '19 at 15:29
1

yes 80% people were using *ngif ---> ngIf – pankaj Jan 20 '21 at 09:00
ngIf was a bad idea for naming, it should have been ngif , but strict nomenclatures standards forced the naming to be ngIf and ngFor instead of ngfor and ngif – Juan Vilar Feb 04 '21 at 12:09
The reason being is that this single comment has now 400 upvotes, so there have been many confused people who have lost at least 5 minutes trying to figure out what was wrong – Juan Vilar Feb 04 '21 at 12:09
3

I don't think "blaming camel case" is really accurate. 400 upvotes on a 5 year old post isn't that severe. I think it just indicates that people are accidentally typing typos. When I realized this it was not because I didn't know how to use ngIf, it was because of a typo. Same for most people here. – dudewad Feb 10 '21 at 21:50
I was almost frustrated by trying all the ways like [BrowserModule], [CommonModule] etc., and finally the capital case "I" saved my day. – Siva Makani Feb 23 '21 at 11:03
ngIF in my case :D – orchidrudra Sep 22 '21 at 18:16
NgIf in my case :/ – Mill Oct 11 '21 at 12:56
I was looking at my code an it said *ngIf* but an inner component had a *ngif*, – Mauricio Gracia Gutierrez Feb 12 '22 at 15:08
Its incredible how many people have found this comment useful, its by far my single most upvoted response. Glad it helped @fruitloaf – dudewad Feb 17 '22 at 06:03
In my case was because I didnt add my Component into the module in declarations – Hussein Hn Oct 27 '22 at 08:58

score 569 · Accepted Answer · edited Feb 28 '17 at 00:05

569

If you are using RC5 then import this:

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

and be sure to import CommonModule from the module that is providing your component.

 @NgModule({
    imports: [CommonModule],
    declarations: [MyComponent]
  ...
})
class MyComponentModule {}

edited Feb 28 '17 at 00:05

N8allan

2,138
19
32

answered Aug 20 '16 at 19:45

null canvas

10,201
2
15
18

make sure your transpilation is working and you have the `*ngIf` in your code – null canvas Aug 20 '16 at 19:47
error: cannot find name "CommonModule". I do import "BrowserModule" but it still generates the error "ngif isn't a known property – Kokodoko Nov 04 '16 at 15:11
2

This answer only works for me if I add `export` to the class. – The Muffin Man Feb 09 '17 at 02:05
9

and don't forget about 'declarations' – Tsagana Nokhaeva Jul 29 '20 at 22:35
I was getting a similar error and the fix was to add `BrowserModule` to `imports` in @NgModule – Arsal Oct 01 '20 at 14:19
20

In case you still get the error after trying everything suggested in this page, try just to run "ng serve" once again. – Felipe Mosso Nov 17 '20 at 00:13
7

Make sure that the module is also imported to your root `app.module.ts` – Daniel Habenicht Jun 15 '21 at 13:32
5

Make sure the child module with the problem is actually being imported by the parent module. – teddybear Sep 21 '21 at 19:34
In my case, I already had **CommonModule** included in my shared module & the feature module where the component was to be used, but in my case I saved some files while server was starting (compiling) maybe that's why it did not took registry of included modules properly => I restarted my local server it solved the problem for me – Sarthak Maheshwari Feb 18 '22 at 11:35

score 59 · Answer 3 · answered Aug 21 '16 at 18:05

59

Instead of [ngIf] you should use *ngIf like this:

<div *ngIf="isAuth" id="sidebar">

answered Aug 21 '16 at 18:05

Peter Salomonsen

5,525
2
24
38

Can't bind to 'ngIf' since it isn't a known property of 'div'

3 Answers3

Linked

Related