Facilitez la transformation des données dans les applications angulaires à l'aide des canaux angulaires.
Les tuyaux dans Angular permettent aux utilisateurs de transformer les données avant qu'elles ne soient affichées dans la vue. Les canaux sont similaires aux filtres dans d'autres langages de programmation, mais sont plus flexibles et peuvent être personnalisés pour répondre à des besoins spécifiques. Ici, vous allez découvrir comment utiliser les pipes dans votre application Angular.
Que sont les tuyaux en angulaire?
Les pipes angulaires sont des transformateurs de données qui rendent votre application plus dynamique. Ils prennent une valeur en entrée et renvoient une valeur transformée en sortie. La transformation des données peut être aussi simple que le formatage d'une date ou d'une devise, ou aussi complexe que le filtrage ou le tri d'une liste d'éléments.
Vous pouvez utiliser les tuyaux dans vos composants angulaires et vos modèles. Les tuyaux sont faciles à utiliser et vous pouvez les enchaîner pour créer des transformations plus complexes.
Angular fournit plusieurs tuyaux intégrés, y compris DatePipe, UpperCasePipe, LowerCasePipe, MonnaiePipe, DécimalPipe, PourcentPipe, JsonPipe, TrancheTuyau, et AsyncPipe. Il fournit également la fonctionnalité permettant de créer des canaux personnalisés.
Chaque tube angulaire intégré remplit une fonction unique et peut vous aider à transformer des données.
DatePipe
Le DatePipe formats et affichages vos variables de date et d'heure dans un format spécifié, en tenant compte de vos paramètres régionaux. Contrairement à d'autres cadres qui nécessitent Packages JavaScript pour formater la date et l'heure, Angular utilise le DatePipe. Utiliser DatePipe dans votre application, ajoutez le symbole pipe (|) suivi de date et tous les paramètres supplémentaires.
Par exemple:
<p>Today's date is {{ currentDate | date }}p>
Dans cet exemple, vous passez le date actuelle variable à travers le DatePipe, qui le formate ensuite selon le format de date par défaut. Vous définissez le date actuelle variable dans le fichier TypeScript de votre composant.
Voici un exemple:
import { Component } from'@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
exportclass AppComponent {
currentDate: any = newDate();
}
Vous pouvez également passer des paramètres supplémentaires au DatePipe pour personnaliser la sortie :
<p>Today's date is {{ currentDate | date:'shortDate' }}p>
Le bloc de code ci-dessus a passé le date courte paramètre au DatePipe. Cela raconte le DatePipe pour formater la date en utilisant le format de date courte. A côté de la date courte paramètre, vous pouvez configurer le DatePipe à l'aide de divers paramètres, y compris z, longueDate, et des formats de date personnalisés tels que jj/MM/AA.
UpperCasePipe et LowerCasePipe
Le UpperCasePipe et LowerCasePipe transformer vos textes. Vous transformez vos textes en majuscules à l'aide de la UpperCasePipe et minuscules à l'aide de la LowerCasePipe.
Pour utiliser le UpperCasePipe et LowerCasePipe, ajoutez le symbole pipe (|) suivi de minuscule utiliser le LowerCasePipe ou majuscule utiliser le UpperCasePipe.
Vous trouverez ci-dessous un exemple d'utilisation du UpperCasePipe et LowerCasePipe:
<p>{{ message | uppercase}}p>
<p>{{ message | lowercase}}p>
MonnaiePipe
En utilisant le MonnaiePipe, vous pouvez formater les nombres dans une devise dans votre application. Le MonnaiePipe formate les nombres en fonction de vos paramètres régionaux. Pour formater vos nombres à l'aide de la MonnaiePipe, utilisez le symbole pipe suivi de devise.
Par exemple:
<p>{{ number | currency }}p>
Dans cet exemple, le MonnaiePipe convertit la variable numérique en devise. Par défaut, le MonnaiePipe convertit les variables en dollars. Pour changer cela, vous pouvez configurer le MonnaiePipe pour convertir dans d'autres devises en passant des paramètres supplémentaires.
Voici un exemple:
<p>{{ number | currency: 'GBP' }}p>
Ici, vous passez le GBP paramètre au MonnaiePipe. Cela garantit que le nombre la variable est convertie dans la devise Livre britannique.
DecimalPipe et PercentPipe
Le DécimalPipe transforme vos nombres en décimales, tandis que le PourcentPipe convertit vos nombres en pourcentages.
Pour utiliser le DécimalPipe, utilisez le symbole pipe suivi de nombre et des paramètres supplémentaires. Pour utiliser le PourcentPipe, faites de même mais remplacez le nombre avec pour cent sans paramètres supplémentaires.
Par exemple:
<p>{{ number | number: '1.2-3' }}p>
<p>{{ number | percent }}p>
Les paramètres supplémentaires passés au DécimalPipe contrôler le nombre de chiffres entiers et fractionnaires affichés. Le 1 Le paramètre spécifie qu'il doit y avoir au moins un chiffre entier. En comparaison, le 2.3 Le paramètre spécifie qu'il doit y avoir au moins deux et jusqu'à trois chiffres fractionnaires.
JsonPipe
Le JsonPipe est un tube intégré qui convertit les données dans un format de chaîne JSON. Il est principalement utilisé à des fins de débogage. Vous pouvez utiliser le JsonPipe sur les objets et les tableaux.
La syntaxe d'utilisation du JsonPipe est comme suit:
{{ expression | json }}
Ici, expression sont les données que vous souhaitez convertir au format JSON. L'opérateur pipe (|) applique le JsonPipe à l'expression.
Par exemple, définissez un objet et un tableau dans votre composant :
import { Component } from"@angular/core";@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
})exportclass AppComponent {
user: data = {
firstname: "John",
lastname: "Doe",
};profiles: data[] = [
{
firstname: "John",
lastname: "Doe",
},
{
firstname: "Peter",
lastname: "Parker",
},
];
}
interface data {
firstname: string;
lastname: string;
}
Le bloc de code ci-dessus définit un utilisateur objet et un profils tableau. Maintenant, vous pouvez utiliser le JsonPipe pour convertir l'objet et le tableau en JSON.
<p>{{ user | json}}p>
<p>{{ profiles | json}}p>
Ici le JsonPipe convertira le utilisateur objet et le profils tableau dans une chaîne JSON, que vous pouvez rapidement inspecter dans vos modèles pendant le développement ou le débogage.
TrancheTuyau
Le TrancheTuyau est très similaire au JavaScript tranche() méthode. Le TrancheTuyau formate des tableaux ou des chaînes en extrayant leurs éléments pour créer de nouveaux tableaux ou chaînes.
Pour utiliser le TrancheTuyau, vous utilisez le symbole pipe suivi de tranche et deux paramètres, les index de début et de fin. L'index de début est la position dans le tableau ou la chaîne où le tube commencera à extraire des éléments, et l'index de fin est l'endroit où le tube arrêtera d'extraire des éléments.
Voici un exemple d'utilisation du TrancheTuyau:
<p>{{ string | slice: 0:2}}p>
<p>{{ array | slice: 0:1}}p>
Dans cet exemple, le TrancheTuyau va extraire les deux premiers éléments de la chaîne variable, l'élément à l'indice 0 et l'élément à l'indice 1. De plus, il extraira le premier élément du déployer variable. Le TrancheTuyau est utile lorsque vous souhaitez afficher uniquement une partie des données dans le modèle.
AsyncPipe
AsyncPipe est un tube angulaire intégré qui s'abonne et se désabonne automatiquement à un observable ou à une promesse. Il renvoie la dernière valeur émise par l'Observable ou la Promise.
La syntaxe d'utilisation AsyncPipe est comme suit:
{{ expression | async }}
Ici, l'expression est l'Observable ou la Promesse à laquelle vous souhaitez vous abonner.
Par exemple:
let numbers = of(1, 2, 3, 4, 5);
Vous pouvez utiliser AsyncPipe pour s'abonner à cet Observable et afficher la dernière valeur émise comme ceci :
<p>{{ numbers | async }}p>
Ce bloc de code affichera le dernier numéro émis par l'Observable. AsyncPipe est très utile lors de la gestion d'opérations asynchrones dans vos modèles. Il s'abonne automatiquement à Observable ou Promise lorsque le composant s'initialise et se désabonne lorsqu'il est détruit.
Chaînage de tuyaux en angulaire
Vous pouvez enchaîner des canaux pour effectuer plusieurs transformations dans une seule expression. Le chaînage de tubes est aussi simple que d'utiliser plusieurs opérateurs de tube (|) dans une seule expression. La sortie de chaque tube devient l'entrée du suivant.
Voici la syntaxe de base :
<p>{{ expression | pipe1 | pipe2 |... }}p>
Par exemple, vous pouvez transformer un objet date en une chaîne à l'aide de la DatePipe puis convertissez cette chaîne en majuscule à l'aide de la UpperCasePipe.
<p>Today's date is {{ currentDate | date:'shortDate' | uppercase }}p>
Créer des applications dynamiques à l'aide de canaux
Les tuyaux sont une fonctionnalité puissante d'Angular qui vous permet de transformer les données avant qu'elles ne s'affichent dans la vue. Ici, vous avez découvert les différents tuyaux intégrés proposés par Angular, tels que DatePipe, CurrencyPipe, UpperCasePipe, etc. Vous avez également appris à les utiliser dans votre application pour créer un contenu plus dynamique. À l'aide de canaux, les développeurs peuvent créer des applications Web plus flexibles et dynamiques avec moins de code.
