Directives
SECTION 5: UN 1 ER EXEMPLE
[Link] ([Link]@[Link]) 186
Les directives Angular
Un 1er exemple
Les directives sont des instructions intégrées dans le DOM (comme les composants et
les sélecteurs des balises HTML)
Les directives sont des éléments clés qui nous permettent non seulement de rendre
des vues à l’aide de composants, mais aussi de modifier l’apparence générale et la
structure du DOM
La plupart du temps, les directives dans Angular commencent par ng- où ng signifie
Angular et étend le HTML.
En TypeScript, une directive est une classe à laquelle on applique le
décorateur @Directive.
[Link] ([Link]@[Link]) 187
Les types de directives
Un 1er exemple
Il existe trois type de directives :
Les directives structurelles : Elles ont pour but de modifier le DOM en ajoutant, enlevant
ou replaçant un élément du DOM. (Modifient le contenu)
Les directives par attribut: Elles ont pour but de modifier l'apparence ou le
comportement d'un élément. (Modifient la mise en forme)
Les directives avec modèle : « Components are directives that have a template »
Ces directives s’utilisent conjointement
avec les composants web Angular:
• ng-template
• ng-container
[Link] ([Link]@[Link]) 188
*ngFor [Link]
Un 1er exemple
Permet de répéter un traitement (affichage d’un élément HTML) sur les
éléments d’une collection
• s’utilise comme un attribut de balise et sa valeur est une instruction itérative TypeScript
[Link] ([Link]@[Link]) 189
*ngFor
Un 1er exemple
Quelques paramètres
• first : pour savoir si l’élément courant est le premier de la liste
• last : retourne true si l’élément courant est le dernier de la liste, false sinon.
• even : retourne true si l’indice de l’élément courant est pair, false sinon.
• odd : retourne true si l’indice de l’élément courant est impair, false sinon.
[Link] ([Link]@[Link]) 190
*ngIf [Link]
Un 1er exemple
Permet d’ajouter/supprimer un élément DOM selon une condition
Syntaxe :
Accepte les opérateurs logiques : !(Non logique) , &&, ||
*ngIf Else : se comporte de manière très similaire à une instruction JavaScript
Possibilité d’ajouter un traitement then else
ng-template: comme son nom l'indique,
désigne un modèle et peut être utilisé
pour imbriquer plusieurs directives
structurelles ensemble
[Link] ([Link]@[Link]) 191
*ngIf
Un 1er exemple
Afficher seulement
les commentaires
avec indice pair
Erreur
Solution : ng-container : pour fournir un espace réservé pour rendre un modèle dynamiquement
[Link] ([Link]@[Link]) 192
ngStyle [Link]
Un 1er exemple
Modifie le style d’un élément HTML
S’utilise conjointement avec le property binding pour récupérer des valeurs définies dans la
classe du composant
Afficher les
commentaires
d’indice pair en
vert et ceux
d’indice impair en
rouge
[Link] ([Link]@[Link]) 193
ngClass [Link]
Un 1er exemple
permet d’attribuer de nouvelles classes à un élément HTML
s’utilise conjointement avec le property binding pour récupérer des valeurs définies dans la
classe ou dans la feuille de style
Afficher les
commentaires
d’indice pair en vert
et background light
et ceux d’indice
impair en rouge
Classes Bootstrap
[Link] ([Link]@[Link]) 194
Créer une directive
Un 1er exemple
On peut définir nos propres directives pour attacher un comportement personnalisé aux
éléments du DOM.
En TypeScript, une directive est une classe à laquelle on applique le décorateur @Directive.
Exemple : Voir Tuto
[Link] ([Link]@[Link]) 195
Exercice : Directive
Un 1er exemple
#01 BFN
Voir les dates des commentaires
d’indice pair en vert et ceux
d’indice impair en rouge
[Link] ([Link]@[Link]) 196
Solution : Directive
Un 1er exemple
#01 BFN
Voir les dates des commentaires
d’indice pair en vert et ceux
d’indice impair en rouge
[Link] ([Link]@[Link]) 197
Pipes
SECTION 5: UN 1 ER EXEMPLE
[Link] ([Link]@[Link]) 198
Pipe
Un 1er exemple
Définition :
• Un pipe a le rôle de formater et modifier l’affichage d’une donnée dans la vue du composant
• est une classe décorée par le décorateur @pipe
• Implémente la méthode transform(value: any, args?: any) de l’interface PipeTransform
• peut prendre un ou plusieurs paramètres
Exemple de Pipe Angular :
• {{ "bonjour" | uppercase }} <!-- BONJOUR -->
• Certains pipes peuvent prendre des paramètres : {{ maDate | date:'d MMM y’}} <!–- 18 feb 2020 -->
• Il est possible d’enchaîner les pipes : {{ maDate | date:’d MMM y’ | uppercase }} <!-- 18 FEB 2020 -->
[Link] ([Link]@[Link]) 199
Exemple : Créer un pipe qui permet de
Créer un Pipe récupérer un caractère d’une chaine de
caractères à une position donnée. si la
Un 1er exemple position n’est pas correcte, retourner le
premier caractère.
Créer un pipe
• value : correspond à la valeur qu’on veut modifier
• <p> {{ "bonjour" | getChar:2 }} </p> <!-- affiche n -->
[Link] ([Link]@[Link]) 200
Exercice : Pipe [Link]
Un 1er exemple
#02 BFN
Voir la date d’un commentaire
au format :
‘2020 NOV FRIDAY 20 – [Link]’
[Link] ([Link]@[Link]) 201
Solution: Pipe [Link]
Un 1er exemple
#02 BFN
Voir la date d’un commentaire
au format :
‘2020 NOV FRIDAY 20 – [Link]’
Récupérer des données les transformer les afficher dans le DOM
[Link] ([Link]@[Link]) 202
