How to give class to a host element in Angular 2 with @hostbinding

Question

I want to give a class to the host element of my component so until now I used the host property like this:

@Component({
  selector: \'left-bar\',
          


        

Answer 1

The Angular2 style guide says to prefer @HostBinding, but this doesn't make host: {...} a bad thing.

You can use

@Component({
  selector: 'left-bar',
  templateUrl: 'app/left-bar/left-bar.component.html',
  styleUrls: ['app/left-bar/left-bar.component.css']
})
export class LeftBarComponent implements OnInit {
  @HostBinding('class.left-bar') leftBarClass = true;
  // or @HostBinding('class') leftBarClass = 'left-bar';

  ngOnInit() {
  }

}