Comment utiliser les pipes lowercase et uppercase ?

Démonstration interactive

Entrée:

Résultat:

hello world

Syntaxe Angular:

{{ 'Hello World' | lowercase }}

Entrée:

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 :

<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 :

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 et UpperCasePipe depuis @angular/common.
• Nous utilisons la fonction inject() pour injecter les pipes dans notre composant.
• Nous créons des méthodes toLowerCase() et toUpperCase() qui utilisent respectivement les pipes lowercase et uppercase.

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

1. Simplicité : Ils offrent une façon rapide et facile de transformer la casse du texte.
2. Réutilisabilité : Une fois définis, ces pipes peuvent être utilisés partout dans votre application.
3. Performance : Angular optimise l'exécution des pipes, les rendant plus performants que des fonctions équivalentes.
4. 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