Angular - 2-9 Travailler avec les styles de components

Dans ce tutoriel, nous avons vu que les modèles et les styles sont importants pour la création d'applications Angular. Nous avons également vu qu'il est possible d'utiliser soit des modèles en ligne soit de pointer vers un fichier externe pour les utiliser dans notre application. De même, pour les styles, nous avons la propriété "styleUrls" que nous pouvons utiliser pour faire référence à des fichiers CSS externes et améliorer l'apparence de notre application.

Nous pouvons également utiliser des classes Bootstrap pour améliorer les styles de notre application, ce qui peut être utile si vous utilisez Bootstrap. En utilisant le fichier app.component.css, vous pouvez définir les styles pour un composant spécifique en écrivant simplement du code CSS normal. Il est également possible de définir les styles directement dans le fichier TypeScript à l'aide de la propriété "styles".

Vous devez décider si vous voulez utiliser un fichier externe ou un style en ligne en fonction de la complexité de votre application. Si vous avez beaucoup de code, il est préférable d'utiliser un fichier externe, sinon vous pouvez simplement mettre votre style en ligne dans le fichier TypeScript.

Enfin, il est important de noter que les règles pour les modèles et les styles sont similaires, vous devez utiliser un tableau pour les deux. Si vous utilisez styleUrls, vous pouvez ajouter plusieurs fichiers CSS pour référencer différents styles externes. Avec styles, vous devez simplement ajouter les styles en ligne en utilisant des chaînes de caractères. C'est ainsi que vous pouvez travailler avec les modèles et les styles dans Angular.