angular-hispano · ricardochl · May 27, 2026
diff --git a/adev-es/src/content/tutorials/learn-angular/intro/README.en.md b/adev-es/src/content/tutorials/learn-angular/intro/README.en.md
@@ -0,0 +1,17 @@
+# Welcome to the Angular tutorial
+
+This interactive tutorial will teach you the basic building blocks to start building great apps with Angular.
+
+## How to use this tutorial
+
+You'll need to have basic familiarity with HTML, CSS and JavaScript to understand Angular.
+
+Each step represents a concept in Angular. You can do one, or all of them.
+
+If you get stuck, click "Reveal answer" at the top.
+
+Alright, let's [get started](/tutorials/learn-angular/1-components-in-angular).
+
+## Using AI for Development
+
+In case you're following this tutorial in your preferred AI powered IDE, [check out Angular prompt rules and best practices](/ai/develop-with-ai).
diff --git a/adev-es/src/content/tutorials/learn-angular/intro/README.md b/adev-es/src/content/tutorials/learn-angular/intro/README.md
@@ -1,17 +1,17 @@
-# Welcome to the Angular tutorial
+# Bienvenido al tutorial de Angular
 
-This interactive tutorial will teach you the basic building blocks to start building great apps with Angular.
+Este tutorial interactivo te enseñará los componentes básicos para comenzar a crear aplicaciones increíbles con Angular.
 
-## How to use this tutorial
+## Cómo usar este tutorial
 
-You'll need to have basic familiarity with HTML, CSS and JavaScript to understand Angular.
+Necesitarás tener familiaridad básica con HTML, CSS y JavaScript para entender Angular.
 
-Each step represents a concept in Angular. You can do one, or all of them.
+Cada paso representa un concepto en Angular. Puedes hacer uno, o todos ellos.
 
-If you get stuck, click "Reveal answer" at the top.
+Si te quedas atascado, haz clic en "Reveal answer" (Mostrar respuesta) en la parte superior.
 
-Alright, let's [get started](/tutorials/learn-angular/1-components-in-angular).
+Muy bien, [comencemos](/tutorials/learn-angular/1-components-in-angular).
 
-## Using AI for Development
+## Usando IA para desarrollo
 
-In case you're following this tutorial in your preferred AI powered IDE, [check out Angular prompt rules and best practices](/ai/develop-with-ai).
+En caso de que estés siguiendo este tutorial en tu IDE con IA preferido, [consulta las reglas de prompt y mejores prácticas de Angular](/ai/develop-with-ai).
diff --git a/.../src/content/tutorials/learn-angular/steps/1-components-in-angular/README.en.md b/.../src/content/tutorials/learn-angular/steps/1-components-in-angular/README.en.md
@@ -0,0 +1,47 @@
+# Components in Angular
+
+Components are the foundational building blocks for any Angular application. Each component has three parts:
+
+- TypeScript class
+- HTML template
+- CSS styles
+
+Note: Learn more about [components in the essentials guide](/essentials/components).
+
+In this activity, you'll learn how to update the template and styles of a component.
+
+<hr />
+
+This is a great opportunity for you to get started with Angular.
+
+<docs-workflow>
+
+<docs-step title="Update the component template">
+Update the `template` property to read `Hello Universe`
+
+```ts
+template: `
+  Hello Universe
+`,
+```
+
+When you changed the HTML template, the preview updated with your message. Let's go one step further: change the color of the text.
+</docs-step>
+
+<docs-step title="Update the component styles">
+Update the styles value and change the `color` property from `blue` to `#a144eb`.
+
+```ts
+styles: `
+  :host {
+    color: #a144eb;
+  }
+`,
+```
+
+When you check the preview, you'll find that the text color will be changed.
+</docs-step>
+
+</docs-workflow>
+
+In Angular, you can use all the browser supported CSS and HTML that's available. If you'd like, you can store your template and styles in separate files.
diff --git a/...-es/src/content/tutorials/learn-angular/steps/1-components-in-angular/README.md b/...-es/src/content/tutorials/learn-angular/steps/1-components-in-angular/README.md
@@ -1,35 +1,35 @@
-# Components in Angular
+# Componentes en Angular
 
-Components are the foundational building blocks for any Angular application. Each component has three parts:
+Los componentes son los bloques de construcción fundamentales para cualquier aplicación Angular. Cada componente tiene tres partes:
 
-- TypeScript class
-- HTML template
-- CSS styles
+- Clase TypeScript
+- Plantilla HTML
+- Estilos CSS
 
-Note: Learn more about [components in the essentials guide](/essentials/components).
+NOTA: Aprende más sobre [componentes en la guía esencial](/essentials/components).
 
-In this activity, you'll learn how to update the template and styles of a component.
+En esta actividad, aprenderás cómo actualizar la plantilla y los estilos de un componente.
 
 <hr />
 
-This is a great opportunity for you to get started with Angular.
+Esta es una gran oportunidad para que comiences con Angular.
 
 <docs-workflow>
 
-<docs-step title="Update the component template">
-Update the `template` property to read `Hello Universe`
+<docs-step title="Actualiza la plantilla del componente">
+Actualiza la propiedad `template` para que tenga el valor `Hello Universe`
 
 ```ts
 template: `
   Hello Universe
 `,
 ```
 
-When you changed the HTML template, the preview updated with your message. Let's go one step further: change the color of the text.
+Cuando cambiaste la plantilla HTML, la vista previa se actualizó con tu mensaje. Vayamos un paso más allá: cambia el color del texto.
 </docs-step>
 
-<docs-step title="Update the component styles">
-Update the styles value and change the `color` property from `blue` to `#a144eb`.
+<docs-step title="Actualiza los estilos del componente">
+Actualiza el valor de `styles` y cambia la propiedad `color` de `blue` a `#a144eb`.
 
 ```ts
 styles: `
@@ -39,9 +39,9 @@ styles: `
 `,
 ```
 
-When you check the preview, you'll find that the text color will be changed.
+Cuando revises la vista previa, verás que el color del texto ha cambiado.
 </docs-step>
 
 </docs-workflow>
 
-In Angular, you can use all the browser supported CSS and HTML that's available. If you'd like, you can store your template and styles in separate files.
+En Angular, puedes usar todo el CSS y HTML compatible con navegadores que esté disponible. Si lo deseas, puedes almacenar tus plantillas y estilos en archivos separados.
diff --git a/adev-es/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.en.md b/adev-es/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.en.md
@@ -0,0 +1,114 @@
+# Deferrable Views
+
+Sometimes in app development, you end up with a lot of components that you need to reference in your app, but some of those don't need to be loaded right away for various reasons.
+
+Maybe they are below the visible fold or are heavy components that aren't interacted with until later. In that case, we can load some of those resources later with deferrable views.
+
+Note: Learn more about [deferred loading with @defer in the in-depth guide](/guide/templates/defer).
+
+In this activity, you'll learn how to use deferrable views to defer load a section of your component template.
+
+<hr>
+
+<docs-workflow>
+
+<docs-step title="Add a `@defer` block around the comments component">
+
+In your app, the blog post page has a comment component after the post details.
+
+Wrap the comment component with a `@defer` block to defer load it.
+
+```angular-html
+@defer {
+  <comments />
+}
+```
+
+The code above is an example of how to use a basic `@defer` block. By default `@defer` will load the `comments` component when the browser is idle.
+
+</docs-step>
+
+<docs-step title="Add a placeholder">
+
+Add a `@placeholder` block to the `@defer` block. The `@placeholder` block is where you put html that will show before the deferred loading starts. The content in `@placeholder` blocks is eagerly loaded.
+
+<docs-code language="angular-html" highlight="[3,4,5]">
+@defer {
+  <comments />
+} @placeholder {
+  <p>Future comments</p>
+}
+</docs-code>
+
+</docs-step>
+
+<docs-step title="Add a loading block">
+
+Add a `@loading` block to the `@defer` block. The `@loading` block is where you put html that will show _while_ the deferred content is actively being fetched, but hasn't finished yet. The content in `@loading` blocks is eagerly loaded.
+
+<docs-code language="angular-html" highlight="[5,6,7]">
+@defer {
+  <comments />
+} @placeholder {
+  <p>Future comments</p>
+} @loading {
+  <p>Loading comments...</p>
+}
+</docs-code>
+
+</docs-step>
+
+<docs-step title="Add a minimum duration">
+
+Both `@placeholder` and `@loading` sections have optional parameters to prevent flickering from occurring when loading happens quickly. `@placeholder` has `minimum` and `@loading` has `minimum` and `after`. Add a `minimum` duration to the `@loading` block so it will be rendered for at least 2 seconds.
+
+<docs-code language="angular-html" highlight="[5]">
+@defer {
+  <comments />
+} @placeholder {
+  <p>Future comments</p>
+} @loading (minimum 2s) {
+  <p>Loading comments...</p>
+}
+</docs-code>
+
+</docs-step>
+
+<docs-step title="Add a viewport trigger">
+
+Deferrable views have a number of trigger options. Add a viewport trigger so the content will defer load once it enters the viewport.
+
+<docs-code language="angular-html" highlight="[1]">
+@defer (on viewport) {
+  <comments />
+}
+</docs-code>
+
+</docs-step>
+
+<docs-step title="Add content">
+
+A viewport trigger is best used when you're deferring content that's far enough down the page that it needs to be scrolled to see. So let's add some content to our blog post. You can either write your own, or you can copy the content below and put it inside the `<article>` element.
+
+<docs-code language="html" highlight="[1]">
+<article>
+  <p>Angular is my favorite framework, and this is why. Angular has the coolest deferrable view feature that makes defer loading content the easiest and most ergonomic it could possibly be. The Angular community is also filled with amazing contributors and experts that create excellent content. The community is welcoming and friendly, and it really is the best community out there.</p>
+  <p>I can't express enough how much I enjoy working with Angular. It offers the best developer experience I've ever had. I love that the Angular team puts their developers first and takes care to make us very happy. They genuinely want Angular to be the best framework it can be, and they're doing such an amazing job at it, too. This statement comes from my heart and is not at all copied and pasted. In fact, I think I'll say these exact same things again a few times.</p>
+  <p>Angular is my favorite framework, and this is why. Angular has the coolest deferrable view feature that makes defer loading content the easiest and most ergonomic it could possibly be. The Angular community is also filled with amazing contributors and experts that create excellent content. The community is welcoming and friendly, and it really is the best community out there.</p>
+  <p>I can't express enough how much I enjoy working with Angular. It offers the best developer experience I've ever had. I love that the Angular team puts their developers first and takes care to make us very happy. They genuinely want Angular to be the best framework it can be, and they're doing such an amazing job at it, too. This statement comes from my heart and is not at all copied and pasted. In fact, I think I'll say these exact same things again a few times.</p>
+  <p>Angular is my favorite framework, and this is why. Angular has the coolest deferrable view feature that makes defer loading content the easiest and most ergonomic it could possibly be. The Angular community is also filled with amazing contributors and experts that create excellent content. The community is welcoming and friendly, and it really is the best community out there.</p>
+  <p>I can't express enough how much I enjoy working with Angular. It offers the best developer experience I've ever had. I love that the Angular team puts their developers first and takes care to make us very happy. They genuinely want Angular to be the best framework it can be, and they're doing such an amazing job at it, too. This statement comes from my heart and is not at all copied and pasted.</p>
+</article>
+</docs-code>
+
+Once you've added this code, now scroll down to see the deferred content load once you scroll it into the viewport.
+
+</docs-step>
+
+</docs-workflow>
+
+In the activity, you've learned how to use deferrable views in your applications. Great work. 🙌
+
+There's even more you can do with them, like different triggers, prefetching, and `@error` blocks.
+
+If you would like to learn more, check out the [documentation for Deferrable views](guide/defer).
diff --git a/adev-es/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.md b/adev-es/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.md
@@ -1,36 +1,36 @@
-# Deferrable Views
+# Vistas diferibles (deferrable views)
 
-Sometimes in app development, you end up with a lot of components that you need to reference in your app, but some of those don't need to be loaded right away for various reasons.
+A veces en el desarrollo de aplicaciones, terminas con muchos componentes que necesitas referenciar en tu app, pero algunos de ellos no necesitan cargarse de inmediato por varias razones.
 
-Maybe they are below the visible fold or are heavy components that aren't interacted with until later. In that case, we can load some of those resources later with deferrable views.
+Quizás están debajo del pliegue visible o son componentes pesados con los que no se interactúa hasta más tarde. En ese caso, podemos cargar algunos de esos recursos más tarde con vistas diferibles (deferrable views).
 
-Note: Learn more about [deferred loading with @defer in the in-depth guide](/guide/templates/defer).
+NOTA: Aprende más sobre [carga diferida con @defer en la guía detallada](/guide/templates/defer).
 
-In this activity, you'll learn how to use deferrable views to defer load a section of your component template.
+En esta actividad, aprenderás cómo usar vistas diferibles para cargar de forma diferida una sección de la plantilla de tu componente.
 
 <hr>
 
 <docs-workflow>
 
-<docs-step title="Add a `@defer` block around the comments component">
+<docs-step title="Agrega un bloque `@defer` alrededor del componente de comentarios">
 
-In your app, the blog post page has a comment component after the post details.
+En tu app, la página de publicación del blog tiene un componente de comentarios después de los detalles de la publicación.
 
-Wrap the comment component with a `@defer` block to defer load it.
+Envuelve el componente de comentarios con un bloque `@defer` para cargarlo de forma diferida.
 
 ```angular-html
 @defer {
   <comments />
 }
 ```
 
-The code above is an example of how to use a basic `@defer` block. By default `@defer` will load the `comments` component when the browser is idle.
+El código anterior es un ejemplo de cómo usar un bloque `@defer` básico. Por defecto, `@defer` cargará el componente `comments` cuando el navegador esté inactivo.
 
 </docs-step>
 
-<docs-step title="Add a placeholder">
+<docs-step title="Agrega un placeholder">
 
-Add a `@placeholder` block to the `@defer` block. The `@placeholder` block is where you put html that will show before the deferred loading starts. The content in `@placeholder` blocks is eagerly loaded.
+Agrega un bloque `@placeholder` al bloque `@defer`. El bloque `@placeholder` es donde pones HTML que se mostrará antes de que comience la carga diferida. El contenido en los bloques `@placeholder` se carga de forma inmediata.
 
 <docs-code language="angular-html" highlight="[3,4,5]">
 @defer {
@@ -42,9 +42,9 @@ Add a `@placeholder` block to the `@defer` block. The `@placeholder` block is wh
 
 </docs-step>
 
-<docs-step title="Add a loading block">
+<docs-step title="Agrega un bloque de carga (loading)">
 
-Add a `@loading` block to the `@defer` block. The `@loading` block is where you put html that will show _while_ the deferred content is actively being fetched, but hasn't finished yet. The content in `@loading` blocks is eagerly loaded.
+Agrega un bloque `@loading` al bloque `@defer`. El bloque `@loading` es donde pones HTML que se mostrará _mientras_ el contenido diferido se está obteniendo activamente, pero aún no ha terminado. El contenido en los bloques `@loading` se carga de forma inmediata.
 
 <docs-code language="angular-html" highlight="[5,6,7]">
 @defer {
@@ -58,9 +58,9 @@ Add a `@loading` block to the `@defer` block. The `@loading` block is where you
 
 </docs-step>
 
-<docs-step title="Add a minimum duration">
+<docs-step title="Agrega una duración mínima">
 
-Both `@placeholder` and `@loading` sections have optional parameters to prevent flickering from occurring when loading happens quickly. `@placeholder` has `minimum` and `@loading` has `minimum` and `after`. Add a `minimum` duration to the `@loading` block so it will be rendered for at least 2 seconds.
+Tanto las secciones `@placeholder` como `@loading` tienen parámetros opcionales para evitar parpadeos cuando la carga ocurre rápidamente. `@placeholder` tiene `minimum` y `@loading` tiene `minimum` y `after`. Agrega una duración `minimum` al bloque `@loading` para que se renderice durante al menos 2 segundos.
 
 <docs-code language="angular-html" highlight="[5]">
 @defer {
@@ -74,9 +74,9 @@ Both `@placeholder` and `@loading` sections have optional parameters to prevent
 
 </docs-step>
 
-<docs-step title="Add a viewport trigger">
+<docs-step title="Agrega un disparador de viewport">
 
-Deferrable views have a number of trigger options. Add a viewport trigger so the content will defer load once it enters the viewport.
+Las vistas diferibles tienen varias opciones de disparadores (triggers). Agrega un disparador de viewport para que el contenido se cargue de forma diferida una vez que entre en el viewport.
 
 <docs-code language="angular-html" highlight="[1]">
 @defer (on viewport) {
@@ -86,9 +86,9 @@ Deferrable views have a number of trigger options. Add a viewport trigger so the
 
 </docs-step>
 
-<docs-step title="Add content">
+<docs-step title="Agrega contenido">
 
-A viewport trigger is best used when you're deferring content that's far enough down the page that it needs to be scrolled to see. So let's add some content to our blog post. You can either write your own, or you can copy the content below and put it inside the `<article>` element.
+Un disparador de viewport se usa mejor cuando estás difiriendo contenido que está lo suficientemente abajo en la página como para que necesite ser desplazado para verse. Así que agreguemos algo de contenido a nuestra publicación del blog. Puedes escribir el tuyo propio, o puedes copiar el contenido de abajo y ponerlo dentro del elemento `<article>`.
 
 <docs-code language="html" highlight="[1]">
 <article>
@@ -101,14 +101,14 @@ A viewport trigger is best used when you're deferring content that's far enough
 </article>
 </docs-code>
 
-Once you've added this code, now scroll down to see the deferred content load once you scroll it into the viewport.
+Una vez que hayas agregado este código, desplázate hacia abajo para ver el contenido diferido cargarse cuando lo despliegues dentro del viewport.
 
 </docs-step>
 
 </docs-workflow>
 
-In the activity, you've learned how to use deferrable views in your applications. Great work. 🙌
+En esta actividad, has aprendido cómo usar vistas diferibles en tus aplicaciones. Excelente trabajo. 🙌
 
-There's even more you can do with them, like different triggers, prefetching, and `@error` blocks.
+Hay aún más que puedes hacer con ellas, como diferentes disparadores, precarga (prefetching) y bloques `@error`.
 
-If you would like to learn more, check out the [documentation for Deferrable views](guide/defer).
+Si deseas aprender más, consulta la [documentación sobre vistas diferibles (Deferrable views)](guide/defer).