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 (inspired by this issue), it will redirect every (non-structural) change to the component host element, usage:

@Component({
  template: `
    
    
Hello World!
  `
})
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.