Angular - 2.25-Appliquer des classes CSS de manière dynamique avec ngClass

Nous avons vu des exemples pour le Ng style et le NGIF. Maintenant, une chose liée au Ngstyle est la NG classe. Nous avons maintenant appris que le NG style nous permet d'attribuer dynamiquement un style. De même, la classe nous permet d'ajouter dynamiquement ou de supprimer des classes CSS.

Pour créer une telle classe, nous allons ajouter nos styles et utiliser le back text pour écrire ceci sur plusieurs lignes. Nous donnerons à cette classe le nom de "online" dans ce cas, car nous voulons colorer le texte en blanc. C'est tout ce que nous voulons faire car il est difficile de lire le texte noir sur le fond vert.

La directive "ng class" fonctionne aussi seulement comme prévu lorsque l'on utilise la liaison de propriété. Il faut la mettre également entre crochets. Pour cette propriété de cette directive, nous devons également passer un objet JavaScript. Chaque propriété que nous lions peut prendre une valeur différente, comme "disabled" qui prend true ou false.

Pour l'objet de "ng class", nous avons des paires clé-valeur. Les clés sont les noms des classes CSS et les valeurs sont les conditions qui déterminent si cette classe doit être attachée ou non. Nous avons donc ici la classe "online". On peut également la mettre entre guillemets simples si on avait un nom de classe avec un tiret à l'intérieur ou quelque chose comme ça.

Nous voulons attacher ceci seulement si le serveur est en ligne, donc seulement si le "serverStatus" est en ligne égal à "en ligne", qui est une chaîne de caractères entre guillemets simples. Bien sûr, on peut aussi externaliser ceci dans une méthode que l'on appelle "ce serverStatus égale à la vérification en ligne", mais ici, nous allons l'écrire en ligne.

Si c'est en ligne, nous devons attacher la classe CSS "online" à ce paragraphe. Sinon, elle ne doit pas être attachée. Voyons cela dans l'application en cours. Les deux sont hors ligne, donc aucun des deux ne devrait avoir la classe CSS "online" ajoutée. En effet, je ne peux pas trouver la classe sur aucun des deux.

Rechargeons et espérons que l'un d'entre eux est hors ligne ou en ligne. Les deux le sont, alors vérifions-les. Maintenant, nous voyons que la classe "online" a été ajoutée. En fait, elle a été ajoutée pour les deux car c'est ainsi que la directive "ng class" fonctionne.

Ceci est un exemple de directive intégrée et de directive d'attribut intégrée.