Angular - 2.24-Stylisation dynamique des éléments avec ngStyle

Dans la dernière vidéo, nous avons vu la directive NGIF et avons noté qu'elle était très utile car c'était une directive structurelle. Nous avons également évoqué un autre type de directives, les directives d'attributs, qui sont appelées ainsi car elles ressemblent à des attributs HTML normaux sans étoile.

Nous avons ensuite montré comment ajouter une directive numérique appelée ngStyle pour changer dynamiquement la couleur de fond d'un composant en fonction du statut du service. Nous avons expliqué que la liaison de propriété est utilisée pour configurer cette directive, et qu'elle s'attend à recevoir un objet JavaScript avec des paires clé-valeur pour définir les styles.

Nous avons créé une méthode appelée getColor qui renvoie la couleur de fond appropriée en fonction du statut du serveur, et avons utilisé cette méthode pour définir la couleur de fond avec ngStyle. Nous avons souligné que ngStyle permet de mettre à jour dynamiquement les styles en fonction des données, ce qui est un avantage important.

Enfin, nous avons noté que les directives sont ajoutées comme des attributs, et que la liaison de propriété est utilisée pour les configurer. Il est important de comprendre la différence entre les directives et les liaisons de propriété, qui sont deux concepts distincts.