How to add multiple classes with host property?

component.scss

:host {
//some css props and values
}

:host.xyz {
//some props and values
}

:host.pqr {
//some props and values
}


component.ts

@Component({
//all component's metadata added.
host: {
class: 'xyz', // how do i use class pqr here ?
}
})
export class Component {
type = input.required<String>(); //signal
}


component.html

<ng-content />


Problem: I want to use multiple classes in the host property which is an alternative to @HostBinding()

Alernatively: I tried using the other way with the use of signals below:

adding only the host property part.

host: { '[class.xyz]': 'type === "xyz"', '[class.pqr]': 'type === "pqr"' }

With the above piece of code, it does not apply the class because the time the class is applied the input property does not get its value.

Expecting - The classes should be applied to the host element when we pass the type inputs based on type = xyz or type = pqr as strings.

Continue reading...