Olá,

Neste post vamos ver como implementar um pipe e alguns detalhes de sua implementação

Vamos criar um exemplo bem simples que irá transformar a quebra de linha (\n) em "<br />", bem simples, porém útil em muitos cenários.

Mãos à obra!

Em primeiro lugar vamos gerar o código básico do pipe através da linha de comando:

ng generate pipe <caminho/nomePipe>

ou a versão abreviada do comando

ng g p <caminho/nomePipe>

O nosso exemplo será criar o pipe dentro do módulo pipes de nossa app (github)

ng g p pipes/nl2br

este comando irá gerar o pipe e também declará-lo dentro do modulo-pipes, porém, para que o pipe seja utilizado em outros módulos temos também que exportá-lo incluindo dentro do array "exports" na configuração do módulo "pipes.module.ts"

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Nl2brPipe } from './nl2br.pipe';

@NgModule({
imports: [
CommonModule
],
declarations: [Nl2brPipe],
exports: [Nl2brPipe]
})
export class PipesModule { }

Agora vamos entender o que foi gerado no arquivo "pipes/nl2br.pipe.ts"

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

@Pipe({
name: 'nl2br'
})
export class Nl2brPipe implements PipeTransform {

transform(value: any, args?: any): any {
return null;
}

}

na linha 1 vemos os imports necessários "Pipe" e "PipeTransform" do pacote "@angular/core"
Pipe irá fornecer o decorator "@Pipe" e "@PipeTransform" contém a Interface q qual iremos implementar o método transform, aqui que a nóssa lógica deverá ser implementada.

Note que a método transforme possui o parâmetro value do tipo "any", este representa o valor que será utilizado como entrada para o pipe (ex.: {{ "texto" | nl2br }} ), já o parâmetro args é opcional, caso necessite mais parâmetros, será possivel incluí-los na sequência (ex.: transform(value:any, args?:any, args2:any[, .....]));

O decorator "@Pipe", na linha 3, possui a propriedade "name", que  tem papel semelhante a um "selector" pois será utilizado dentro do código html nos templates onde o pipe for utilizado.

Como nosso pipe implenta a interface "PipeTransform", devemos implementar o método "transform"

transform(value: any, args?: any): any {
if (value)
return value.replace(/\n/gi, '<br />\n');
return null;
}

O arquivo completo

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

@Pipe({
name: 'nl2br'
})
export class Nl2brPipe implements PipeTransform {

transform(value: any, args?: any): any {
if (value)
return value.replace(/\n/gi, '<br />\n');
return null;
}

}

para verificar o funcionamento do nosso pipe precisamos criar um compoenente dentro do módulo exemplos

ng g c exemplos/customPipe

editar o arquivo "exemplos/custom-pipe/custom-pipe.html"

<h1>Pipes</h1>
<hr>
<div class="container-fluid">
  <h2>Exemplos - custom pipe</h2>
  <table class="table">
    <thead>
      <tr>
        <th>pipe</th>
        <th>sem formatação</th>
        <th>formatado</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>nl2br</td>
        <td>{{texto}}</td>
        <td [innerHtml]="texto | nl2br"></td>
      </tr>
    </tbody>
  </table>
  <hr />
</div>

excutando a app teremos  como resultado