LES DIRECTIVES

I. QU’EST-CE QU’UNE DIRECTIVE ?

Une directive est une classe Angular qui ressemble à un composant mais qui n’a pas de template.
D’ailleurs, dans Angular, la classe Component hérite de la classe Directive. Une directive est déclarée
à l’aide du décorateur @Directive.

Une directive permet d’interagir avec les éléments HTML d’une page web en leur attachant un
comportement ou une apparence spécifique. Lorsqu’ Angular trouve une directive dans un template
HTML, il instancie la classe correspondante et donne à cette instance le contrôle sur la portion du
DOM qui lui revient.

Enfin, une directive possède un sélecteur qui permet d’indique à Angular où l’appliquer dans le
template, sachant qu’on peut appliquer plusieurs directives à un même élément HTML.

II. QUELS SONT LES TYPES DE DIRECTIVES ?

Les directives Angular sont de trois types : Les composants, les directives d’attribut et les directives
structurelles.

1. Les composants : un composant est une directive qui possède un template.

2. Les directives d’attribut : Elles ont pour but de la mise en forme de la page en modifiant
l’apparence ou le comportement d’un élément HTML. Elles sont utilisées en tant qu’attributs
d’éléments. Par défaut, Angular fournit deux directives d’attribut, à savoir:
a- La directive ngClass:
- Rôle : permet d’ajouter ou supprimer une classe CSS dynamiquement, selon une
condition.
- Syntaxe :
<elt_html [ngClass]= ‘’expression’’ …. /> ou bien <elt_html [ngClass]= ‘’traitement’’ …. />
- Exemples :
1. On applique la classe qui porte comme nom le résultat de val1+val2
<div [ngClass]="val1 + val2">
2. On applique la classe qui porte comme nom le contenu de val
<div [ngClass]="[val]">
3. On applique la classe qui porte comme nom le résultat de la fonction func
<div [ngClass]="func()">
4. Si val > 10 on applique la classe red sinon on applique la classe green
<td [ngClass]="val > 10 ? 'red' : 'green'">{{ val }}</td>
5. On applique la classe error seulement si le formulaire est invalide
<input type="text" [ngClass]="control.isInvalid ? 'error' : ''" /> ou bien
<input type="text" [ngClass]="{ error: control.isInvalid }" /> ou bien
<input type="text" [class.error]="control.isInvalid" />

3BI - IHEC | Framework de développement web 1

 b- La directive ngStyle :
- Rôle : permet d’ajouter ou supprimer des styles dynamiquement, selon la valeur d’une
condition.
- Syntaxe : [ngStyle] = ‘’ {‘prop1’ : expression ; ‘prop2’ : expression ;…}’’
- Exemples :
1. Valeur littérale pour une propriété :
<div [ngStyle]="{'color': 'red'}">…</div>
2. Propriétés définies selon un traitement conditionnel.
<div [ngStyle]="{
'color': flag ? colorA : colorB;
'background-color': !flag ? colorA : colorB;
}">…</div>
3. Les directives structurelles : Les directives structurelles sont responsables de la mise en
page HTML. Elles ont pour but de modifier le DOM en ajoutant, enlevant ou replaçant un
élément du DOM. Les noms des directives structurelles sont précédés par un astérisque ( * ),
par exemple, <div *ngIf="variable" class="name">{{variable.name}}</div›.
Les directives structurelles sont : *ngIf, *ngSwitch, *ngFor.

a- La directive *ngIf
- Rôle : Permet d’afficher un élément du DOM selon une condition
- Syntaxe : <div *ngIf="condition">Contenu à rendre lorsque la condition est vraie.</div>
- Exemple 1 : <div *ngIf=" !admin"><p>Access denied !</p></div>
- Exemple 2 : Cas if … else
<div *ngIf="isLoggedIn; else loggedOut"> <p>Bienvenue nouveau</p></div>
<ng-template #loggedOut><p>Veuillez vous connecter !</p></ng-template>

b- La directive *ngFor
- Rôle : Permet de faire des itérations sur des objets tels qu’un tableau et d’afficher un
élément du DOM à chaque itération.
- Syntaxe : <balise *ngFor="let element of collection">Contenu à rendre.</div>
- Exemple : <ul>
<li *ngIf=" let user of Users ">{{ user.Name }}</li>
</ul>

c- La directive *ngSwitch
- Rôle : Permet de faire des traitements conditionnels. Elle requiert *ngSwitchCase et
*ngSwitchDefault
- Syntaxe : <container_element [ngSwitch]="switch_expression">
<inner_element *ngSwitchCase="match_expresson_1">...</inner_element>
<inner_element *ngSwitchCase="match_expresson_2">...</inner_element>
<inner_element *ngSwitchCase="match_expresson_3">...</inner_element>
<inner_element *ngSwitchDefault>...</element>
</container_element>
- Exemple : <ul [ngSwitch]="num">
<li *ngSwitchCase="'1'">One</li>
<li *ngSwitchCase="'2'">Two</li>
3BI - IHEC | Framework de développement web 2
 <li *ngSwitchCase="'3'">Three</li>
<li *ngSwitchCase="'4'">Four</li>
<li *ngSwitchCase="'5'">Five</li>
<li *ngSwitchDefault>This is Default</li>
</ul>

III. CREATION D’UNE DIRECTIVE ?

En dehors des directives natives, Angular permet la création de directives personnalisées. La création
d’une directive se fait dans Angular CLI, à l’aide de la commande ng generate directive nom-
directive.

Le décorateur @Directive spécifie, ensuite, le sélecteur qui identifie l’attribut correspondant dans le
template. Enfin, le comportement de la directive sera implémenté dans la classe.

Le code TypeScript de la directive contient généralement les instructions suivantes :

-------------------------------------------------------------------------------------------------------
import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appNom]' // nom de l’attribut
})
export class NomDirective {
constructor(el: ElementRef) {
el.nativeElement.propriété = valeur
}
}
-------------------------------------------------------------------------------------------------------
ElementRef est un objet du core d’Angular, qui permet d’injecter une référence à un élément hôte
du DOM, c’est-à-dire, l’élément HTML auquel sera appliqué l’attribut directive dans le template.
ElementRef donne un accès à l’élément du DOM grâce à sa propriété nativeElement.
Exemple La directive suivante permet d’applique un arrière-plan jaune à l’élément du DOM qui
contient le sélecteur correspondant.
-------------------------------------------------------------------------------------------------------
import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}
-------------------------------------------------------------------------------------------------------
Dans le template, on peut utiliser la directive Highlight en l’ajoutant comme attribut dans un élément
HTML. Par exemple, <p appHighLight> Hover to Highlight</p>

3BI - IHEC | Framework de développement web 3

IV. CONCLUSION

Dans Angular, les directives peuvent agir sur l’architecture du DOM en modifiant l’apparence ou le
comportement des élément HTML. En plus des directives natives du Framework, les développeurs
peuvent créer des directives personnalisées et les appliquer aux élément HTML qu’ils souhaitent
contrôler ou faire interagir avec les évènements de l’utilisateur.

3BI - IHEC | Framework de développement web 4