Is it possible to add a dynamic class to host in Angular 2?

Question

I know that in Angular2 I can add a class \'red\' to a component\'s selector element by doing this:

@Component({
    selector: \'selector-el\',
    host: {
          


        

Answer 1

I have recently made a directive called <ng-host> (inspired by this issue), it will redirect every (non-structural) change to the component host element, usage:

@Component({
  template: `
    <ng-host [ngClass]="{foo: true, bar: false}"></ng-host>
    <p>Hello World!</p>
  `
})
class AppComponent { }

Online demo can be found here.

Supported usages defined here.

I have achieved this by the Directive as a Service pattern, namely manually providing NgClass and use it like (online demo)

Due to the DI mechanism, NgClass will get the ElementRef of current host element, the Self() modifier helps to guarantee it. So no need to create an instance by constructor, thus still under public API usage.

It could be more concise when combined with class inheritance, an example can be found at here.

Answer 2

If you like to change it from outside you can combine @HostBinding and @Input():

@Component({
    selector: 'my-component',
    template: ``
})
export class MyComponent {
    @HostBinding('class.your-class') @Input() isSelected: boolean;
}

Answer 3

The Renderers setElementClass can be used to add or remove an arbitrary class. For example md-[color] where color is provided by an input

<some-cmp [color]="red">

@Component({
// @Directive({
    selector: 'some-cmp',
    template: '...'
})
export class SomeComp {
    _color: string;

    @Input()
    set color(color: string) {
        this._color = color;
        this.renderer.setElementClass(this.elementRef.nativeElement, 'md-' + this._color, true);
    }

    get color(): string {
        return this._color;
    }

    constructor(private elementRef: ElementRef, private renderer: Renderer){}
} 

See also nativeElement.classList.add() alternative

Answer 4

import {Component, HostBinding} from 'angular2/core';

@Component({
  (...)
}

export class MyComponent {
  @HostBinding('class') colorClass = 'red';
}

Answer 5

You can use something like that:

@Directive({
  (...)
  host: {
    '[class.className]' : 'className', 
    '[class]' : 'classNames' 
  }
}
export class MyDirective {
  constructor() {
    this.className = true;
    this.classNames = 'class1 class2 class3';
  }
}

Answer 6

I did it in this way. Maybe someone will come in handy

@HostBinding('class') get hostClasses() {
    return `some-class ${this.dinamicOne} ${this.disabled ? 'disabled' : ''}`;
}