feat: adding spanish translations on exercises 16,21,30,31,32. this completes the angular folder

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.

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.

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**.

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)_

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
+
+<details>
+  <summary>Pista 1</summary>
+  
+  Si comentas `routerLinkActive="isSelected"` dentro de `NavigationComponent`, la aplicación se carga correctamente.
+</details>
+
+<details>
+  <summary>Pista 2</summary>
+
+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. 😅😯
+
+</details>

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
+
+<details>
+  <summary>Pista 1</summary>
+  Lee cuidadosamente el título del desafío 😇
+</details>