Publicado em por Thiago Adriano

Angular: Criação de Pipes

Introdução

Para quem ainda não conhece as pipes do Angular, elas são uma maneira elegante de realizarmos transformações no nosso front-end. Com ela nos podemos criar funções ou filtros (como ela é chamado no inglês), que podem ser utilizadas em qualquer parte do template do nosso projeto. Para que você possa ter um entendimento melhor, irei criar um exemplo de uma pipe que nos auxilie com o problema “unsafe” de URL’s externas.

Criação do projeto

Para esse artigo, eu não irei abordar os passos para criação de um projeto, irei partir de um já criado com Angular cli. Caso ainda não tenha o Angular Cli instalado e queira saber mais sobre esse passo, segue link de um artigo onde eu demonstro esse tema Angular Cli Scaffold. Para quem tiver interesse, eu irei disponibilizar o link do projeto que utilizaremos no final desse artigo.

Pipes

O Angular já nos prove algumas pipes para utilização como: date, uppercase, lowercase … etc mas na maioria das vezes nós precisamos de algo mais complexo. Para que possamos criar a nossa pipe, nos iremos utilizar o command line do Angular cli. Para isso, execute o comando abaixo no seu terminal/CMD.

ng generate pipe [name]

Nesse artigo eu dei o nome de Safe. Esse comando irá gerar um novo arquivo chamado safe.pipe.ts. Vamos atualizar ele com o seguinte código:

import { Pipe, PipeTransform } from '@angular/core';
/*Carregando o pacote DomSanitizer, ele auxilia com o Cross Site Scripting Security.*/
import { DomSanitizer } from "@angular/platform-browser";

@Pipe({
    name: 'safe'
})

export class SafePipe implements PipeTransform {
    /*Injetando o DomSanitizer no nosso componente.*/
    constructor(private _sanitizer: DomSanitizer) { }

    /*Criando um método que recebe uma URL, em seguida nós retornamos ele passando pelo método bypassSecurityTrustResourceUrl, dessa forma a nossa aplicação passa a acreditar (remover o erro unsafe) da nossa console.*/
    transform(url) {
        return this._sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

Caso você queria entender melhor a classe DomSanitizer, segue um link para sua documentação oficial DomSanitizer Docs.

Testando

Para que possamos testar a nossa Pipe, iremos utilizar o Iframe de vídeos do Youtube. Para isso, iremos atualizar o nosso AppComponent com os códigos abaixo:

app.component.html

<iframe width="500" height="400" [src]="video | safe"></iframe>

app.component.html

export class AppComponent {
    title = 'app';
    video: string = "https://www.youtube.com/embed/Ckom3gf57Yw"
}

Bom, com isso nos finalizamos esse post, caso tenha interesse na versão final do projeto, segue o seu link no GitHub.

Deixe um comentário