Angular - 2-9 Travailler avec les styles de components

Au-delà des outils CSS fournis par Bootstrap ou autre, Angular nous donne ses propres mécanismes pour styler chaque composant. Imaginons qu'on veuille changer le style du titre h3 dans le template du composant d'application et lui donner une couleur bleu foncé. Il suffit d'aller dans le fichier app.component.css référencé par le composant et d'y écrire du CSS tout à fait classique :

h3 {
  color: darkblue;
}

Une fois sauvegardé, l'application se recompile et le titre apparaît bien en bleu foncé. C'est comme cela qu'on utilise le fichier CSS référencé par le décorateur @Component pour définir les styles propres à un composant.

styleUrls externe ou styles inline

Tout comme pour le template, on a le choix entre un fichier externe et des styles en ligne. Vous remarquez que styleUrls est un tableau alors que templateUrl ne l'était pas : c'est parce qu'on peut référencer plusieurs feuilles de style externes en même temps en ajoutant d'autres chemins dans le tableau. Si on commente styleUrls, on peut basculer sur la propriété styles, qui prend elle aussi un tableau — cette fois de chaînes contenant directement du CSS :

• styleUrls: ['./app.component.css', './extra.css'] pour des feuilles externes ;
• styles: ['h3 { color: darkblue; }'] pour du CSS inline dans le composant.

En résumé

Cette leçon présente comment appliquer des styles aux composants Angular. Elle explique l'utilisation du fichier CSS associé au composant (stocké dans styleUrls), comment modifier les styles existants (par exemple en changeant la couleur d'un H3 en bleu), et les différences entre styleUrls et templateUrl. Un point clé est que styleUrls accepte un tableau, permettant de référencer plusieurs feuilles de style externes pour un même composant.

Points clés

• Utiliser le fichier .css lié au composant pour définir et modifier ses styles
• styleUrls est un tableau : il permet de référencer plusieurs feuilles de style externes pour un seul composant (contrairement à templateUrl qui n'en accepte qu'une)
• Écrire du CSS classique dans le fichier de style pour écraser ou ajouter des styles (ex: couleur bleue sur H3)
• Alternative au fichier CSS : intégrer le CSS directement dans le composant via la propriété styles

Questions fréquentes

Pourquoi styleUrls est-il un tableau et templateUrl non ?

Parce qu'un composant peut utiliser plusieurs fichiers CSS externes (stockés dans le tableau styleUrls), mais un seul fichier HTML (templateUrl). Cette distinction permet une meilleure modularité et la réutilisation de styles.

Comment modifier le style d'un élément spécifique du composant ?

Il faut ouvrir le fichier CSS du composant (fichier .css) et écrire du CSS normal pour cibler l'élément. Par exemple, ajouter une règle 'h3 { color: #1e3a8a; }' pour changer la couleur d'un titre h3 en bleu foncé.

Peut-on utiliser du CSS directement dans le composant au lieu d'un fichier externe ?

Oui, Angular permet de mettre en place une propriété styles pour intégrer le CSS directement dans le composant, ce qui offre une alternative au fichier styleUrls.