![CHAPITRE 4
LES DIRECTIVES STRUCTURELLES
▸ Pour remédier à cette limitation, Angular fournit des directives
structurelles qui permettent de modi
fi
er la structure du DOM.
▸ Les directives de ce type fournies par Angular sont :
▸ *ngIf
▸ *ngFor
▸ [ngSwitch], *ngSwitchCase and *ngSwitchDefault
8](https://image.slidesharecdn.com/4-250308133631-c1afb0fb/85/4-_Directives_Angular_Web_Avance-pdf-pdf-8-320.jpg)
![CHAPITRE 4
NgStyle
▸ Cette directive permet de modi
fi
er l’apparence de l’élément cible.
▸ Lorsque l'on utilise cette directive, il est nécessaire de la placer entre
crochets comme ceci : [ngStyle] . Logique, puisqu’elle utilise le
property Binding.
▸ Elle prend en paramètre un attribut représentant un objet décrivant le
style à appliquer.
16](https://image.slidesharecdn.com/4-250308133631-c1afb0fb/85/4-_Directives_Angular_Web_Avance-pdf-pdf-16-320.jpg)
4._Directives_Angular_Web_Avancé.pdf.pdf
- 1. ANGULAR PROGRAMMATION WEB AVANCÉE Chapitre 4 : Les directives Supplément : Les Pipes Par NIDHAL JELASSI jelassi.nidhal@gmail.com
- 2. CHAPITRE 4 OBJECTIFS ▸ Comprendre la dé fi nition et l’intérêt des directives. ▸ Voir quelques directives d’attributs offertes par Angular et savoir les utiliser ▸ Créer votre propre directive d’attributs ▸ Voir quelques directives structurelles offertes par Angular et savoir les utiliser ▸ Dé fi nir les pipes et l’intérêt de les utiliser ▸ Vue globale des pipes prédé fi nies ▸ Créer un pipe personnalisé 2
- 3. CHAPITRE 4 QU’EST CE QU’UNE DIRECTIVE ? ▸ Jusqu’ici, nous avons déjà utilisé des directives… sans vraiment nous en rendre compte. ▸ En effet, une directive est une classe comme le composant sauf qu’elle n’a pas de template. ▸ C’est une classe qui permet d’attacher un comportement spéci fi que aux éléments du DOM. Elle est décorée avec l’annotation @Directive. ▸ Apparait dans un élément comme un tag (comme le font les attributs). ▸ La command pour créer une directive est : ng g d nomDirective 3
- 4. CHAPITRE 4 QU’EST CE QU’UNE DIRECTIVE ? ▸ Il est possible d’avoir plusieurs directives appliquées à un même élément. 4 ▸ Il est possible d’avoir plusieurs directives appliquées à un même élément. ▸ Une directive possède un sélecteur CSS qui indique au framework où l’activer dans notre template. ▸ Lorsque Angular trouve une directive dans notre template HTML, il instancie la classe de la directive correspondante et donne à cette instance le contrôle sur cet élément du DOM.
- 5. CHAPITRE 4 TYPES DE DIRECTIVES Angular distingue trois types de directives : ▸ Les composants qui sont des directives avec des templates. D’ailleurs la classe Component hérite de la classe Directive dans Angular. ▸ Les directives structurelles qui changent l’apparence du DOM en ajoutant, manipulant et supprimant des éléments. Les directives ngFor et ngIf déjà vus font partie de cette catégorie. ▸ Les directives d’attributs (attribute directives) qui permettent de changer l’apparence ou le comportement d’un élément. 5
- 6. CHAPITRE 4 Les directives structurelles 6 1
- 7. CHAPITRE 4 LES DIRECTIVES STRUCTURELLES ▸ Comme déjà dit, les directives structurelles d'Angular sont les directives qui manipulent les éléments du DOM, reconnaissables au fait qu'elles commencent toutes par un asterisque (*), comme par exemple *ngIf et *ngFor. ▸ Elles sont appliquées sur l’élément HOST (l'élément sur lequel la directive est appliquée). ▸ Alors que l’interpolation et le property binding permettent de modi fi er l'af fi chage et le contenu, ils ne permettent pas de modi fi er la structure du DOM en ajoutant ou en retirant des éléments par exemple 7
- 8. CHAPITRE 4 LES DIRECTIVES STRUCTURELLES ▸ Pour remédier à cette limitation, Angular fournit des directives structurelles qui permettent de modi fi er la structure du DOM. ▸ Les directives de ce type fournies par Angular sont : ▸ *ngIf ▸ *ngFor ▸ [ngSwitch], *ngSwitchCase and *ngSwitchDefault 8
- 9. CHAPITRE 4 ngFor ▸ La directive structurelle ngFor permet de boucler sur un array et d'injecter les éléments dans le DOM. 9
- 10. CHAPITRE 4 ngFor ▸ NgFor permet de répéter un élément plusieurs fois dans le DOM. ▸ Prend en paramètre les entités à reproduire. ▸ Fournit certaines valeurs : ▸ index: position de l'élément. ▸ odd: true si l'élément est à une position impaire. ▸ even: true si l'élément est à une position paire. ▸ fi rst: true si l'élément est à la première position. ▸ last: true si l'élément est à la dernière position. 10
- 12. CHAPITRE 4 ngIf ▸ ngIf est associé à une expression booléenne. Si cette expression est fausse (false) alors l'élément et son contenu sont retirés du DOM, ou jamais ajoutés). ▸ Si le booléen est true alors l’élément host est visible. ▸ Si le booléen est false alors l’élément host est caché. 12
- 13. CHAPITRE 4 ngSwitch ▸ La directive ngSwitch est une structure conditionnelle de type switch qui s’utilise directement dans le template. Elle permet d’af fi cher un élément donné selon la valeur de l’expression qu’elle évalue. 13
- 14. CHAPITRE 4 Application ▸ C r é e z u n c o m p o s a n t af fi chant des comptes et donnant la possibilité à l’utilisateur d’ajouter un nouveau compte. ▸ C h a q u e c o m p t e e s t représenté par son nom et son status (active, inactive, unknown). Bien évidemment, chaque nouveau compte ajouté doit apparaître dans la liste des comptes. 14
- 15. CHAPITRE 4 Les directives d’attributs 15 2
- 16. CHAPITRE 4 NgStyle ▸ Cette directive permet de modi fi er l’apparence de l’élément cible. ▸ Lorsque l'on utilise cette directive, il est nécessaire de la placer entre crochets comme ceci : [ngStyle] . Logique, puisqu’elle utilise le property Binding. ▸ Elle prend en paramètre un attribut représentant un objet décrivant le style à appliquer. 16
- 17. CHAPITRE 4 NgStyle : Application ▸ Préparer un input de type texte, un input de type number, et un selectbox. ▸ Faite en sorte que lorsqu’on écrive une couleur dans le texte input, ca devienne la couleur du paragraphe. Et que lorsque on change le nombre dans le number input, la taille de l’écriture change également. ▸ Finalement ajouter une liste et mettez y un ensemble de police. Lorsque le user sélectionne une police dans la liste, la police dans le paragraphe change. 17 Créez un mini-simulateur de Microsoft Word pour gérer un paragraphe en utilisant ngStyle.
- 18. CHAPITRE 4 NgClass ▸ Cette directive permet de modi fi er l’attribut class. Permet de choisir facilement parmi une liste de plusieurs classes possibles qui vous permettent de spéci fi er une liste d'objets incluant des conditions. Angular est capable d'utiliser la classe correcte en fonction de la véracité des conditions. 18 ▸ Votre objet doit contenir des paires clé / valeur. La clé est un nom de classe qui sera appliqué lorsque la valeur (conditionnelle) est évaluée à true. ▸ Elle utilise le property Binding.
- 19. CHAPITRE 4 NgClass : Autre Exemple 19 CSS HTML
- 20. CHAPITRE 4 APPLICATION ▸ Créer un composant qui af fi che une liste de serveurs. Chaque serveur est caractérisé par un nom, un type, une date de démarrage et un status. 20 ▸ Utilisez la directive ngClass pour avoir le résultat ci-dessous.
- 21. CHAPITRE 4 CREER SA PROPRE DIRECTIVE ▸ A fi n de créer sa propre « attribut directive » il faut utiliser un HostBinding sur la propriété que vous voulez binder. Exemple : @HostBinding('style.fontFamily') family:string="Arial"; ▸ Si on veut associer un événement à notre directive on utilise un HostListener qu’on associe à un événement déclenchant une méthode. Exemple : @HostListener('mouseenter') mouseenter() { this.family = "Garamond"; } ▸ A fi n d’utiliser le HostBinding et le HostListener il faut les importer du core d’angular 21
- 22. CHAPITRE 4 RETOUR AU PROJET ▸ Créez une directive qui modi fi e la couleur du background d’un candidat quand la souris survole son espace. 22
- 23. LES PIPES 23
- 24. CHAPITRE 4 PRÉSENTATION D’UN PIPE ▸ Un pipe est une fonctionnalité qui permet de formater et de transformer vos données avant de les af fi cher dans vos Templates. ▸ Exemple : l’af fi chage d’une date selon un certain format, Mettre une chaîne de caractères en majuscules, etc. ▸ Il existe des pipes offerts par Angular et prêt à l’emploi. ▸ Vous pouvez créer vos propres pipes personnalisés. 24
- 25. CHAPITRE 4 SYNTAXE ▸ A fi n d’utiliser un pipe vous utilisez la syntaxe suivante : {{ variable | nomDuPipe }} ▸ Exemple : {{ maDate | date }} ▸ A fi n d’utiliser plusieurs pipes combinés vous utilisez la syntaxe suivante : {{ variable | nomDuPipe1 | nomDuPipe2 | nomDuPipe3 }} ▸ Exemple : {{ maDate | date | uppercase }} 25
- 26. CHAPITRE 4 LES PIPES DISPONIBLES PAR DÉFAUT (BUILT-IN PIPES) ▸ La documentation d’angular vous offre la liste des pipes prêt à l’emploi (https://angular.io/api?type=pipe). uppercase lowercase titlecase currency date json percent etc.. 26
- 27. CHAPITRE 4 PARAMÉTRER UN PIPE ▸ A fi n de paramétrer les pipes ajouter ‘:’ après le pipe suivi de votre paramètre. {{ maDate | date:"MM/dd/yy" }} ▸ Si vous avez plusieurs paramètres c’est une suite de ‘:’ {{ nom | slice:1:4 }} 27
- 28. CHAPITRE 4 PIPE PERSONNALISÉ ▸ Un pipe personnalisé est une classe décoré avec le décorateur @Pipe. ▸ Elle implémente l’interface PipeTransform. ▸ Elle doit implémenter la méthode transform qui prend en paramètre la valeur cible ainsi qu’un ensemble d’options. ▸ La méthode transform doit retourner la valeur transformée. ▸ Le pipe doit être déclaré au niveau de votre module de la même manière qu’une directive ou un composant. ▸ Pout créer un pipe avec le cli : ng g p nomPipe 28
- 30. CHAPITRE 4 APPLICATION : SUITE ▸ Créez ensuite 2 pipes. Le 1er n’af fi chera que les 15 premiers caractères des noms des serveurs, concaténés à "…". Le 2ème, n’af fi chera que les serveurs dont le status est tapé dans la zone texte juste en-dessus. 30 ▸ Reprenez le composant du diapo 19 et appliquez le pipe Date pour af fi cher la date de démarrage de chaque serveur avec ce format.
- 31. CHAPITRE 4 RETOUR AU PROJET CV ▸ Créer un pipe appelé noImage qui retourne le nom d’une image par défaut que vous stockerai dans vos assets au cas ou la valeur fournie au pipe est une chaine vide. 31
- 32. CHAPITRE 4 PIPES PURES ET IMPURES ▸ Par défaut, les Pipes sont purs. C'est à dire que leur méthode transform est une fonction pure, la valeur retournée ne dépend que des paramètres reçus et les appels n'ont aucun effet de bord. Autrement dit, le Pipe est "stateless". ▸ Les Pipes impurs sont évalués à chaque Change Detection même quand les paramètres ne changent pas. Ils sont déclarés en passant la valeur false au paramètre pure du décorateur Pipe. 32
- 33. CHAPITRE 4 PIPES PURES ET IMPURES Nativement, seuls les Pipes suivant sont impurs : ▸ async : Il est impur car les valeurs retournées par ce Pipe peuvent changer à n'importe quel moment étant donné qu'elles proviennent d'une source asynchrone (Observable ou Promise). ▸ json : Etant donné qu'il est principalement utilisé pour le "debug", ce Pipe est impur car il est préférable que la valeur retournée soit mise à jour même si l'immutabilité n'est pas respectée. ▸ slice : Bien que ce Pipe fonctionnerait parfaitement en étant pur, il est probablement impur pour faciliter l'adoption d'Angular par la communauté car malheureusement l'immutabilité des Arrays est rarement respectée par les développeurs Angular. 33