NgClass on component decoder host property not working

Question

I created the following simple example component that adds some attributes and a listener to the component's DOM element using the host property for the @Component decorator. In my case, [ngClass] is not valid. Does anyone know why and how to fix it?

import {Injector, Component} from "angular2/core"; import {NgClass} from "angular2/common"; import {SelectionService} from "../selection-service" @Component({ selector: 'my-component', template: `<div>inner template</div>`, host: { 'style': 'background-color: yellow', // works '[ngClass]': "{'selected': isSelected}", // does not work '(mouseover)': 'mouseOver($event)', // works '(mouseleave)': 'mouseLeave($event)' // works }, directives: [NgClass] }) export class MyComponent { private isSelected = false; constructor(private selectionService:SelectionService) { this.selectionService.select$.subscribe((sel:Selection) => { this.isSelected = sel; // has no effect on ngClass }); } mouseOver($event) { console.log('mouseOver works'); } mouseLeave($event) { console.log('mouseLeave works'); } } 

I am using Angular 2.0.0-beta.7.

Answer 1

ngClass is a directive and cannot be used in host bindings. Node binding only supports

• property '[propName]':'expr'
• '[attr.attrName]':'expr'
• event (event)="someFunction(event);otherExpr" ,
• style [style.width]="booleanExpr"
• class [class.className]="booleanExpr" .
• class [class]="expr" where expr is a space-separated string of classes