Publié le : 03/01/2022
Les directives et les pipes Angular

Nous allons à présent parler d’un ensemble d’éléments importants dans Angular, à savoir les Directives et les Pipes.
Les directives Angular
Tout d’abord voyons la notion directives Angular. Les directives sont des classes qui associe un comportement particulier à un élément du DOM. Et ces directives se découpent en trois sous-ensemble à savoir :
- Les composants qui attache un template à un élément ;
- Les directives structurelles qui permet de changer la disposition du DOM ;
- Et les directives d’attributs qui changent le comportement d’un élément du DOM.
Le DOM
Avant d’aller un peu plus loin donnons une petite définition du DOM. Le DOM (Document Object Model) est une représentation objet de notre page HTML. Le DOM est représenté sous forme d’arbre d’élément.
Les directives structurelles
Pour rappel les directives structurelles sont les directives qui modifient le DOM. En d’autres termes, les directives structurelles vont être capable de, par exemple, supprimer un élément du DOM ou de le modifier, ou d’itérer sur les éléments DOM, etc…
Les directives structurelles dans Angular ont une syntaxe particulière, en effet, elles s’écrivent avec une étoile suivie du nom de la directive (*..
). Avec Angular, nous avons 3 directives structurelles qu’il peut nous fournir et qui sont :
*ngIf
: conditionne d’un élément à partir d’une condition ;*ngFor
: itérer sur un élément ;- *ngSwitch : est l’équivalent d’un switch case en Javascript.
Nous tenons à préciser ici que le *ngIf supprime l’élément DOM mais ne le cache pas à l’aide des attributs ou de classe CSS.
Les directives d’attributs
Les directives d’attributs n’ont pas le même usage que les directives structurelles. En effet, les directives structurelles retirent ou ajoutent des éléments dans le DOM ; tandis que les directives d’attributs, elles, ne modifient pas la structure du DOM, elles modifient simplement le comportement de certains éléments du DOM.
Angular fournit deux directives d’attributs qui sont :
- ngStyle ;
- ngClass.
Toute fois, il est aussi possible de créer ses propres directives d’attributs.
La directive d’attributs ngClass
Le but de ngClass
est de ajouter ou retirer dynamiquement une classe à un élément. Cela va simplement modifier le comportement de cet élément ; cela ne va pas modifier la structure du DOM. Cette directive va ajouter ou retirer une classe à un élément. Son syntaxe est :
<div [ngClass]="{'highlighted':'true'}">Directives</div>
Ici {'highlighted':'true'}
est un objet avec comme clé le nom d’une ou de plusieurs classes CSS (highlighted
) et comme valeur un booléen si on va appliquer cette classe CSS ou non (true
). Donc, il ne faut pas oublier de créer la classe CSS dans le fichier CSS associé au composant ou dans le CSS général.
Il est important de souligner ici l’utilisation des crochets. En effet, qu’est-ce qui se passe lorsqu’on enlève les crochets ? La directive n’est as interprétée. On avait utilisé les crochets, justement, lorsqu’on parlait de la liaison entre notre composant et notre template et on mettait des crochets ou une double accolade lorsque l’on souhaitait faire passer une variable qui appartenait à notre composant à notre template.
Donc ici, comme il n’y a pas de variable qui appartient au composant, on pourrait se dire que cela fonctionne. Eh bien non ! Cela ne fonctionne pas, pourquoi ? Parce que bien que il n’y ait pas de variable appartenant au template qui soit insérée ici, il y a quand même ici ce que l’on appelle une « template expression », c’est-à-dire un élément qui n’est pas une string, qui doit être interprété comme du JavaScript. En effet, on ne peut pas mettre tous les éléments de JavaScript dans une « template expression », mais on peut mettre des syntaxes assez basiques de JavaScript.
Donc, c’est pour ça qu’on doit mettre les crochets. Ayant mis les crochets, Angular comprend qu’ici, il ne s’agit pas d’une string, mais qu’il s’agit d’une expression à interpréter.
Un exemple d’utilisation de ngClass
Donc si dans le composant main.component.ts
on avait :
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {
user = "Rakoto";
color = true;
constructor() { }
ngOnInit(): void {
}
}
Alors on peut mettre dans notre template main.component.html
:
<div [ngClass]="{'highlighted':color}"> Directives </div>
Les pipes Angular
Nous allons à présent à nous intéresser à un autre ensemble d’éléments dans Angular qui sont les pipes
Alors, les pipes, bien qu’ils ne soient pas aussi fondamentaux que les directives sont des éléments extrêmement pratiques à utiliser.
Nous essayer de définir un pipes. Donc, un pipes est une fonction qui retourne un output, un élément à partir d’un input, un paramètre qui lui est passé et qui peut être déclaré dans un template. En d’autres termes, un pipe est une fonction que l’on va pouvoir utiliser directement dans notre template. De ce fait, elle va nous servir à formater des variables dans un format qui nous convient directement dans le template. Donc, la syntaxe est assez simple, il s’agit donc d’une barre, soit un pipe « | ».
Angular fournit déjà plusieurs pipe que nous pouvons utiliser dans notre application et qui est peut être trouvé ici.
Exemple de pipe
Dans ce qui suit, nous allons prendre l’exemple d’un « CurrencyPipe ». Ce pipe va formater un nombre en chiffres monétaires et va retourner ce chiffre formaté. Ci-dessous la syntaxe « CurrencyPipe ».
{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}
Un autre exemple est le « DatePipe ». Ce pipe va formater une date en format de date souhaitée. Et ce pipe est le plus utilisé dans tous les applications Angular car les dates sont assez difficile à formater. Ci-dessous la syntaxe du « DatePipe ».
{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}
Conclusion sur les directives et les pipes Angular
En quelques mots les directives et les pipes Angular sont largement utilisés dans les applications Angular. Et les directives sont des classes qui associe un comportement particulier à un élément du DOM. Et les pipes sont des fonctions qui permettent de formater des variables dans un template.