Conditional styling on host element

Question

I have a component that all it does is render , its something like this:

@Component({
     selector: \'my-comp\',
     host: ???,
     template: `
         

        

Answer 1

Solution using @HostBinder

The accepted solution is using the host metadata property which goes against the rules of TSLint:

TSLint: Use @HostBinding or @HostListener rather than the host metadata property (https://angular.io/styleguide#style-06-03)

The same can be achieved using @HostBinding instead:

import { Component, HostBinding, Input } from '@angular/core';

@Component({
  selector: 'my-comp',
  template: `
    
  `
})
export default class MyComp {
  @Input() title: string;
  public isChanged: boolean;
  @HostBinding('class.className') get className() { return this.isChanged; }
}