Notions de base angulaires: Classes conditionnelles Angular ngClass

Cet article vous explique comment utiliser le style conditionnel dans Angular avec la directive ngClass et vous montre de nombreuses formes d'application – très utiles si vous vous lancez dans Angular.

Angular

Angular, le JavaScript de Google (TypeScript) Framework pour la création d'applications Web, mobiles ou de bureau, a plus de 71 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 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
• La ​​dernière version d'Angular
• 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 nœuds de votre terminal avec cette commande:

 npm   install 

Autre Les plus intéressants incluent:

• Une connaissance pratique du framework Angular à un niveau débutant

Dans cet article, vous apprendrez à utiliser la directive ngClass pour le style conditionnel de vos éléments angulaires

Utilisation des classes CSS dans Angular

Pour styliser les éléments de votre composant Angular, vous pouvez simplement utiliser CSS dans le fichier component.css et définir tous vos styles. Vous pouvez également utiliser le CSS en ligne comme vous le feriez pour n'importe quelle page HTML. Le paragraphe ci-dessous a une classe verte:

 <p class =  "green" > Tous les cours pour débutants sont de couleur verte 

La feuille de style ressemblerait à ceci:

   .green   {
     couleur :  green ; 
} 

Mise en forme conditionnelle

La façon la plus simple d'expliquer le style conditionnel est le comportement de la souris – des choses comme focus, survol, sur clic et actif. Le processus de définition de règles dans votre feuille de style en fonction d'une condition prédéfinie (dans ce cas, le comportement de la souris) est appelé style conditionnel. Les exemples déjà mentionnés sont implémentés nativement en CSS à l'aide de pseudo-classes CSS du navigateur. Que se passe-t-il si vous souhaitez appliquer un style à un élément basé sur des conditions prédéfinies qui ne sont pas réservées nativement en tant que pseudo-classes CSS?

ngClass Conditional Styling

L'équipe Angular a livré la directive ngClass pour aider les développeurs à ajouter et supprimer des classes CSS sur des éléments HTML. Il y a trois façons d'utiliser la directive ngClass selon le type d'évaluation d'expression que vous voulez faire:

A. Dans une chaîne

Ici, les classes CSS sont répertoriées dans une chaîne et séparées par des espaces, comme vous le feriez sur n'importe quel élément HTML. La syntaxe ressemble à ceci:

 <some-element [ngClass] =  "'first second'" >  ... 

B. Dans un tableau

Tout comme la chaîne, vous listez ici les classes CSS dans un tableau. Voici à quoi ressemble la syntaxe:

 <some-element [ngClass] =  "['first', 'second']" >  ... 

C. Dans un objet

Vous pouvez également définir des classes à appliquer à un élément avec ngClass dans un objet. Les clés d'objet seront les classes CSS qui sont ajoutées lorsque l'expression donnée dans la valeur est évaluée à true, sinon elles sont supprimées. Voici à quoi ressemble la syntaxe:

  <some-element [ngClass] = " { 'class1 class2 class3'  :  true } " >  ... 

Démo

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

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

Pour garder les choses modulaires, créons un nouveau composant et appelons il «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  ]}   de   '@ angular / core' ; 
@  Composant  ( {
  sélecteur :   'app-courses' 
  templateUrl :   './ courses.component.html' 
  styleUrls :   [ './ courses.component.css' ] 
} ) 
 export   class   CoursesComponent   implements [19659089] OnInit   {
cours  =   [
     {
    'name' :   'Introduction to Web Development' 
    'level' :   ' Débutant '
 } 
  {
   ' nom ':  ' Understanding APIs '
   ' level ':  ' Intermediate '
 } 
  {
   ' name ':  ' Introduction to Docker Containers '
   ' level ':  ' Avancé '
 } 
  {
   ' name ':  ' Understanding Time complexities '
   ' level ':  ' Avancé '
 } 
  {
   ' name ':  ' Algorithms and Data Structures '
   ' level ':   'Advanced' 
 } 
  {
    'name' :   'My first HTML page' 
    'level' :  'Débutant
 } 
  {
    'name' :   'Ways to use CSS in your web page' 
    'level' : [19659074] 'Débutant' 
 } 
  {
    'nom' :   'Introduction aux tests unitaires' 
    'niveau' :   'Intermédiaire' 
 } 
  {
    'name' :   'What are PWAs' 
    'level' :   'Intermédiaire' 
 } 
 ] ; 
  constructeur  ()   { } 
  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. La prochaine étape consiste à définir les différents styles nécessaires à cet exercice. Ouvrez le fichier courses.component.css et collez les règles CSS ci-dessous à l'intérieur:

   .red   {
     color :  red  ]; 
} 
 .green   {
     couleur :  green ; 
} 
 .yellow   {
     color  ]:  blue ; 
} 
 .sizeup   { 
     font-size :   25  px ;  
} [19659015] Maintenant pour la présentation, allez dans le fichier courses.component.html et remplacez le contenu de l'espace réservé par le bloc de code ci-dessous à l'intérieur: 

 < p   class  =  " taille  " > 
   Tous  < span   [ngClass]  = "  ' green  ' " >  Les cours pour débutants sont de couleur verte  </  span > all  < span   class  =  " yellow "  >  intermédiaires sont colorés en bleu  </  span  >  
  et tous les  < span   class  =  " red "  >  cours avancés sont colorés en rouge  </  span > .
 </  p >  
 Si vous exécutez l'application maintenant, vous verrez que tous les styles sont reflétés, y compris celui avec la directive  ngClass .
 En utilisant ce même code de présentation, voyons comment il se comportera si la définition est un tableau.
 < p   class  =  " sizeup "  > 
   All  < span   [ngClass]  =  " [ ' green ' ] "  > [19659229] Les cours pour débutants sont de couleur verte  </  span > all  < span   class  =  " yellow  " >  intermédiaire c les nôtres sont de couleur bleue  </  span >  
  et tous les  < span   class  =  " red "  >  cours avancés sont colorés en rouge  </  span > .
 </  p >  
 Lorsque vous l'enregistrez et regardez votre navigateur, votre application reste la même, validant la définition du tableau. Maintenant, pour tester la définition de l'objet, commençons par le même exemple:
 < p   class  =  " sizeup "   > 
   Tous  < span   [ngClass]  =  " { ' green ' : true}  " >  Les cours pour débutants sont de couleur verte  </  span > all  < span   class [19659219] =  " jaune "  >  les cours intermédiaires sont colorés en bleu  </  span >  
  et tous les  < span   class  =  " red "  >  cours avancés sont colorés en rouge  </  span > .
 </  p >  
 Ceci imprime les paragraphes avec les différentes couleurs attribuées. Pour rendre cela encore plus excitant, référençons maintenant les cours que nous avons sauvegardés au début:
 < p   class  =  " sizeup "  [19659025]> 
   Tous  < span   [ngClass]  =  " { ' green ' : true }  " >  Les cours pour débutants sont de couleur verte  </  span > all  < span   class  =  " jaune "  >  les cours intermédiaires sont colorés en bleu  </  span >  
  et tous les  < span   class  =  " red "  >  cours avancés sont colorés en rouge  </  span > .
 </  p > 
 < ul > 
   < li   * ngFor  =  " cours de cours "  
   [ngClass]  =  " { ' green ' : course.level ===  ' Débutant  »,
              ' jaune ' : course.level ===  ' Intermédiaire ' ,
              ' rouge ' : course.level ===  ' Advanced ' ,
              ' taille ' : true}  " > 
   {{course.name}}
     </  li > 
 </  ul >  
 Ici, nous avons utilisé la directive  ngFor  pour parcourir la liste puis avec le  ngClass nous avons spécifié exactement que tous les cours doivent être colorés selon nos conditions prédéfinies (cours pour débutants en vert, intermédiaires en bleu et cours avancés en rouge). Cela a été possible car la clé d'objet est de type booléen, donc tout ce qui se trouve sur le côté droit doit retourner vrai ou faux. Le style est appliqué s'il est vrai, et ne s'applique pas lorsqu'il renvoie faux.
 Le code complet de ceci le tutoriel peut être trouvé  ici  sur GitHub.
 Conclusion
 Ceci est un cas d'utilisation de la directive  ngClass . Il peut être utilisé dans de nombreux scénarios, en particulier ceux qui nécessitent le style d'un élément en fonction d'une logique prédéfinie. Cet article vous a présenté le monde du style conditionnel avec  ngClass  dans Angular. Allez-y et utilisez-le!