Skip to content

Commit dfc233b

Browse files
authored
Merge pull request tomalaforge#420 from ErickRodrCodes/ES-LA-8,9,10,13
docs: exercises 8,9,10,13 in ES-LA
2 parents 82b3605 + edf82db commit dfc233b

File tree

4 files changed

+85
-0
lines changed

4 files changed

+85
-0
lines changed
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
title: 🔴 Pipe Wrapper para utilidades
3+
description: El desafío 10 trata sobre la creación de un pipe para envolver utilidades
4+
author: thomas-laforge
5+
challengeNumber: 10
6+
command: angular-pipe-hard
7+
sidebar:
8+
order: 202
9+
---
10+
11+
El objetivo de esta serie de 3 desafíos de pipes es dominar **pipe** en Angular.
12+
13+
Los pipes puros son una forma muy útil de transformar datos desde tu plantilla. La diferencia entre llamar a una función y un pipe es que los pipes puros son memorizados. Así que no serán recalculados en cada ciclo de detección de cambios si sus entradas no han cambiado.
14+
15+
## Información:
16+
17+
En este tercer ejercicio, quieres acceder a funciones de utilidades. Actualmente no puedes acceder a ellas directamente desde tu plantilla. El objetivo es crear un pipe específico para este archivo de utilidades donde necesitarás pasar el nombre de la función que quieres llamar y los argumentos necesarios.
18+
19+
## Restricciones:
20+
21+
- El tipo debe ser fuertemente definido.
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
title: 🟠 Estilos CSS Altamente Personalizables
3+
description: El desafío 13 trata sobre la creación de estilos CSS altamente personalizables
4+
author: thomas-laforge
5+
challengeNumber: 13
6+
command: angular-styling
7+
sidebar:
8+
order: 104
9+
---
10+
11+
## Información
12+
13+
El estilo es un aspecto importante del trabajo diario de un desarrollador de frontend, pero a menudo se subestima. En las aplicaciones de Angular, frecuentemente veo a personas usando `@Input()` para personalizar el estilo de sus componentes. Sin embargo, `@Input()` solo debe usarse para lógica. Otras técnicas, como las **variables CSS** y **host-context** deben usarse para el estilo.
14+
15+
En este desafío, necesitarás usar tanto variables CSS como `:host-context` para eliminar todos los `@Input()` de tu código.
16+
17+
## Restricciones:
18+
19+
- En tu presentación final, tu componente no debe contener ninguna línea de código. Todo el estilo debe manejarse dentro del decorador _(o archivos CSS externos si lo prefieres)_
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
title: 🟢 Pipe Puro
3+
description: El desafío 8 trata sobre la creación de un pipe puro
4+
author: thomas-laforge
5+
challengeNumber: 8
6+
command: angular-pipe-easy
7+
blogLink: https://medium.com/ngconf/deep-dive-into-angular-pipes-c040588cd15d
8+
sidebar:
9+
order: 3
10+
---
11+
12+
El objetivo de esta serie de 3 desafíos de pipes es dominar **pipe** en Angular.
13+
14+
Los pipes puros son una forma muy útil de transformar datos desde tu plantilla. La diferencia entre llamar a una función y un pipe es que los pipes puros son memorizados. Así que no serán recalculados en cada ciclo de detección de cambios si sus entradas no han cambiado.
15+
16+
## Información:
17+
18+
En este primer ejercicio, llamas a una función simple dentro de tu plantilla. El objetivo es convertirla en un pipe.
19+
20+
## Restricciones:
21+
22+
- El tipo debe ser fuertemente definido.
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
title: 🟠 Pipe Wrapper para funciones
3+
description: El desafío 9 trata sobre la creación de un tubo para envolver funciones de componentes
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+
El objetivo de esta serie de 3 desafíos de pipes es dominar **pipe** en Angular.
13+
14+
Los pipes puros son una forma muy útil de transformar datos desde tu plantilla. La diferencia entre llamar a una función y un pipe es que los pipes puros son memorizados. Así que no serán recalculados en cada ciclo de detección de cambios si sus entradas no han cambiado.
15+
16+
## Información:
17+
18+
En este segundo ejercicio, estás llamando a múltiples funciones dentro de tu plantilla. Puedes crear un pipe específico para cada una de las funciones, pero esto sería demasiado engorroso.
19+
El objetivo es crear un pipe `wrapFn` para envolver tu función de retorno a través de un pipe. Tu función DEBE permanecer dentro de tu componente. **`WrapFn` debe ser altamente reutilizable.**
20+
21+
## Restricciones:
22+
23+
- El tipo debe ser fuertemente definido.

0 commit comments

Comments
 (0)