Skip to content

Commit 1020bf9

Browse files
authored
Merge pull request tomalaforge#606 from kabrunko-dev/docs/translate-pipe-challenges
docs(pt): translate remaining pipe challenges
2 parents 3c14404 + 6d496e7 commit 1020bf9

File tree

2 files changed

+69
-0
lines changed

2 files changed

+69
-0
lines changed
Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
title: 🔴 Pipe Empacotador de Utilidade
3+
description: Desafio 10 é sobre a criação de um pipe para empacotar utilidades
4+
author: thomas-laforge
5+
challengeNumber: 10
6+
command: angular-pipe-hard
7+
sidebar:
8+
order: 202
9+
---
10+
11+
## Informação
12+
13+
Este é o terceiro de três desafios `@Pipe()`, sendo o objetivo dominar **pipes** em Angular.
14+
15+
Pipes são uma maneira bem poderosa de transformar dados em seu template. A diferença entre chamar uma função e um pipe é que pipes puros são memoizados. Por isso, eles não são recalculados em cada ciclo de detecção de mudanças se suas entradas não mudarem.
16+
17+
Pipes são eficientes e otimizados para performance. Eles usam mecanismos de detecção de mudanças para apenas recalcular o valor se sua entrada mudar, afim de minimizar cálculos desnecessários e melhorar a performance de renderização.
18+
19+
Por padrão um pipe é puro, por isso você deve ter cuidado que ao configurar `pipe` como falso deixar mais propenso a ser ineficiente, uma vez que aumenta o número de renderizações.
20+
21+
:::note[Nota]
22+
Um pipe **puro** é chamado apenas quando o valor muda.\
23+
Um pipe **impuro** é chamado em cada ciclo da mudança de deteccção.
24+
:::
25+
26+
Há alguns pipes pré-definidos bem úteis como DatePipe, UpperCasePipe e CurrencyPipe. Para aprender mais sobre pipes em Angular, dê uma olhada na documentação da API [aqui](https://angular.io/guide/pipes).
27+
28+
## Declaração
29+
30+
Neste exercício, você quer acessar algumas funções úteis. Atualmente você não consegue acessá-las diretamente do seu template. O objetivo é criar um pipe específico para o arquivo de úteis, e você precisará passar o nome da função que deseja chamar e os argumentos necessários.
31+
32+
## Restrições
33+
34+
- Deve ser fortemente tipado
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
title: 🟠 Pipe Empacotador de Função
3+
description: Challenge 9 is about creating a pipe to wrap component fonctions
4+
author: thomas-laforge
5+
challengeNumber: 9
6+
command: angular-pipe-intermediate
7+
blogLink: https://medium.com/ngconf/boost-your-apps-performance-by-wrapping-your-functions-inside-a-pipe-7e889a901d1d
8+
sidebar:
9+
order: 103
10+
---
11+
12+
## Informação
13+
14+
Este é o segundo de três desafios `@Pipe()`, sendo o objetivo dominar **pipes** em Angular.
15+
16+
Pipes são uma maneira bem poderosa de transformar dados em seu template. A diferença entre chamar uma função e um pipe é que pipes puros são memoizados. Por isso, eles não são recalculados em cada ciclo de detecção de mudanças se suas entradas não mudarem.
17+
18+
Pipes são eficientes e otimizados para performance. Eles usam mecanismos de detecção de mudanças para apenas recalcular o valor se sua entrada mudar, afim de minimizar cálculos desnecessários e melhorar a performance de renderização.
19+
20+
Por padrão um pipe é puro, por isso você deve ter cuidado que ao configurar `pipe` como falso deixar mais propenso a ser ineficiente, uma vez que aumenta o número de renderizações.
21+
22+
:::note[Nota]
23+
Um pipe **puro** é chamado apenas quando o valor muda.\
24+
Um pipe **impuro** é chamado em cada ciclo da mudança de deteccção.
25+
:::
26+
27+
Há alguns pipes pré-definidos bem úteis como DatePipe, UpperCasePipe e CurrencyPipe. Para aprender mais sobre pipes em Angular, dê uma olhada na documentação da API [aqui](https://angular.io/guide/pipes).
28+
29+
## Declaração
30+
31+
Neste exercício, você está chamando várias funções dentro de seu template. Você pode criar um pipe específico para cada uma das funções, mas isso dará muito trabalho. O objetivo é criar um pipe `wrapFn` que empacote sua função callback através do pipe. Sua função DEVE permanecer dentro do seu componentes. **`WrapFn` deve ser reutilizável**.
32+
33+
## Restrições
34+
35+
- Deve ser fortemente tipado

0 commit comments

Comments
 (0)