Angular 2 - Tuyaux personnalisés

Angular 2 a également la possibilité de créer des tuyaux personnalisés. La manière générale de définir un tuyau personnalisé est la suivante.

import { Pipe, PipeTransform } from '@angular/core';  
@Pipe({name: 'Pipename'}) 

export class Pipeclass implements PipeTransform { 
   transform(parameters): returntype { } 
}

Où,

• 'Pipename' - C'est le nom du tuyau.

• Pipeclass - Il s'agit du nom de la classe affectée au tube personnalisé.

• Transform - C'est la fonction pour travailler avec le tuyau.

• Parameters - Ce sont les paramètres qui sont passés au tuyau.

• Returntype - Il s'agit du type de retour du tuyau.

Créons un tube personnalisé qui multiplie 2 nombres. Nous utiliserons ensuite ce tube dans notre classe de composants.

Step 1 - Commencez par créer un fichier appelé multiplier.pipe.ts.

Step 2 - Placez le code suivant dans le fichier créé ci-dessus.

import { 
   Pipe, 
   PipeTransform 
} from '@angular/core';  

@Pipe ({ 
   name: 'Multiplier' 
}) 

export class MultiplierPipe implements PipeTransform { 
   transform(value: number, multiply: string): number { 
      let mul = parseFloat(multiply); 
      return mul * value 
   } 
}

Les points suivants doivent être notés à propos du code ci-dessus.

• Nous importons d'abord les modules Pipe et PipeTransform.

• Ensuite, nous créons un Pipe avec le nom «Multiplicateur».

• Création d'une classe appelée MultiplierPipe qui implémente le module PipeTransform.

• La fonction de transformation prendra alors la valeur et le paramètre multiple et produira la multiplication des deux nombres.

Step 3 - Dans le fichier app.component.ts, placez le code suivant.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: '<p>Multiplier: {{2 | Multiplier: 10}}</p>' 
}) 
export class AppComponent {  }

Note - Dans notre modèle, nous utilisons notre nouveau tuyau personnalisé.

Step 4 - Assurez-vous que le code suivant est placé dans le fichier app.module.ts.

import {
   NgModule
} from '@angular/core';

import {
   BrowserModule
} from '@angular/platform-browser';

import {
   AppComponent
} from './app.component';

import {
   MultiplierPipe
} from './multiplier.pipe'

@NgModule ({
   imports: [BrowserModule],
   declarations: [AppComponent, MultiplierPipe],
   bootstrap: [AppComponent]
})

export class AppModule {}

Les choses suivantes doivent être notées à propos du code ci-dessus.

• Nous devons nous assurer d'inclure notre module MultiplierPipe.

• Nous devons également nous assurer qu'il est inclus dans la section des déclarations.

Une fois que vous avez enregistré toutes les modifications de code et actualisé le navigateur, vous obtiendrez la sortie suivante.