Angular-komponentin tyylit

Tyylitellään nyt verkkosivumme käyttäen CSS:ää. Tätä varten tarvitsemme tiedoston app.component.css, johon kirjoitetaan komponentin verkkosivun CSS-tyylit. Samalla Angular huolehtii itse siitä, että tyylit toimivat CSS-moduulina. Tämä tarkoittaa, että kaikki valitsimet toimivat vain komponentin verkkosivulle eivätkä sieppaa ulkopuolista verkkosivua.

Katsotaanpa käytännössä. Oletetaan, että komponentissamme on seuraava verkkosivu:

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

Asetetaan väritys div-elementille:

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

Samalla voimme olla varmoja, että tyyli sovelletaan vain div-elementteihin komponentistamme, eivätkä muihin.