Découvrir Angular 2

Définir des styles pour un composant

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Comme pour le template, vous pouvez déclarer des styles pour votre composant. Ces styles seront attachés à votre composant uniquement.
03:10

Transcription

Comment on définit des styles avec la version Angular 2 ? eh bien, on a deux possibilités : soit des scripts externes, soit tout simplement ici, on va les faire en mode Inline. On va définir dans notre Component, une propriété Styles, et on va ouvrir un tableau dans lequel on va placer des styles. Allez ! Avec quoi on va essayer, nous, pour le coup ? On va essayer avec Instate. Là on a State 0, State 1, State 2. On a qu'à mettre de la couleur sur le premier. On va dire ici, (hop ! on va ouvrir une String) que Point State 0 là, State 0, appliquera une couleur Blue sur le texte. Alors, cela va vous paraître un peu particulier, mais on va faire des styles en format un peu Inline à l'intérieur du composant. Oui, je sais, c'est particulier ! C'est vrai qu'on n'a pas forcément l'habitude de faire ça. Mais, bon ! voyons ce qui se passe après compilation. Bien sûr, tous ça, c'est compilé. donc, après compilation, hop ! on se retrouve bien ici ( Hou ! c'est magique ) avec du bleu sur le premier. On va aller regarder ce qui est généré. Et on remarquera que Angular a fait lui-même un espèce de Class qui est, ici, une propriété directement sur la balise contenant notre Class. Et il a uniquement associé cette Class à cette partie du code. C'est très important, il faut bien le comprendre. C'est-à-dire que tous les styles que vous allez mettre ici, ne vont être attachés qu'à ce composant-ci et à aucun autre. Cela est très intéressant, car cela vous permet de définir des styles qui sont imbriqués et propres au Component et qui ne pourront pas être réutilisés ailleurs. Cela a son avantage et aussi son inconvénient. puisque cela veut dire que State 0 si on l'utilise ailleurs dans le code, on n'aura pas de couleurs bleues, il faudra le redéfinir. On pourra tout à fait l'extraire et le mettre dans un fichier, c'est pas un problème ! Mais, c'est très intéressant de se dire que cette class là ne sera appliquée qu'à son container direct. C'est-à-dire le P qui se trouve là avec cette Class là. C'est donc, extrêmement intéressant. Maintenant, on va essayer de le faire pour les deux autres couleurs. On va simplement venir coller, puis remplacer State 1, State 2. On va mettre ici, du green, et on va mettre ici du red. Alors on pourrait inverser et se dire que c'est en red ; que ça n'a pas été effectivement livrée, que c'est en green quand c'est livrée et c'est en blue quand c'est en cours de livraison. On va appliquer cela très facilement car cela va être compilé évidemment. Cela va s'appliquer directement en style (hop ! ) sur notre template. Il est très simple, de définir ici, facilement à l'intérieur d'un Heret. les différentes styles qui vont s'appliquer à notre composant. Attention ! cependant à la portabilité de cette façon de faire puisque ce qu'on a là, ne sera pas réutilisable ailleurs. C' est un petit peu ce qui est dommage quand on vient définir des styles comme cela, pour un composant. Cela dit, quand on veut écraser un style particulier, c'est la bonne solution.

Découvrir Angular 2

Prenez en main toute la puissance du framework AngularJS. Exploitez ses fonctionnalités, et développez rapidement des applications web robustes et performantes !

2h50 (40 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :6 sept. 2016
Durée :2h50 (40 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !