Styles de composant Angular

Maintenant, stylisons notre markup avec CSS. Pour cela, nous aurons besoin du fichier app.component.css, dans lequel sont écrits les styles CSS pour le markup du composant. Par ailleurs, Angular se charge lui-même de faire en sorte que les styles fonctionnent comme des modules CSS. Cela signifie que tous les sélecteurs fonctionneront uniquement pour le markup du composant et ne captureront pas le markup extérieur.

Voyons cela en pratique. Supposons que notre composant ait le markup suivant :

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

Appliquons une couleur à la div :

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

Et nous pouvons être sûrs que le style s'appliquera uniquement aux divs de notre composant, et à aucune autre.