How to give class to a host element in Angular 2 with @hostbinding
<p>I want to give a class to the host element of my component so until now I used the <code>host</code> property like this:</p>

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

}
</code></pre>

<p>Now though I'm getting a warning from TypeScript that this is a bad practice.</p>

<pre><code>[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.
</code></pre>

<p>How can I add a class to the host element in a more correct way and get rid of this warning?</p>

<p>Thx!</p>

<p>Update: Based on the answer below: I get the class but the style is not affecting the parent host element after the class is added.
My style is quite simple:</p>

<pre><code>.left-bar {
  position: fixed;
  width: 120px;
  left: 0;
  top: 0;
  bottom: 0;
  background: #323232; }
</code></pre>