Desenvolvimento

8 dez, 2017

Angular: Criação de Pipes

Publicidade
Angular  –  (Pipes)

Introdução

Para quem ainda não conhece as pipes do Angular, elas são uma maneira elegante de realizarmos transformações em nosso front-end. Com ela nos podemos criar funções ou filtros (como é chamado no inglês), que podem ser utilizadas em qualquer parte do template do nosso projeto. Para que você possa ter um melhor entendimento, 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, 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, disponibilizarei o link do projeto que utilizaremos no final deste artigo.

Pipes

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

ng generate pipe [name]

Neste artigo, 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';
import { DomSanitizer } from "@angular/platform-browser";

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {
  constructor(private _sanitizer: DomSanitizer) { }

  transform(url) {
    return this._sanitizer.bypassSecurityTrustResourceUrl(url);
  }

}

Vamos entender o código acima:

02: Estamos carregando o pacote DomSanitizer. Ele nos auxilia com o problema de Cross Site Scripting Security. Caso você queria entender melhor essa classe, segue um link para sua documentação oficial DomSanitizer Docs.

08: Estamos injetando o DomSanitizer em nosso componente.

10: Estamos criando um método que recebe uma URL e em seguida retornamos ele passando pelo método bypassSecurityTrustResourceUrl. Dessa forma, a nossa aplicação passa a acreditar (remover o erro unsafe) do nosso console.

Testando

Para testarmos nossa Pipe, utilizaremos o iframe de vídeos do Youtube. Para isso, atualizaremos o nosso AppComponent com os códigos abaixo:

app.component.html

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

app.component.ts

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

}

Podemos ver abaixo o resultado da nossa implementação:

Bom, com isso nós finalizamos esse artigo, caso tenha interesse na versão final do projeto, segue o seu link no GitHub.