Wie füge ich mehrere Klassen mit der Host-Eigenschaft hinzu? ⇐ CSS

[Guest]

component.scss

Code: Select all

:host {
//some css props and values
}

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

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

component.ts

Code: Select all

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

component.html

Code: Select all

Problem: Ich möchte mehrere Klassen in der Host-Eigenschaft verwenden, was eine Alternative zu @HostBinding()
ist Alternativ: Ich habe es mit der Verwendung der folgenden Signale andersherum versucht:
nur den Teil der Host-Eigenschaft hinzufügen.

Code: Select all

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

Mit dem obigen Code wird die Klasse nicht angewendet, da die Eingabeeigenschaft zum Zeitpunkt der Anwendung der Klasse ihren Wert nicht erhält.
Erwartet – Die Klassen sollten auf das Hostelement angewendet werden, wenn wir die Typeingaben basierend auf type = xyz oder type = pqr als Zeichenfolgen übergeben.