javascript - ngClass is not working in angular 4 - Stack Overflow

admin管理员组

文章数量:1352314

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

Share Improve this question Follow edited Jun 3, 2017 at 21:16 AVJT82 73.4k2525 gold badges145145 silver badges170170 bronze badges asked Jun 3, 2017 at 12:51 Binson EldhoseBinson Eldhose 1,01344 gold badges1515 silver badges3636 bronze badges 2

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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>

本文标签： javascriptngClass is not working in angular 4Stack Overflow