css - Hvordan gi klasse til et host-element i Angular 2 med @hostbinding

Jeg vil gi en klasse til host-elementet til komponenten min, så fram til nå har jeg brukt host-egenskapen slik:

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

  ngOnInit() {
  }

}

Nå får jeg derimot en advarsel fra TypeScript om at dette er en dårlig praksis.

[tslint] In the "@Component" class decorator of the class "LeftBarComponent" you are using the "host" property, this is considered bad practice. Use "@HostBindings", "@HostListeners" property decorator instead.

Hvordan kan jeg legge til en klasse på host-elementet på en mer korrekt måte og bli kvitt denne advarselen?

Takk!

Oppdatering: Basert på svaret nedenfor: Jeg får klassen, men stilen påvirker ikke det overordnede vertselementet etter at klassen er lagt til. Stilen min er ganske enkel:

.left-bar {
  position: fixed;
  width: 120px;
  left: 0;
  top: 0;
  bottom: 0;
  background: #323232; }

Svar #1

Angular2-stilguiden sier at man bør foretrekke @HostBinding, men dette gjør ikke host: {...} til noe dårlig.

Du kan bruke

@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() {
  }

}