Pipes in Angular est l’une des expressions que vous rencontrerez souvent lorsque vous créez des interfaces utilisateur à l’aide d’Angular. Que sont-ils et comment fonctionnent-ils ?
Angular fait partie du top 5 des frameworks et technologies Web les plus recherchés, basés sur le Enquête StackOverflow.
L’architecture modulaire fait d’Angular un favori des développeurs, leur permettant de diviser l’application en petits composants réutilisables. Une base de code modulaire est facile à maintenir et améliore également la collaboration. La liaison de données bidirectionnelle, la compatibilité entre navigateurs, ainsi que le grand écosystème et la communauté sont d’autres raisons pour lesquelles Angular fait partie des meilleurs frameworks front-end.
Cet article explique ce que sont les tuyaux dans Angular, leurs cas d’utilisation, les différents types de tuyaux intégrés et comment créer des tuyaux personnalisés dans Angular.
Que sont les tuyaux en angulaire?
Les tuyaux sont une fonctionnalité d’Angular qui transforme et formate les données dans une application. Les tuyaux prennent simplement une valeur en entrée et renvoient une valeur transformée en sortie. La transformation varie et peut être aussi simple que transformer une devise ou une date ou trier ou filtrer des éléments d’une liste.
Les canaux sont conçus pour améliorer l’expérience utilisateur en transformant les données et en renvoyant des valeurs que les utilisateurs peuvent consommer et avec lesquelles interagir facilement. Les tuyaux dans Angular peuvent être intégrés ou personnalisés. Quel que soit le type, voici quelques-unes des raisons pour lesquelles vous devriez utiliser des tuyaux dans Angular :
- Transformer les données : c’est l’utilisation principale de Pipes in Angular. Les tuyaux sont là pour transformer les données afin que ce qui est affiché aux utilisateurs soit lisible.
- Lisibilité et maintenabilité du code : la plupart des applications sont créées grâce à la collaboration. À ce titre, vous devez vous assurer que les autres membres de l’équipe comprennent votre code. Les tuyaux rendent votre code plus concis et plus facile à maintenir.
- Localisation : vous pouvez localiser les données en fonction du marché cible. Par exemple, il existe différents formats de date. Ainsi, vous pouvez utiliser DatePipe pour formater les données en fonction des paramètres régionaux des utilisateurs.
- Tri et filtrage des données : vous pouvez utiliser OrderPipe ou FilterPipe pour trier ou filtrer vos données.
Types de tuyaux intégrés en angulaire
Angular a divers tuyaux intégrés conçu à des fins différentes. Ce sont des exemples de ceux que vous rencontrerez au cours de votre parcours de développement.
- PercentPipe : C’est le canal à utiliser lorsque vous souhaitez transformer un nombre en chaîne de pourcentage.
- DatePipe : il s’agit du canal à utiliser pour formater une valeur de date en fonction des règles locales.
- LowerCasePipe : transformez tout votre texte en minuscules à l’aide de ce tube.
- UpperCasePipe : Vous pouvez utiliser ce tube lorsque vous souhaitez mettre tout votre texte en majuscules.
- CurrencyPipe : C’est un choix parfait lorsque vous souhaitez modifier un nombre en une chaîne monétaire basée sur les règles locales.
- DecimalPipe : ce canal utilise des règles locales pour transformer un nombre en chaîne avec un point décimal.
Créer des tuyaux personnalisés dans Angular
Nous avons vu les tuyaux intégrés et leurs cas d’utilisation. Cependant, Angular prend en charge les tuyaux personnalisés. De tels tuyaux sont importants lorsque vous souhaitez réaliser quelque chose que les tuyaux intégrés ne peuvent pas réaliser. De tels tuyaux vous permettent d’étendre les fonctionnalités de votre application.
Conditions préalables
Avant de commencer à créer des tuyaux personnalisés dans Angular, vous avez besoin des éléments suivants :
- Environnement d’exécution Node.js pour votre application Angular. Tu peux télécharger Node.js si vous ne l’avez pas.
- Compréhension du fonctionnement d’Angular
- CLI angulaire pour créer votre application et exécuter différentes commandes. Vous pouvez l’installer à l’aide de cette commande ;
npm install -g @angular/cli
Suivez ces étapes pour créer un Pipe personnalisé dans Angular :
#1. Créez un nouveau projet angulaire. Vous pouvez utiliser cette commande pour commencer :
ng de nouveaux tuyaux
#2. Changez le répertoire dans votre application créée et ouvrez-la dans votre éditeur de code préféré. J’utilise VsCode. Vous pouvez exécuter ces commandes
tuyaux cd && code.
Votre dossier de projet sera similaire à ceci ;
#3. Créez un canal personnalisé. Vous pouvez utiliser cette commande pour générer un nouveau canal personnalisé :
ng générer un tuyau personnalisé
Si vous vérifiez votre dossier de projet, vous remarquerez que ces deux fichiers ont été créés :
src/app/custom-pipe.pipe.spec.ts
src/app/custom-pipe.pipe.ts
#4. Définir la logique du canal
Ouvrez le fichier custom-pipe.pipe.ts et vous trouverez ce code :
Nous pouvons maintenant créer une logique simple dans laquelle notre canal personnalisé est ajouté à une chaîne.
Vous pouvez modifier le contenu de votre fichier pour qu’il soit :
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'customPipe'
})
export class CustomPipePipe implements PipeTransform {
transform(value: string): string[] {
return value.split('');
}
}#5. Enregistrez le canal personnalisé. Ouvrez le fichier app.module.ts et vérifiez que vous avez @NgModule puis les décorations.
Confirmez que ce fichier contient ce code ;
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CustomPipePipe } from './custom-pipe.pipe';
@NgModule({
declarations: [
AppComponent,
CustomPipePipe
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }#6. Ouvrez app.component.html, supprimez tout le contenu et ajoutez cette ligne ;
<header>{{ '12345' | customPipe }}</header>Exécutez le serveur à l’aide de cette commande ;
ng servir
C’est ce qui sera affiché sur votre navigateur ;
Comment chaîner des tuyaux en angulaire
Le chaînage de tuyaux vous permet d’effectuer plusieurs opérations avec une seule expression. Nous utilisons l’opérateur de tuyau ( | ) pour combiner différents tuyaux dans Angular.
Nous pouvons enchaîner les canalisations pour les raisons suivantes :
- Les canaux chaînés favorisent la réutilisabilité et la modularité du code : vous pouvez configurer chaque canal pour effectuer une transformation spécifique que vous pouvez réutiliser dans votre application.
- Maintenez un code propre : les modèles de chaînage vous permettent de garder votre code concis, propre et lisible.
- Personnalisation : le chaînage de canalisations vous permet de combiner des canalisations personnalisées et intégrées et de les personnaliser en fonction de vos besoins.
- Transformations complexes : au lieu de définir un canal pour effectuer plusieurs transformations, vous pouvez configurer plusieurs canaux pour réaliser des transformations complexes.
Vous pouvez enchaîner votre tuyau personnalisé avec un autre ou un tuyau intégré. Je peux enchaîner le canal que nous avons créé précédemment, customPipe, avec un canal minuscule intégré. Voici comment nous pouvons procéder :
<p>{{ dataValue | customPipe | lowercase }}</p>Tuyaux purs ou impurs
Il existe deux types de tuyaux dans Angular : les tuyaux purs et impurs
Pipes pures
Les tuyaux dans Angular sont purs par défaut. Un tube pur devrait renvoyer la même sortie pour la même entrée. Un tel canal devrait être déterministe et apatride.
Le mécanisme de détection des changements d’Angular optimise automatiquement les tuyaux purs. Angular ne réexécute pas la transformation de tube à moins que l’entrée d’un tube pur ne change.
C’est ainsi que vous déclarez une pipe comme pure ;
@Pipe({
name: 'uppercase',
pure: true
})
export class UppercasePipe {
transform(value: string): string {
return value.toUpperCase();
}
}Comme vous pouvez le voir, nous avons défini la propriété pure du décorateur @Pipe sur true.
Tuyaux impurs
Un tube impur s’exécutera chaque fois qu’Angular détectera un changement. Un tel changement ne doit pas nécessairement provenir des intrants. Les tuyaux impurs conviennent aux situations qui nécessitent l’accès à l’état actuel de l’application. Accéder à une base de données ou effectuer une requête HTTP sont de parfaits exemples d’utilisation de canaux impurs.
Voici un exemple de tuyau impur :
@Pipe({
name: 'sort',
pure: false
})
export class SortPipe {
transform(array: any[]): any[] {
return array.sort();
}
}Comme vous pouvez le voir, nous avons défini la propriété pure du décorateur @Pipe sur false, rendant notre pipe impure.
Créer des tuyaux dans Angular : meilleures pratiques
- camelCase vos pipes : Si vous l’avez noté, j’ai nommé ma pipe customPipe. Utilisez toujours cette approche si votre pipe contient plus d’un mot.
- Testez vos tuyaux : la création d’un tuyau ne garantit pas qu’il fonctionnera. Testez toujours vos tuyaux pour vous assurer qu’ils fonctionnent comme prévu. Vous pouvez automatiser ce processus à l’aide de diverses bibliothèques.
- Évitez les tubes complexes : vous souhaiterez peut-être qu’un tube effectue plusieurs actions. Cependant, ce n’est pas une bonne approche et la meilleure pratique consiste à créer différents canaux pour effectuer différentes actions.
- Utilisez des tubes purs : un tube pur renverra toujours la même sortie à partir de la même entrée. Angular peut mettre en cache les résultats pour les tuyaux purs, ce qui entraîne une amélioration des performances et du temps de réponse.
FAQ
Pourquoi avons-nous besoin de tuyaux en angulaire ?
Les tuyaux transforment et formatent les données dans une application. Les tuyaux prennent une valeur en entrée et renvoient une valeur transformée en sortie. La transformation varie et peut être aussi simple que transformer une devise ou une date ou trier ou filtrer des éléments d’une liste.
Qu’est-ce qu’un tuyau sur mesure ?
Il s’agit d’un canal défini par l’utilisateur que vous créez pour effectuer des transformations personnalisées. Vous pouvez combiner une canalisation personnalisée avec des canalisations intégrées via le chaînage de canalisations.
Donnez des exemples de tuyaux intégrés dans Angular.
DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe et PercentPipe
Qu’est-ce que le chaînage de canalisations ?
Le chaînage de tuyaux est le processus de combinaison de plusieurs chaînes. Le chaînage de tuyaux vous permet d’effectuer plusieurs opérations avec une seule expression. Nous utilisons l’opérateur de tuyau ( | ) pour combiner différents tuyaux dans Angular. Vous pouvez enchaîner des tuyaux personnalisés avec d’autres ou les enchaîner avec des tuyaux intégrés
Conclusion
Nous pensons que vous pouvez désormais décrire les tuyaux lors de votre prochain entretien, car il s’agit d’une question régulière dans la foire aux questions angulaires. Nous avons également couvert les différents tuyaux intégrés et comment créer des tuyaux personnalisés dans Angular.
Les tuyaux personnalisés seront utiles lorsque vous souhaitez répondre à des besoins spécifiques ou rendre votre application plus dynamique. Cependant, vous devez comprendre comment Angular fonctionne sous le capot pour créer et utiliser des tuyaux personnalisés.
Vous pouvez également explorer certaines bibliothèques d’interface utilisateur angulaire pour créer une expérience utilisateur de classe mondiale.