Welcome

Angular-Tuto.com

Angular-Tuto.com

directives Angular 7

Directives dans Angular 7

Introduction

D.O.M: Dynamic object model ou tout simplement le HTML d’une page web.

Dans angular 2, 4,6,7..., les directives sont utilisées pour apporter des modification à l’apparence HTML du component et de la page d’une manière générale. Les directives sont très importants. Les directives, finalement, sont des classes JavaScript (à voir TypeScript) décorées avec l’attribute @directive.

Types des Directives Angular

Beaucoups, des spécialistes définies les directives comme des instructions dans le DOM.
Il y a 3 types des directives dans Angular 7 :

- Les directives de Structure (Structural Directives): Sont les directives qui affectent et modifient la structure de la DOM. c.a.d qu’elle ajoute ou supprime tout un élément HTML.

- Les directives D’attributs (Attribute Directives): ce type de directives modifie, aussi, le DOM. Mais sans ajouter / Supprimer des blocs ou éléments HTML.
Par exemple, changer la couleur. Ou bien afficher/cacher un élément HTML sans le supprimer (Vous savez, certainement, la différence entre Show/Hide et Add/Delete élément dans HTML)

-Les components: Oui les components d’Angular sont des directives avec template.

D’une manière générale, les cas ou on a besoin des nouvelles templates ou de la dependency Injection on utilise les components. Par contre dans le cas ou on a besoin de modifier un aspect ou comportement generic d’une template on utilises les Directives.

Pour cet article on va créer un nouveau Component qui s’appelle consultation qui represente une consultation médicale faite par un médecin. Pour faire ceci, on va se placer dans la racine de notre projet et on va exécuter la commande:
>ng genetae component consultation
Angular va se charger de la création et la modification des fichiers. directives Angular 7

Directives d’attribut

Généralement, les directives d'attribut permettent de modifier l'apparence ou le comportement d'un composant ou d'un élément DOM. Les deux directives d’attribut les plus utilisées sont ngStyle et ngClass.

  1. ngStyle

    cette directive est utilisée pour appliquer ou mettre à jour un style dynamiquement.
    Exemple: Une application qui affiche le Nom du Patient son état de santé et la couleur associée (Rouge si malade et vert si saint ).

    - Etape 1: Dans le fichier de définition généré “consultation.component.ts” on ajoute 3 propriétés de type string NomPatient, EtatSante et CouleurSante (Voir 1: Lignes 17,18,19). Et dans le constructeur on appelle la fonction Random pour choisir, aléatoirement, l'état de santé du patient puis on modifie la CouleurSante en se basant sur la valeur de la propriété EtatSante. directives Angular 7

    - Etape 2: Dans le fichier template on affiche le nom du patient en utilisant l’interpolation d’Angular (Voir ligne 8). Puis on créer un span et le plus important qu’on gère la propriété backgroundColor de ce span en utilisant [ngStyle]. directives Angular 7

    Etape 3: Il reste une dernière étape à faire c’est d’appeler le nouveau component dans la template du component principal. directives Angular 7

    Resultat (Selon la fonction Random):
    directives Angular 7
    ou bien
    directives Angular 7

  2. ngClass

    très similaire à ngStyle. ngClass, elle agit sur l’attribut “class” d’un élément html et non pas sur l’attribut “style” comme ngStyle. la ngClass peut avoir plusieurs formes d’utilisation.

    Forme 1
    On peut utiliser la ngClass comme l’attribut class d’un élément HTML. il suffit d'écrire ngclass= “MaCSSClass”. Autre chose, dans cette première forme d’utilisation,vous pouvez utiliser les deux ‘ngClass’ et class au même temps dans le même élément html et Angular va se charger de faire la combinaison entre les deux.
    -Etape 1: Créer la classe assurance dans le fichier de style du component.
    directives Angular 7
    -Etape 2: créer le blochtml associé et appéler la classe assurance en utilisant “ngClass”. Notez bien que nous avons utilisé “class” et “ngClass” au même temps et de la même manières et Angular fait l'assemblage.
    directives Angular 7
    -Résultat: directives Angular 7

    Forme 2
    Cette fois, on va utiliser le binding donc le symbole []. On va bindé une liste des classes css. Donc tout d’abord on va ajouter une autre classe css à notre fichier de style.
    directives Angular 7
    Puis on modifie dans le fichier template pour ajouter le binding de ngClass. Dans cet exemple on appel deux classes. Notez bien qu’on peut utiliser aussi l’attribut class.
    directives Angular 7
    Résultat. Une combinaison de trois classes “badge, assurance et border”.
    directives Angular 7

    Form3
    c’est la forme la plus utilisée, pratiquement. On l’utilise surtout pour appliquer des classes CSS d’une manière conditionnelle.
    Dans la définition du component on change La propriété “IsAssure” à une propriété booléenne (Voir Ligne 23) et on ajoute une autre propriété Message Assurance. Puis on gère la valeur de ces deux propriétés dans le constructeur (voir lignes 14 & 15).
    directives Angular 7
    Dans le fichier template, on binde la classe assurance sur la propriété “IsAssuré” du component.
    directives Angular 7
    Résultat ( selon l'état de la propriété IsAssure):
    directives Angular 7

Directives de Structure

Comme on a cité, les directives structurelles sont utilisées pour apporter des modifs structurelles sur la D.O.M (Ajouter ou supprimer des blocs HTMLs au code existant). Pour permettre à Angular de distinguer les directives structurelles. On ajoute le symbole * etoile devant ces directives.

  1. ngIf

    Permet d’ajouter ou supprimer des blocs HTML en se basant sur l'état d’une condition booléenne. Pour utiliser *ngIf, rien n’est plus simple. Dans l’exemple suivant.

    Angular évalue la valeur de “IsAssure”. Si elle vaut true donc il affiche le bloc <p> .
    directives Angular 7
    Résultat
    directives Angular 7

    on peut, également ajouter un “bloc else” pour cette condition. On va utiliser les qui permettent de préparer un bloc html pour être utilisé par la suite (lignes 33,34,35). N'oubliez pas le symbol # qui précède l’identifiant de la template. Puis on ajoute le else (Voir ligne 32). directives Angular 7
    Résultat:
    directives Angular 7
    ou bien
    directives Angular 7

  2. *ngFor directive

    Maintenant, parlons de *ngFor. Elle permet de faire une boucle sur une liste d'éléments (dans le component). Puis modifier le D.O.M.

    Exemple: Notre exemple consiste à créer un petit formulaire qui permet d’ajouter les traitements données à ce patient. Puis afficher les éléments de cette liste en utilisant *ngFor:

    - Etape 1: Dans la définition, du component on ajoute 2 propriétés NomTraitement( Correspond au traitement en cours de saisie ) et Traitements(La liste des traitements manuscrits). Aussi une methode qui ajoute chaque nouveau traitement à la liste. directives Angular 7

    -Etape 2: Consultation.component.html: on ajoute un input text qui lié à la propriété “NomTraitement” en utilisant le two-way-Binding [(ngMode)l] (Voir ligne 42).
    directives Angular 7

    Résultat:
    directives Angular 7

  3. ngSwitch Dirctive

    Une directive structurelle assez importante (*ngswitch). Elle était introduite depuis la version 2 de Angular. Elle permet d’afficher un élément HTML parmis d’autres en se basant sur une condition. Il y a plusieurs mots clés utilisés:

    -*ngSwitchCase: permet de définir une arborescence des conditions possibles.

    -*ngSwitchDefault: utilisé pour définir la valeur par défaut à admettre si aucune autre option n’est possible.

    Comme, on a dit précédemment, on utilise l’* pour dire que cette directive elle change la D.O.M.

    Dans notre exemple on va utiliser les énumérations pour définir le Type de la maladie.

    -Etape 1: on commence par créer l'énumération dans un nouveau fichier : directives Angular 7

    -Etape 2: Dans le component on doit Importer cette enumeration directives Angular 7

    -Etape 3: Aussi dans la définition du component, on va créer un membre qui définit cette enumeration mEnum(maladieEnum: voir ligne 34) et aussi dans une propriété on va affecter le type de la maladie du patient (voir ligne 35)

    Dans la maladie du patient est bien une infection. Cette information est sauvegardée dans une propriété qui s’appelle “patientMaladie”.
    directives Angular 7

    -Etape 4Finalement, dans le fichier de la template on va appeler la directive “*ngSwitchCase” pour choisir le membre le plus adequat à afficher ainsi changer la D.O.M.
    directives Angular 7

    Résultat:
    directives Angular 7

Les sources

Vous pouvez télécharger le contenu du code source à partir du lien suivant
Télécharger le dossier SRC

Le fichier telechargé est le dossier SRC (compressé) de notreapplication. Il suffit de remplacer le dossier "src" de votre projet par celui téléchargé.

Personnellement je vous conseille de suivre le tutoriel de l'article et d'ecrire le code mot à mot pour plus d'apprentissage.

Conclusion

Comme le DataBinding , Les Directives font parties du coeur d'angular. Les Directives sont, déja, apparues avec l'ancien AngularJS.

On a parlé, dans cet articles, des directives prédifinies. Il faut noter aussi qu'on peut créer nos propres directives et les intégrer dans le projet.

Next: Les Décorateurs

Si vous avez des questions ou des commentaires n'hesitez pas à les tapez en dessous.


Commentaires (0)

Votre commentaire

  • Le Nom est obligatoire (entre 3 et 25 Lettres)
  • L'Email est obligatoire (Format valide)
  • Le Commentaire est obligatoire (entre 3 et 1000 Lettres)