I've been wanting to assign a class to the host element of my component, and initially I used the host property in this manner:
@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() {
}
}
However, TypeScript now displays a warning indicating that this approach is considered bad practice.
[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.
Is there a better way to add a class to the host element and eliminate this warning?
Thank you!
Update: Following the response below: Although I am able to apply the class, the styling does not seem to affect the parent host element once the class is added. My CSS styling is relatively simple:
.left-bar {
position: fixed;
width: 120px;
left: 0;
top: 0;
bottom: 0;
background: #323232; }