Angular 2 - tubos personalizados

O Angular 2 também possui a facilidade de criar tubos personalizados. A maneira geral de definir um tubo personalizado é a seguinte.

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

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

Onde,

• 'Pipename' - Este é o nome do tubo.

• Pipeclass - Este é o nome da classe atribuída ao canal personalizado.

• Transform - Esta é a função para trabalhar com o tubo.

• Parameters - Estes são os parâmetros que são passados ​​para o tubo.

• Returntype - Este é o tipo de retorno do tubo.

Vamos criar um tubo personalizado que multiplica 2 números. Em seguida, usaremos esse tubo em nossa classe de componente.

Step 1 - Primeiro, crie um arquivo chamado multiplier.pipe.ts.

Step 2 - Coloque o seguinte código no arquivo criado acima.

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

Os seguintes pontos precisam ser observados sobre o código acima.

• Estamos primeiro importando os módulos Pipe e PipeTransform.

• Então, estamos criando um Pipe com o nome 'Multiplicador'.

• Criação de uma classe chamada MultiplierPipe que implementa o módulo PipeTransform.

• A função de transformação então pegará o valor e parâmetro múltiplo e produzirá a multiplicação de ambos os números.

Step 3 - No arquivo app.component.ts, coloque o seguinte código.

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

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

Note - Em nosso modelo, usamos nosso novo tubo personalizado.

Step 4 - Certifique-se de que o código a seguir seja colocado no arquivo 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 {}

As coisas a seguir precisam ser observadas sobre o código acima.

• Precisamos garantir a inclusão de nosso módulo MultiplierPipe.

• Também precisamos garantir que ele seja incluído na seção de declarações.

Depois de salvar todas as alterações de código e atualizar o navegador, você obterá a seguinte saída.