Angular Academy · Aula

Usando pipes integrados

Formate datas, números e textos com pipes.

Usando pipes integrados é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

O que é um pipe?

Um pipe transforma dados diretamente no seu modelo para exibição. Você escreve um valor, o caractere de pipe | e, em seguida, o nome do pipe.

Os pipes são excelentes para formatar datas, números, moedas e textos sem escrever lógica adicional no componente.

A sintaxe de pipe

A forma básica é {{ value | pipeName }}. O Angular passa o valor para o pipe e renderiza o resultado transformado.

<!-- template -->
<p>{{ "hello" | uppercase }}</p>
<!-- renders: HELLO -->

Os pipes uppercase e lowercase

uppercase e lowercase alteram maiúsculas e minúsculas de uma string. Eles são simples e usados com frequência em rótulos e títulos.

@Component({
  selector: "app-demo",
  template: "<p>{{ name | uppercase }}</p>"
})
export class DemoComponent {
  name = "angular";
}
// renders: ANGULAR

O pipe date

O pipe date formata um objeto Date ou um carimbo de data e hora em uma string legível. Por padrão, ele usa um formato de data médio.

<p>{{ today | date }}</p>
<!-- e.g. May 30, 2026 -->

// component
today = new Date();

Formatando datas

Você pode passar uma string de formato para o pipe date, como "shortDate", "fullDate" ou um padrão personalizado, como "yyyy-MM-dd".

<p>{{ today | date:"yyyy-MM-dd" }}</p>
<!-- e.g. 2026-05-30 -->

<p>{{ today | date:"shortTime" }}</p>
<!-- e.g. 2:30 PM -->

O pipe currency

O pipe currency formata um número como dinheiro. Por padrão, ele usa USD, mas você pode passar um código de moeda.

<p>{{ price | currency }}</p>
<!-- $42.50 -->

<p>{{ price | currency:"EUR" }}</p>
<!-- €42.50 -->

// component
price = 42.5;

Os pipes number e percent

O pipe number formata números com opções de dígitos, e percent exibe um valor como porcentagem.

<p>{{ 3.14159 | number:"1.0-2" }}</p>
<!-- 3.14 -->

<p>{{ 0.25 | percent }}</p>
<!-- 25% -->

Entendendo digitsInfo

O pipe number aceita uma string digitsInfo: minIntegerDigits.minFractionDigits-maxFractionDigits. Por exemplo, "1.2-2" sempre exibe exatamente duas casas decimais.

<p>{{ 7 | number:"1.2-2" }}</p>
<!-- 7.00 -->

<p>{{ 1234.5 | number:"1.0-0" }}</p>
<!-- 1,235 -->

O pipe json

O pipe json serializa qualquer objeto em uma string JSON. Ele é usado principalmente para depurar modelos, permitindo visualizar a estrutura dos seus dados.

<pre>{{ user | json }}</pre>
<!-- { "id": 1, "name": "Ada" } -->

// component
user = { id: 1, name: "Ada" };

O pipe slice

O pipe slice retorna um subconjunto de uma matriz ou string, de modo semelhante a slice do JavaScript. Ele é útil para truncar listas.

<p>{{ "Angular" | slice:0:4 }}</p>
<!-- Angu -->

<li *ngFor="let item of items | slice:0:3">{{ item }}</li>

Importando pipes em componentes independentes

Em componentes independentes, você deve importar os pipes usados, como DatePipe ou CurrencyPipe, de @angular/common.

import { DatePipe, CurrencyPipe } from "@angular/common";

@Component({
  selector: "app-demo",
  standalone: true,
  imports: [DatePipe, CurrencyPipe],
  template: "<p>{{ today | date }}</p>"
})
export class DemoComponent {
  today = new Date();
}

Verificação rápida

Teste sua compreensão dos pipes integrados.

Recapitulação

Você aprendeu os principais pipes integrados: uppercase, lowercase, date, currency, number, percent, json e slice.

Os pipes mantêm a formatação no modelo, de forma limpa e declarativa. A seguir, você encadeará pipes e passará argumentos a eles.

Perguntas Frequentes

A aula “Usando pipes integrados” é grátis?

Sim — o texto completo de “Usando pipes integrados” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Usando pipes integrados”?

Formate datas, números e textos com pipes. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Usando pipes integrados”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Angular Academy