Class is not binded to host element using HostBinding

I am trying to bind a class using host binding in Angular but something is going wrong

app.component.ts

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

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
      @HostBinding('class') class = 'hostClass'
    }

app.component.template

<div>This is a custome content</div>

app.component.css

.hostClass {
  color : #fff;
  background-color: blue;
  padding : 20px;
  border : 1px solid black;
  display:block;
}

I can see class is being applied to host element but still no css properties works but when I copy these css in style.css it starts working

I know about using :host but I am confused why it's not working.

Stackblitz link

https://stackblitz.com/edit/angular-jhh7fk

It's binded but style .hostClass can be only applied to the elements inside app.component.html template.

You should be using :host.hostClass selector instead

Forked Stackblitz