diff --git a/docs/src/content/docs/es/challenges/angular/16-di.md b/docs/src/content/docs/es/challenges/angular/16-di.md new file mode 100644 index 0000000..03072ff --- /dev/null +++ b/docs/src/content/docs/es/challenges/angular/16-di.md @@ -0,0 +1,26 @@ +--- +title: 馃敶 Dominar la Inyecci贸n de Dependencias +description: El desaf铆o 16 trata sobre dominar y entender como funciona la inyecci贸n de dependencias +author: thomas-laforge +challengeNumber: 16 +command: angular-di +sidebar: + order: 203 +--- + +## Informaci贸n + +Para completar exitosamente este desaf铆o, necesitar谩s tener un buen entendimiento de c贸mo funciona la Inyecci贸n de Dependencias dentro de Angular. + +El objetivo es proporcionar en la tabla el `CurrencyService` a nivel de fila, para que cada fila muestre la moneda correcta. Actualmente, el `CurrencyService` solo se proporciona a nivel de tabla, lo que resulta en un error ya que se muestra la misma moneda en cada fila, a pesar de que cada producto tiene una moneda diferente. + +Una forma de lograr esto es agregando un segundo argumento al pipe, pero esto no est谩 permitido para este desaf铆o. + +## Declaraci贸n + +- Tu tarea es mostrar la moneda correcta para cada fila. + +## Restricciones: + +- No puedes modificar el pipe. +- No puedes envolver la fila dentro de un componente, ya que esto romper铆a el dise帽o. diff --git a/docs/src/content/docs/es/challenges/angular/21-achor-scrolling.md b/docs/src/content/docs/es/challenges/angular/21-achor-scrolling.md new file mode 100644 index 0000000..87634a8 --- /dev/null +++ b/docs/src/content/docs/es/challenges/angular/21-achor-scrolling.md @@ -0,0 +1,18 @@ +--- +title: 馃煝 Navegaci贸n con Anclas +description: El desaf铆o 21 trata sobre la navegaci贸n dentro de la p谩gina con anclas +author: thomas-laforge +challengeNumber: 21 +command: angular-anchor-scrolling +sidebar: + order: 4 +--- + +## Informaci贸n + +Comienzas con una aplicaci贸n que tiene navegaci贸n b谩sica y navegaci贸n con anclas en el `HomeComponent`. Sin embargo, usar `href` recrea la ruta cada vez y recarga la p谩gina. + +## Declaraci贸n + +- Tu tarea es refactorizar esta aplicaci贸n para usar la herramienta de navegaci贸n integrada para que se ajuste mejor dentro del Marco de Angular. Puedes explorar el enrutador (com煤nmente conocido como router), pero es mejor permanecer dentro de la plantilla y usar la directiva `RouterLink`. +- Para mejorar la experiencia del usuario, a帽ade desplazamiento suave. diff --git a/docs/src/content/docs/es/challenges/angular/30-interop-rxjs-signal.md b/docs/src/content/docs/es/challenges/angular/30-interop-rxjs-signal.md new file mode 100644 index 0000000..9993d7a --- /dev/null +++ b/docs/src/content/docs/es/challenges/angular/30-interop-rxjs-signal.md @@ -0,0 +1,19 @@ +--- +title: 馃敶 Interoperatividad Rxjs/Signal (Se帽ales) +description: El desaf铆o 30 trata sobre aprender a mezclar se帽ales con Rxjs +author: thomas-laforge +challengeNumber: 30 +command: angular-interop-rxjs-signal +sidebar: + order: 204 +--- + +## Informaci贸n + +En este desaf铆o, tenemos una peque帽a aplicaci贸n reactiva utilizando **RxJS** y **NgRx/Component-Store**. + +El objetivo de este desaf铆o es usar la nueva **API de Se帽ales** introducida en Angular v16. Sin embargo, no debemos convertir todo. Ciertas partes del c贸digo son m谩s adecuadas para RxJS que para Se帽ales. Depender谩 de ti determinar el umbral y observar c贸mo **Se帽al y RxJS coexisten**, as铆 como c贸mo se logra la interoperatividad en Angular. + +## Nota + +- Puedes usar cualquier biblioteca de terceros si lo deseas, como **ngrx/signal-store**, **tanstack-query** o **rxAngular**. diff --git a/docs/src/content/docs/es/challenges/angular/31-module-to-standalone.md b/docs/src/content/docs/es/challenges/angular/31-module-to-standalone.md new file mode 100644 index 0000000..e7d3a4e --- /dev/null +++ b/docs/src/content/docs/es/challenges/angular/31-module-to-standalone.md @@ -0,0 +1,27 @@ +--- +title: 馃煝 De M贸dulo a Standalone (Independiente) +description: El desaf铆o 31 trata sobre migrar una aplicaci贸n basada en m贸dulos a una aplicaci贸n independiente. +author: thomas-laforge +challengeNumber: 31 +command: angular-module-to-standalone +sidebar: + order: 6 +--- + +## Informaci贸n + +En la versi贸n 14 de Angular, se lanzaron los componentes standalone (o independientes, los cuales por traducci贸n en espa帽ol se hacen m谩s f谩ciles de entender) y se estabilizaron en la versi贸n 15. Si no has experimentado con ellos, nunca es tarde. Puedes probarlos en este desaf铆o. + +Adem谩s, el objetivo es ver c贸mo **Nx** y los **componentes independientes** trabajan juntos, y experimentar el proceso de desacoplar tu aplicaci贸n con la librer铆a en Nx y componentes independientes. + +Finalmente, los componentes independientes son muy simples de entender, pero los **componentes cargados con el m茅todo diferido routing/lazy-loaded** pueden ser un poco m谩s dif铆ciles de comprender. Este desaf铆o te permitir谩 manipular componentes en diferentes niveles de anidaci贸n y trabajar con rutas de carga diferida. + +Despu茅s de completar este desaf铆o, los componentes independientes no tendr谩n m谩s secretos para ti. + +## Declaraci贸n + +El objetivo de este desaf铆o es migrar tu aplicaci贸n de componentes basados en m贸dulos a componentes independientes. + +## Nota + +Tambi茅n puedes probar el [esquema de Angular](https://angular.io/guide/standalone-migration) para migrar NgModule a componentes independientes. _(Dado que estamos usando nx, comienza tu comando con nx en lugar de ng)_ diff --git a/docs/src/content/docs/es/challenges/angular/32-bug-cd.md b/docs/src/content/docs/es/challenges/angular/32-bug-cd.md new file mode 100644 index 0000000..41689b1 --- /dev/null +++ b/docs/src/content/docs/es/challenges/angular/32-bug-cd.md @@ -0,0 +1,37 @@ +--- +title: 馃煚 Bug de Detecci贸n de Cambios +description: El desaf铆o 32 trata sobre depurar una aplicaci贸n que tiene problemas cuando se activa la detecci贸n de cambios +author: thomas-laforge +challengeNumber: 32 +command: angular-bug-cd +blogLink: https://medium.com/ngconf/function-calls-inside-template-are-dangerous-15f9822a6629 +sidebar: + order: 105 +--- + +:::note +Este desaf铆o est谩 inspirado en un ejemplo de la vida real que hemos simplificado para crear este interesante desaf铆o. +::: + +## Informaci贸n + +En esta peque帽a aplicaci贸n, tenemos un men煤 de navegaci贸n para dirigir nuestra aplicaci贸n ya sea al `BarComponent` o al `FooComponent`. Sin embargo, nuestra aplicaci贸n no se est谩 cargando y no se muestran errores en la consola. + +## Declaraci贸n + +El objetivo del desaf铆o es depurar esta aplicaci贸n y hacer que funcione. + +## Pistas + +
+ Pista 1 + + Si comentas `routerLinkActive="isSelected"` dentro de `NavigationComponent`, la aplicaci贸n se carga correctamente. +
+ +
+ Pista 2 + +Si abres el [c贸digo fuente de `RouterLinkActive`](https://github.com/angular/angular/blob/main/packages/router/src/directives/router_link_active.ts) y vas a la **l铆nea 196**, Angular est谩 llamando a `this.cdr.markForCheck` dentro de una microTarea, lo que desencadena un nuevo ciclo de Detecci贸n de Cambios. Si comentas esta l铆nea, la aplicaci贸n se carga de nuevo, sin embargo, el bug no est谩 dentro del Framework de Angular. 馃槄馃槸 + +
diff --git a/docs/src/content/docs/es/challenges/angular/33-decoupling.md b/docs/src/content/docs/es/challenges/angular/33-decoupling.md new file mode 100644 index 0000000..fda483e --- /dev/null +++ b/docs/src/content/docs/es/challenges/angular/33-decoupling.md @@ -0,0 +1,31 @@ +--- +title: 馃煚 Desacoplando Componentes +description: El desaf铆o 33 trata sobre desacoplar dos componentes fuertemente unidos utilizando Token de Inyecci贸n +author: thomas-laforge +challengeNumber: 33 +command: angular-decoupling +sidebar: + order: 106 +--- + +> Muchas gracias a **Robin Goetz** y su [Proyecto Spartan](https://github.com/goetzrobin/spartan). +> Este desaf铆o fue propuesto por Robin y est谩 fuertemente inspirado en su proyecto. + +## Informaci贸n + +El objetivo de este desaf铆o es separar el comportamiento de un componente a traves de su estilo. Para el prop贸sito de este desaf铆o, trabajaremos en un elemento bot贸n. Al hacer clic en 茅l, alternaremos una propiedad llamada _disabled_ para que cambie el estilo del elemento. Esto es bastante in煤til en la vida real, pero el desaf铆o tiene como objetivo demostrar un concepto 煤til. + +El comportamiento del componente (referido como el _cerebro_ en el stack de Spartan) se encuentra en la biblioteca del cerebro, la cual es llamada _"brain"_. La parte de estilo (referida como el casco y llamado como _helmet_) est谩 dentro de la biblioteca _helmet_. Ambas bibliotecas no pueden depender una de la otra porque queremos poder publicarlas por separado. Para ayudarnos a abordar el problema, estamos utilizando la regla eslint de Nx. Puedes encontrar m谩s detalles [aqu铆](https://nx.dev/core-features/enforce-module-boundaries). + +Sin embargo, el _helmet_ del bot贸n necesita acceder al estado del componente para estilizar el bot贸n de manera diferente seg煤n su estado. Como se mencion贸 anteriormente, no podemos importar la `BtnDisabledDirective` directamente en la biblioteca _helmet_ como se hace actualmente. Si vas a [`BtnHelmetDirective`](../../libs/decoupling/helmet/src/lib/btn-style.directive.ts), te encontrar谩s con un error de linting. **Un proyecto etiquetado con `type:hlm` solo puede depender de libs etiquetadas con `type:core`**. + +## Declaraci贸n + +El objetivo de este desaf铆o es encontrar una forma de desacoplar ambas Directivas. + +### Pista + +
+ Pista 1 + Lee cuidadosamente el t铆tulo del desaf铆o 馃槆 +