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 !
