Appearance
Comment utiliser les pipes lowercase et uppercase ? ​
Démonstration interactive ​
RĂ©sultat:
hello world
Syntaxe Angular:
{{ 'Hello World' | lowercase }}
RĂ©sultat:
HELLO WORLD
Syntaxe Angular:
{{ 'Hello World' | uppercase }}
Les pipes lowercase et uppercase ​
Fonctionnalité ​
lowercase
: Convertit une chaîne de caractères en minuscules.uppercase
: Convertit une chaîne de caractères en majuscules.
Utilisation dans les templates ​
La façon la plus simple d'utiliser ces pipes est directement dans vos templates Angular :
html
<p>{{ "HELLO WORLD" | lowercase }}</p> <!-- Affiche : hello world -->
<p>{{ "hello world" | uppercase }}</p> <!-- Affiche : HELLO WORLD -->
Utilisation dans le code TypeScript ​
Vous pouvez Ă©galement utiliser ces pipes dans votre logique de composant. Voici un exemple de composant standalone qui illustre l'utilisation de ces pipes :
typescript
import { Component } from '@angular/core';
import { CommonModule, LowerCasePipe, UpperCasePipe } from '@angular/common';
import { inject } from '@angular/core';
@Component({
selector: 'app-text-transformer',
standalone: true,
imports: [CommonModule],
template: `
<p>Original : {{ text }}</p>
<p>En minuscules : {{ toLowerCase(text) }}</p>
<p>En majuscules : {{ toUpperCase(text) }}</p>
`
})
export class TextTransformerComponent {
text = 'Bonjour le Monde';
private lowerCasePipe = inject(LowerCasePipe);
private upperCasePipe = inject(UpperCasePipe);
toLowerCase(value: string): string {
return this.lowerCasePipe.transform(value);
}
toUpperCase(value: string): string {
return this.upperCasePipe.transform(value);
}
}
Dans cet exemple :
- Nous importons
LowerCasePipe
etUpperCasePipe
depuis@angular/common
. - Nous utilisons la fonction
inject()
pour injecter les pipes dans notre composant. - Nous créons des méthodes
toLowerCase()
ettoUpperCase()
qui utilisent respectivement les pipeslowercase
etuppercase
.
Note
L'exemple de l'injection de ci-dessus permet de comprendre la syntaxe. Mais il est conseillé d'utiliser plutôt la syntaxe des pipes dans le template pour une histoire de performance
Avantages de l'utilisation de ces pipes ​
- Simplicité : Ils offrent une façon rapide et facile de transformer la casse du texte.
- Réutilisabilité : Une fois définis, ces pipes peuvent être utilisés partout dans votre application.
- Performance : Angular optimise l'exécution des pipes, les rendant plus performants que des fonctions équivalentes.
- Cohérence : Ils assurent une transformation cohérente du texte dans toute l'application.
Résumé ​
Pipe | Paramètre | Type | Description |
---|---|---|---|
lowercase | value | string | Convertit une chaîne de caractères en minuscules |
uppercase | value | string | Convertit une chaîne de caractères en majuscules |