ngClass directive generating the following error

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'ngClass' since it isn't a known property of 'li'.

code snippet.

 <li [ngClass]="{'active':true}"><a href="">Home</a></li>

NB: I already imported the mon module

import {CommonModule} from "@angular/mon"

Library version angular 4.0.1

ngClass directive generating the following error

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'ngClass' since it isn't a known property of 'li'.

code snippet.

 <li [ngClass]="{'active':true}"><a href="">Home</a></li>

NB: I already imported the mon module

import {CommonModule} from "@angular/mon"

Library version angular 4.0.1

• javascript
• angular
• angular-ng-class

• did you included the module aswell in the app.module imports part? – Daniel Netzer Commented Jun 3, 2017 at 21:21
• 1 If the ponent under the root module make sure that BrowserModule is imported. If it is in a child module import CommonModule. These imports being missing will give you that error when trying to use mon directives. – Nedim Hozić Commented Jun 3, 2017 at 21:39

1 Answer 1

As @Nedim suggested, if you are using [ngClass] within a feature module, you'd need to make sure that CommonModule is being added to the imports: [] array property of @NgModule({}):

import {CommonModule} from "@angular/mon"

@NgModule({
    imports: [CommonModule]
})
export class SomeModule {}

To conditionally add a single class based on a boolean value/expression I'd remend you use the syntax [class.someClass]="condition". Here is the documentation for Class binding.

<li [class.active]="true"><a href="">Home</a></li>

For example, to evaluate against a boolean class property to conditionally apply "active" CSS class:

TS:

export class App {
  foo: boolean = true;
}

HTML:

<div [class.active]="foo">Foobar</div>

Here is a plunker demonstrating the functionality in action.

Note: If you are trying to apply some type of active styling related to the router, you could use the RouterLinkActive binding. The following example would apply the CSS class "active" when the user has activated the path "/heroes".

<a routerLink="/heroes" routerLinkActive="active">Heroes</a>