📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structurĂ© en trois niveaux : dĂ©butant, intermĂ©diaire et avancĂ©
  • 3) traite des pratiques les plus rĂ©centes d'Angular, comme les signaux, les vues diffĂ©rĂ©es, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

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 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é ​

PipeParamètreTypeDescription
lowercasevaluestringConvertit une chaîne de caractères en minuscules
uppercasevaluestringConvertit une chaîne de caractères en majuscules

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !