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

Question

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 1

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