• 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 13/06/2022

Changez la casse

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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. Par exemple, si vous voulez afficher le titre des FaceSnap en majuscules, vous appliquez UpperCasePipe :

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

Exemple de certificat de réussite
Exemple de certificat de réussite