Passo a passo: criando pipe personalizado no Angular

Angular pipes pegam dados como entrada e os transformam na saída desejada. Por exemplo, usando a interpolação, você está exibindo o nome do produto. Agora você deseja que o nome do produto seja sempre exibido em maiúsculas. Você pode fazer isso usando Angular maiúsculas de tubo.

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `{{productName | uppercase}}`
})
export class AppComponent {
    productName = 'Cricket Bat';
}

No componente acima, productName será exibido em maiúsculas. Portanto, o pipe pega uma entrada e a transforma na saída desejada, conforme mostrado abaixo:

Angular biblioteca nos fornece muitos pipes embutidos como,

• UpperCasePipe
• LowerCasePipe
• Tubo de Moeda
• PercentPipe
• DatePipe etc.

Vejamos como poderíamos usar o pipe de moeda embutido.

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `{{productName | uppercase}} = {{productPrice | currency}}`
})
export class AppComponent {
    productName = 'Cricket Bat';
    productPrice = 990;
}

Você também pode passar parâmetros para uma tubulação usando os dois-pontos. Você pode passar a entrada para o pipe de moeda, conforme mostrado abaixo:

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `{{productName | uppercase}} = {{productPrice | currency:'CAD':'symbol-narrow':'4.2-2'}}`
})
export class AppComponent {
    productName = 'Cricket Bat';
    productPrice = 990;
}

Embora Angular forneça muitos pipes padrão, pode haver requisitos quando você cria pipes personalizados. Criar um pipe personalizado é tão simples quanto criar uma função.  Digamos que queremos criar um pipe, que colocará em maiúscula a primeira letra de cada palavra em uma string.

Consider below component,

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `
  <ul *ngFor='let n of names'>
   <li>{{n.name}}</li>
  </ul>
  `
})
export class AppComponent {
 
    names = [];
    constructor() {
        this.names = this.getNames();
    }
    getNames() {
        return [
            { 'name': 'dhananjay Kumar' },
            { 'name': 'jason beres' },
            { 'name': 'adam jafe' }
        ];
    }
}

Este componente imprimirá os nomes conforme abaixo:

Agora queremos colocar em maiúscula a primeira letra de cada palavra do nome. Para fazer isso, precisamos escrever um pipe personalizado.  Para criar um pipe, você precisa seguir estas etapas:

1. Create a class
2. Implementa PipeTransform na classe
3. Implement transform function

Assim, você pode criar um pipe para capitalizar o primeiro caractere, conforme mostrado na listagem abaixo:

import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({ name: 'firstcharcateruppercase' })
export class FirstCharacterUpperCase implements PipeTransform {
    transform(value: string, args: string[]): any {
        if (!value) {
            return value;
        }
        return value.replace(/\w\S*/g, function (str) {
            return str.charAt(0).toUpperCase() + str.substr(1).toLowerCase();
        });
    }
}

Como você pode ver, os pipes personalizados nada mais são do que uma função que recebe parâmetros de entrada e retorna algum valor. Você precisa escrever toda a lógica do pipe dentro do método de transformação.

Para usar o primeiro caractere de barra maiúscula, primeiro você precisa declará-lo no módulo, conforme mostrado abaixo:

import { FirstCharacterUpperCase } from './firstcharacteruppercase.pipe'
 
@NgModule({
    declarations: [
        AppComponent, FirstCharacterUpperCase
    ],

Em seguida, no componente, você pode usá-lo como abaixo:

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `
  <ul *ngFor='let n of names'>
   <li>{{n.name | firstcharcateruppercase}}</li>
  </ul>
  `
})
export class AppComponent {
 
    names = [];
    constructor() {
        this.names = this.getNames();
    }
    getNames() {
        return [
            { 'name': 'dhananjay Kumar' },
            { 'name': 'jason beres' },
            { 'name': 'adam jafe' }
        ];
    }
}

Agora você obterá na saída o primeiro caractere de cada nome em maiúsculas.

To summarize:

1. Os tubos personalizados são de classe, que é decorado com @Pipe
2. A propriedade Name do decorador @Pipe define o nome do pipe
3. A classe Pipe deve implementar a interface PipeTransform

Ele deve implementar a lógica de negócios de pipe dentro do método de transformação.

Existem dois tipos de tubos

1. Pipes sem estado
2. Pipes com estado

O que usamos e criamos acima são pipes sem estado. São funções puras, que recebem uma entrada e retornam valores transformados.

Os pipes com estado são complexos de implementar e lembram o estado dos dados que transformam. Normalmente, eles criam uma solicitação HTTP, armazenam a resposta e exibem a saída. Angular pipe assíncrono embutido é um exemplo de pipe stateful. Em outras postagens, aprenderemos a criar pipes stateful personalizados.

Summary

Neste post, aprendemos sobre tubos em Angular. Os pipes transformam dados de entrada na saída desejada. Angular fornece muitos tubos embutidos; no entanto, pode haver requisitos para escrever pipes personalizados. Existem dois tipos de pipes: pipes stateless e stateful pipes.

Gostou deste post?

E aí está! Se você gostou deste post, por favor, compartilhe-o. Além disso, se você ainda não fez check-out Infragistics Ignite UI for Angular Componentes, certifique-se de fazê-lo! Eles têm 30+ componentes de Angular baseados em material para ajudá-lo a codificar aplicativos da web rápidos com mais rapidez.