Reliure de style en angulaire avec ngStyle

Dans cet article, nous examinons la liaison de style ainsi que la directive ngStyle et comment elle aide à résoudre les limitations que les liaisons de style ont eues dans le passé. Voici quelques astuces pratiques lorsque vous vous lancez dans Angular!

Angular

Angular, le framework JavaScript (TypeScript) de Google pour la création d'applications Web, mobiles ou de bureau, compte plus de 72 000 étoiles sur GitHub. Il est géré par l'équipe Angular de Google et une multitude de membres de la communauté et d'organisations.

Avant de commencer

Pour pouvoir suivre la démonstration de cet article, vous devez avoir:

• Un environnement de développement intégré comme VS Code
• Node version 11.0 ou supérieure installée sur votre ordinateur
• Node Package Manager version 6.7 ou supérieure (généralement livré avec l'installation Node)
• Angular CLI version 8.0 ou supérieure
• Version 8 de Angulaire ou supérieur
• Téléchargez le projet de démarrage de ce tutoriel ici pour suivre les démonstrations.
• Décompressez le projet et initialisez les modules de nœuds de votre terminal avec cette commande:

 npm   install 

Dans cet article, vous apprendrez comment utiliser la directive ngStyle pour le style des éléments de composants dans vos projets Angular.

Styles in Angular

Angular est conçu pour être très modulaire et basé sur des composants, cela signifie t Chaque composant a sa propre feuille de style et les styles définis à l'intérieur sont étendus à ce composant particulier par défaut. Il existe également une feuille de style globale pour les styles globaux dans le répertoire racine de chaque projet Angular.

Liaison de style

Dans Angular, vous pouvez facilement appliquer des styles en ligne aux éléments HTML de votre choix avec une liaison de style. Voyons comment cela est réellement fait

Démo

Si vous avez suivi ce post depuis le début, vous auriez téléchargé et décompressé le canevas angulaire à partir de GitHub. Voyons comment ceux-ci fonctionnent dans une véritable application Angular qui imprime et stylise des cours de technologie dans un portail universitaire. Chargez l'application dans votre environnement de développement intégré (j'utilise VS Code) et ouvrez le fichier app.component.html et nettoyez-le pour qu'il ressemble à ceci:

 < div   style  = "  text-align :  center  " > 
   < h1 >   Bienvenue à la Fake Tech University  < /  h1 >  
 </  div >  
 < App-courses >    </  App-courses >  
 < router-outlet >    </  router-outlet >  

Pour garder les choses modulaires, créons un nouveau composant, et appelez-le cours. Dans votre terminal, exécutez cette commande ci-dessous:

 ng generate component cours

Ouvrez votre fichier courses.component.ts et remplacez le code par le bloc de code ci-dessous:

 import   { Component  OnInit }   from   "@ angular / core" ; 
@  Composant  ( {
  sélecteur :   "cours d'application" 
  templateUrl :   "./ courses.component.html" 
  styleUrls :   [ "./ courses.component.css" ] 
} ) 
 export   class   CoursesComponent   implements [19659065] OnInit   {
 public  isCourse  =   true ; 
cours  =   [
     {
      nom :   "Introduction au développement Web" 
      niveau :   "Débutant" 
      couleur :   "vert" 
    } 
     {
      name :   "Understanding APIs" 
      niveau :   "Débutant" 
      couleur :   "vert" 
    } 
     {
      nom :   "Introduction to Docker Containers" 
      niveau :   "Advanced" 
      couleur :   "rouge" 
    } 
     {
      name :   "Understanding Time complexities" 
      niveau :   "Advanced" 
      couleur :   "rouge" 
    } 
     {
      nom :   "Algorithmes et structures de données" 
      niveau :   "Advanced" 
      couleur :   "rouge" 
    } 
     {
      nom :   "Ma première page HTML" 
      niveau :   "Débutant" 
      couleur :   "vert" 
    } 
     {
      name :   "Façons d'utiliser le CSS dans votre page Web" 
      niveau :   "Débutant" 
      couleur :   "vert" 
    } 
     {
      nom :   "Introduction aux tests unitaires" 
      niveau :   "Débutant" 
      couleur :   "vert" 
    } 
     {
      nom :   "Que sont les PWA" 
      niveau :   "Débutant" 
      color :   "green" 
    } 
  ] ; 
   constructor  ()   {} 
   ngOnInit  ()   {} 
} 

Dans ce composant, j'ai créé un tableau d'objets de tous les cours techniques et de leurs différents niveaux pour le semestre.

Maintenant pour la présentation , accédez au fichier courses.component.html et remplacez le contenu de l'espace réservé par le bloc de code ci-dessous à l'intérieur:

 < p > 
   Tous les cours pour débutants sont de couleur verte et tous les cours avancés sont colorés rouge.
 </  p >  
 < ul > 
   < li   * ngFor  =  " cours de cours "   > 
   {{course.name}}
     </  li >  
 </  ul >  

Si vous exécutez l'application maintenant, vous verrez qu'elle ressemble à ceci:

Pour styliser le composant en utilisant l'approche de liaison de style, rendons tous les éléments de la liste verts. Dans votre fichier courses.component.html, copiez le bloc de code ci-dessous:

 < p > 
   Tous les cours pour débutants sont de couleur verte, tous les cours intermédiaires sont de couleur
  bleu et tous les cours avancés sont de couleur rouge.
 </  p >  
 < ul > 
   < li   * ngFor  =  " cours de cours "    [style.color]  =  " ' green ' "  > 
   {{course.name}}
   </  li >  
 </  ul >  

Si vous enregistrez le fichier et revenez dans le navigateur, vous constaterez que tous les éléments de la liste sont maintenant colorés en vert.

Vous pouvez décider pour définir les couleurs de votre tableau ou objet, puis attribuer la propriété à la règle de style au lieu de définir explicitement «vert» comme ceci:

 < p > 
   Tous les cours pour débutants sont de couleur verte, tous les parcours intermédiaires sont colorés
  bleu et tous les cours avancés sont de couleur rouge.
 </  p >  
 < ul > 
   < li   * ngFor  =  " cours de cours "    [style.color]  =  " course.color "  > 
   {{course.name}}
   </  li >  
 </  ul >  

L'application de votre navigateur sur localhost: 4200 devrait ressembler à ceci:

Et si nous voulions ajouter des conditions à ces styles en ligne?

Utilisation des conditions

Rappelez-vous que nous avions une définition de classe isCourse dans notre fichier courses.component.ts ? En utilisant cela, nous pouvons spécifier une condition pour un style à appliquer comme ceci:

 < p > 
   Tous les cours pour débutants sont colorés en vert, tous les cours intermédiaires sont colorés
  bleu et tous les cours avancés sont de couleur rouge.
 </  p >  
 < ul > 
   < li   * ngFor  =  " cours de cours "    [style.color]  =  " isCourse?  ' red ' :  ' green ' "  > 
   {{course.name}}
   </  li >  
 </  ul >  

Ceci indique à Angular de rendre la couleur des éléments de la liste rouge si la classe isCourse est vraie et sinon, de la rendre verte.

Limitation de l'approche de la reliure de style

La reliure de style, comme nous l'avons vu jusqu'à présent, a une limitation. Imaginez que vous vouliez également modifier la taille de la police de l'application que nous utilisons aujourd'hui. Votre bloc de code ressemblerait à ceci:

 
 < ul >  
 < li   * ngFor  =  " cours de cours "    [style.color]  =  " isCourse?  ' rouge ' :  ' green '  " 
 [style.font-size]  =  " ' 24px ' "  > 
   {{course.name}}
 </  li >  
 </  ul >  

Vous pouvez déjà voir à quel point votre présentation sera inefficace et désordonnée avec de nombreux styles définis indépendamment les uns des autres. L'équipe Angular a résolu ce problème avec la directive ngStyle.

Directive ngStyle

ngStyle est une directive d'attribut qui met à jour les styles de l'élément HTML contenant dans votre composant. Il est utilisé pour définir une ou plusieurs propriétés de style, spécifiées sous forme de paires clé-valeur séparées par deux-points. La clé est un nom de style, avec une option. suffixe (comme «top.px», «font-style.em»). La valeur est une expression à évaluer. La valeur non nulle résultante, exprimée dans l'unité donnée, est affectée à la propriété de style donnée. Si le résultat de l'évaluation est nul, le style correspondant est supprimé.

Voici comment il est implémenté par Angular:

 @Input ()
ngStyle: {[klass: string]: tout; }

Comment il est utilisé

Il est utilisé comme une déclaration d'objet, vous pouvez donc avoir plus d'une règle de style CSS, séparées par des virgules. Pour notre application de démonstration, joindre les deux styles de police et de couleur avec ngStyle peut être fait simplement comme ceci:

 < p > 
   Tous les cours pour débutants sont colorés en vert et tous les cours avancés sont colorés
  rouge.
 </  p >  
 < ul > 
   < li   * ngFor  =  " cours de cours "  
   [ngStyle]  =  " { ' color ' : course.color,  ' font-size  ': '  24px  '}  " >  
    {{ nom du cours }}
   </  li >  
 </  ul >  

Cela ressemblerait à ceci dans votre navigateur lorsque vous enregistrez vos fichiers dans l'IDE de code VS:

Avec cela, vous pouvez disposer plusieurs règles de style pour un élément ou un ensemble d'éléments à partir de boucles ou conditionnelles. Le code complet de ce didacticiel peut être trouvé ici sur GitHub .

Conclusion

Voici un aperçu de la reliure de style et de la façon dont elle est effectuée dans Angular. Nous avons également examiné la directive ngStyle et comment elle aide à résoudre les limitations que les liaisons de style avaient dans le passé. Bon piratage!