Template parse errors: Can't bind to 'ng-class' since it isn't a known native property in Angular 2

parsing angular ng-class
revathi picture revathi · Apr 26, 2016 · Viewed 11.9k times · Source

I am trying to apply CSS style conditionally on an img attribute based on the value of a boolean 'isLoginPage' in Angular 2.0.0-beta.15. The portion of html is as below: 

<a class="navbar-brand" href="#/">
    <img src="/src/resources/images/logo.png" [ng-class]="{logoStyle:  isLoginPage, navLogoStyle: !isLoginPage}" /></a>

logoStyle and navLogoStyle are mentioned in css class and its added in the main html page. In the corresponding component, I am setting value of isLoginPage as shown below:

import {Component, Input} from 'angular2/core';
import {NgClass} from 'angular2/common';

@Component({
selector: 'header',
inputs: ['isLoginPage'],
templateUrl: './header.html',
directives: [ROUTER_DIRECTIVES, RouterLink, NgClass]
})
 export class HeaderComponent {
   isLoginPage: boolean;
   constructor(){
    if(condition){
     this.isLoginPage = true;
   }
  }

But when I am trying to see the result, styles are not applied and the error 'Template parse errors: Can't bind to 'ng-class' since it isn't a known native property' is shown. Can somebody guide me.?

Answer

Sean Larkin picture Sean Larkin · Apr 26, 2016

In Angular2, the parser now looks for the camelCase name of the directive. So in your case you want to change ng-class to ngClass

<img src="/src/resources/images/logo.png" [ngClass]="{logoStyle:  isLoginPage, navLogoStyle: !isLoginPage}" /></a>

You can see the documentation for the implementation here

Related questions

How do I parse a string to a float or int?

In Python, how can I parse a numeric string like "545.2222" to its corresponding float value, 545.2222? Or parse the string "31" to an integer, 31? I just want to know how to parse a float str to a float, and (separately) an int …

Read More
Why can't Python parse this JSON data?

I have this JSON in a file: { "maps": [ { "id": "blabla", "iscategorical": "0" }, { "id": "blabla", "iscategorical": "0" } ], "masks": [ "id": "valore" ], "om_points": "value", "parameters": [ "id": "valore" ] } I wrote this script to print all of the JSON data: import json from pprint import pprint …

Read More
Parse JSON in JavaScript?

I want to parse a JSON string in JavaScript. The response is something like var response = '{"result":true,"count":1}'; How can I get the values result and count from this?

Read More