Scribd
Importer
46 vues11 pages

Directives Angular: Types et Exemples

Les directives Angular sont des instructions intégrées dans le DOM qui modifient l'apparence et la structure des éléments. Il existe trois types de directives : structurelles, par attribut et avec modèle, chacune ayant des fonctions spécifiques. Des exemples d'utilisation incluent *ngFor pour itérer sur des collections et *ngIf pour conditionner l'affichage d'éléments DOM.

Transféré par

Sofiane SH
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
46 vues11 pages

Directives Angular: Types et Exemples

Les directives Angular sont des instructions intégrées dans le DOM qui modifient l'apparence et la structure des éléments. Il existe trois types de directives : structurelles, par attribut et avec modèle, chacune ayant des fonctions spécifiques. Des exemples d'utilisation incluent *ngFor pour itérer sur des collections et *ngIf pour conditionner l'affichage d'éléments DOM.

Transféré par

Sofiane SH
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Directives

SECTION 4: UN 1 ER EXEMPLE

M.A.DAHDEH ([email protected]) 172


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.

M.A.DAHDEH ([email protected]) 173


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

M.A.DAHDEH ([email protected]) 174


*ngFor https://angular.io/api/common/NgForOf

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

M.A.DAHDEH ([email protected]) 175


*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.

M.A.DAHDEH ([email protected]) 176


*ngIf https://angular.io/api/common/NgIf
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
M.A.DAHDEH ([email protected]) 177
*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

M.A.DAHDEH ([email protected]) 178


ngStyle https://angular.io/api/common/NgStyle
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

M.A.DAHDEH ([email protected]) 179


ngClass https://angular.io/api/common/NgClass
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

M.A.DAHDEH ([email protected]) 180


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

M.A.DAHDEH ([email protected]) 181


Exercice : Directive
Un 1er exemple

#01 BFN
Voir les dates des commentaires
d’indice pair en vert et ceux
d’indice impair en rouge

M.A.DAHDEH ([email protected]) 182

Vous aimerez peut-être aussi