Как добавить несколько классов со свойством хоста? ⇐ CSS

[Anonymous]

Component.scss

Код: Выделить всё

:host {
//some css props and values
}

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

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

comComponent.ts

Код: Выделить всё

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

comComponent.html

Код: Выделить всё

Проблема: я хочу использовать несколько классов в свойстве хоста, что является альтернативой @HostBinding()
Альтернативно: я попробовал использовать другой способ, используя сигналы ниже:
добавив только часть свойства хоста.

Код: Выделить всё

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

В приведенном выше фрагменте кода класс не применяется, поскольку при применении класса входное свойство не получает своего значения.
Ожидание. Классы должны применяться к основному элементу, когда мы передаем входные данные типа на основе type = xyz или type = pqr в виде строк.>

Подробнее здесь: https://stackoverflow.com/questions/793 ... t-property