Angular komponens stílusai

Most formázzuk a HTML kódunkat CSS segítségével. Ehhez szükségünk lesz a app.component.css fájlra, amely a komponens HTML kódjának CSS stílusait tartalmazza. Az Angular gondoskodik arról, hogy a stílusok CSS modulként működjenek. Ez azt jelenti, hogy minden szelektor csak a komponens HTML kódjára vonatkozik, és nem befolyásolja a külső elemeket.

Nézzük meg a gyakorlatban. Tegyük fel, hogy a komponensünkben a következő HTML kód található:

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

Adjunk színt a div elemnek:

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

Eközben biztosak lehetünk benne, hogy a stílus csak a mi komponensünk div elemeire vonatkozik, és másokra nem.