• 10 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 01/07/2024

Changez la casse

Résolvez un souci de format

Dans une application front-end dynamique, vous recevrez souvent des données qui ne sont pas formatées correctement pour être affichées. Il est toujours possible de transformer ces données, mais ça crée souvent des problèmes de compatibilité, notamment si on doit renvoyer à un moment ces données au serveur.

Angular vous fournit un type d'outil puissant pour ce cas de figure : les pipes. Un pipe est appliqué dans le HTML et va formater la valeur qu'on lui passe selon le pipe utilisé sans toucher à la donnée sous-jacente. Dans ce chapitre, vous verrez quelques pipes qui existent pour changer la casse d'une chaîne de caractères.

Modifiez la casse

Il existe trois pipes fournis par Angular pour modifier la casse :

  • LowerCasePipe : on affiche le texte en minuscules

  • UpperCasePipe : on affiche le texte en majuscules

  • TitleCasePipe : on affiche le texte avec une majuscule au début de chaque mot, avec le reste du mot en minuscules

On applique un pipe à une chaîne de caractères affichée avec la string interpolation. On rajoute le caractère pipe  |  puis le nom du pipe. Il faut aussi avoir importé le pipe dans le component qui en a besoin.

Par exemple, si vous voulez afficher le titre des FaceSnap en majuscules, vous appliquez UpperCasePipe :

Dans le TypeScript :

// ...
import { NgClass, NgStyle, UpperCasePipe } from '@angular/common';

@Component({
  selector: 'app-face-snap',
  standalone: true,
  imports: [
    NgStyle,
    NgClass,
    UpperCasePipe
  ],
  templateUrl: './face-snap.component.html',
  styleUrl: './face-snap.component.scss'
})
export class FaceSnapComponent implements OnInit {
    // ...
}

et dans le HTML :

<h2>{{ faceSnap.title | uppercase }}</h2>

De même pour LowerCasePipe et TitleCasePipe :

<h2>{{ faceSnap.title | lowercase }}</h2>
<h2>{{ faceSnap.title | titlecase }}</h2>

Pour votre application, choisissez la casse qui marche le mieux avec votre design ! Pour mon design, je vais rester avec les majuscules : je trouve que ça fait bien ressortir les titres.

Maintenant que vous savez ce qu'est un pipe et que vous comprenez comment appliquer des pipes basiques, dans le prochain chapitre, vous découvrirez un pipe très utile pour le formatage des dates : DatePipe.

En résumé

  • Un pipe permet de formater l'affichage d'une donnée sans modifier la donnée sous-jacente.

  • Angular fournit trois pipes pour modifier la casse affichée d'une chaîne de caractères : UpperCasePipe, LowerCasePipe, et TitleCasePipe pour les majuscules, les minuscules et le mélange type "titre".

Vous êtes prêt à découvrir un autre type de pipe ? Suivez-moi au prochain chapitre !

Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous
Exemple de certificat de réussite
Exemple de certificat de réussite