LES PIPES

1. QU’EST-CE QU’UN PIPE?

Les pipes sont des fonctions à utiliser dans les templates pour accepter une valeur d'entrée et
renvoyer une valeur transformée. Un pipe peut être déclaré une seule fois mais utilisé plusieurs fois
dans une application Angular. On peut, par exemple, utiliser des pipes pour formater les chaînes de
caractères, les valeurs décimales, les dates, etc. Il existe des pipes prédéfinis, mais le développeur
peut, également, créer des pipes personnalisés. Le pipe est utilisé dans le template selon la syntaxe
{{ data | pipe_identifier : parameters }}

2. LES PIPES NATIFS D’ANGULAR

Angular fournit des canaux intégrés pour les transformations de données typiques. Les pipes suivants
sont couramment utilisés pour le formatage des données :

- DatePipe: transforme des dates selon un format donné.

Exemple : {{ birthdayDate | date : ‘dd/M/YYYY’ }}
- UpperCasePipe: transforme un texte en majuscules.
Exemple : {{ lastName | uppercase}}
- LowerCasePipe: transforme un texte en minuscules.
Exemple : {{ firstName | lowercase}}
- CurrencyPipe: transforme un nombre en format monétaire.
- DecimalPipe: transforme un nombre en un format décimal.
- PercentPipe: transforme un nombre en pourcentage.

3. LES PIPES PERSONNALISES

Il est possible de créer des pipes personnalisés pour encapsuler les transformations qui ne sont pas
fournies avec les pipes natifs d’Angular. Ces pipes seront, ensuite, utilisés dans les template selon la
même syntaxe que les pipes natifs.

Pour créer un pipe, on peut utiliser la commande ng generate pipe nom-du-pipe. Dans le fichier
TypeScript correspondant, le décorateur @Pipe précise le nom du pipe pipeName. Dans la classe du
pipe, la méthode transform permet d’implémenter les différentes transformation de données.

Exemple d’un pipe personnalisé : On désire créer un pipe qui permet de transformer une
donnée numérique en appliquant un exposent.

La commande qui permet de créer ce pipe est ng generate pipe exponential-strength.

Le fichier exponential-strength.pipe.ts contiendra le décorateur @Pipe qui précise le nom du pipe et
la classe du pipe exponentialStrengthPipe qui spécifie la méthode transform.

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

Fichier exponential-strength.pipe.ts
------------------------------------------------------------------------------
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
transform(value: number, exponent = 1): number {
return Math.pow(value, exponent);
}
}
------------------------------------------------------------------------------
Exemple d’utilisation du pipe exponentialStrength dans le template :
<p> Super Hero Power: {{power | exponentialStrength: factor}} </p>

4. CONCLUSION

Dans Angular, les pipes permettent le formatage des données qui sont affichées dans les
templates. Il est, également, possible de créer des pipes personnalisés pour les transformations
qui n’ont pas de pipes prédéfinis

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

 a- 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>
1. 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>

b- 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">

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

 <li *ngSwitchCase="'1'">One</li>
<li *ngSwitchCase="'2'">Two</li>
<li *ngSwitchCase="'3'">Three</li>
<li *ngSwitchCase="'4'">Four</li>
<li *ngSwitchCase="'5'">Five</li>
<li *ngSwitchDefault>This is Default</li>
</ul>

5. 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';
}
}
-------------------------------------------------------------------------------------------------------

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

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 5

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