Component Styles

Les applications Angular sont stylées avec CSS standard. Cela signifie que vous pouvez appliquer tout ce que vous savez sur les feuilles de style CSS, les sélecteurs, les règles et les requêtes multimédias directement aux applications Angular.

Angular peut associer des styles de composants à des composants, permettant ainsi une conception plus modulaire que les feuilles de style classiques. Cette page explique comment charger et appliquer ces styles de composant.

Utiliser les styles de composant

Pour chaque composant Angular que vous écrivez, vous pouvez définir non seulement un modèle HTML, mais également les styles CSS associés à ce modèle, en spécifiant les sélecteurs, règles et requêtes multimédia dont vous avez besoin.

Une façon de procéder consiste à définir la propriété styles dans les métadonnées du composant. La propriété styles prend un tableau de chaînes contenant du code CSS. Habituellement, vous lui donnez une chaîne, comme dans l'exemple suivant :

Portée de style (Style scope)

Dans cet exemple, le style h1 s'applique uniquement aux balises imbriquées HeroAppComponent, non HeroMainComponent imbriquées, ni ‹h1› ailleurs dans l'application.

Cette restriction de la portée est une caractéristique de la modularité du style.

• Vous pouvez utiliser les noms de classe CSS et les sélecteurs les plus utiles dans le contexte de chaque composant.
• Les noms de classe et les sélecteurs sont locaux dans le composant et n'entrent pas en conflit avec les classes et les sélecteurs utilisés ailleurs dans l'application.
• Les modifications apportées aux styles ailleurs dans l'application n'affectent pas les styles du composant.
• Vous pouvez co-localiser le code CSS de chaque composant avec les codes TypeScript et HTML du composant, ce qui conduit à une structure de projet ordonnée et ordonnée.
• Vous pouvez modifier ou supprimer le code CSS d'un composant sans chercher dans toute l'application pour trouver où le code est utilisé.

Sélecteurs spéciaux

Les styles de composant ont quelques sélecteurs spéciaux du monde de la portée du style DOM shadow (décrits dans la page Module de cadrage CSS du niveau 1 du site W3C ). Les sections suivantes décrivent ces sélecteurs.

:host

Utilisez le sélecteur :host pour cibler les styles dans l'élément hébergeant le composant (par opposition au ciblage d'éléments dans le modèle du composant).

Le sélecteur :host est le seul moyen de cibler l'élément hôte. Vous ne pouvez pas atteindre l'élément hôte depuis le composant avec d'autres sélecteurs, car il ne fait pas partie du propre modèle du composant. L'élément hôte est dans le modèle d'un composant parent.

Utilisez le formulaire de fonction pour appliquer des styles d'hôte de manière conditionnelle en incluant un autre sélecteur entre parenthèses après :host.

L'exemple suivant cible à nouveau l'élément hôte, mais uniquement lorsqu'il contient également la classe active CSS.

:host-context

Il est parfois utile d'appliquer des styles en fonction de certaines conditions en dehors de la vue d'un composant. Par exemple, une classe de thème CSS peut être appliquée à l'élément ‹body› de document et vous souhaitez modifier l'apparence de votre composant en fonction de cela.

Utilisez le sélecteur :host-context(), qui fonctionne exactement comme la forme de fonction de :host(). Le sélecteur :host-context() recherche une classe CSS dans n'importe quel ancêtre de l'élément hôte du composant, jusqu'à la racine du document. Le sélecteur :host-context() est utile lorsqu'il est combiné avec un autre sélecteur.

L'exemple suivant applique un style background-color à tous les éléments ‹h2› à l'intérieur du composant, que si un élément a la classe CSS theme-light.

Combinateur : /deep/ et alias >>> et ::ng-deep

Les styles de composant s'appliquent normalement uniquement au code HTML dans le propre modèle du composant.

Utilisez le combinateur / deep / pour forcer un style dans l'arborescence des composants enfants dans toutes les vues de composants enfants. Le combinateur / deep / fonctionne à n'importe quelle profondeur de composants imbriqués et s'applique à la fois aux enfants de vue et aux enfants de contenu du composant.

L'exemple suivant cible tous les éléments ‹h3›, de l'élément hôte en passant par ce composant, à tous ses éléments enfants dans le DOM.

Le combinateur /deep/ a également les alias >>> et ::ng-deep.

Chargement des styles de composants

Il existe plusieurs façons d'ajouter des styles à un composant :

• En définissant des styles ou des métadonnées styleUrls.
• Inline dans le template HTML.
• Avec les importations CSS.

Les règles de cadrage décrites précédemment s'appliquent à chacun de ces modèles de chargement.

Styles dans les métadonnées de composant

Vous pouvez ajouter une propriété de tableau styles au décorateur @Component.

Chaque chaîne du tableau définit des CSS pour ce composant.


La commande CLI Angular ng generate component définit un style tableau vide lorsque vous créez le composant avec l'indicateur --inline-style.

Fichiers de style dans les métadonnées

Vous pouvez charger des styles à partir de fichiers CSS externes en ajoutant une propriété styleUrls au décorateur @Component d'un composant :

hero-app.component.ts (CSS dans le fichier)

hero-app.component.css


Vous pouvez spécifier plusieurs fichiers de styles ou même une combinaison de styles et styleUrls.

Lorsque vous utilisez la commande CLI Angular ng generate component sans l'indicateur --inline-style, il crée un fichier de styles vide et référence ce fichier dans le composant généré styleUrls.

Template inline styles

Vous pouvez incorporer des styles CSS directement dans le modèle HTML en les plaçant dans des balises ‹style›.

Balises de liens de modèles

Vous pouvez également écrire des balises ‹link› dans le modèle HTML du composant.

Lors de la construction avec la CLI, veillez à inclure le fichier de style lié parmi les ressources à copier sur le serveur.
Une fois incluse, le CLI inclura la feuille de style, que l'URL href de la balise link soit relative à la racine de l'application ou au fichier de composant.

CSS @imports

Vous pouvez également importer des fichiers CSS dans les fichiers CSS à l'aide de la règle @import CSS.
Dans ce cas, l'URL est relative au fichier CSS dans lequel vous importez.

Fichiers de style externes et globaux

Lors de la construction avec la CLI, vous devez configurer angular.json pour inclure tous les actifs externes, y compris les fichiers de style externes. Enregistrez les fichiers de style globaux dans la section styles qui, par défaut, est préconfigurée avec le fichier global styles.css.

Fichiers de style non CSS

Si vous construisez avec le CLI, vous pouvez écrire des fichiers de style dans sass, less ou stylus et spécifier ces fichiers dans les métadonnées @Component.styleUrls avec les extensions appropriées (.scss, .less, .styl), comme ci-après :

Le processus de construction du CLI exécute le préprocesseur CSS pertinent. Lors de la génération d'un fichier de composant avec ng generate component, la CLI émet un fichier de styles CSS vide (.css) par défaut. Vous pouvez configurer la CLI pour qu'il utilise par défaut votre préprocesseur CSS préféré.

Encapsulation de vue

Comme indiqué précédemment, les styles CSS des composants sont encapsulés dans la vue du composant et n'affectent pas le reste de l'application. Pour contrôler le fonctionnement de cette encapsulation par composant, vous pouvez définir le mode d'encapsulation de la vue dans les métadonnées du composant. Choisissez parmi les modes suivants :

• L'encapsulation de vue ShadowDom utilise l'implémentation DOM native du navigateur (voir DOM Shadow) pour attacher un DOM fantôme à l'élément hôte du composant, puis place la vue du composant dans ce DOM fantôme. Les styles du composant sont inclus dans le DOM fantôme.
  
  
• L'encapsulation Nativeview utilise une version désormais déconseillée de la mise en oeuvre du DOM fantôme natif du navigateur.
  
  
• L'encapsulation Emulatedview (valeur par défaut) émule le comportement du DOM fantôme en prétraitant (et en renommant) le code CSS afin d'étendre efficacement le code CSS à la vue du composant.
  
  
• Aucun signifie que Angular ne visualise pas l'encapsulation. Angular ajoute le CSS aux styles globaux. Les règles de cadrage, les isolations et les protections décrites précédemment ne s'appliquent pas. Cela revient essentiellement à coller les styles du composant dans le code HTML.

Pour définir le mode d'encapsulation des composants, utilisez la propriété encapsulation dans les métadonnées du composant :

L'encapsulation de vueShadowDom ne fonctionne que sur les navigateurs prenant en charge en natif le shadow DOM. La prise en charge est toujours limitée, raison pour laquelle l'encapsulation de la vue émulée est le mode par défaut et est recommandée dans la plupart des cas.

Contrôle des CSS générées

Lors de l'utilisation de l'encapsulation de vue émulée, Angular traite tous les styles de composant de manière à ce qu'ils se rapprochent des règles de délimitation CSS standard.

Dans le DOM d'une application Angular en cours d'exécution avec l'encapsulation de vue émulée activée, chaque élément DOM est associé à des attributs supplémentaires :

Il existe deux types d'attributs générés :

• Un élément qui serait un hôte DOM fantôme dans une encapsulation native a un attribut _nghost généré . C'est généralement le cas pour les éléments hôtes composant.
• Un élément dans la vue d'un composant a un attribut _ngcontent qui identifie le DOM fantôme de l'hôte auquel cet élément appartient.

Les valeurs exactes de ces attributs ne sont pas importantes. Ils sont générés automatiquement et vous ne vous y référez jamais dans le code de l'application. Mais ils sont ciblés par les styles de composant générés, qui se trouvent dans la section ‹head› du DOM :

Ces modèles sont post-traitée de sorte que chaque sélecteur est augmentée avec le électeurs d'attribut _nghost ou _ngcontents. Ces sélecteurs supplémentaires activent les règles de portée décrites dans cette page.