Angular HostBidding 'class.classname' makes no effect on the host-CodePudding

I have component with following code

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

@Component({
  selector: 'app-htest',
  templateUrl: './htest.component.html',
  styleUrls: ['./htest.component.css'],
})
export class HtestComponent implements OnInit {
  
  @HostBinding('class.hosty') public hosty = true;
  constructor() {}

  ngOnInit() {}
}

The css:

.htest {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

.hosty {
  border: 5px dotted black;
}

There is class name hosty added to the <app-htest> but it has no effect at all, and devtols shows like there no class added...

I created stackbits

What am I missing?

CodePudding user response：

You can to set .hosty style from HtestComponent consumer component or you can define .hosty globally in style.css

You need to use :host selector

:host.hosty {
  border: 5px dotted black;
}