26.10.2022

Styling Angular 14 Applications - Adding Classes & Using :host

Viele Wege führen bekanntlich nach Rom, vor allem wenn eine Komponente in verschiedene Styles zur Verfügung gestellt werden soll. Dieses Problem kann man sehr einfach lösen 🤔, wenn man sich ein paar kleinen Helfern bedient 💡.

Selbstverständlich kann man einer Komponente eine Klasse aufgrund einer Kondition geben, das wird aber gerade bei vielen verschiedenen Styles irgendwann sehr unübersichtlich und die Gefahr ist groß, dass diese Klassen dann in verschiedenen Eltern-Komponenten gepflegt werden. Wie man schon erkennen kann, führt dieses System irgendwann zu einem großen Chaos.

Warum also nicht einfach die zu stylende Komponente selbst entscheiden lassen, wie sie auszusehen hat.

Dafür kann man sich in der Kinder-Komponente in der CSS-Datei die Pseudo-Klasse host zur Hilfe nehmen. Dieses nimmt eine Klasse als Parameter und sofern das Element diese Klasse besitzt, können andere Styles für diese Komponente hinterlegt werden.