Angular-Komponentenstile

Lassen Sie uns nun unser Markup mit CSS gestalten. Dafür wird uns die Datei app.component.css nützlich sein, in der die CSS-Stile für das Markup der Komponente geschrieben werden. Dabei kümmert sich Angular selbst darum, dass die Stile wie ein CSS-Modul funktionieren. Das bedeutet, dass alle Selektoren nur für das Markup der Komponente arbeiten und kein Markup von außen erfassen.

Lassen Sie uns das in der Praxis ansehen. Angenommen, in unserer Komponente befindet sich das folgende Markup:

app/app.component.html<div>
  abcde
</div>

Lassen Sie uns dem div eine Farbe zuweisen:

app/app.component.cssdiv {
  color: red;
}

Gleichzeitig können wir sicher sein, dass der Stil nur auf divs aus unserer Komponente angewendet wird, und auf keine anderen.