From b98b5667638185ddb6d1cca9b416b9b561f4205b Mon Sep 17 00:00:00 2001
From: Ricardo Chavarria <jr.chavarria21@gmail.com>
Date: Tue, 27 Jan 2026 14:21:55 -0600
Subject: [PATCH] translate: translations for Template guides

Fixes #100
---
 .../src/app/routing/sub-navigation-data.ts    |  26 +-
 .../src/content/guide/templates/binding.en.md | 256 ++++++++++++
 .../src/content/guide/templates/binding.md    | 142 +++----
 .../guide/templates/control-flow.en.md        | 127 ++++++
 .../content/guide/templates/control-flow.md   |  76 ++--
 .../src/content/guide/templates/defer.en.md   | 385 ++++++++++++++++++
 adev-es/src/content/guide/templates/defer.md  | 194 ++++-----
 .../guide/templates/event-listeners.en.md     | 226 ++++++++++
 .../guide/templates/event-listeners.md        |  76 ++--
 .../guide/templates/expression-syntax.en.md   | 121 ++++++
 .../guide/templates/expression-syntax.md      | 164 ++++----
 .../guide/templates/ng-container.en.md        | 115 ++++++
 .../content/guide/templates/ng-container.md   |  44 +-
 .../content/guide/templates/ng-content.en.md  |  37 ++
 .../src/content/guide/templates/ng-content.md |   8 +-
 .../content/guide/templates/ng-template.en.md | 282 +++++++++++++
 .../content/guide/templates/ng-template.md    | 114 +++---
 .../content/guide/templates/overview.en.md    |  48 +++
 .../src/content/guide/templates/overview.md   |  68 ++--
 .../src/content/guide/templates/pipes.en.md   | 290 +++++++++++++
 adev-es/src/content/guide/templates/pipes.md  | 154 +++----
 .../guide/templates/two-way-binding.en.md     | 136 +++++++
 .../guide/templates/two-way-binding.md        |  48 +--
 .../content/guide/templates/variables.en.md   | 188 +++++++++
 .../src/content/guide/templates/variables.md  | 112 ++---
 .../content/guide/templates/whitespace.en.md  |  64 +++
 .../src/content/guide/templates/whitespace.md |  36 +-
 27 files changed, 2906 insertions(+), 631 deletions(-)
 create mode 100644 adev-es/src/content/guide/templates/binding.en.md
 create mode 100644 adev-es/src/content/guide/templates/control-flow.en.md
 create mode 100644 adev-es/src/content/guide/templates/defer.en.md
 create mode 100644 adev-es/src/content/guide/templates/event-listeners.en.md
 create mode 100644 adev-es/src/content/guide/templates/expression-syntax.en.md
 create mode 100644 adev-es/src/content/guide/templates/ng-container.en.md
 create mode 100644 adev-es/src/content/guide/templates/ng-content.en.md
 create mode 100644 adev-es/src/content/guide/templates/ng-template.en.md
 create mode 100644 adev-es/src/content/guide/templates/overview.en.md
 create mode 100644 adev-es/src/content/guide/templates/pipes.en.md
 create mode 100644 adev-es/src/content/guide/templates/two-way-binding.en.md
 create mode 100644 adev-es/src/content/guide/templates/variables.en.md
 create mode 100644 adev-es/src/content/guide/templates/whitespace.en.md

diff --git a/adev-es/src/app/routing/sub-navigation-data.ts b/adev-es/src/app/routing/sub-navigation-data.ts
index 02ca72c..e357e50 100644
--- a/adev-es/src/app/routing/sub-navigation-data.ts
+++ b/adev-es/src/app/routing/sub-navigation-data.ts
@@ -188,30 +188,30 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
         ],
       },
       {
-        label: 'Templates',
+        label: 'Plantillas',
         children: [
           {
-            label: 'Overview',
+            label: 'Visión general',
             path: 'guide/templates',
             contentPath: 'guide/templates/overview',
           },
           {
-            label: 'Binding dynamic text, properties and attributes',
+            label: 'Enlazar texto, propiedades y atributos dinámicos',
             path: 'guide/templates/binding',
             contentPath: 'guide/templates/binding',
           },
           {
-            label: 'Adding event listeners',
+            label: 'Agregando escuchadores de eventos',
             path: 'guide/templates/event-listeners',
             contentPath: 'guide/templates/event-listeners',
           },
           {
-            label: 'Two-way binding',
+            label: 'Enlance bidireccional',
             path: 'guide/templates/two-way-binding',
             contentPath: 'guide/templates/two-way-binding',
           },
           {
-            label: 'Control flow',
+            label: 'Flujo de control',
             path: 'guide/templates/control-flow',
             contentPath: 'guide/templates/control-flow',
           },
@@ -221,37 +221,37 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             contentPath: 'guide/templates/pipes',
           },
           {
-            label: 'Slotting child content with ng-content',
+            label: 'Proyectar contenido hijo ng-content',
             path: 'guide/templates/ng-content',
             contentPath: 'guide/templates/ng-content',
           },
           {
-            label: 'Create template fragments with ng-template',
+            label: 'Crear fragmentos de plantilla con ng-template',
             path: 'guide/templates/ng-template',
             contentPath: 'guide/templates/ng-template',
           },
           {
-            label: 'Grouping elements with ng-container',
+            label: 'Agrupando elementos con ng-container',
             path: 'guide/templates/ng-container',
             contentPath: 'guide/templates/ng-container',
           },
           {
-            label: 'Variables in templates',
+            label: 'Variables en plantillas',
             path: 'guide/templates/variables',
             contentPath: 'guide/templates/variables',
           },
           {
-            label: 'Deferred loading with @defer',
+            label: 'Carga diferida con @defer',
             path: 'guide/templates/defer',
             contentPath: 'guide/templates/defer',
           },
           {
-            label: 'Expression syntax',
+            label: 'Sintaxis de expresiones',
             path: 'guide/templates/expression-syntax',
             contentPath: 'guide/templates/expression-syntax',
           },
           {
-            label: 'Whitespace in templates',
+            label: 'Espacios en blanco en plantillas',
             path: 'guide/templates/whitespace',
             contentPath: 'guide/templates/whitespace',
           },
diff --git a/adev-es/src/content/guide/templates/binding.en.md b/adev-es/src/content/guide/templates/binding.en.md
new file mode 100644
index 0000000..d3e00f2
--- /dev/null
+++ b/adev-es/src/content/guide/templates/binding.en.md
@@ -0,0 +1,256 @@
+# Binding dynamic text, properties and attributes
+
+In Angular, a **binding** creates a dynamic connection between a component's template and its data. This connection ensures that changes to the component's data automatically update the rendered template.
+
+## Render dynamic text with text interpolation
+
+You can bind dynamic text in templates with double curly braces, which tells Angular that it is responsible for the expression inside and ensuring it is updated correctly. This is called **text interpolation**.
+
+```angular-ts
+@Component({
+  template: `
+    <p>Your color preference is {{ theme }}.</p>
+  `,
+  ...
+})
+export class AppComponent {
+  theme = 'dark';
+}
+```
+
+In this example, when the snippet is rendered to the page, Angular will replace `{{ theme }}` with `dark`.
+
+```angular-html
+<!-- Rendered Output -->
+<p>Your color preference is dark.</p>
+```
+
+Bindings that change over time should read values from [signals](/guide/signals). Angular tracks the signals read in the template, and updates the rendered page when those signal values change.
+
+```angular-ts
+@Component({
+  template: `
+    <!-- Does not necessarily update when `welcomeMessage` changes. -->
+    <p>{{ welcomeMessage }}</p>
+
+    <p>Your color preference is {{ theme() }}.</p> <!-- Always updates when the value of the `name` signal changes. -->
+  `
+  ...
+})
+export class AppComponent {
+  welcomeMessage = "Welcome, enjoy this app that we built for you";
+  theme = signal('dark');
+}
+```
+
+For more details, see the [Signals guide](/guide/signals).
+
+Continuing the theme example, if a user clicks on a button that updates the `theme` signal to `'light'` after the page loads, the page updates accordingly to:
+
+```angular-html
+<!-- Rendered Output -->
+<p>Your color preference is light.</p>
+```
+
+You can use text interpolation anywhere you would normally write text in HTML.
+
+All expression values are converted to a string. Objects and arrays are converted using the value’s `toString` method.
+
+## Binding dynamic properties and attributes
+
+Angular supports binding dynamic values into object properties and HTML attributes with square brackets.
+
+You can bind to properties on an HTML element's DOM instance, a [component](guide/components) instance, or a [directive](guide/directives) instance.
+
+### Native element properties
+
+Every HTML element has a corresponding DOM representation. For example, each `<button>` HTML element corresponds to an instance of `HTMLButtonElement` in the DOM. In Angular, you use property bindings to set values directly to the DOM representation of the element.
+
+```angular-html
+<!-- Bind the `disabled` property on the button element's DOM object -->
+<button [disabled]="isFormValid()">Save</button>
+```
+
+In this example, every time `isFormValid` changes, Angular automatically sets the `disabled` property of the `HTMLButtonElement` instance.
+
+### Component and directive properties
+
+When an element is an Angular component, you can use property bindings to set component input properties using the same square bracket syntax.
+
+```angular-html
+<!-- Bind the `value` property on the `MyListbox` component instance. -->
+<my-listbox [value]="mySelection()" />
+```
+
+In this example, every time `mySelection` changes, Angular automatically sets the `value` property of the `MyListbox` instance.
+
+You can bind to directive properties as well.
+
+```angular-html
+<!-- Bind to the `ngSrc` property of the `NgOptimizedImage` directive  -->
+<img [ngSrc]="profilePhotoUrl()" alt="The current user's profile photo">
+```
+
+### Attributes
+
+When you need to set HTML attributes that do not have corresponding DOM properties, such as SVG attributes, you can bind attributes to elements in your template with the `attr.` prefix.
+
+```angular-html
+<!-- Bind the `role` attribute on the `<ul>` element to the component's `listRole` property. -->
+<ul [attr.role]="listRole()">
+```
+
+In this example, every time `listRole` changes, Angular automatically sets the `role` attribute of the `<ul>` element by calling `setAttribute`.
+
+If the value of an attribute binding is `null`, Angular removes the attribute by calling `removeAttribute`.
+
+### Text interpolation in properties and attributes
+
+You can also use text interpolation syntax in properties and attributes by using the double curly brace syntax instead of square braces around the property or attribute name. When using this syntax, Angular treats the assignment as a property binding.
+
+```angular-html
+<!-- Binds a value to the `alt` property of the image element's DOM object. -->
+<img src="profile-photo.jpg" alt="Profile photo of {{ firstName() }}" >
+```
+
+## CSS class and style property bindings
+
+Angular supports additional features for binding CSS classes and CSS style properties to elements.
+
+### CSS classes
+
+You can create a CSS class binding to conditionally add or remove a CSS class on an element based on whether the bound value is [truthy or falsy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).
+
+```angular-html
+<!-- When `isExpanded` is truthy, add the `expanded` CSS class. -->
+<ul [class.expanded]="isExpanded()">
+```
+
+You can also bind directly to the `class` property. Angular accepts three types of value:
+
+| Description of `class` value                                                                                                                                      | TypeScript type       |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
+| A string containing one or more CSS classes separated by spaces                                                                                                   | `string`              |
+| An array of CSS class strings                                                                                                                                     | `string[]`            |
+| An object where each property name is a CSS class name and each corresponding value determines whether that class is applied to the element, based on truthiness. | `Record<string, any>` |
+
+```angular-ts
+@Component({
+  template: `
+    <ul [class]="listClasses"> ... </ul>
+    <section [class]="sectionClasses()"> ... </section>
+    <button [class]="buttonClasses()"> ... </button>
+  `,
+  ...
+})
+export class UserProfile {
+  listClasses = 'full-width outlined';
+  sectionClasses = signal(['expandable', 'elevated']);
+  buttonClasses = signal({
+    highlighted: true,
+    embiggened: false,
+  });
+}
+```
+
+The above example renders the following DOM:
+
+```angular-html
+<ul class="full-width outlined"> ... </ul>
+<section class="expandable elevated"> ... </section>
+<button class="highlighted"> ... </button>
+```
+
+Angular ignores any string values that are not valid CSS class names.
+
+When using static CSS classes, directly binding `class`, and binding specific classes, Angular intelligently combines all of the classes in the rendered result.
+
+```angular-ts
+@Component({
+  template: `<ul class="list" [class]="listType()" [class.expanded]="isExpanded()"> ...`,
+  ...
+})
+export class Listbox {
+  listType = signal('box');
+  isExpanded = signal(true);
+}
+```
+
+In the example above, Angular renders the `ul` element with all three CSS classes.
+
+```angular-html
+<ul class="list box expanded">
+```
+
+Angular does not guarantee any specific order of CSS classes on rendered elements.
+
+When binding `class` to an array or an object, Angular compares the previous value to the current value with the triple-equals operator (`===`). You must create a new object or array instance when you modify these values in order for Angular to apply any updates.
+
+If an element has multiple bindings for the same CSS class, Angular resolves collisions by following its style precedence order.
+
+NOTE: Class bindings do not support space-separated class names in a single key. They also don't support mutations on objects as the reference of the binding remains the same. If you need one or the other, use the [ngClass](/api/common/NgClass) directive.
+
+### CSS style properties
+
+You can also bind to CSS style properties directly on an element.
+
+```angular-html
+<!-- Set the CSS `display` property based on the `isExpanded` property. -->
+<section [style.display]="isExpanded() ? 'block' : 'none'">
+```
+
+You can further specify units for CSS properties that accept units.
+
+```angular-html
+<!-- Set the CSS `height` property to a pixel value based on the `sectionHeightInPixels` property. -->
+<section [style.height.px]="sectionHeightInPixels()">
+```
+
+You can also set multiple style values in one binding. Angular accepts the following types of value:
+
+| Description of `style` value                                                                                              | TypeScript type       |
+| ------------------------------------------------------------------------------------------------------------------------- | --------------------- |
+| A string containing zero or more CSS declarations, such as `"display: flex; margin: 8px"`.                                | `string`              |
+| An object where each property name is a CSS property name and each corresponding value is the value of that CSS property. | `Record<string, any>` |
+
+```angular-ts
+@Component({
+  template: `
+    <ul [style]="listStyles()"> ... </ul>
+    <section [style]="sectionStyles()"> ... </section>
+  `,
+  ...
+})
+export class UserProfile {
+  listStyles = signal('display: flex; padding: 8px');
+  sectionStyles = signal({
+    border: '1px solid black',
+    'font-weight': 'bold',
+  });
+}
+```
+
+The above example renders the following DOM.
+
+```angular-html
+<ul style="display: flex; padding: 8px"> ... </ul>
+<section style="border: 1px solid black; font-weight: bold"> ... </section>
+```
+
+When binding `style` to an object, Angular compares the previous value to the current value with the triple-equals operator (`===`). You must create a new object instance when you modify these values in order to Angular to apply any updates.
+
+If an element has multiple bindings for the same style property, Angular resolves collisions by following its style precedence order.
+
+## ARIA attributes
+
+Angular supports binding string values to ARIA attributes.
+
+```angular-html
+<button type="button" [aria-label]="actionLabel()">
+  {{ actionLabel() }}
+</button>
+```
+
+Angular writes the string value to the element’s `aria-label` attribute and removes it when the bound value is `null`.
+
+Some ARIA features expose DOM properties or directive inputs that accept structured values (such as element references). Use standard property bindings for those cases. See the [accessibility guide](best-practices/a11y#aria-attributes-and-properties) for examples and additional guidance.
diff --git a/adev-es/src/content/guide/templates/binding.md b/adev-es/src/content/guide/templates/binding.md
index d3e00f2..93aa211 100644
--- a/adev-es/src/content/guide/templates/binding.md
+++ b/adev-es/src/content/guide/templates/binding.md
@@ -1,10 +1,10 @@
-# Binding dynamic text, properties and attributes
+# Enlazar texto, propiedades y atributos dinámicos
 
-In Angular, a **binding** creates a dynamic connection between a component's template and its data. This connection ensures that changes to the component's data automatically update the rendered template.
+En Angular, un **enlace** (binding) crea una conexión dinámica entre la plantilla de un componente y sus datos. Esta conexión asegura que los cambios en los datos del componente actualicen automáticamente la plantilla renderizada.
 
-## Render dynamic text with text interpolation
+## Renderizar texto dinámico con interpolación de texto
 
-You can bind dynamic text in templates with double curly braces, which tells Angular that it is responsible for the expression inside and ensuring it is updated correctly. This is called **text interpolation**.
+Puedes enlazar texto dinámico en plantillas con llaves dobles, lo que le indica a Angular que es responsable de la expresión dentro y asegurar que se actualice correctamente. Esto se llama **interpolación de texto**.
 
 ```angular-ts
 @Component({
@@ -18,22 +18,22 @@ export class AppComponent {
 }
 ```
 
-In this example, when the snippet is rendered to the page, Angular will replace `{{ theme }}` with `dark`.
+En este ejemplo, cuando el fragmento se renderiza en la página, Angular reemplazará `{{ theme }}` con `dark`.
 
 ```angular-html
-<!-- Rendered Output -->
+<!-- Salida renderizada -->
 <p>Your color preference is dark.</p>
 ```
 
-Bindings that change over time should read values from [signals](/guide/signals). Angular tracks the signals read in the template, and updates the rendered page when those signal values change.
+Los enlaces que cambian con el tiempo deben leer valores de [signals](/guide/signals). Angular rastrea los signals leídos en la plantilla, y actualiza la página renderizada cuando esos valores de signals cambian.
 
 ```angular-ts
 @Component({
   template: `
-    <!-- Does not necessarily update when `welcomeMessage` changes. -->
+    <!-- No necesariamente se actualiza cuando `welcomeMessage` cambia. -->
     <p>{{ welcomeMessage }}</p>
 
-    <p>Your color preference is {{ theme() }}.</p> <!-- Always updates when the value of the `name` signal changes. -->
+    <p>Your color preference is {{ theme() }}.</p> <!-- Siempre se actualiza cuando el valor del signal `name` cambia. -->
   `
   ...
 })
@@ -43,96 +43,96 @@ export class AppComponent {
 }
 ```
 
-For more details, see the [Signals guide](/guide/signals).
+Para más detalles, consulta la [guía de Signals](/guide/signals).
 
-Continuing the theme example, if a user clicks on a button that updates the `theme` signal to `'light'` after the page loads, the page updates accordingly to:
+Continuando con el ejemplo del tema, si un usuario hace clic en un botón que actualiza el signal `theme` a `'light'` después de que se carga la página, la página se actualiza en consecuencia a:
 
 ```angular-html
-<!-- Rendered Output -->
+<!-- Salida renderizada -->
 <p>Your color preference is light.</p>
 ```
 
-You can use text interpolation anywhere you would normally write text in HTML.
+Puedes usar interpolación de texto en cualquier lugar donde normalmente escribirías texto en HTML.
 
-All expression values are converted to a string. Objects and arrays are converted using the value’s `toString` method.
+Todos los valores de expresión se convierten a una cadena. Los objetos y arrays se convierten usando el método `toString` del valor.
 
-## Binding dynamic properties and attributes
+## Enlazar propiedades y atributos dinámicos
 
-Angular supports binding dynamic values into object properties and HTML attributes with square brackets.
+Angular soporta enlazar valores dinámicos a propiedades de objetos y atributos HTML con corchetes.
 
-You can bind to properties on an HTML element's DOM instance, a [component](guide/components) instance, or a [directive](guide/directives) instance.
+Puedes enlazar a propiedades en la instancia DOM de un elemento HTML, una instancia de [componente](guide/components), o una instancia de [directiva](guide/directives).
 
-### Native element properties
+### Propiedades de elementos nativos
 
-Every HTML element has a corresponding DOM representation. For example, each `<button>` HTML element corresponds to an instance of `HTMLButtonElement` in the DOM. In Angular, you use property bindings to set values directly to the DOM representation of the element.
+Cada elemento HTML tiene una representación DOM correspondiente. Por ejemplo, cada elemento HTML `<button>` corresponde a una instancia de `HTMLButtonElement` en el DOM. En Angular, usas enlaces de propiedad para establecer valores directamente a la representación DOM del elemento.
 
 ```angular-html
-<!-- Bind the `disabled` property on the button element's DOM object -->
+<!-- Enlaza la propiedad `disabled` en el objeto DOM del elemento button -->
 <button [disabled]="isFormValid()">Save</button>
 ```
 
-In this example, every time `isFormValid` changes, Angular automatically sets the `disabled` property of the `HTMLButtonElement` instance.
+En este ejemplo, cada vez que `isFormValid` cambia, Angular establece automáticamente la propiedad `disabled` de la instancia `HTMLButtonElement`.
 
-### Component and directive properties
+### Propiedades de componentes y directivas
 
-When an element is an Angular component, you can use property bindings to set component input properties using the same square bracket syntax.
+Cuando un elemento es un componente de Angular, puedes usar enlaces de propiedad para establecer propiedades de entrada de componentes usando la misma sintaxis de corchetes.
 
 ```angular-html
-<!-- Bind the `value` property on the `MyListbox` component instance. -->
+<!-- Enlaza la propiedad `value` en la instancia del componente `MyListbox`. -->
 <my-listbox [value]="mySelection()" />
 ```
 
-In this example, every time `mySelection` changes, Angular automatically sets the `value` property of the `MyListbox` instance.
+En este ejemplo, cada vez que `mySelection` cambia, Angular establece automáticamente la propiedad `value` de la instancia `MyListbox`.
 
-You can bind to directive properties as well.
+También puedes enlazar a propiedades de directivas.
 
 ```angular-html
-<!-- Bind to the `ngSrc` property of the `NgOptimizedImage` directive  -->
+<!-- Enlaza a la propiedad `ngSrc` de la directiva `NgOptimizedImage` -->
 <img [ngSrc]="profilePhotoUrl()" alt="The current user's profile photo">
 ```
 
-### Attributes
+### Atributos
 
-When you need to set HTML attributes that do not have corresponding DOM properties, such as SVG attributes, you can bind attributes to elements in your template with the `attr.` prefix.
+Cuando necesitas establecer atributos HTML que no tienen propiedades DOM correspondientes, como atributos SVG, puedes enlazar atributos a elementos en tu plantilla con el prefijo `attr.`.
 
 ```angular-html
-<!-- Bind the `role` attribute on the `<ul>` element to the component's `listRole` property. -->
+<!-- Enlaza el atributo `role` en el elemento `<ul>` a la propiedad `listRole` del componente. -->
 <ul [attr.role]="listRole()">
 ```
 
-In this example, every time `listRole` changes, Angular automatically sets the `role` attribute of the `<ul>` element by calling `setAttribute`.
+En este ejemplo, cada vez que `listRole` cambia, Angular establece automáticamente el atributo `role` del elemento `<ul>` llamando a `setAttribute`.
 
-If the value of an attribute binding is `null`, Angular removes the attribute by calling `removeAttribute`.
+Si el valor de un enlace de atributo es `null`, Angular elimina el atributo llamando a `removeAttribute`.
 
-### Text interpolation in properties and attributes
+### Interpolación de texto en propiedades y atributos
 
-You can also use text interpolation syntax in properties and attributes by using the double curly brace syntax instead of square braces around the property or attribute name. When using this syntax, Angular treats the assignment as a property binding.
+También puedes usar sintaxis de interpolación de texto en propiedades y atributos usando la sintaxis de llaves dobles en lugar de corchetes alrededor del nombre de la propiedad o atributo. Cuando uses esta sintaxis, Angular trata la asignación como un enlace de propiedad.
 
 ```angular-html
-<!-- Binds a value to the `alt` property of the image element's DOM object. -->
+<!-- Enlaza un valor a la propiedad `alt` del objeto DOM del elemento imagen. -->
 <img src="profile-photo.jpg" alt="Profile photo of {{ firstName() }}" >
 ```
 
-## CSS class and style property bindings
+## Enlaces de clases CSS y propiedades de estilo
 
-Angular supports additional features for binding CSS classes and CSS style properties to elements.
+Angular soporta funcionalidades adicionales para enlazar clases CSS y propiedades de estilo CSS a elementos.
 
-### CSS classes
+### Clases CSS
 
-You can create a CSS class binding to conditionally add or remove a CSS class on an element based on whether the bound value is [truthy or falsy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).
+Puedes crear un enlace de clase CSS para agregar o quitar condicionalmente una clase CSS en un elemento basándose en si el valor enlazado es [truthy o falsy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).
 
 ```angular-html
-<!-- When `isExpanded` is truthy, add the `expanded` CSS class. -->
+<!-- Cuando `isExpanded` es truthy, agrega la clase CSS `expanded`. -->
 <ul [class.expanded]="isExpanded()">
 ```
 
-You can also bind directly to the `class` property. Angular accepts three types of value:
+También puedes enlazar directamente a la propiedad `class`. Angular acepta tres tipos de valor:
 
-| Description of `class` value                                                                                                                                      | TypeScript type       |
-| ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
-| A string containing one or more CSS classes separated by spaces                                                                                                   | `string`              |
-| An array of CSS class strings                                                                                                                                     | `string[]`            |
-| An object where each property name is a CSS class name and each corresponding value determines whether that class is applied to the element, based on truthiness. | `Record<string, any>` |
+| Descripción del valor de `class`                                                                                                                                                 | Tipo TypeScript       |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
+| Una cadena que contiene una o más clases CSS separadas por espacios                                                                                                              | `string`              |
+| Un array de cadenas de clases CSS                                                                                                                                                | `string[]`            |
+| Un objeto donde cada nombre de propiedad es un nombre de clase CSS y cada valor correspondiente determina si esa clase se aplica al elemento, basado en su valor de truthiness. | `Record<string, any>` |
 
 ```angular-ts
 @Component({
@@ -153,7 +153,7 @@ export class UserProfile {
 }
 ```
 
-The above example renders the following DOM:
+El ejemplo anterior renderiza el siguiente DOM:
 
 ```angular-html
 <ul class="full-width outlined"> ... </ul>
@@ -161,9 +161,9 @@ The above example renders the following DOM:
 <button class="highlighted"> ... </button>
 ```
 
-Angular ignores any string values that are not valid CSS class names.
+Angular ignora cualquier valor de cadena que no sea un nombre de clase CSS válido.
 
-When using static CSS classes, directly binding `class`, and binding specific classes, Angular intelligently combines all of the classes in the rendered result.
+Cuando usas clases CSS estáticas, enlazando `class` directamente, y enlazando clases específicas, Angular combina inteligentemente todas las clases en el resultado renderizado.
 
 ```angular-ts
 @Component({
@@ -176,42 +176,42 @@ export class Listbox {
 }
 ```
 
-In the example above, Angular renders the `ul` element with all three CSS classes.
+En el ejemplo anterior, Angular renderiza el elemento `ul` con las tres clases CSS.
 
 ```angular-html
 <ul class="list box expanded">
 ```
 
-Angular does not guarantee any specific order of CSS classes on rendered elements.
+Angular no garantiza ningún orden específico de clases CSS en los elementos renderizados.
 
-When binding `class` to an array or an object, Angular compares the previous value to the current value with the triple-equals operator (`===`). You must create a new object or array instance when you modify these values in order for Angular to apply any updates.
+Cuando enlazas `class` a un array o un objeto, Angular compara el valor anterior con el valor actual usando el operador de triple igualdad (`===`). Debes crear una nueva instancia de objeto o array cuando modifiques estos valores para que Angular aplique cualquier actualización.
 
-If an element has multiple bindings for the same CSS class, Angular resolves collisions by following its style precedence order.
+Si un elemento tiene múltiples enlaces para la misma clase CSS, Angular resuelve las colisiones siguiendo su orden de precedencia de estilos.
 
-NOTE: Class bindings do not support space-separated class names in a single key. They also don't support mutations on objects as the reference of the binding remains the same. If you need one or the other, use the [ngClass](/api/common/NgClass) directive.
+NOTA: Los enlaces de clase no soportan nombres de clase separados por espacios en una sola clave. Tampoco soportan mutaciones en objetos ya que la referencia del enlace permanece igual. Si necesitas una u otra, usa la directiva [ngClass](/api/common/NgClass).
 
-### CSS style properties
+### Propiedades de estilo CSS
 
-You can also bind to CSS style properties directly on an element.
+También puedes enlazar directamente a propiedades de estilo CSS en un elemento.
 
 ```angular-html
-<!-- Set the CSS `display` property based on the `isExpanded` property. -->
+<!-- Establece la propiedad CSS `display` basada en la propiedad `isExpanded`. -->
 <section [style.display]="isExpanded() ? 'block' : 'none'">
 ```
 
-You can further specify units for CSS properties that accept units.
+Puedes especificar además unidades para propiedades CSS que aceptan unidades.
 
 ```angular-html
-<!-- Set the CSS `height` property to a pixel value based on the `sectionHeightInPixels` property. -->
+<!-- Establece la propiedad CSS `height` a un valor en píxeles basado en la propiedad `sectionHeightInPixels`. -->
 <section [style.height.px]="sectionHeightInPixels()">
 ```
 
-You can also set multiple style values in one binding. Angular accepts the following types of value:
+También puedes establecer múltiples valores de estilo en un enlace. Angular acepta los siguientes tipos de valor:
 
-| Description of `style` value                                                                                              | TypeScript type       |
-| ------------------------------------------------------------------------------------------------------------------------- | --------------------- |
-| A string containing zero or more CSS declarations, such as `"display: flex; margin: 8px"`.                                | `string`              |
-| An object where each property name is a CSS property name and each corresponding value is the value of that CSS property. | `Record<string, any>` |
+| Descripción del valor de `style`                                                                                                                     | Tipo TypeScript       |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
+| Una cadena que contiene cero o más declaraciones CSS, como `"display: flex; margin: 8px"`.                                                           | `string`              |
+| Un objeto donde cada nombre de propiedad es un nombre de propiedad CSS y cada valor correspondiente es el valor de esa propiedad CSS.                | `Record<string, any>` |
 
 ```angular-ts
 @Component({
@@ -230,20 +230,20 @@ export class UserProfile {
 }
 ```
 
-The above example renders the following DOM.
+El ejemplo anterior renderiza el siguiente DOM.
 
 ```angular-html
 <ul style="display: flex; padding: 8px"> ... </ul>
 <section style="border: 1px solid black; font-weight: bold"> ... </section>
 ```
 
-When binding `style` to an object, Angular compares the previous value to the current value with the triple-equals operator (`===`). You must create a new object instance when you modify these values in order to Angular to apply any updates.
+Cuando enlazas `style` a un objeto, Angular compara el valor anterior con el valor actual usando el operador de triple igualdad (`===`). Debes crear una nueva instancia de objeto cuando modifiques estos valores para que Angular aplique cualquier actualización.
 
-If an element has multiple bindings for the same style property, Angular resolves collisions by following its style precedence order.
+Si un elemento tiene múltiples enlaces para la misma propiedad de estilo, Angular resuelve las colisiones siguiendo su orden de precedencia de estilos.
 
-## ARIA attributes
+## Atributos ARIA
 
-Angular supports binding string values to ARIA attributes.
+Angular soporta enlazar valores de cadena a atributos ARIA.
 
 ```angular-html
 <button type="button" [aria-label]="actionLabel()">
@@ -251,6 +251,6 @@ Angular supports binding string values to ARIA attributes.
 </button>
 ```
 
-Angular writes the string value to the element’s `aria-label` attribute and removes it when the bound value is `null`.
+Angular escribe el valor de cadena al atributo `aria-label` del elemento y lo elimina cuando el valor enlazado es `null`.
 
-Some ARIA features expose DOM properties or directive inputs that accept structured values (such as element references). Use standard property bindings for those cases. See the [accessibility guide](best-practices/a11y#aria-attributes-and-properties) for examples and additional guidance.
+Algunas funcionalidades ARIA exponen propiedades DOM o entradas de directivas que aceptan valores estructurados (como referencias a elementos). Usa enlaces de propiedad estándar para esos casos. Consulta la [guía de accesibilidad](best-practices/a11y#aria-attributes-and-properties) para ejemplos y orientación adicional.
diff --git a/adev-es/src/content/guide/templates/control-flow.en.md b/adev-es/src/content/guide/templates/control-flow.en.md
new file mode 100644
index 0000000..af08598
--- /dev/null
+++ b/adev-es/src/content/guide/templates/control-flow.en.md
@@ -0,0 +1,127 @@
+# Control flow
+
+Angular templates support control flow blocks that let you conditionally show, hide, and repeat elements.
+
+## Conditionally display content with `@if`, `@else-if` and `@else`
+
+The `@if` block conditionally displays its content when its condition expression is truthy:
+
+```angular-html
+@if (a > b) {
+  <p>{{a}} is greater than {{b}}</p>
+}
+```
+
+If you want to display alternative content, you can do so by providing any number of `@else if` blocks and a singular `@else` block.
+
+```angular-html
+@if (a > b) {
+  {{a}} is greater than {{b}}
+} @else if (b > a) {
+  {{a}} is less than {{b}}
+} @else {
+  {{a}} is equal to {{b}}
+}
+```
+
+### Referencing the conditional expression's result
+
+The `@if` conditional supports saving the result of the conditional expression into a variable for reuse inside of the block.
+
+```angular-html
+@if (user.profile.settings.startDate; as startDate) {
+  {{ startDate }}
+}
+```
+
+This can be useful for referencing longer expressions that would be easier to read and maintain within the template.
+
+## Repeat content with the `@for` block
+
+The `@for` block loops through a collection and repeatedly renders the content of a block. The collection can be any JavaScript [iterable](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Iteration_protocols), but Angular has additional performance optimizations for `Array` values.
+
+A typical `@for` loop looks like:
+
+```angular-html
+@for (item of items; track item.id) {
+  {{ item.name }}
+}
+```
+
+Angular's `@for` block does not support flow-modifying statements like JavaScript's `continue` or `break`.
+
+### Why is `track` in `@for` blocks important?
+
+The `track` expression allows Angular to maintain a relationship between your data and the DOM nodes on the page. This allows Angular to optimize performance by executing the minimum necessary DOM operations when the data changes.
+
+Using track effectively can significantly improve your application's rendering performance when looping over data collections.
+
+Select a property that uniquely identifies each item in the `track` expression. If your data model includes a uniquely identifying property, commonly `id` or `uuid`, use this value. If your data does not include a field like this, strongly consider adding one.
+
+For static collections that never change, you can use `$index` to tell Angular to track each item by its index in the collection.
+
+If no other option is available, you can specify `identity`. This tells Angular to track the item by its reference identity using the triple-equals operator (`===`). Avoid this option whenever possible as it can lead to significantly slower rendering updates, as Angular has no way to map which data item corresponds to which DOM nodes.
+
+### Contextual variables in `@for` blocks
+
+Inside `@for` blocks, several implicit variables are always available:
+
+| Variable | Meaning                                       |
+| -------- | --------------------------------------------- |
+| `$count` | Number of items in a collection iterated over |
+| `$index` | Index of the current row                      |
+| `$first` | Whether the current row is the first row      |
+| `$last`  | Whether the current row is the last row       |
+| `$even`  | Whether the current row index is even         |
+| `$odd`   | Whether the current row index is odd          |
+
+These variables are always available with these names, but can be aliased via a `let` segment:
+
+```angular-html
+@for (item of items; track item.id; let idx = $index, e = $even) {
+  <p>Item #{{ idx }}: {{ item.name }}</p>
+}
+```
+
+The aliasing is useful when nesting `@for` blocks, letting you read variables from the outer `@for` block from an inner `@for` block.
+
+### Providing a fallback for `@for` blocks with the `@empty` block
+
+You can optionally include an `@empty` section immediately after the `@for` block content. The content of the `@empty` block displays when there are no items:
+
+```angular-html
+@for (item of items; track item.name) {
+  <li> {{ item.name }}</li>
+} @empty {
+  <li> There are no items. </li>
+}
+```
+
+## Conditionally display content with the `@switch` block
+
+While the `@if` block is great for most scenarios, the `@switch` block provides an alternate syntax to conditionally render data. Its syntax closely resembles JavaScript's `switch` statement.
+
+```angular-html
+@switch (userPermissions) {
+  @case ('admin') {
+    <app-admin-dashboard />
+  }
+  @case ('reviewer') {
+    <app-reviewer-dashboard />
+  }
+  @case ('editor') {
+    <app-editor-dashboard />
+  }
+  @default {
+    <app-viewer-dashboard />
+  }
+}
+```
+
+The value of the conditional expression is compared to the case expression using the triple-equals (`===`) operator.
+
+**`@switch` does not have a fallthrough**, so you do not need an equivalent to a `break` or `return` statement in the block.
+
+You can optionally include a `@default` block. The content of the `@default` block displays if none of the preceding case expressions match the switch value.
+
+If no `@case` matches the expression and there is no `@default` block, nothing is shown.
diff --git a/adev-es/src/content/guide/templates/control-flow.md b/adev-es/src/content/guide/templates/control-flow.md
index af08598..4b972b7 100644
--- a/adev-es/src/content/guide/templates/control-flow.md
+++ b/adev-es/src/content/guide/templates/control-flow.md
@@ -1,10 +1,10 @@
-# Control flow
+# Flujo de control
 
-Angular templates support control flow blocks that let you conditionally show, hide, and repeat elements.
+Las plantillas de Angular soportan bloques de flujo de control que te permiten mostrar, ocultar y repetir elementos condicionalmente.
 
-## Conditionally display content with `@if`, `@else-if` and `@else`
+## Mostrar contenido condicionalmente con `@if`, `@else-if` y `@else`
 
-The `@if` block conditionally displays its content when its condition expression is truthy:
+El bloque `@if` muestra condicionalmente su contenido cuando su expresión de condición es truthy:
 
 ```angular-html
 @if (a > b) {
@@ -12,7 +12,7 @@ The `@if` block conditionally displays its content when its condition expression
 }
 ```
 
-If you want to display alternative content, you can do so by providing any number of `@else if` blocks and a singular `@else` block.
+Si quieres mostrar contenido alternativo, puedes hacerlo proporcionando cualquier número de bloques `@else if` y un único bloque `@else`.
 
 ```angular-html
 @if (a > b) {
@@ -24,9 +24,9 @@ If you want to display alternative content, you can do so by providing any numbe
 }
 ```
 
-### Referencing the conditional expression's result
+### Referenciar el resultado de la expresión condicional
 
-The `@if` conditional supports saving the result of the conditional expression into a variable for reuse inside of the block.
+El condicional `@if` soporta guardar el resultado de la expresión condicional en una variable para reutilizarla dentro del bloque.
 
 ```angular-html
 @if (user.profile.settings.startDate; as startDate) {
@@ -34,13 +34,13 @@ The `@if` conditional supports saving the result of the conditional expression i
 }
 ```
 
-This can be useful for referencing longer expressions that would be easier to read and maintain within the template.
+Esto puede ser útil para referenciar expresiones más largas que serían más fáciles de leer y mantener dentro de la plantilla.
 
-## Repeat content with the `@for` block
+## Repetir contenido con el bloque `@for`
 
-The `@for` block loops through a collection and repeatedly renders the content of a block. The collection can be any JavaScript [iterable](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Iteration_protocols), but Angular has additional performance optimizations for `Array` values.
+El bloque `@for` recorre una colección y renderiza repetidamente el contenido de un bloque. La colección puede ser cualquier [iterable](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Iteration_protocols) de JavaScript, pero Angular tiene optimizaciones de rendimiento adicionales para valores de `Array`.
 
-A typical `@for` loop looks like:
+Un bucle `@for` típico se ve así:
 
 ```angular-html
 @for (item of items; track item.id) {
@@ -48,34 +48,34 @@ A typical `@for` loop looks like:
 }
 ```
 
-Angular's `@for` block does not support flow-modifying statements like JavaScript's `continue` or `break`.
+El bloque `@for` de Angular no soporta declaraciones que modifican el flujo como `continue` o `break` de JavaScript.
 
-### Why is `track` in `@for` blocks important?
+### ¿Por qué es importante `track` en los bloques `@for`?
 
-The `track` expression allows Angular to maintain a relationship between your data and the DOM nodes on the page. This allows Angular to optimize performance by executing the minimum necessary DOM operations when the data changes.
+La expresión `track` permite a Angular mantener una relación entre tus datos y los nodos DOM en la página. Esto permite a Angular optimizar el rendimiento ejecutando las operaciones DOM mínimas necesarias cuando los datos cambian.
 
-Using track effectively can significantly improve your application's rendering performance when looping over data collections.
+Usar track efectivamente puede mejorar significativamente el rendimiento de renderización de tu aplicación al iterar sobre colecciones de datos.
 
-Select a property that uniquely identifies each item in the `track` expression. If your data model includes a uniquely identifying property, commonly `id` or `uuid`, use this value. If your data does not include a field like this, strongly consider adding one.
+Selecciona una propiedad que identifique únicamente cada elemento en la expresión `track`. Si tu modelo de datos incluye una propiedad que identifica únicamente, comúnmente `id` o `uuid`, usa este valor. Si tus datos no incluyen un campo como este, considera seriamente agregar uno.
 
-For static collections that never change, you can use `$index` to tell Angular to track each item by its index in the collection.
+Para colecciones estáticas que nunca cambian, puedes usar `$index` para indicarle a Angular que rastree cada elemento por su índice en la colección.
 
-If no other option is available, you can specify `identity`. This tells Angular to track the item by its reference identity using the triple-equals operator (`===`). Avoid this option whenever possible as it can lead to significantly slower rendering updates, as Angular has no way to map which data item corresponds to which DOM nodes.
+Si no hay otra opción disponible, puedes especificar `identity`. Esto le indica a Angular que rastree el elemento por su identidad de referencia usando el operador de triple igualdad (`===`). Evita esta opción siempre que sea posible, ya que puede llevar a actualizaciones de renderización significativamente más lentas, ya que Angular no tiene forma de mapear qué elemento de datos corresponde a qué nodos DOM.
 
-### Contextual variables in `@for` blocks
+### Variables contextuales en bloques `@for`
 
-Inside `@for` blocks, several implicit variables are always available:
+Dentro de los bloques `@for`, varias variables implícitas siempre están disponibles:
 
-| Variable | Meaning                                       |
-| -------- | --------------------------------------------- |
-| `$count` | Number of items in a collection iterated over |
-| `$index` | Index of the current row                      |
-| `$first` | Whether the current row is the first row      |
-| `$last`  | Whether the current row is the last row       |
-| `$even`  | Whether the current row index is even         |
-| `$odd`   | Whether the current row index is odd          |
+| Variable | Significado                                              |
+| -------- | -------------------------------------------------------- |
+| `$count` | Número de elementos en la colección iterada              |
+| `$index` | Índice de la fila actual                                 |
+| `$first` | Si la fila actual es la primera fila                     |
+| `$last`  | Si la fila actual es la última fila                      |
+| `$even`  | Si el índice de la fila actual es par                    |
+| `$odd`   | Si el índice de la fila actual es impar                  |
 
-These variables are always available with these names, but can be aliased via a `let` segment:
+Estas variables siempre están disponibles con estos nombres, pero pueden ser renombradas mediante un segmento `let`:
 
 ```angular-html
 @for (item of items; track item.id; let idx = $index, e = $even) {
@@ -83,11 +83,11 @@ These variables are always available with these names, but can be aliased via a
 }
 ```
 
-The aliasing is useful when nesting `@for` blocks, letting you read variables from the outer `@for` block from an inner `@for` block.
+El renombrado es útil al anidar bloques `@for`, permitiéndote leer variables del bloque `@for` externo desde un bloque `@for` interno.
 
-### Providing a fallback for `@for` blocks with the `@empty` block
+### Proporcionar un fallback para bloques `@for` con el bloque `@empty`
 
-You can optionally include an `@empty` section immediately after the `@for` block content. The content of the `@empty` block displays when there are no items:
+Opcionalmente puedes incluir una sección `@empty` inmediatamente después del contenido del bloque `@for`. El contenido del bloque `@empty` se muestra cuando no hay elementos:
 
 ```angular-html
 @for (item of items; track item.name) {
@@ -97,9 +97,9 @@ You can optionally include an `@empty` section immediately after the `@for` bloc
 }
 ```
 
-## Conditionally display content with the `@switch` block
+## Mostrar contenido condicionalmente con el bloque `@switch`
 
-While the `@if` block is great for most scenarios, the `@switch` block provides an alternate syntax to conditionally render data. Its syntax closely resembles JavaScript's `switch` statement.
+Aunque el bloque `@if` es excelente para la mayoría de escenarios, el bloque `@switch` proporciona una sintaxis alternativa para renderizar datos condicionalmente. Su sintaxis se asemeja mucho a la declaración `switch` de JavaScript.
 
 ```angular-html
 @switch (userPermissions) {
@@ -118,10 +118,10 @@ While the `@if` block is great for most scenarios, the `@switch` block provides
 }
 ```
 
-The value of the conditional expression is compared to the case expression using the triple-equals (`===`) operator.
+El valor de la expresión condicional se compara con la expresión case usando el operador de triple igualdad (`===`).
 
-**`@switch` does not have a fallthrough**, so you do not need an equivalent to a `break` or `return` statement in the block.
+**`@switch` no tiene fallthrough**, por lo que no necesitas un equivalente a una declaración `break` o `return` en el bloque.
 
-You can optionally include a `@default` block. The content of the `@default` block displays if none of the preceding case expressions match the switch value.
+Opcionalmente puedes incluir un bloque `@default`. El contenido del bloque `@default` se muestra si ninguna de las expresiones case precedentes coincide con el valor del switch.
 
-If no `@case` matches the expression and there is no `@default` block, nothing is shown.
+Si ningún `@case` coincide con la expresión y no hay un bloque `@default`, no se muestra nada.
diff --git a/adev-es/src/content/guide/templates/defer.en.md b/adev-es/src/content/guide/templates/defer.en.md
new file mode 100644
index 0000000..79abd39
--- /dev/null
+++ b/adev-es/src/content/guide/templates/defer.en.md
@@ -0,0 +1,385 @@
+# Deferred loading with `@defer`
+
+Deferrable views, also known as `@defer` blocks, reduce the initial bundle size of your application by deferring the loading of code that is not strictly necessary for the initial rendering of a page. This often results in a faster initial load and improvement in Core Web Vitals (CWV), primarily Largest Contentful Paint (LCP) and Time to First Byte (TTFB).
+
+To use this feature, you can declaratively wrap a section of your template in a @defer block:
+
+```angular-html
+@defer {
+  <large-component />
+}
+```
+
+The code for any components, directives, and pipes inside the `@defer` block is split into a separate JavaScript file and loaded only when necessary, after the rest of the template has been rendered.
+
+Deferrable views support a variety of triggers, prefetching options, and sub-blocks for placeholder, loading, and error state management.
+
+## Which dependencies are deferred?
+
+Components, directives, pipes, and any component CSS styles can be deferred when loading an application.
+
+In order for the dependencies within a `@defer` block to be deferred, they need to meet two conditions:
+
+1. **They must be standalone.** Non-standalone dependencies cannot be deferred and are still eagerly loaded, even if they are inside of `@defer` blocks.
+1. **They cannot be referenced outside of `@defer` blocks within the same file.** If they are referenced outside the `@defer` block or referenced within ViewChild queries, the dependencies will be eagerly loaded.
+
+The _transitive_ dependencies of the components, directives and pipes used in the `@defer` block do not strictly need to be standalone; transitive dependencies can still be declared in an `NgModule` and participate in deferred loading.
+
+Angular's compiler produces a [dynamic import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) statement for each component, directive, and pipe used in the `@defer` block. The main content of the block renders after all the imports resolve. Angular does not guarantee any particular order for these imports.
+
+## How to manage different stages of deferred loading
+
+`@defer` blocks have several sub blocks to allow you to gracefully handle different stages in the deferred loading process.
+
+### `@defer`
+
+This is the primary block that defines the section of content that is lazily loaded. It is not rendered initially– deferred content loads and renders once the specified [trigger](/guide/templates/defer#triggers) occurs or the `when` condition is met.
+
+By default, a `@defer` block is triggered when the browser state becomes [idle](/guide/templates/defer#idle).
+
+```angular-html
+@defer {
+  <large-component />
+}
+```
+
+### Show placeholder content with `@placeholder`
+
+By default, defer blocks do not render any content before they are triggered.
+
+The `@placeholder` is an optional block that declares what content to show before the `@defer` block is triggered.
+
+```angular-html
+@defer {
+  <large-component />
+} @placeholder {
+  <p>Placeholder content</p>
+}
+```
+
+While optional, certain triggers may require the presence of either a `@placeholder` or a [template reference variable](/guide/templates/variables#template-reference-variables) to function. See the [Triggers](/guide/templates/defer#triggers) section for more details.
+
+Angular replaces placeholder content with the main content once loading is complete. You can use any content in the placeholder section including plain HTML, components, directives, and pipes. Keep in mind the _dependencies of the placeholder block are eagerly loaded_.
+
+The `@placeholder` block accepts an optional parameter to specify the `minimum` amount of time that this placeholder should be shown after the placeholder content initially renders.
+
+```angular-html
+@defer {
+  <large-component />
+} @placeholder (minimum 500ms) {
+  <p>Placeholder content</p>
+}
+```
+
+This `minimum` parameter is specified in time increments of milliseconds (ms) or seconds (s). You can use this parameter to prevent fast flickering of placeholder content in the case that the deferred dependencies are fetched quickly.
+
+### Show loading content with `@loading`
+
+The `@loading` block is an optional block that allows you to declare content that is shown while deferred dependencies are loading. It replaces the `@placeholder` block once loading is triggered.
+
+```angular-html
+@defer {
+  <large-component />
+} @loading {
+  <img alt="loading..." src="loading.gif" />
+} @placeholder {
+  <p>Placeholder content</p>
+}
+```
+
+Its dependencies are eagerly loaded (similar to `@placeholder`).
+
+The `@loading` block accepts two optional parameters to help prevent fast flickering of content that may occur when deferred dependencies are fetched quickly,:
+
+- `minimum` - the minimum amount of time that this placeholder should be shown
+- `after` - the amount of time to wait after loading begins before showing the loading template
+
+```angular-html
+@defer {
+  <large-component />
+} @loading (after 100ms; minimum 1s) {
+  <img alt="loading..." src="loading.gif" />
+}
+```
+
+Both parameters are specified in time increments of milliseconds (ms) or seconds (s). In addition, the timers for both parameters begin immediately after the loading has been triggered.
+
+### Show error state when deferred loading fails with `@error`
+
+The `@error` block is an optional block that displays if deferred loading fails. Similar to `@placeholder` and `@loading`, the dependencies of the @error block are eagerly loaded.
+
+```angular-html
+@defer {
+  <large-component />
+} @error {
+  <p>Failed to load large component.</p>
+}
+```
+
+## Controlling deferred content loading with triggers
+
+You can specify **triggers** that control when Angular loads and displays deferred content.
+
+When a `@defer` block is triggered, it replaces placeholder content with lazily loaded content.
+
+Multiple event triggers can be defined by separating them with a semicolon, `;` and will be evaluated as OR conditions.
+
+There are two types of triggers: `on` and `when`.
+
+### `on`
+
+`on` specifies a condition for when the `@defer` block is triggered.
+
+The available triggers are as follows:
+
+| Trigger                       | Description                                                            |
+| ----------------------------- | ---------------------------------------------------------------------- |
+| [`idle`](#idle)               | Triggers when the browser is idle.                                     |
+| [`viewport`](#viewport)       | Triggers when specified content enters the viewport                    |
+| [`interaction`](#interaction) | Triggers when the user interacts with specified element                |
+| [`hover`](#hover)             | Triggers when the mouse hovers over specified area                     |
+| [`immediate`](#immediate)     | Triggers immediately after non-deferred content has finished rendering |
+| [`timer`](#timer)             | Triggers after a specific duration                                     |
+
+#### `idle`
+
+The `idle` trigger loads the deferred content once the browser has reached an idle state, based on requestIdleCallback. This is the default behavior with a defer block.
+
+```angular-html
+<!-- @defer (on idle) -->
+@defer {
+  <large-cmp />
+} @placeholder {
+  <div>Large component placeholder</div>
+}
+```
+
+#### `viewport`
+
+The `viewport` trigger loads the deferred content when the specified content enters the viewport using the [Intersection Observer API](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API). Observed content may be `@placeholder` content or an explicit element reference.
+
+By default, the `@defer` watches for the placeholder entering the viewport. Placeholders used this way must have a single root element.
+
+```angular-html
+@defer (on viewport) {
+  <large-cmp />
+} @placeholder {
+  <div>Large component placeholder</div>
+}
+```
+
+Alternatively, you can specify a [template reference variable](/guide/templates/variables) in the same template as the `@defer` block as the element that is watched to enter the viewport. This variable is passed in as a parameter on the viewport trigger.
+
+```angular-html
+<div #greeting>Hello!</div>
+@defer (on viewport(greeting)) {
+  <greetings-cmp />
+}
+```
+
+If you want to customize the options of the `IntersectionObserver`, the `viewport` trigger supports passing in an object literal. The literal supports all properties from the second parameter of `IntersectionObserver`, except for `root`. When using the object literal notation, you have to pass your trigger using the `trigger` property.
+
+```angular-html
+<div #greeting>Hello!</div>
+
+<!-- With options and a trigger -->
+@defer (on viewport({trigger: greeting, rootMargin: '100px', threshold: 0.5})) {
+  <greetings-cmp />
+}
+
+<!-- With options and an implied trigger -->
+@defer (on viewport({rootMargin: '100px', threshold: 0.5})) {
+  <greetings-cmp />
+} @placeholder {
+  <div>Implied trigger</div>
+}
+```
+
+#### `interaction`
+
+The `interaction` trigger loads the deferred content when the user interacts with the specified element through `click` or `keydown` events.
+
+By default, the placeholder acts as the interaction element. Placeholders used this way must have a single root element.
+
+```angular-html
+@defer (on interaction) {
+  <large-cmp />
+} @placeholder {
+  <div>Large component placeholder</div>
+}
+```
+
+Alternatively, you can specify a [template reference variable](/guide/templates/variables) in the same template as the `@defer` block as the element that is watched for interactions. This variable is passed in as a parameter on the viewport trigger.
+
+```angular-html
+<div #greeting>Hello!</div>
+@defer (on interaction(greeting)) {
+  <greetings-cmp />
+}
+```
+
+#### `hover`
+
+The `hover` trigger loads the deferred content when the mouse has hovered over the triggered area through the `mouseover` and `focusin` events.
+
+By default, the placeholder acts as the interaction element. Placeholders used this way must have a single root element.
+
+```angular-html
+@defer (on hover) {
+  <large-cmp />
+} @placeholder {
+  <div>Large component placeholder</div>
+}
+```
+
+Alternatively, you can specify a [template reference variable](/guide/templates/variables) in the same template as the `@defer` block as the element that is watched to enter the viewport. This variable is passed in as a parameter on the viewport trigger.
+
+```angular-html
+<div #greeting>Hello!</div>
+@defer (on hover(greeting)) {
+  <greetings-cmp />
+}
+```
+
+#### `immediate`
+
+The `immediate` trigger loads the deferred content immediately. This means that the deferred block loads as soon as all other non-deferred content has finished rendering.
+
+```angular-html
+@defer (on immediate) {
+  <large-cmp />
+} @placeholder {
+  <div>Large component placeholder</div>
+}
+```
+
+#### `timer`
+
+The `timer` trigger loads the deferred content after a specified duration.
+
+```angular-html
+@defer (on timer(500ms)) {
+  <large-cmp />
+} @placeholder {
+  <div>Large component placeholder</div>
+}
+```
+
+The duration parameter must be specified in milliseconds (`ms`) or seconds (`s`).
+
+### `when`
+
+The `when` trigger accepts a custom conditional expression and loads the deferred content when the condition becomes truthy.
+
+```angular-html
+@defer (when condition) {
+  <large-cmp />
+} @placeholder {
+  <div>Large component placeholder</div>
+}
+```
+
+This is a one-time operation– the `@defer` block does not revert back to the placeholder if the condition changes to a falsy value after becoming truthy.
+
+## Prefetching data with `prefetch`
+
+In addition to specifying a condition that determines when deferred content is shown, you can optionally specify a **prefetch trigger**. This trigger lets you load the JavaScript associated with the `@defer` block before the deferred content is shown.
+
+Prefetching enables more advanced behaviors, such as letting you start to prefetch resources before a user has actually seen or interacted with a defer block, but might interact with it soon, making the resources available faster.
+
+You can specify a prefetch trigger similarly to the block's main trigger, but prefixed with the `prefetch` keyword. The block's main trigger and prefetch trigger are separated with a semi-colon character (`;`).
+
+In the example below, the prefetching starts when a browser becomes idle and the contents of the block is rendered only once the user interacts with the placeholder.
+
+```angular-html
+@defer (on interaction; prefetch on idle) {
+  <large-cmp />
+} @placeholder {
+  <div>Large component placeholder</div>
+}
+```
+
+## Testing `@defer` blocks
+
+Angular provides TestBed APIs to simplify the process of testing `@defer` blocks and triggering different states during testing. By default, `@defer` blocks in tests play through like a defer block would behave in a real application. If you want to manually step through states, you can switch the defer block behavior to `Manual` in the TestBed configuration.
+
+```angular-ts
+it('should render a defer block in different states', async () => {
+  // configures the defer block behavior to start in "paused" state for manual control.
+  TestBed.configureTestingModule({deferBlockBehavior: DeferBlockBehavior.Manual});
+  @Component({
+    // ...
+    template: `
+      @defer {
+        <large-component />
+      } @placeholder {
+        Placeholder
+      } @loading {
+        Loading...
+      }
+    `
+  })
+  class ComponentA {}
+  // Create component fixture.
+  const componentFixture = TestBed.createComponent(ComponentA);
+  // Retrieve the list of all defer block fixtures and get the first block.
+  const deferBlockFixture = (await componentFixture.getDeferBlocks())[0];
+  // Renders placeholder state by default.
+  expect(componentFixture.nativeElement.innerHTML).toContain('Placeholder');
+  // Render loading state and verify rendered output.
+  await deferBlockFixture.render(DeferBlockState.Loading);
+  expect(componentFixture.nativeElement.innerHTML).toContain('Loading');
+  // Render final state and verify the output.
+  await deferBlockFixture.render(DeferBlockState.Complete);
+  expect(componentFixture.nativeElement.innerHTML).toContain('large works!');
+});
+```
+
+## Does `@defer` work with `NgModule`?
+
+`@defer` blocks are compatible with both standalone and NgModule-based components, directives and pipes. However, **only standalone components, directives and pipes can be deferred**. NgModule-based dependencies are not deferred and are included in the eagerly loaded bundle.
+
+## Compatibility between `@defer` blocks and Hot Module Reload (HMR)
+
+When Hot Module Replacement (HMR) is active, all `@defer` block chunks are fetched eagerly, overriding any configured triggers. To restore the standard trigger behavior, you must disable HMR by serving your application with the `--no-hmr` flag.
+
+## How does `@defer` work with server-side rendering (SSR) and static-site generation (SSG)?
+
+By default, when rendering an application on the server (either using SSR or SSG), defer blocks always render their `@placeholder` (or nothing if a placeholder is not specified) and triggers are not invoked. On the client, the content of the `@placeholder` is hydrated and triggers are activated.
+
+To render the main content of `@defer` blocks on the server (both SSR and SSG), you can enable [the Incremental Hydration feature](/guide/incremental-hydration) and configure `hydrate` triggers for the necessary blocks.
+
+## Best practices for deferring views
+
+### Avoid cascading loads with nested `@defer` blocks
+
+When you have nested `@defer` blocks, they should have different triggers in order to avoid loading simultaneously, which causes cascading requests and may negatively impact page load performance.
+
+### Avoid layout shifts
+
+Avoid deferring components that are visible in the user’s viewport on initial load. Doing this may negatively affect Core Web Vitals by causing an increase in cumulative layout shift (CLS).
+
+In the event this is necessary, avoid `immediate`, `timer`, `viewport`, and custom `when` triggers that cause the content to load during the initial page render.
+
+### Keep accessibility in mind
+
+When using `@defer` blocks, consider the impact on users with assistive technologies like screen readers.
+Screen readers that focus on a deferred section will initially read the placeholder or loading content, but may not announce changes when the deferred content loads.
+
+To ensure deferred content changes are announced to screen readers, you can wrap your `@defer` block in an element with a live region:
+
+```angular-html
+<div aria-live="polite" aria-atomic="true">
+  @defer (on timer(2000)) {
+    <user-profile [user]="currentUser" />
+  } @placeholder {
+    Loading user profile...
+  } @loading {
+    Please wait...
+  } @error {
+    Failed to load profile
+  }
+</div>
+```
+
+This ensures that changes are announced to the user when transitions (placeholder &rarr; loading &rarr; content/error) occur.
diff --git a/adev-es/src/content/guide/templates/defer.md b/adev-es/src/content/guide/templates/defer.md
index 79abd39..06c968e 100644
--- a/adev-es/src/content/guide/templates/defer.md
+++ b/adev-es/src/content/guide/templates/defer.md
@@ -1,8 +1,8 @@
-# Deferred loading with `@defer`
+# Carga diferida con `@defer`
 
-Deferrable views, also known as `@defer` blocks, reduce the initial bundle size of your application by deferring the loading of code that is not strictly necessary for the initial rendering of a page. This often results in a faster initial load and improvement in Core Web Vitals (CWV), primarily Largest Contentful Paint (LCP) and Time to First Byte (TTFB).
+Las vistas diferibles, también conocidas como bloques `@defer`, reducen el tamaño del bundle inicial de tu aplicación al diferir la carga de código que no es estrictamente necesario para la renderización inicial de una página. Esto a menudo resulta en una carga inicial más rápida y una mejora en Core Web Vitals (CWV), principalmente Largest Contentful Paint (LCP) y Time to First Byte (TTFB).
 
-To use this feature, you can declaratively wrap a section of your template in a @defer block:
+Para usar esta característica, puedes envolver declarativamente una sección de tu plantilla en un bloque @defer:
 
 ```angular-html
 @defer {
@@ -10,32 +10,32 @@ To use this feature, you can declaratively wrap a section of your template in a
 }
 ```
 
-The code for any components, directives, and pipes inside the `@defer` block is split into a separate JavaScript file and loaded only when necessary, after the rest of the template has been rendered.
+El código de cualquier componente, directiva y pipe dentro del bloque `@defer` se divide en un archivo JavaScript separado y se carga solo cuando es necesario, después de que el resto de la plantilla haya sido renderizada.
 
-Deferrable views support a variety of triggers, prefetching options, and sub-blocks for placeholder, loading, and error state management.
+Las vistas diferibles soportan una variedad de triggers, opciones de precarga, y sub-bloques para la gestión de estados de placeholder, carga y error.
 
-## Which dependencies are deferred?
+## ¿Qué dependencias se difieren?
 
-Components, directives, pipes, and any component CSS styles can be deferred when loading an application.
+Los componentes, directivas, pipes y cualquier estilo CSS de componente pueden ser diferidos al cargar una aplicación.
 
-In order for the dependencies within a `@defer` block to be deferred, they need to meet two conditions:
+Para que las dependencias dentro de un bloque `@defer` sean diferidas, necesitan cumplir dos condiciones:
 
-1. **They must be standalone.** Non-standalone dependencies cannot be deferred and are still eagerly loaded, even if they are inside of `@defer` blocks.
-1. **They cannot be referenced outside of `@defer` blocks within the same file.** If they are referenced outside the `@defer` block or referenced within ViewChild queries, the dependencies will be eagerly loaded.
+1. **Deben ser standalone.** Las dependencias no standalone no pueden ser diferidas y aún se cargan de forma eager, incluso si están dentro de bloques `@defer`.
+1. **No pueden ser referenciadas fuera de los bloques `@defer` dentro del mismo archivo.** Si son referenciadas fuera del bloque `@defer` o referenciadas dentro de consultas ViewChild, las dependencias se cargarán de forma eager.
 
-The _transitive_ dependencies of the components, directives and pipes used in the `@defer` block do not strictly need to be standalone; transitive dependencies can still be declared in an `NgModule` and participate in deferred loading.
+Las dependencias _transitivas_ de los componentes, directivas y pipes usados en el bloque `@defer` no necesitan estrictamente ser standalone; las dependencias transitivas aún pueden ser declaradas en un `NgModule` y participar en la carga diferida.
 
-Angular's compiler produces a [dynamic import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) statement for each component, directive, and pipe used in the `@defer` block. The main content of the block renders after all the imports resolve. Angular does not guarantee any particular order for these imports.
+El compilador de Angular produce una declaración de [importación dinámica](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) para cada componente, directiva y pipe usado en el bloque `@defer`. El contenido principal del bloque se renderiza después de que todas las importaciones se resuelvan. Angular no garantiza ningún orden particular para estas importaciones.
 
-## How to manage different stages of deferred loading
+## Cómo gestionar diferentes etapas de la carga diferida
 
-`@defer` blocks have several sub blocks to allow you to gracefully handle different stages in the deferred loading process.
+Los bloques `@defer` tienen varios sub-bloques para permitirte manejar elegantemente diferentes etapas en el proceso de carga diferida.
 
 ### `@defer`
 
-This is the primary block that defines the section of content that is lazily loaded. It is not rendered initially– deferred content loads and renders once the specified [trigger](/guide/templates/defer#triggers) occurs or the `when` condition is met.
+Este es el bloque principal que define la sección de contenido que se carga de forma lazy. No se renderiza inicialmente: el contenido diferido se carga y renderiza una vez que ocurre el [trigger](/guide/templates/defer#triggers) especificado o se cumple la condición `when`.
 
-By default, a `@defer` block is triggered when the browser state becomes [idle](/guide/templates/defer#idle).
+Por defecto, un bloque `@defer` se dispara cuando el estado del navegador se vuelve [idle](/guide/templates/defer#idle).
 
 ```angular-html
 @defer {
@@ -43,11 +43,11 @@ By default, a `@defer` block is triggered when the browser state becomes [idle](
 }
 ```
 
-### Show placeholder content with `@placeholder`
+### Mostrar contenido de placeholder con `@placeholder`
 
-By default, defer blocks do not render any content before they are triggered.
+Por defecto, los bloques defer no renderizan ningún contenido antes de ser disparados.
 
-The `@placeholder` is an optional block that declares what content to show before the `@defer` block is triggered.
+El `@placeholder` es un bloque opcional que declara qué contenido mostrar antes de que se dispare el bloque `@defer`.
 
 ```angular-html
 @defer {
@@ -57,11 +57,11 @@ The `@placeholder` is an optional block that declares what content to show befor
 }
 ```
 
-While optional, certain triggers may require the presence of either a `@placeholder` or a [template reference variable](/guide/templates/variables#template-reference-variables) to function. See the [Triggers](/guide/templates/defer#triggers) section for more details.
+Aunque es opcional, ciertos triggers pueden requerir la presencia de un `@placeholder` o una [variable de referencia de plantilla](/guide/templates/variables#template-reference-variables) para funcionar. Consulta la sección [Triggers](/guide/templates/defer#triggers) para más detalles.
 
-Angular replaces placeholder content with the main content once loading is complete. You can use any content in the placeholder section including plain HTML, components, directives, and pipes. Keep in mind the _dependencies of the placeholder block are eagerly loaded_.
+Angular reemplaza el contenido del placeholder con el contenido principal una vez que la carga se completa. Puedes usar cualquier contenido en la sección de placeholder incluyendo HTML simple, componentes, directivas y pipes. Ten en cuenta que _las dependencias del bloque placeholder se cargan de forma eager_.
 
-The `@placeholder` block accepts an optional parameter to specify the `minimum` amount of time that this placeholder should be shown after the placeholder content initially renders.
+El bloque `@placeholder` acepta un parámetro opcional para especificar la cantidad `minimum` de tiempo que este placeholder debería mostrarse después de que el contenido del placeholder se renderice inicialmente.
 
 ```angular-html
 @defer {
@@ -71,11 +71,11 @@ The `@placeholder` block accepts an optional parameter to specify the `minimum`
 }
 ```
 
-This `minimum` parameter is specified in time increments of milliseconds (ms) or seconds (s). You can use this parameter to prevent fast flickering of placeholder content in the case that the deferred dependencies are fetched quickly.
+Este parámetro `minimum` se especifica en incrementos de tiempo de milisegundos (ms) o segundos (s). Puedes usar este parámetro para prevenir parpadeos rápidos del contenido del placeholder en caso de que las dependencias diferidas se obtengan rápidamente.
 
-### Show loading content with `@loading`
+### Mostrar contenido de carga con `@loading`
 
-The `@loading` block is an optional block that allows you to declare content that is shown while deferred dependencies are loading. It replaces the `@placeholder` block once loading is triggered.
+El bloque `@loading` es un bloque opcional que te permite declarar contenido que se muestra mientras las dependencias diferidas se están cargando. Reemplaza el bloque `@placeholder` una vez que se dispara la carga.
 
 ```angular-html
 @defer {
@@ -87,12 +87,12 @@ The `@loading` block is an optional block that allows you to declare content tha
 }
 ```
 
-Its dependencies are eagerly loaded (similar to `@placeholder`).
+Sus dependencias se cargan de forma eager (similar a `@placeholder`).
 
-The `@loading` block accepts two optional parameters to help prevent fast flickering of content that may occur when deferred dependencies are fetched quickly,:
+El bloque `@loading` acepta dos parámetros opcionales para ayudar a prevenir parpadeos rápidos de contenido que pueden ocurrir cuando las dependencias diferidas se obtienen rápidamente:
 
-- `minimum` - the minimum amount of time that this placeholder should be shown
-- `after` - the amount of time to wait after loading begins before showing the loading template
+- `minimum` - la cantidad mínima de tiempo que este placeholder debería mostrarse
+- `after` - la cantidad de tiempo a esperar después de que comienza la carga antes de mostrar la plantilla de carga
 
 ```angular-html
 @defer {
@@ -102,11 +102,11 @@ The `@loading` block accepts two optional parameters to help prevent fast flicke
 }
 ```
 
-Both parameters are specified in time increments of milliseconds (ms) or seconds (s). In addition, the timers for both parameters begin immediately after the loading has been triggered.
+Ambos parámetros se especifican en incrementos de tiempo de milisegundos (ms) o segundos (s). Además, los temporizadores para ambos parámetros comienzan inmediatamente después de que la carga ha sido disparada.
 
-### Show error state when deferred loading fails with `@error`
+### Mostrar estado de error cuando falla la carga diferida con `@error`
 
-The `@error` block is an optional block that displays if deferred loading fails. Similar to `@placeholder` and `@loading`, the dependencies of the @error block are eagerly loaded.
+El bloque `@error` es un bloque opcional que se muestra si la carga diferida falla. Similar a `@placeholder` y `@loading`, las dependencias del bloque @error se cargan de forma eager.
 
 ```angular-html
 @defer {
@@ -116,37 +116,37 @@ The `@error` block is an optional block that displays if deferred loading fails.
 }
 ```
 
-## Controlling deferred content loading with triggers
+## Controlar la carga de contenido diferido con triggers
 
-You can specify **triggers** that control when Angular loads and displays deferred content.
+Puedes especificar **triggers** que controlan cuándo Angular carga y muestra el contenido diferido.
 
-When a `@defer` block is triggered, it replaces placeholder content with lazily loaded content.
+Cuando se dispara un bloque `@defer`, reemplaza el contenido del placeholder con contenido cargado de forma lazy.
 
-Multiple event triggers can be defined by separating them with a semicolon, `;` and will be evaluated as OR conditions.
+Se pueden definir múltiples triggers de evento separándolos con punto y coma, `;` y se evaluarán como condiciones OR.
 
-There are two types of triggers: `on` and `when`.
+Hay dos tipos de triggers: `on` y `when`.
 
 ### `on`
 
-`on` specifies a condition for when the `@defer` block is triggered.
+`on` especifica una condición para cuándo se dispara el bloque `@defer`.
 
-The available triggers are as follows:
+Los triggers disponibles son los siguientes:
 
-| Trigger                       | Description                                                            |
-| ----------------------------- | ---------------------------------------------------------------------- |
-| [`idle`](#idle)               | Triggers when the browser is idle.                                     |
-| [`viewport`](#viewport)       | Triggers when specified content enters the viewport                    |
-| [`interaction`](#interaction) | Triggers when the user interacts with specified element                |
-| [`hover`](#hover)             | Triggers when the mouse hovers over specified area                     |
-| [`immediate`](#immediate)     | Triggers immediately after non-deferred content has finished rendering |
-| [`timer`](#timer)             | Triggers after a specific duration                                     |
+| Trigger                       | Descripción                                                                       |
+| ----------------------------- | --------------------------------------------------------------------------------- |
+| [`idle`](#idle)               | Se dispara cuando el navegador está en estado idle.                               |
+| [`viewport`](#viewport)       | Se dispara cuando el contenido especificado entra al viewport                     |
+| [`interaction`](#interaction) | Se dispara cuando el usuario interactúa con el elemento especificado              |
+| [`hover`](#hover)             | Se dispara cuando el mouse pasa sobre el área especificada                        |
+| [`immediate`](#immediate)     | Se dispara inmediatamente después de que el contenido no diferido haya terminado de renderizarse |
+| [`timer`](#timer)             | Se dispara después de una duración específica                                     |
 
 #### `idle`
 
-The `idle` trigger loads the deferred content once the browser has reached an idle state, based on requestIdleCallback. This is the default behavior with a defer block.
+El trigger `idle` carga el contenido diferido una vez que el navegador ha alcanzado un estado idle, basado en requestIdleCallback. Este es el comportamiento predeterminado con un bloque defer.
 
 ```angular-html
-<!-- @defer (on idle) -->
+<!-- @defer (on idle) es el comportamiento por defecto -->
 @defer {
   <large-cmp />
 } @placeholder {
@@ -156,9 +156,9 @@ The `idle` trigger loads the deferred content once the browser has reached an id
 
 #### `viewport`
 
-The `viewport` trigger loads the deferred content when the specified content enters the viewport using the [Intersection Observer API](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API). Observed content may be `@placeholder` content or an explicit element reference.
+El trigger `viewport` carga el contenido diferido cuando el contenido especificado entra al viewport usando la [Intersection Observer API](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API). El contenido observado puede ser el contenido `@placeholder` o una referencia de elemento explícita.
 
-By default, the `@defer` watches for the placeholder entering the viewport. Placeholders used this way must have a single root element.
+Por defecto, el `@defer` observa que el placeholder entre al viewport. Los placeholders usados de esta manera deben tener un solo elemento raíz.
 
 ```angular-html
 @defer (on viewport) {
@@ -168,7 +168,7 @@ By default, the `@defer` watches for the placeholder entering the viewport. Plac
 }
 ```
 
-Alternatively, you can specify a [template reference variable](/guide/templates/variables) in the same template as the `@defer` block as the element that is watched to enter the viewport. This variable is passed in as a parameter on the viewport trigger.
+Alternativamente, puedes especificar una [variable de referencia de plantilla](/guide/templates/variables) en la misma plantilla que el bloque `@defer` como el elemento que se observa para entrar al viewport. Esta variable se pasa como un parámetro en el trigger viewport.
 
 ```angular-html
 <div #greeting>Hello!</div>
@@ -177,17 +177,17 @@ Alternatively, you can specify a [template reference variable](/guide/templates/
 }
 ```
 
-If you want to customize the options of the `IntersectionObserver`, the `viewport` trigger supports passing in an object literal. The literal supports all properties from the second parameter of `IntersectionObserver`, except for `root`. When using the object literal notation, you have to pass your trigger using the `trigger` property.
+Si quieres personalizar las opciones del `IntersectionObserver`, el trigger `viewport` soporta pasar un objeto literal. El literal soporta todas las propiedades del segundo parámetro de `IntersectionObserver`, excepto `root`. Al usar la notación de objeto literal, tienes que pasar tu trigger usando la propiedad `trigger`.
 
 ```angular-html
 <div #greeting>Hello!</div>
 
-<!-- With options and a trigger -->
+<!-- Con opciones y un trigger -->
 @defer (on viewport({trigger: greeting, rootMargin: '100px', threshold: 0.5})) {
   <greetings-cmp />
 }
 
-<!-- With options and an implied trigger -->
+<!-- Con opciones y un trigger implícito -->
 @defer (on viewport({rootMargin: '100px', threshold: 0.5})) {
   <greetings-cmp />
 } @placeholder {
@@ -197,9 +197,9 @@ If you want to customize the options of the `IntersectionObserver`, the `viewpor
 
 #### `interaction`
 
-The `interaction` trigger loads the deferred content when the user interacts with the specified element through `click` or `keydown` events.
+El trigger `interaction` carga el contenido diferido cuando el usuario interactúa con el elemento especificado a través de eventos `click` o `keydown`.
 
-By default, the placeholder acts as the interaction element. Placeholders used this way must have a single root element.
+Por defecto, el placeholder actúa como el elemento de interacción. Los placeholders usados de esta manera deben tener un solo elemento raíz.
 
 ```angular-html
 @defer (on interaction) {
@@ -209,7 +209,7 @@ By default, the placeholder acts as the interaction element. Placeholders used t
 }
 ```
 
-Alternatively, you can specify a [template reference variable](/guide/templates/variables) in the same template as the `@defer` block as the element that is watched for interactions. This variable is passed in as a parameter on the viewport trigger.
+Alternativamente, puedes especificar una [variable de referencia de plantilla](/guide/templates/variables) en la misma plantilla que el bloque `@defer` como el elemento que se observa para interacciones. Esta variable se pasa como un parámetro en el trigger viewport.
 
 ```angular-html
 <div #greeting>Hello!</div>
@@ -220,9 +220,9 @@ Alternatively, you can specify a [template reference variable](/guide/templates/
 
 #### `hover`
 
-The `hover` trigger loads the deferred content when the mouse has hovered over the triggered area through the `mouseover` and `focusin` events.
+El trigger `hover` carga el contenido diferido cuando el mouse ha pasado sobre el área disparada a través de los eventos `mouseover` y `focusin`.
 
-By default, the placeholder acts as the interaction element. Placeholders used this way must have a single root element.
+Por defecto, el placeholder actúa como el elemento de interacción. Los placeholders usados de esta manera deben tener un solo elemento raíz.
 
 ```angular-html
 @defer (on hover) {
@@ -232,7 +232,7 @@ By default, the placeholder acts as the interaction element. Placeholders used t
 }
 ```
 
-Alternatively, you can specify a [template reference variable](/guide/templates/variables) in the same template as the `@defer` block as the element that is watched to enter the viewport. This variable is passed in as a parameter on the viewport trigger.
+Alternativamente, puedes especificar una [variable de referencia de plantilla](/guide/templates/variables) en la misma plantilla que el bloque `@defer` como el elemento que se observa para entrar al viewport. Esta variable se pasa como un parámetro en el trigger viewport.
 
 ```angular-html
 <div #greeting>Hello!</div>
@@ -243,7 +243,7 @@ Alternatively, you can specify a [template reference variable](/guide/templates/
 
 #### `immediate`
 
-The `immediate` trigger loads the deferred content immediately. This means that the deferred block loads as soon as all other non-deferred content has finished rendering.
+El trigger `immediate` carga el contenido diferido inmediatamente. Esto significa que el bloque diferido se carga tan pronto como todo el otro contenido no diferido haya terminado de renderizarse.
 
 ```angular-html
 @defer (on immediate) {
@@ -255,7 +255,7 @@ The `immediate` trigger loads the deferred content immediately. This means that
 
 #### `timer`
 
-The `timer` trigger loads the deferred content after a specified duration.
+El trigger `timer` carga el contenido diferido después de una duración especificada.
 
 ```angular-html
 @defer (on timer(500ms)) {
@@ -265,11 +265,11 @@ The `timer` trigger loads the deferred content after a specified duration.
 }
 ```
 
-The duration parameter must be specified in milliseconds (`ms`) or seconds (`s`).
+El parámetro de duración debe especificarse en milisegundos (`ms`) o segundos (`s`).
 
 ### `when`
 
-The `when` trigger accepts a custom conditional expression and loads the deferred content when the condition becomes truthy.
+El trigger `when` acepta una expresión condicional personalizada y carga el contenido diferido cuando la condición se vuelve truthy.
 
 ```angular-html
 @defer (when condition) {
@@ -279,17 +279,17 @@ The `when` trigger accepts a custom conditional expression and loads the deferre
 }
 ```
 
-This is a one-time operation– the `@defer` block does not revert back to the placeholder if the condition changes to a falsy value after becoming truthy.
+Esta es una operación de una sola vez: el bloque `@defer` no vuelve al placeholder si la condición cambia a un valor falsy después de volverse truthy.
 
-## Prefetching data with `prefetch`
+## Precargar datos con `prefetch`
 
-In addition to specifying a condition that determines when deferred content is shown, you can optionally specify a **prefetch trigger**. This trigger lets you load the JavaScript associated with the `@defer` block before the deferred content is shown.
+Además de especificar una condición que determina cuándo se muestra el contenido diferido, opcionalmente puedes especificar un **trigger de precarga**. Este trigger te permite cargar el JavaScript asociado con el bloque `@defer` antes de que se muestre el contenido diferido.
 
-Prefetching enables more advanced behaviors, such as letting you start to prefetch resources before a user has actually seen or interacted with a defer block, but might interact with it soon, making the resources available faster.
+La precarga habilita comportamientos más avanzados, como permitirte comenzar a precargar recursos antes de que un usuario haya visto o interactuado realmente con un bloque defer, pero podría interactuar con él pronto, haciendo que los recursos estén disponibles más rápido.
 
-You can specify a prefetch trigger similarly to the block's main trigger, but prefixed with the `prefetch` keyword. The block's main trigger and prefetch trigger are separated with a semi-colon character (`;`).
+Puedes especificar un trigger de precarga de manera similar al trigger principal del bloque, pero prefijado con la palabra clave `prefetch`. El trigger principal del bloque y el trigger de precarga están separados con un carácter de punto y coma (`;`).
 
-In the example below, the prefetching starts when a browser becomes idle and the contents of the block is rendered only once the user interacts with the placeholder.
+En el ejemplo a continuación, la precarga comienza cuando un navegador se vuelve idle y el contenido del bloque se renderiza solo una vez que el usuario interactúa con el placeholder.
 
 ```angular-html
 @defer (on interaction; prefetch on idle) {
@@ -299,13 +299,13 @@ In the example below, the prefetching starts when a browser becomes idle and the
 }
 ```
 
-## Testing `@defer` blocks
+## Probar bloques `@defer`
 
-Angular provides TestBed APIs to simplify the process of testing `@defer` blocks and triggering different states during testing. By default, `@defer` blocks in tests play through like a defer block would behave in a real application. If you want to manually step through states, you can switch the defer block behavior to `Manual` in the TestBed configuration.
+Angular proporciona APIs de TestBed para simplificar el proceso de probar bloques `@defer` y disparar diferentes estados durante las pruebas. Por defecto, los bloques `@defer` en las pruebas se ejecutan como un bloque defer se comportaría en una aplicación real. Si quieres avanzar manualmente a través de los estados, puedes cambiar el comportamiento del bloque defer a `Manual` en la configuración de TestBed.
 
 ```angular-ts
 it('should render a defer block in different states', async () => {
-  // configures the defer block behavior to start in "paused" state for manual control.
+  // configura el comportamiento del bloque defer para iniciar en estado "pausado" para control manual.
   TestBed.configureTestingModule({deferBlockBehavior: DeferBlockBehavior.Manual});
   @Component({
     // ...
@@ -320,53 +320,53 @@ it('should render a defer block in different states', async () => {
     `
   })
   class ComponentA {}
-  // Create component fixture.
+  // Crea el fixture del componente.
   const componentFixture = TestBed.createComponent(ComponentA);
-  // Retrieve the list of all defer block fixtures and get the first block.
+  // Obtiene la lista de todos los fixtures de bloques defer y obtiene el primer bloque.
   const deferBlockFixture = (await componentFixture.getDeferBlocks())[0];
-  // Renders placeholder state by default.
+  // Renderiza el estado placeholder por defecto.
   expect(componentFixture.nativeElement.innerHTML).toContain('Placeholder');
-  // Render loading state and verify rendered output.
+  // Renderiza el estado loading y verifica la salida renderizada.
   await deferBlockFixture.render(DeferBlockState.Loading);
   expect(componentFixture.nativeElement.innerHTML).toContain('Loading');
-  // Render final state and verify the output.
+  // Renderiza el estado final y verifica la salida.
   await deferBlockFixture.render(DeferBlockState.Complete);
   expect(componentFixture.nativeElement.innerHTML).toContain('large works!');
 });
 ```
 
-## Does `@defer` work with `NgModule`?
+## ¿Funciona `@defer` con `NgModule`?
 
-`@defer` blocks are compatible with both standalone and NgModule-based components, directives and pipes. However, **only standalone components, directives and pipes can be deferred**. NgModule-based dependencies are not deferred and are included in the eagerly loaded bundle.
+Los bloques `@defer` son compatibles tanto con componentes, directivas y pipes basados en standalone como en NgModule. Sin embargo, **solo los componentes, directivas y pipes standalone pueden ser diferidos**. Las dependencias basadas en NgModule no se difieren y se incluyen en el bundle cargado de forma eager.
 
-## Compatibility between `@defer` blocks and Hot Module Reload (HMR)
+## Compatibilidad entre bloques `@defer` y Hot Module Reload (HMR)
 
-When Hot Module Replacement (HMR) is active, all `@defer` block chunks are fetched eagerly, overriding any configured triggers. To restore the standard trigger behavior, you must disable HMR by serving your application with the `--no-hmr` flag.
+Cuando Hot Module Replacement (HMR) está activo, todos los chunks de bloque `@defer` se obtienen de forma eager, anulando cualquier trigger configurado. Para restaurar el comportamiento de trigger estándar, debes deshabilitar HMR sirviendo tu aplicación con la bandera `--no-hmr`.
 
-## How does `@defer` work with server-side rendering (SSR) and static-site generation (SSG)?
+## ¿Cómo funciona `@defer` con server-side rendering (SSR) y static-site generation (SSG)?
 
-By default, when rendering an application on the server (either using SSR or SSG), defer blocks always render their `@placeholder` (or nothing if a placeholder is not specified) and triggers are not invoked. On the client, the content of the `@placeholder` is hydrated and triggers are activated.
+Por defecto, al renderizar una aplicación en el servidor (ya sea usando SSR o SSG), los bloques defer siempre renderizan su `@placeholder` (o nada si no se especifica un placeholder) y los triggers no se invocan. En el cliente, el contenido del `@placeholder` se hidrata y los triggers se activan.
 
-To render the main content of `@defer` blocks on the server (both SSR and SSG), you can enable [the Incremental Hydration feature](/guide/incremental-hydration) and configure `hydrate` triggers for the necessary blocks.
+Para renderizar el contenido principal de los bloques `@defer` en el servidor (tanto SSR como SSG), puedes habilitar [la característica de Incremental Hydration](/guide/incremental-hydration) y configurar triggers `hydrate` para los bloques necesarios.
 
-## Best practices for deferring views
+## Mejores prácticas para diferir vistas
 
-### Avoid cascading loads with nested `@defer` blocks
+### Evitar cargas en cascada con bloques `@defer` anidados
 
-When you have nested `@defer` blocks, they should have different triggers in order to avoid loading simultaneously, which causes cascading requests and may negatively impact page load performance.
+Cuando tienes bloques `@defer` anidados, deberían tener diferentes triggers para evitar cargar simultáneamente, lo que causa peticiones en cascada y puede impactar negativamente el rendimiento de carga de la página.
 
-### Avoid layout shifts
+### Evitar cambios de diseño
 
-Avoid deferring components that are visible in the user’s viewport on initial load. Doing this may negatively affect Core Web Vitals by causing an increase in cumulative layout shift (CLS).
+Evita diferir componentes que son visibles en el viewport del usuario en la carga inicial. Hacer esto puede afectar negativamente Core Web Vitals al causar un aumento en el cumulative layout shift (CLS).
 
-In the event this is necessary, avoid `immediate`, `timer`, `viewport`, and custom `when` triggers that cause the content to load during the initial page render.
+En el caso de que esto sea necesario, evita los triggers `immediate`, `timer`, `viewport`, y triggers `when` personalizados que causan que el contenido se cargue durante la renderización inicial de la página.
 
-### Keep accessibility in mind
+### Mantener la accesibilidad en mente
 
-When using `@defer` blocks, consider the impact on users with assistive technologies like screen readers.
-Screen readers that focus on a deferred section will initially read the placeholder or loading content, but may not announce changes when the deferred content loads.
+Al usar bloques `@defer`, considera el impacto en usuarios con tecnologías asistivas como lectores de pantalla.
+Los lectores de pantalla que se enfocan en una sección diferida leerán inicialmente el contenido del placeholder o de carga, pero pueden no anunciar cambios cuando el contenido diferido se carga.
 
-To ensure deferred content changes are announced to screen readers, you can wrap your `@defer` block in an element with a live region:
+Para asegurar que los cambios de contenido diferido sean anunciados a los lectores de pantalla, puedes envolver tu bloque `@defer` en un elemento con una región live:
 
 ```angular-html
 <div aria-live="polite" aria-atomic="true">
@@ -382,4 +382,4 @@ To ensure deferred content changes are announced to screen readers, you can wrap
 </div>
 ```
 
-This ensures that changes are announced to the user when transitions (placeholder &rarr; loading &rarr; content/error) occur.
+Esto asegura que los cambios sean anunciados al usuario cuando ocurren transiciones (placeholder &rarr; loading &rarr; content/error).
diff --git a/adev-es/src/content/guide/templates/event-listeners.en.md b/adev-es/src/content/guide/templates/event-listeners.en.md
new file mode 100644
index 0000000..de0d54c
--- /dev/null
+++ b/adev-es/src/content/guide/templates/event-listeners.en.md
@@ -0,0 +1,226 @@
+# Adding event listeners
+
+Angular supports defining event listeners on an element in your template by specifying the event name inside parentheses along with a statement that runs every time the event occurs.
+
+## Listening to native events
+
+When you want to add event listeners to an HTML element, you wrap the event with parentheses, `()`, which allows you to specify a listener statement.
+
+```angular-ts
+@Component({
+  template: `
+    <input type="text" (keyup)="updateField()" />
+  `,
+  ...
+})
+export class AppComponent{
+  updateField(): void {
+    console.log('Field is updated!');
+  }
+}
+```
+
+In this example, Angular calls `updateField` every time the `<input>` element emits a `keyup` event.
+
+You can add listeners for any native events, such as: `click`, `keydown`, `mouseover`, etc. To learn more, check out the [all available events on elements on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element#events).
+
+## Accessing the event argument
+
+In every template event listener, Angular provides a variable named `$event` that contains a reference to the event object.
+
+```angular-ts
+@Component({
+  template: `
+    <input type="text" (keyup)="updateField($event)" />
+  `,
+  ...
+})
+export class AppComponent {
+  updateField(event: KeyboardEvent): void {
+    console.log(`The user pressed: ${event.key}`);
+  }
+}
+```
+
+## Using key modifiers
+
+When you want to capture specific keyboard events for a specific key, you might write some code like the following:
+
+```angular-ts
+@Component({
+  template: `
+    <input type="text" (keyup)="updateField($event)" />
+  `,
+  ...
+})
+export class AppComponent {
+  updateField(event: KeyboardEvent): void {
+    if (event.key === 'Enter') {
+      console.log('The user pressed enter in the text field.');
+    }
+  }
+}
+```
+
+However, since this is a common scenario, Angular lets you filter the events by specifying a specific key using the period (`.`) character. By doing so, code can be simplified to:
+
+```angular-ts
+@Component({
+  template: `
+    <input type="text" (keyup.enter)="updateField($event)" />
+  `,
+  ...
+})
+export class AppComponent{
+  updateField(event: KeyboardEvent): void {
+    console.log('The user pressed enter in the text field.');
+  }
+}
+```
+
+You can also add additional key modifiers:
+
+```angular-html
+<!-- Matches shift and enter -->
+<input type="text" (keyup.shift.enter)="updateField($event)" />
+```
+
+Angular supports the modifiers `alt`, `control`, `meta`, and `shift`.
+
+You can specify the key or code that you would like to bind to keyboard events. The key and code fields are a native part of the browser keyboard event object. By default, event binding assumes you want to use the [Key values for keyboard events](https://developer.mozilla.org/docs/Web/API/UI_Events/Keyboard_event_key_values).
+
+Angular also allows you to specify [Code values for keyboard events](https://developer.mozilla.org/docs/Web/API/UI_Events/Keyboard_event_code_values) by providing a built-in `code` suffix.
+
+```angular-html
+<!-- Matches alt and left shift -->
+<input type="text" (keydown.code.alt.shiftleft)="updateField($event)" />
+```
+
+This can be useful for handling keyboard events consistently across different operating systems. For example, when using the Alt key on MacOS devices, the `key` property reports the key based on the character already modified by the Alt key. This means that a combination like Alt + S reports a `key` value of `'ß'`. The `code` property, however, corresponds to the physical or virtual button pressed rather than the character produced.
+
+## Preventing event default behavior
+
+If your event handler should replace the native browser behavior, you can use the event object's [`preventDefault` method](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault):
+
+```angular-ts
+@Component({
+  template: `
+    <a href="#overlay" (click)="showOverlay($event)">
+  `,
+  ...
+})
+export class AppComponent{
+  showOverlay(event: PointerEvent): void {
+    event.preventDefault();
+    console.log('Show overlay without updating the URL!');
+  }
+}
+```
+
+If the event handler statement evaluates to `false`, Angular automatically calls `preventDefault()`, similar to [native event handler attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes#event_handler_attributes). _Always prefer explicitly calling `preventDefault`_, as this approach makes the code's intent obvious.
+
+## Extend event handling
+
+Angular’s event system is extensible via custom event plugins registered with the `EVENT_MANAGER_PLUGINS` injection token.
+
+### Implementing Event Plugin
+
+To create a custom event plugin, extend the `EventManagerPlugin` class and implement the required methods.
+
+```ts
+import { Injectable } from '@angular/core';
+import { EventManagerPlugin } from '@angular/platform-browser';
+
+@Injectable()
+export class DebounceEventPlugin extends EventManagerPlugin {
+  constructor() {
+    super(document);
+  }
+
+  // Define which events this plugin supports
+  override supports(eventName: string) {
+    return /debounce/.test(eventName);
+  }
+
+  // Handle the event registration
+  override addEventListener(
+    element: HTMLElement,
+    eventName: string,
+    handler: Function
+  ) {
+    // Parse the event: e.g., "click.debounce.500"
+    // event: "click", delay: 500
+    const [event, method , delay = 300 ] = eventName.split('.');
+
+    let timeoutId: number;
+
+    const listener = (event: Event) => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+          handler(event);
+      }, delay);
+    };
+
+    element.addEventListener(event, listener);
+
+    // Return cleanup function
+    return () => {
+      clearTimeout(timeoutId);
+      element.removeEventListener(event, listener);
+    };
+  }
+}
+```
+
+Register your custom plugin using the `EVENT_MANAGER_PLUGINS` token in your application's providers:
+
+```ts
+import { bootstrapApplication } from '@angular/platform-browser';
+import { EVENT_MANAGER_PLUGINS } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { DebounceEventPlugin } from './debounce-event-plugin';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    {
+      provide: EVENT_MANAGER_PLUGINS,
+      useClass: DebounceEventPlugin,
+      multi: true
+    }
+  ]
+});
+```
+
+Once registered, you can use your custom event syntax in templates, as well as with the `host` property:
+
+```angular-ts
+@Component({
+  template: `
+    <input
+      type="text"
+      (input.debounce.500)="onSearch($event.target.value)"
+      placeholder="Search..."
+    />
+  `,
+  ...
+})
+export class Search {
+ onSearch(query: string): void {
+    console.log('Searching for:', query);
+  }
+}
+```
+
+```ts
+@Component({
+  ...,
+  host: {
+    '(click.debounce.500)': 'handleDebouncedClick()',
+  },
+})
+export class AwesomeCard {
+  handleDebouncedClick(): void {
+   console.log('Debounced click!');
+  }
+}
+```
diff --git a/adev-es/src/content/guide/templates/event-listeners.md b/adev-es/src/content/guide/templates/event-listeners.md
index de0d54c..5e42f62 100644
--- a/adev-es/src/content/guide/templates/event-listeners.md
+++ b/adev-es/src/content/guide/templates/event-listeners.md
@@ -1,10 +1,10 @@
-# Adding event listeners
+# Agregar escuchadores de eventos
 
-Angular supports defining event listeners on an element in your template by specifying the event name inside parentheses along with a statement that runs every time the event occurs.
+Angular soporta definir escuchadores de eventos en un elemento en tu plantilla especificando el nombre del evento dentro de paréntesis junto con una declaración que se ejecuta cada vez que ocurre el evento.
 
-## Listening to native events
+## Escuchar eventos nativos
 
-When you want to add event listeners to an HTML element, you wrap the event with parentheses, `()`, which allows you to specify a listener statement.
+Cuando quieres agregar escuchadores de eventos a un elemento HTML, envuelves el evento con paréntesis, `()`, lo que te permite especificar una declaración de escuchador.
 
 ```angular-ts
 @Component({
@@ -15,18 +15,18 @@ When you want to add event listeners to an HTML element, you wrap the event with
 })
 export class AppComponent{
   updateField(): void {
-    console.log('Field is updated!');
+    console.log('¡Campo actualizado!');
   }
 }
 ```
 
-In this example, Angular calls `updateField` every time the `<input>` element emits a `keyup` event.
+En este ejemplo, Angular llama a `updateField` cada vez que el elemento `<input>` emite un evento `keyup`.
 
-You can add listeners for any native events, such as: `click`, `keydown`, `mouseover`, etc. To learn more, check out the [all available events on elements on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element#events).
+Puedes agregar escuchadores para cualquier evento nativo, como: `click`, `keydown`, `mouseover`, etc. Para aprender más, consulta [todos los eventos disponibles en elementos en MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element#events).
 
-## Accessing the event argument
+## Acceder al argumento del evento
 
-In every template event listener, Angular provides a variable named `$event` that contains a reference to the event object.
+En cada escuchador de evento de plantilla, Angular proporciona una variable llamada `$event` que contiene una referencia al objeto del evento.
 
 ```angular-ts
 @Component({
@@ -37,14 +37,14 @@ In every template event listener, Angular provides a variable named `$event` tha
 })
 export class AppComponent {
   updateField(event: KeyboardEvent): void {
-    console.log(`The user pressed: ${event.key}`);
+    console.log(`El usuario presionó: ${event.key}`);
   }
 }
 ```
 
-## Using key modifiers
+## Usar modificadores de teclas
 
-When you want to capture specific keyboard events for a specific key, you might write some code like the following:
+Cuando quieres capturar eventos de teclado específicos para una tecla específica, podrías escribir código como el siguiente:
 
 ```angular-ts
 @Component({
@@ -56,13 +56,13 @@ When you want to capture specific keyboard events for a specific key, you might
 export class AppComponent {
   updateField(event: KeyboardEvent): void {
     if (event.key === 'Enter') {
-      console.log('The user pressed enter in the text field.');
+      console.log('El usuario presionó enter en el campo de texto.');
     }
   }
 }
 ```
 
-However, since this is a common scenario, Angular lets you filter the events by specifying a specific key using the period (`.`) character. By doing so, code can be simplified to:
+Sin embargo, dado que este es un escenario común, Angular te permite filtrar los eventos especificando una tecla específica usando el carácter de punto (`.`). Al hacerlo, el código se puede simplificar a:
 
 ```angular-ts
 @Component({
@@ -73,34 +73,34 @@ However, since this is a common scenario, Angular lets you filter the events by
 })
 export class AppComponent{
   updateField(event: KeyboardEvent): void {
-    console.log('The user pressed enter in the text field.');
+    console.log('El usuario presionó enter en el campo de texto.');
   }
 }
 ```
 
-You can also add additional key modifiers:
+También puedes agregar modificadores de teclas adicionales:
 
 ```angular-html
-<!-- Matches shift and enter -->
+<!-- Coincide con shift y enter -->
 <input type="text" (keyup.shift.enter)="updateField($event)" />
 ```
 
-Angular supports the modifiers `alt`, `control`, `meta`, and `shift`.
+Angular soporta los modificadores `alt`, `control`, `meta`, y `shift`.
 
-You can specify the key or code that you would like to bind to keyboard events. The key and code fields are a native part of the browser keyboard event object. By default, event binding assumes you want to use the [Key values for keyboard events](https://developer.mozilla.org/docs/Web/API/UI_Events/Keyboard_event_key_values).
+Puedes especificar la key o code que te gustaría enlazar a eventos de teclado. Los campos key y code son parte nativa del objeto de evento de teclado del navegador. Por defecto, el enlace de eventos asume que quieres usar los [valores Key para eventos de teclado](https://developer.mozilla.org/docs/Web/API/UI_Events/Keyboard_event_key_values).
 
-Angular also allows you to specify [Code values for keyboard events](https://developer.mozilla.org/docs/Web/API/UI_Events/Keyboard_event_code_values) by providing a built-in `code` suffix.
+Angular también te permite especificar [valores Code para eventos de teclado](https://developer.mozilla.org/docs/Web/API/UI_Events/Keyboard_event_code_values) proporcionando un sufijo `code` integrado.
 
 ```angular-html
-<!-- Matches alt and left shift -->
+<!-- Coincide con alt y shift izquierdo -->
 <input type="text" (keydown.code.alt.shiftleft)="updateField($event)" />
 ```
 
-This can be useful for handling keyboard events consistently across different operating systems. For example, when using the Alt key on MacOS devices, the `key` property reports the key based on the character already modified by the Alt key. This means that a combination like Alt + S reports a `key` value of `'ß'`. The `code` property, however, corresponds to the physical or virtual button pressed rather than the character produced.
+Esto puede ser útil para manejar eventos de teclado de manera consistente entre diferentes sistemas operativos. Por ejemplo, al usar la tecla Alt en dispositivos MacOS, la propiedad `key` reporta la tecla basada en el carácter ya modificado por la tecla Alt. Esto significa que una combinación como Alt + S reporta un valor de `key` de `'ß'`. La propiedad `code`, sin embargo, corresponde al botón físico o virtual presionado en lugar del carácter producido.
 
-## Preventing event default behavior
+## Prevenir el comportamiento predeterminado del evento
 
-If your event handler should replace the native browser behavior, you can use the event object's [`preventDefault` method](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault):
+Si tu manejador de eventos debe reemplazar el comportamiento nativo del navegador, puedes usar el [método `preventDefault`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) del objeto del evento:
 
 ```angular-ts
 @Component({
@@ -112,20 +112,20 @@ If your event handler should replace the native browser behavior, you can use th
 export class AppComponent{
   showOverlay(event: PointerEvent): void {
     event.preventDefault();
-    console.log('Show overlay without updating the URL!');
+    console.log('¡Mostrar overlay sin actualizar la URL!');
   }
 }
 ```
 
-If the event handler statement evaluates to `false`, Angular automatically calls `preventDefault()`, similar to [native event handler attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes#event_handler_attributes). _Always prefer explicitly calling `preventDefault`_, as this approach makes the code's intent obvious.
+Si la declaración del manejador de eventos se evalúa como `false`, Angular automáticamente llama a `preventDefault()`, similar a los [atributos de manejador de eventos nativos](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes#event_handler_attributes). _Siempre prefiere llamar explícitamente a `preventDefault`_, ya que este enfoque hace que la intención del código sea obvia.
 
-## Extend event handling
+## Extender el manejo de eventos
 
-Angular’s event system is extensible via custom event plugins registered with the `EVENT_MANAGER_PLUGINS` injection token.
+El sistema de eventos de Angular es extensible mediante plugins de eventos personalizados registrados con el token de inyección `EVENT_MANAGER_PLUGINS`.
 
-### Implementing Event Plugin
+### Implementar un Event Plugin
 
-To create a custom event plugin, extend the `EventManagerPlugin` class and implement the required methods.
+Para crear un plugin de eventos personalizado, extiende la clase `EventManagerPlugin` e implementa los métodos requeridos.
 
 ```ts
 import { Injectable } from '@angular/core';
@@ -137,18 +137,18 @@ export class DebounceEventPlugin extends EventManagerPlugin {
     super(document);
   }
 
-  // Define which events this plugin supports
+  // Define qué eventos soporta este plugin
   override supports(eventName: string) {
     return /debounce/.test(eventName);
   }
 
-  // Handle the event registration
+  // Maneja el registro del evento
   override addEventListener(
     element: HTMLElement,
     eventName: string,
     handler: Function
   ) {
-    // Parse the event: e.g., "click.debounce.500"
+    // Analiza el evento: ej., "click.debounce.500"
     // event: "click", delay: 500
     const [event, method , delay = 300 ] = eventName.split('.');
 
@@ -163,7 +163,7 @@ export class DebounceEventPlugin extends EventManagerPlugin {
 
     element.addEventListener(event, listener);
 
-    // Return cleanup function
+    // Retorna función de limpieza
     return () => {
       clearTimeout(timeoutId);
       element.removeEventListener(event, listener);
@@ -172,7 +172,7 @@ export class DebounceEventPlugin extends EventManagerPlugin {
 }
 ```
 
-Register your custom plugin using the `EVENT_MANAGER_PLUGINS` token in your application's providers:
+Registra tu plugin personalizado usando el token `EVENT_MANAGER_PLUGINS` en los proveedores de tu aplicación:
 
 ```ts
 import { bootstrapApplication } from '@angular/platform-browser';
@@ -191,7 +191,7 @@ bootstrapApplication(AppComponent, {
 });
 ```
 
-Once registered, you can use your custom event syntax in templates, as well as with the `host` property:
+Una vez registrado, puedes usar tu sintaxis de evento personalizada en plantillas, así como con la propiedad `host`:
 
 ```angular-ts
 @Component({
@@ -206,7 +206,7 @@ Once registered, you can use your custom event syntax in templates, as well as w
 })
 export class Search {
  onSearch(query: string): void {
-    console.log('Searching for:', query);
+    console.log('Buscando:', query);
   }
 }
 ```
@@ -220,7 +220,7 @@ export class Search {
 })
 export class AwesomeCard {
   handleDebouncedClick(): void {
-   console.log('Debounced click!');
+   console.log('¡Clic con debounce!');
   }
 }
 ```
diff --git a/adev-es/src/content/guide/templates/expression-syntax.en.md b/adev-es/src/content/guide/templates/expression-syntax.en.md
new file mode 100644
index 0000000..dc0a8af
--- /dev/null
+++ b/adev-es/src/content/guide/templates/expression-syntax.en.md
@@ -0,0 +1,121 @@
+# Expression Syntax
+
+Angular expressions are based on JavaScript, but differ in some key ways. This guide walks through the similarities and differences between Angular expressions and standard JavaScript.
+
+## Value literals
+
+Angular supports a subset of [literal values](https://developer.mozilla.org/en-US/docs/Glossary/Literal) from JavaScript.
+
+### Supported value literals
+
+| Literal type    | Example values                  |
+| --------------- | ------------------------------- |
+| String          | `'Hello'`, `"World"`            |
+| Boolean         | `true`, `false`                 |
+| Number          | `123`, `3.14`                   |
+| Object          | `{name: 'Alice'}`               |
+| Array           | `['Onion', 'Cheese', 'Garlic']` |
+| null            | `null`                          |
+| Template string | `` `Hello ${name}` ``           |
+| RegExp          | `/\d+/`                         |
+
+### Unsupported value literals
+
+| Literal type | Example values |
+| ------------ | -------------- |
+| BigInt       | `1n`           |
+
+## Globals
+
+Angular expressions support the following [globals](https://developer.mozilla.org/en-US/docs/Glossary/Global_object):
+
+- [undefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined)
+- [$any](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#any)
+
+No other JavaScript globals are supported. Common JavaScript globals include `Number`, `Boolean`, `NaN`, `Infinity`, `parseInt`, and more.
+
+## Local variables
+
+Angular automatically makes special local variables available for use in expressions in specific contexts. These special variables always start with the dollar sign character (`$`).
+
+For example, `@for` blocks make several local variables corresponding to information about the loop, such as `$index`.
+
+## What operators are supported?
+
+### Supported operators
+
+Angular supports the following operators from standard JavaScript.
+
+| Operator                      | Example(s)                                     |
+| ----------------------------- | ---------------------------------------------- |
+| Add / Concatenate             | `1 + 2`                                        |
+| Subtract                      | `52 - 3`                                       |
+| Multiply                      | `41 * 6`                                       |
+| Divide                        | `20 / 4`                                       |
+| Remainder (Modulo)            | `17 % 5`                                       |
+| Exponentiation                | `10 ** 3`                                      |
+| Parenthesis                   | `9 * (8 + 4)`                                  |
+| Conditional (Ternary)         | `a > b ? true : false`                         |
+| And (Logical)                 | `&&`                                           |
+| Or (Logical)                  | `\|\|`                                         |
+| Not (Logical)                 | `!`                                            |
+| Nullish Coalescing            | `possiblyNullValue ?? 'default'`               |
+| Comparison Operators          | `<`, `<=`, `>`, `>=`, `==`, `===`, `!==`, `!=` |
+| Unary Negation                | `-x`                                           |
+| Unary Plus                    | `+y`                                           |
+| Property Accessor             | `person['name']`                               |
+| Assignment                    | `a = b`                                        |
+| Addition Assignment           | `a += b`                                       |
+| Subtraction Assignment        | `a -= b`                                       |
+| Multiplication Assignment     | `a *= b`                                       |
+| Division Assignment           | `a /= b`                                       |
+| Remainder Assignment          | `a %= b`                                       |
+| Exponentiation Assignment     | `a **= b`                                      |
+| Logical AND Assignment        | `a &&= b`                                      |
+| Logical OR Assignment         | `a \|\|= b`                                    |
+| Nullish Coalescing Assignment | `a ??= b`                                      |
+
+Angular expressions additionally also support the following non-standard operators:
+
+| Operator                        | Example(s)                     |
+| ------------------------------- | ------------------------------ |
+| [Pipe](/guide/templates/pipes)  | `{{ total \| currency }}`      |
+| Optional chaining\*             | `someObj.someProp?.nestedProp` |
+| Non-null assertion (TypeScript) | `someObj!.someProp`            |
+
+NOTE: Optional chaining behaves differently from the standard JavaScript version in that if the left side of Angular’s optional chaining operator is `null` or `undefined`, it returns `null` instead of `undefined`.
+
+### Unsupported operators
+
+| Operator              | Example(s)                        |
+| --------------------- | --------------------------------- |
+| All bitwise operators | `&`, `&=`, `~`, `\|=`, `^=`, etc. |
+| Object destructuring  | `const { name } = person`         |
+| Array destructuring   | `const [firstItem] = items`       |
+| Comma operator        | `x = (x++, x)`                    |
+| instanceof            | `car instanceof Automobile`       |
+| new                   | `new Car()`                       |
+
+## Lexical context for expressions
+
+Angular expressions are evaluated within the context of the component class as well as any relevant [template variables](/guide/templates/variables), locals, and globals.
+
+When referring to component class members, `this` is always implied. However, if a template declares a [template variables](guide/templates/variables) with the same name as a member, the variable shadows that member. You can unambiguously reference such a class member by explicitly using `this.`. This can be useful when creating an `@let` declaration that shadows a class member, e.g. for signal narrowing purposes.
+
+## Declarations
+
+Generally speaking, declarations are not supported in Angular expressions. This includes, but is not limited to:
+
+| Declarations    | Example(s)                                  |
+| --------------- | ------------------------------------------- |
+| Variables       | `let label = 'abc'`, `const item = 'apple'` |
+| Functions       | `function myCustomFunction() { }`           |
+| Arrow Functions | `() => { }`                                 |
+| Classes         | `class Rectangle { }`                       |
+
+# Event listener statements
+
+Event handlers are **statements** rather than expressions. While they support all of the same syntax as Angular expressions, there are two key differences:
+
+1. Statements **do support** assignment operators (but not destructing assignments)
+1. Statements **do not support** pipes
diff --git a/adev-es/src/content/guide/templates/expression-syntax.md b/adev-es/src/content/guide/templates/expression-syntax.md
index dc0a8af..25600a1 100644
--- a/adev-es/src/content/guide/templates/expression-syntax.md
+++ b/adev-es/src/content/guide/templates/expression-syntax.md
@@ -1,121 +1,121 @@
-# Expression Syntax
+# Sintaxis de Expresiones
 
-Angular expressions are based on JavaScript, but differ in some key ways. This guide walks through the similarities and differences between Angular expressions and standard JavaScript.
+Las expresiones de Angular están basadas en JavaScript, pero difieren en algunos aspectos clave. Esta guía recorre las similitudes y diferencias entre las expresiones de Angular y JavaScript estándar.
 
-## Value literals
+## Literales de valor
 
-Angular supports a subset of [literal values](https://developer.mozilla.org/en-US/docs/Glossary/Literal) from JavaScript.
+Angular soporta un subconjunto de [valores literales](https://developer.mozilla.org/en-US/docs/Glossary/Literal) de JavaScript.
 
-### Supported value literals
+### Literales de valor soportados
 
-| Literal type    | Example values                  |
-| --------------- | ------------------------------- |
-| String          | `'Hello'`, `"World"`            |
-| Boolean         | `true`, `false`                 |
-| Number          | `123`, `3.14`                   |
-| Object          | `{name: 'Alice'}`               |
-| Array           | `['Onion', 'Cheese', 'Garlic']` |
-| null            | `null`                          |
-| Template string | `` `Hello ${name}` ``           |
-| RegExp          | `/\d+/`                         |
+| Tipo de literal | Valores de ejemplo                  |
+| --------------- | ----------------------------------- |
+| String          | `'Hello'`, `"World"`                |
+| Boolean         | `true`, `false`                     |
+| Number          | `123`, `3.14`                       |
+| Object          | `{name: 'Alice'}`                   |
+| Array           | `['Onion', 'Cheese', 'Garlic']`     |
+| null            | `null`                              |
+| Template string | `` `Hello ${name}` ``               |
+| RegExp          | `/\d+/`                             |
 
-### Unsupported value literals
+### Literales de valor no soportados
 
-| Literal type | Example values |
-| ------------ | -------------- |
-| BigInt       | `1n`           |
+| Tipo de literal | Valores de ejemplo |
+| --------------- | ------------------ |
+| BigInt          | `1n`               |
 
-## Globals
+## Globales
 
-Angular expressions support the following [globals](https://developer.mozilla.org/en-US/docs/Glossary/Global_object):
+Las expresiones de Angular soportan los siguientes [globales](https://developer.mozilla.org/en-US/docs/Glossary/Global_object):
 
 - [undefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined)
 - [$any](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#any)
 
-No other JavaScript globals are supported. Common JavaScript globals include `Number`, `Boolean`, `NaN`, `Infinity`, `parseInt`, and more.
+No se soportan otros globales de JavaScript. Los globales comunes de JavaScript incluyen `Number`, `Boolean`, `NaN`, `Infinity`, `parseInt`, y más.
 
-## Local variables
+## Variables locales
 
-Angular automatically makes special local variables available for use in expressions in specific contexts. These special variables always start with the dollar sign character (`$`).
+Angular automáticamente hace disponibles variables locales especiales para usar en expresiones en contextos específicos. Estas variables especiales siempre comienzan con el carácter de signo de dólar (`$`).
 
-For example, `@for` blocks make several local variables corresponding to information about the loop, such as `$index`.
+Por ejemplo, los bloques `@for` hacen disponibles varias variables locales correspondientes a información sobre el bucle, como `$index`.
 
-## What operators are supported?
+## ¿Qué operadores están soportados?
 
-### Supported operators
+### Operadores soportados
 
-Angular supports the following operators from standard JavaScript.
+Angular soporta los siguientes operadores de JavaScript estándar.
 
-| Operator                      | Example(s)                                     |
-| ----------------------------- | ---------------------------------------------- |
-| Add / Concatenate             | `1 + 2`                                        |
-| Subtract                      | `52 - 3`                                       |
-| Multiply                      | `41 * 6`                                       |
-| Divide                        | `20 / 4`                                       |
-| Remainder (Modulo)            | `17 % 5`                                       |
-| Exponentiation                | `10 ** 3`                                      |
-| Parenthesis                   | `9 * (8 + 4)`                                  |
-| Conditional (Ternary)         | `a > b ? true : false`                         |
-| And (Logical)                 | `&&`                                           |
-| Or (Logical)                  | `\|\|`                                         |
-| Not (Logical)                 | `!`                                            |
-| Nullish Coalescing            | `possiblyNullValue ?? 'default'`               |
-| Comparison Operators          | `<`, `<=`, `>`, `>=`, `==`, `===`, `!==`, `!=` |
-| Unary Negation                | `-x`                                           |
-| Unary Plus                    | `+y`                                           |
-| Property Accessor             | `person['name']`                               |
-| Assignment                    | `a = b`                                        |
-| Addition Assignment           | `a += b`                                       |
-| Subtraction Assignment        | `a -= b`                                       |
-| Multiplication Assignment     | `a *= b`                                       |
-| Division Assignment           | `a /= b`                                       |
-| Remainder Assignment          | `a %= b`                                       |
-| Exponentiation Assignment     | `a **= b`                                      |
-| Logical AND Assignment        | `a &&= b`                                      |
-| Logical OR Assignment         | `a \|\|= b`                                    |
-| Nullish Coalescing Assignment | `a ??= b`                                      |
+| Operador                         | Ejemplo(s)                                     |
+| -------------------------------- | ---------------------------------------------- |
+| Add / Concatenate                | `1 + 2`                                        |
+| Subtract                         | `52 - 3`                                       |
+| Multiply                         | `41 * 6`                                       |
+| Divide                           | `20 / 4`                                       |
+| Remainder (Modulo)               | `17 % 5`                                       |
+| Exponentiation                   | `10 ** 3`                                      |
+| Parenthesis                      | `9 * (8 + 4)`                                  |
+| Conditional (Ternary)            | `a > b ? true : false`                         |
+| And (Logical)                    | `&&`                                           |
+| Or (Logical)                     | `\|\|`                                         |
+| Not (Logical)                    | `!`                                            |
+| Nullish Coalescing               | `possiblyNullValue ?? 'default'`               |
+| Comparison Operators             | `<`, `<=`, `>`, `>=`, `==`, `===`, `!==`, `!=` |
+| Unary Negation                   | `-x`                                           |
+| Unary Plus                       | `+y`                                           |
+| Property Accessor                | `person['name']`                               |
+| Assignment                       | `a = b`                                        |
+| Addition Assignment              | `a += b`                                       |
+| Subtraction Assignment           | `a -= b`                                       |
+| Multiplication Assignment        | `a *= b`                                       |
+| Division Assignment              | `a /= b`                                       |
+| Remainder Assignment             | `a %= b`                                       |
+| Exponentiation Assignment        | `a **= b`                                      |
+| Logical AND Assignment           | `a &&= b`                                      |
+| Logical OR Assignment            | `a \|\|= b`                                    |
+| Nullish Coalescing Assignment    | `a ??= b`                                      |
 
-Angular expressions additionally also support the following non-standard operators:
+Las expresiones de Angular también soportan adicionalmente los siguientes operadores no estándar:
 
-| Operator                        | Example(s)                     |
-| ------------------------------- | ------------------------------ |
-| [Pipe](/guide/templates/pipes)  | `{{ total \| currency }}`      |
-| Optional chaining\*             | `someObj.someProp?.nestedProp` |
-| Non-null assertion (TypeScript) | `someObj!.someProp`            |
+| Operador                                  | Ejemplo(s)                     |
+| ----------------------------------------- | ------------------------------ |
+| [Pipe](/guide/templates/pipes)            | `{{ total \| currency }}`      |
+| Optional chaining\*                       | `someObj.someProp?.nestedProp` |
+| Non-null assertion (TypeScript)           | `someObj!.someProp`            |
 
-NOTE: Optional chaining behaves differently from the standard JavaScript version in that if the left side of Angular’s optional chaining operator is `null` or `undefined`, it returns `null` instead of `undefined`.
+NOTA: El optional chaining se comporta de manera diferente a la versión estándar de JavaScript en que si el lado izquierdo del operador optional chaining de Angular es `null` o `undefined`, retorna `null` en lugar de `undefined`.
 
-### Unsupported operators
+### Operadores no soportados
 
-| Operator              | Example(s)                        |
-| --------------------- | --------------------------------- |
-| All bitwise operators | `&`, `&=`, `~`, `\|=`, `^=`, etc. |
-| Object destructuring  | `const { name } = person`         |
-| Array destructuring   | `const [firstItem] = items`       |
-| Comma operator        | `x = (x++, x)`                    |
-| instanceof            | `car instanceof Automobile`       |
-| new                   | `new Car()`                       |
+| Operador                    | Ejemplo(s)                        |
+| --------------------------- | --------------------------------- |
+| All bitwise operators       | `&`, `&=`, `~`, `\|=`, `^=`, etc. |
+| Object destructuring        | `const { name } = person`         |
+| Array destructuring         | `const [firstItem] = items`       |
+| Comma operator              | `x = (x++, x)`                    |
+| instanceof                  | `car instanceof Automobile`       |
+| new                         | `new Car()`                       |
 
-## Lexical context for expressions
+## Contexto léxico para expresiones
 
-Angular expressions are evaluated within the context of the component class as well as any relevant [template variables](/guide/templates/variables), locals, and globals.
+Las expresiones de Angular se evalúan dentro del contexto de la clase del componente así como de cualquier [variable de plantilla](/guide/templates/variables), locales y globales relevantes.
 
-When referring to component class members, `this` is always implied. However, if a template declares a [template variables](guide/templates/variables) with the same name as a member, the variable shadows that member. You can unambiguously reference such a class member by explicitly using `this.`. This can be useful when creating an `@let` declaration that shadows a class member, e.g. for signal narrowing purposes.
+Al referirse a miembros de la clase del componente, `this` siempre está implícito. Sin embargo, si una plantilla declara una [variable de plantilla](guide/templates/variables) con el mismo nombre que un miembro, la variable oculta ese miembro. Puedes referenciar inequívocamente tal miembro de clase usando explícitamente `this.`. Esto puede ser útil al crear una declaración `@let` que oculta un miembro de clase, por ejemplo, para propósitos de estrechamiento de signals.
 
-## Declarations
+## Declaraciones
 
-Generally speaking, declarations are not supported in Angular expressions. This includes, but is not limited to:
+En términos generales, las declaraciones no están soportadas en las expresiones de Angular. Esto incluye, pero no se limita a:
 
-| Declarations    | Example(s)                                  |
+| Declaraciones   | Ejemplo(s)                                  |
 | --------------- | ------------------------------------------- |
 | Variables       | `let label = 'abc'`, `const item = 'apple'` |
 | Functions       | `function myCustomFunction() { }`           |
 | Arrow Functions | `() => { }`                                 |
 | Classes         | `class Rectangle { }`                       |
 
-# Event listener statements
+# Declaraciones de event listeners
 
-Event handlers are **statements** rather than expressions. While they support all of the same syntax as Angular expressions, there are two key differences:
+Los manejadores de eventos son **declaraciones** en lugar de expresiones. Aunque soportan toda la misma sintaxis que las expresiones de Angular, hay dos diferencias clave:
 
-1. Statements **do support** assignment operators (but not destructing assignments)
-1. Statements **do not support** pipes
+1. Las declaraciones **sí soportan** operadores de asignación (pero no asignaciones destructivas)
+1. Las declaraciones **no soportan** pipes
diff --git a/adev-es/src/content/guide/templates/ng-container.en.md b/adev-es/src/content/guide/templates/ng-container.en.md
new file mode 100644
index 0000000..d63d593
--- /dev/null
+++ b/adev-es/src/content/guide/templates/ng-container.en.md
@@ -0,0 +1,115 @@
+# Grouping elements with ng-container
+
+`<ng-container>` is a special element in Angular that groups multiple elements together or marks a location in a template without rendering a real element in the DOM.
+
+```angular-html
+<!-- Component template -->
+<section>
+  <ng-container>
+    <h3>User bio</h3>
+    <p>Here's some info about the user</p>
+  </ng-container>
+</section>
+```
+
+```angular-html
+<!-- Rendered DOM -->
+<section>
+  <h3>User bio</h3>
+  <p>Here's some info about the user</p>
+</section>
+```
+
+You can apply directives to `<ng-container>` to add behaviors or configuration to a part of your template.
+
+Angular ignores all attribute bindings and event listeners applied to `<ng-container>`, including those applied via directive.
+
+## Using `<ng-container>` to display dynamic contents
+
+`<ng-container>` can act as a placeholder for rendering dynamic content.
+
+### Rendering components
+
+You can use Angular's built-in `NgComponentOutlet` directive to dynamically render a component to the location of the `<ng-container>`.
+
+```angular-ts
+@Component({
+  template: `
+    <h2>Your profile</h2>
+    <ng-container [ngComponentOutlet]="profileComponent()" />
+  `
+})
+export class UserProfile {
+  isAdmin = input(false);
+  profileComponent = computed(() => this.isAdmin() ? AdminProfile : BasicUserProfile);
+}
+```
+
+In the example above, the `NgComponentOutlet` directive dynamically renders either `AdminProfile` or `BasicUserProfile` in the location of the `<ng-container>` element.
+
+### Rendering template fragments
+
+You can use Angular's built-in `NgTemplateOutlet` directive to dynamically render a template fragment to the location of the `<ng-container>`.
+
+```angular-ts
+@Component({
+  template: `
+    <h2>Your profile</h2>
+    <ng-container [ngTemplateOutlet]="profileTemplate()" />
+
+    <ng-template #admin>This is the admin profile</ng-template>
+    <ng-template #basic>This is the basic profile</ng-template>
+  `
+})
+export class UserProfile {
+  isAdmin = input(false);
+  adminTemplate = viewChild('admin', {read: TemplateRef});
+  basicTemplate = viewChild('basic', {read: TemplateRef});
+  profileTemplate = computed(() => this.isAdmin() ? this.adminTemplate() : this.basicTemplate());
+}
+```
+
+In the example above, the `ngTemplateOutlet` directive dynamically renders one of two template fragments in the location of the `<ng-container>` element.
+
+For more information regarding NgTemplateOutlet, see the [NgTemplateOutlets API documentation page](/api/common/NgTemplateOutlet).
+
+## Using `<ng-container>` with structural directives
+
+You can also apply structural directives to `<ng-container>` elements. Common examples of this include `ngIf`and `ngFor`.
+
+```angular-html
+<ng-container *ngIf="permissions == 'admin'">
+  <h1>Admin Dashboard</h1>
+  <admin-infographic></admin-infographic>
+</ng-container>
+
+<ng-container *ngFor="let item of items; index as i; trackBy: trackByFn">
+  <h2>{{ item.title }}</h2>
+  <p>{{ item.description }}</p>
+</ng-container>
+```
+
+## Using `<ng-container>` for injection
+
+See the Dependency Injection guide for more information on Angular's dependency injection system.
+
+When you apply a directive to `<ng-container>`, descendant elements can inject the directive or anything that the directive provides. Use this when you want to declaratively provide a value to a specific part of your template.
+
+```angular-ts
+@Directive({
+  selector: '[theme]',
+})
+export class Theme {
+  // Create an input that accepts 'light' or 'dark`, defaulting to 'light'.
+  mode = input<'light' | 'dark'>('light');
+}
+```
+
+```angular-html
+<ng-container theme="dark">
+  <profile-pic />
+  <user-bio />
+</ng-container>
+```
+
+In the example above, the `ProfilePic` and `UserBio` components can inject the `Theme` directive and apply styles based on its `mode`.
diff --git a/adev-es/src/content/guide/templates/ng-container.md b/adev-es/src/content/guide/templates/ng-container.md
index d63d593..b1ca3d4 100644
--- a/adev-es/src/content/guide/templates/ng-container.md
+++ b/adev-es/src/content/guide/templates/ng-container.md
@@ -1,9 +1,9 @@
-# Grouping elements with ng-container
+# Agrupando elementos con ng-container
 
-`<ng-container>` is a special element in Angular that groups multiple elements together or marks a location in a template without rendering a real element in the DOM.
+`<ng-container>` es un elemento especial en Angular que agrupa múltiples elementos juntos o marca una ubicación en una plantilla sin renderizar un elemento real en el DOM.
 
 ```angular-html
-<!-- Component template -->
+<!-- Plantilla del componente -->
 <section>
   <ng-container>
     <h3>User bio</h3>
@@ -13,24 +13,24 @@
 ```
 
 ```angular-html
-<!-- Rendered DOM -->
+<!-- DOM renderizado -->
 <section>
   <h3>User bio</h3>
   <p>Here's some info about the user</p>
 </section>
 ```
 
-You can apply directives to `<ng-container>` to add behaviors or configuration to a part of your template.
+Puedes aplicar directivas a `<ng-container>` para agregar comportamientos o configuración a una parte de tu plantilla.
 
-Angular ignores all attribute bindings and event listeners applied to `<ng-container>`, including those applied via directive.
+Angular ignora todos los enlaces de atributos y event listeners aplicados a `<ng-container>`, incluyendo aquellos aplicados a través de directivas.
 
-## Using `<ng-container>` to display dynamic contents
+## Usando `<ng-container>` para mostrar contenido dinámico
 
-`<ng-container>` can act as a placeholder for rendering dynamic content.
+`<ng-container>` puede actuar como un placeholder para renderizar contenido dinámico.
 
-### Rendering components
+### Renderizando componentes
 
-You can use Angular's built-in `NgComponentOutlet` directive to dynamically render a component to the location of the `<ng-container>`.
+Puedes usar la directiva integrada de Angular `NgComponentOutlet` para renderizar dinámicamente un componente en la ubicación del `<ng-container>`.
 
 ```angular-ts
 @Component({
@@ -45,11 +45,11 @@ export class UserProfile {
 }
 ```
 
-In the example above, the `NgComponentOutlet` directive dynamically renders either `AdminProfile` or `BasicUserProfile` in the location of the `<ng-container>` element.
+En el ejemplo anterior, la directiva `NgComponentOutlet` renderiza dinámicamente `AdminProfile` o `BasicUserProfile` en la ubicación del elemento `<ng-container>`.
 
-### Rendering template fragments
+### Renderizando fragmentos de plantilla
 
-You can use Angular's built-in `NgTemplateOutlet` directive to dynamically render a template fragment to the location of the `<ng-container>`.
+Puedes usar la directiva integrada de Angular `NgTemplateOutlet` para renderizar dinámicamente un fragmento de plantilla en la ubicación del `<ng-container>`.
 
 ```angular-ts
 @Component({
@@ -69,13 +69,13 @@ export class UserProfile {
 }
 ```
 
-In the example above, the `ngTemplateOutlet` directive dynamically renders one of two template fragments in the location of the `<ng-container>` element.
+En el ejemplo anterior, la directiva `ngTemplateOutlet` renderiza dinámicamente uno de dos fragmentos de plantilla en la ubicación del elemento `<ng-container>`.
 
-For more information regarding NgTemplateOutlet, see the [NgTemplateOutlets API documentation page](/api/common/NgTemplateOutlet).
+Para más información sobre NgTemplateOutlet, consulta la [página de documentación de la API de NgTemplateOutlet](/api/common/NgTemplateOutlet).
 
-## Using `<ng-container>` with structural directives
+## Usando `<ng-container>` con directivas estructurales
 
-You can also apply structural directives to `<ng-container>` elements. Common examples of this include `ngIf`and `ngFor`.
+También puedes aplicar directivas estructurales a elementos `<ng-container>`. Ejemplos comunes de esto incluyen `ngIf` y `ngFor`.
 
 ```angular-html
 <ng-container *ngIf="permissions == 'admin'">
@@ -89,18 +89,18 @@ You can also apply structural directives to `<ng-container>` elements. Common ex
 </ng-container>
 ```
 
-## Using `<ng-container>` for injection
+## Usando `<ng-container>` para inyección
 
-See the Dependency Injection guide for more information on Angular's dependency injection system.
+Consulta la guía de Inyección de Dependencias para más información sobre el sistema de inyección de dependencias de Angular.
 
-When you apply a directive to `<ng-container>`, descendant elements can inject the directive or anything that the directive provides. Use this when you want to declaratively provide a value to a specific part of your template.
+Cuando aplicas una directiva a `<ng-container>`, los elementos descendientes pueden inyectar la directiva o cualquier cosa que la directiva proporcione. Usa esto cuando quieras proporcionar declarativamente un valor a una parte específica de tu plantilla.
 
 ```angular-ts
 @Directive({
   selector: '[theme]',
 })
 export class Theme {
-  // Create an input that accepts 'light' or 'dark`, defaulting to 'light'.
+  // Crea una entrada que acepta 'light' o 'dark', con valor predeterminado 'light'.
   mode = input<'light' | 'dark'>('light');
 }
 ```
@@ -112,4 +112,4 @@ export class Theme {
 </ng-container>
 ```
 
-In the example above, the `ProfilePic` and `UserBio` components can inject the `Theme` directive and apply styles based on its `mode`.
+En el ejemplo anterior, los componentes `ProfilePic` y `UserBio` pueden inyectar la directiva `Theme` y aplicar estilos basados en su `mode`.
diff --git a/adev-es/src/content/guide/templates/ng-content.en.md b/adev-es/src/content/guide/templates/ng-content.en.md
new file mode 100644
index 0000000..5476618
--- /dev/null
+++ b/adev-es/src/content/guide/templates/ng-content.en.md
@@ -0,0 +1,37 @@
+# Render templates from a parent component with `ng-content`
+
+`<ng-content>` is a special element that accepts markup or a template fragment and controls how components render content. It does not render a real DOM element.
+
+Here is an example of a `BaseButton` component that accepts any markup from its parent.
+
+```angular-ts
+// ./base-button/base-button.component.ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'button[baseButton]',
+  template: `
+      <ng-content />
+  `,
+})
+export class BaseButton {}
+```
+
+```angular-ts
+// ./app.component.ts
+import { Component } from '@angular/core';
+import { BaseButton } from './base-button/base-button.component';
+
+@Component({
+  selector: 'app-root',
+  imports: [BaseButton],
+  template: `
+    <button baseButton>
+      Next <span class="icon arrow-right"></span>
+    </button>
+  `,
+})
+export class AppComponent {}
+```
+
+For more detail, check out the [`<ng-content>` in-depth guide](/guide/components/content-projection) for other ways you can leverage this pattern.
diff --git a/adev-es/src/content/guide/templates/ng-content.md b/adev-es/src/content/guide/templates/ng-content.md
index 5476618..e3ada64 100644
--- a/adev-es/src/content/guide/templates/ng-content.md
+++ b/adev-es/src/content/guide/templates/ng-content.md
@@ -1,8 +1,8 @@
-# Render templates from a parent component with `ng-content`
+# Renderizar plantillas desde un componente padre con `ng-content`
 
-`<ng-content>` is a special element that accepts markup or a template fragment and controls how components render content. It does not render a real DOM element.
+`<ng-content>` es un elemento especial que acepta marcado o un fragmento de plantilla y controla cómo los componentes renderizan contenido. No renderiza un elemento DOM real.
 
-Here is an example of a `BaseButton` component that accepts any markup from its parent.
+Aquí hay un ejemplo de un componente `BaseButton` que acepta cualquier marcado de su padre.
 
 ```angular-ts
 // ./base-button/base-button.component.ts
@@ -34,4 +34,4 @@ import { BaseButton } from './base-button/base-button.component';
 export class AppComponent {}
 ```
 
-For more detail, check out the [`<ng-content>` in-depth guide](/guide/components/content-projection) for other ways you can leverage this pattern.
+Para más detalle, consulta la [guía en profundidad de `<ng-content>`](/guide/components/content-projection) para otras formas en que puedes aprovechar este patrón.
diff --git a/adev-es/src/content/guide/templates/ng-template.en.md b/adev-es/src/content/guide/templates/ng-template.en.md
new file mode 100644
index 0000000..b3118b5
--- /dev/null
+++ b/adev-es/src/content/guide/templates/ng-template.en.md
@@ -0,0 +1,282 @@
+# Create template fragments with ng-template
+
+Inspired by the [native `<template>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template), the `<ng-template>` element lets you declare a **template fragment** – a section of content that you can dynamically or programmatically render.
+
+## Creating a template fragment
+
+You can create a template fragment inside of any component template with the `<ng-template>` element:
+
+```angular-html
+<p>This is a normal element</p>
+
+<ng-template>
+  <p>This is a template fragment</p>
+</ng-template>
+```
+
+When the above is rendered, the content of the `<ng-template>` element is not rendered on the page. Instead, you can get a reference to the template fragment and write code to dynamically render it.
+
+### Binding context for fragments
+
+Template fragments may contain bindings with dynamic expressions:
+
+```angular-ts
+@Component({
+  /* ... */,
+  template: `<ng-template>You've selected {{count}} items.</ng-template>`,
+})
+export class ItemCounter {
+  count: number = 0;
+}
+```
+
+Expressions or statements in a template fragment are evaluated against the component in which the fragment is declared, regardless of where the fragment is rendered.
+
+## Getting a reference to a template fragment
+
+You can get a reference to a template fragment in one of three ways:
+
+- By declaring a [template reference variable](/guide/templates/variables#template-reference-variables) on the `<ng-template>` element
+- By querying for the fragment with [a component or directive query](/guide/components/queries)
+- By injecting the fragment in a directive that's applied directly to an `<ng-template>` element.
+
+In all three cases, the fragment is represented by a [TemplateRef](/api/core/TemplateRef) object.
+
+### Referencing a template fragment with a template reference variable
+
+You can add a template reference variable to an `<ng-template>` element to reference that template fragment in other parts of the same template file:
+
+```angular-html
+<p>This is a normal element</p>
+
+<ng-template #myFragment>
+  <p>This is a template fragment</p>
+</ng-template>
+```
+
+You can then reference this fragment anywhere else in the template via the `myFragment` variable.
+
+### Referencing a template fragment with queries
+
+You can get a reference to a template fragment using any [component or directive query API](/guide/components/queries).
+
+You can query the `TemplateRef` object directly using a `viewChild` query.
+
+```angular-ts
+@Component({
+  /* ... */,
+  template: `
+    <p>This is a normal element</p>
+
+    <ng-template>
+      <p>This is a template fragment</p>
+    </ng-template>
+  `,
+})
+export class ComponentWithFragment {
+  templateRef = viewChild<TemplateRef<unknown>>(TemplateRef);
+}
+```
+
+You can then reference this fragment in your component code or the component's template like any other class member.
+
+If a template contains multiple fragments, you can assign a name to each fragment by adding a template reference variable to each `<ng-template>` element and querying for the fragments based on that name:
+
+```angular-ts
+@Component({
+  /* ... */,
+  template: `
+    <p>This is a normal element</p>
+
+    <ng-template #fragmentOne>
+      <p>This is one template fragment</p>
+    </ng-template>
+
+    <ng-template #fragmentTwo>
+      <p>This is another template fragment</p>
+    </ng-template>
+  `,
+})
+export class ComponentWithFragment {
+    fragmentOne = viewChild<TemplateRef<unknown>>('fragmentOne');
+    fragmentTwo = viewChild<TemplateRef<unknown>>('fragmentTwo');
+}
+```
+
+Again, you can then reference these fragments in your component code or the component's template like any other class members.
+
+### Injecting a template fragment
+
+A directive can inject a `TemplateRef` if that directive is applied directly to an `<ng-template>` element:
+
+```angular-ts
+@Directive({
+  selector: '[myDirective]'
+})
+export class MyDirective {
+  private fragment = inject(TemplateRef);
+}
+```
+
+```angular-html
+<ng-template myDirective>
+  <p>This is one template fragment</p>
+</ng-template>
+```
+
+You can then reference this fragment in your directive code like any other class member.
+
+## Rendering a template fragment
+
+Once you have a reference to a template fragment's `TemplateRef` object, you can render a fragment in one of two ways: in your template with the `NgTemplateOutlet` directive or in your TypeScript code with `ViewContainerRef`.
+
+### Using `NgTemplateOutlet`
+
+The `NgTemplateOutlet` directive from `@angular/common` accepts a `TemplateRef` and renders the fragment as a **sibling** to the element with the outlet. You should generally use `NgTemplateOutlet` on an [`<ng-container>` element](/guide/templates/ng-container).
+
+First, import `NgTemplateOutlet`:
+
+```typescript
+import { NgTemplateOutlet } from '@angular/common';
+```
+
+The following example declares a template fragment and renders that fragment to a `<ng-container>` element with `NgTemplateOutlet`:
+
+```angular-html
+<p>This is a normal element</p>
+
+<ng-template #myFragment>
+  <p>This is a fragment</p>
+</ng-template>
+
+<ng-container *ngTemplateOutlet="myFragment"></ng-container>
+```
+
+This example produces the following rendered DOM:
+
+```angular-html
+<p>This is a normal element</p>
+<p>This is a fragment</p>
+```
+
+### Using `ViewContainerRef`
+
+A **view container** is a node in Angular's component tree that can contain content. Any component or directive can inject `ViewContainerRef` to get a reference to a view container corresponding to that component or directive's location in the DOM.
+
+You can use the `createEmbeddedView` method on `ViewContainerRef` to dynamically render a template fragment. When you render a fragment with a `ViewContainerRef`, Angular appends it into the DOM as the next sibling of the component or directive that injected the `ViewContainerRef`.
+
+The following example shows a component that accepts a reference to a template fragment as an input and renders that fragment into the DOM on a button click.
+
+```angular-ts
+@Component({
+  /* ... */,
+  selector: 'component-with-fragment',
+  template: `
+    <h2>Component with a fragment</h2>
+    <ng-template #myFragment>
+      <p>This is the fragment</p>
+    </ng-template>
+    <my-outlet [fragment]="myFragment" />
+  `,
+})
+export class ComponentWithFragment { }
+
+@Component({
+  /* ... */,
+  selector: 'my-outlet',
+  template: `<button (click)="showFragment()">Show</button>`,
+})
+export class MyOutlet {
+  private viewContainer = inject(ViewContainerRef);
+  fragment = input<TemplateRef<unknown> | undefined>();
+
+  showFragment() {
+    if (this.fragment()) {
+      this.viewContainer.createEmbeddedView(this.fragment());
+    }
+  }
+}
+```
+
+In the example above, clicking the "Show" button results in the following output:
+
+```angular-html
+<component-with-fragment>
+  <h2>Component with a fragment>
+  <my-outlet>
+    <button>Show</button>
+  </my-outlet>
+  <p>This is the fragment</p>
+</component-with-fragment>
+```
+
+## Passing parameters when rendering a template fragment
+
+When declaring a template fragment with `<ng-template>`, you can additionally declare parameters accepted by the fragment. When you render a fragment, you can optionally pass a `context` object corresponding to these parameters. You can use data from this context object in binding expressions and statements, in addition to referencing data from the component in which the fragment is declared.
+
+Each parameter is written as an attribute prefixed with `let-` with a value matching a property name in the context object:
+
+```angular-html
+<ng-template let-pizzaTopping="topping">
+  <p>You selected: {{pizzaTopping}}</p>
+</ng-template>
+```
+
+### Using `NgTemplateOutlet`
+
+You can bind a context object to the `ngTemplateOutletContext` input:
+
+```angular-html
+<ng-template #myFragment let-pizzaTopping="topping">
+  <p>You selected: {{pizzaTopping}}</p>
+</ng-template>
+
+<ng-container
+  [ngTemplateOutlet]="myFragment"
+  [ngTemplateOutletContext]="{topping: 'onion'}"
+/>
+```
+
+### Using `ViewContainerRef`
+
+You can pass a context object as the second argument to `createEmbeddedView`:
+
+```angular-ts
+this.viewContainer.createEmbeddedView(this.myFragment, {topping: 'onion'});
+```
+
+## Structural directives
+
+A **structural directive** is any directive that:
+
+- Injects `TemplateRef`
+- Injects `ViewContainerRef` and programmatically renders the injected `TemplateRef`
+
+Angular supports a special convenience syntax for structural directives. If you apply the directive to an element and prefix the directive's selector with an asterisk (`*`) character, Angular interprets the entire element and all of its content as a template fragment:
+
+```angular-html
+<section *myDirective>
+  <p>This is a fragment</p>
+</section>
+```
+
+This is equivalent to:
+
+```angular-html
+<ng-template myDirective>
+  <section>
+    <p>This is a fragment</p>
+  </section>
+</ng-template>
+```
+
+Developers typically use structural directives to conditionally render fragments or render fragments multiple times.
+
+For more details, see [Structural Directives](/guide/directives/structural-directives).
+
+## Additional resources
+
+For examples of how `ng-template` is used in other libraries, check out:
+
+- [Tabs from Angular Material](https://material.angular.dev/components/tabs/overview) - nothing gets rendered into the DOM until the tab is activated
+- [Table from Angular Material](https://material.angular.dev/components/table/overview) - allows developers to define different ways to render data
diff --git a/adev-es/src/content/guide/templates/ng-template.md b/adev-es/src/content/guide/templates/ng-template.md
index b3118b5..7ff132d 100644
--- a/adev-es/src/content/guide/templates/ng-template.md
+++ b/adev-es/src/content/guide/templates/ng-template.md
@@ -1,10 +1,10 @@
-# Create template fragments with ng-template
+# Crear fragmentos de plantilla con ng-template
 
-Inspired by the [native `<template>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template), the `<ng-template>` element lets you declare a **template fragment** – a section of content that you can dynamically or programmatically render.
+Inspirado por el [elemento nativo `<template>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template), el elemento `<ng-template>` te permite declarar un **fragmento de plantilla** – una sección de contenido que puedes renderizar dinámica o programáticamente.
 
-## Creating a template fragment
+## Creando un fragmento de plantilla
 
-You can create a template fragment inside of any component template with the `<ng-template>` element:
+Puedes crear un fragmento de plantilla dentro de cualquier plantilla de componente con el elemento `<ng-template>`:
 
 ```angular-html
 <p>This is a normal element</p>
@@ -14,11 +14,11 @@ You can create a template fragment inside of any component template with the `<n
 </ng-template>
 ```
 
-When the above is rendered, the content of the `<ng-template>` element is not rendered on the page. Instead, you can get a reference to the template fragment and write code to dynamically render it.
+Cuando lo anterior se renderiza, el contenido del elemento `<ng-template>` no se renderiza en la página. En su lugar, puedes obtener una referencia al fragmento de plantilla y escribir código para renderizarlo dinámicamente.
 
-### Binding context for fragments
+### Contexto de enlace para fragmentos
 
-Template fragments may contain bindings with dynamic expressions:
+Los fragmentos de plantilla pueden contener enlaces con expresiones dinámicas:
 
 ```angular-ts
 @Component({
@@ -30,21 +30,21 @@ export class ItemCounter {
 }
 ```
 
-Expressions or statements in a template fragment are evaluated against the component in which the fragment is declared, regardless of where the fragment is rendered.
+Las expresiones o declaraciones en un fragmento de plantilla se evalúan contra el componente en el que se declara el fragmento, independientemente de dónde se renderice el fragmento.
 
-## Getting a reference to a template fragment
+## Obteniendo una referencia a un fragmento de plantilla
 
-You can get a reference to a template fragment in one of three ways:
+Puedes obtener una referencia a un fragmento de plantilla de una de tres formas:
 
-- By declaring a [template reference variable](/guide/templates/variables#template-reference-variables) on the `<ng-template>` element
-- By querying for the fragment with [a component or directive query](/guide/components/queries)
-- By injecting the fragment in a directive that's applied directly to an `<ng-template>` element.
+- Declarando una [variable de referencia de plantilla](/guide/templates/variables#template-reference-variables) en el elemento `<ng-template>`
+- Consultando por el fragmento con [una consulta de componente o directiva](/guide/components/queries)
+- Inyectando el fragmento en una directiva que se aplica directamente a un elemento `<ng-template>`.
 
-In all three cases, the fragment is represented by a [TemplateRef](/api/core/TemplateRef) object.
+En los tres casos, el fragmento está representado por un objeto [TemplateRef](/api/core/TemplateRef).
 
-### Referencing a template fragment with a template reference variable
+### Referenciando un fragmento de plantilla con una variable de referencia de plantilla
 
-You can add a template reference variable to an `<ng-template>` element to reference that template fragment in other parts of the same template file:
+Puedes agregar una variable de referencia de plantilla a un elemento `<ng-template>` para referenciar ese fragmento de plantilla en otras partes del mismo archivo de plantilla:
 
 ```angular-html
 <p>This is a normal element</p>
@@ -54,13 +54,13 @@ You can add a template reference variable to an `<ng-template>` element to refer
 </ng-template>
 ```
 
-You can then reference this fragment anywhere else in the template via the `myFragment` variable.
+Luego puedes referenciar este fragmento en cualquier otro lugar de la plantilla a través de la variable `myFragment`.
 
-### Referencing a template fragment with queries
+### Referenciando un fragmento de plantilla con consultas
 
-You can get a reference to a template fragment using any [component or directive query API](/guide/components/queries).
+Puedes obtener una referencia a un fragmento de plantilla usando cualquier [API de consulta de componente o directiva](/guide/components/queries).
 
-You can query the `TemplateRef` object directly using a `viewChild` query.
+Puedes consultar el objeto `TemplateRef` directamente usando una consulta `viewChild`.
 
 ```angular-ts
 @Component({
@@ -78,9 +78,9 @@ export class ComponentWithFragment {
 }
 ```
 
-You can then reference this fragment in your component code or the component's template like any other class member.
+Luego puedes referenciar este fragmento en el código de tu componente o en la plantilla del componente como cualquier otro miembro de clase.
 
-If a template contains multiple fragments, you can assign a name to each fragment by adding a template reference variable to each `<ng-template>` element and querying for the fragments based on that name:
+Si una plantilla contiene múltiples fragmentos, puedes asignar un nombre a cada fragmento agregando una variable de referencia de plantilla a cada elemento `<ng-template>` y consultando por los fragmentos basándote en ese nombre:
 
 ```angular-ts
 @Component({
@@ -103,11 +103,11 @@ export class ComponentWithFragment {
 }
 ```
 
-Again, you can then reference these fragments in your component code or the component's template like any other class members.
+Nuevamente, luego puedes referenciar estos fragmentos en el código de tu componente o en la plantilla del componente como cualquier otro miembro de clase.
 
-### Injecting a template fragment
+### Inyectando un fragmento de plantilla
 
-A directive can inject a `TemplateRef` if that directive is applied directly to an `<ng-template>` element:
+Una directiva puede inyectar un `TemplateRef` si esa directiva se aplica directamente a un elemento `<ng-template>`:
 
 ```angular-ts
 @Directive({
@@ -124,23 +124,23 @@ export class MyDirective {
 </ng-template>
 ```
 
-You can then reference this fragment in your directive code like any other class member.
+Luego puedes referenciar este fragmento en el código de tu directiva como cualquier otro miembro de clase.
 
-## Rendering a template fragment
+## Renderizando un fragmento de plantilla
 
-Once you have a reference to a template fragment's `TemplateRef` object, you can render a fragment in one of two ways: in your template with the `NgTemplateOutlet` directive or in your TypeScript code with `ViewContainerRef`.
+Una vez que tienes una referencia al objeto `TemplateRef` de un fragmento de plantilla, puedes renderizar un fragmento de una de dos formas: en tu plantilla con la directiva `NgTemplateOutlet` o en tu código TypeScript con `ViewContainerRef`.
 
-### Using `NgTemplateOutlet`
+### Usando `NgTemplateOutlet`
 
-The `NgTemplateOutlet` directive from `@angular/common` accepts a `TemplateRef` and renders the fragment as a **sibling** to the element with the outlet. You should generally use `NgTemplateOutlet` on an [`<ng-container>` element](/guide/templates/ng-container).
+La directiva `NgTemplateOutlet` de `@angular/common` acepta un `TemplateRef` y renderiza el fragmento como un **hermano** del elemento con el outlet. Generalmente deberías usar `NgTemplateOutlet` en un [elemento `<ng-container>`](/guide/templates/ng-container).
 
-First, import `NgTemplateOutlet`:
+Primero, importa `NgTemplateOutlet`:
 
 ```typescript
 import { NgTemplateOutlet } from '@angular/common';
 ```
 
-The following example declares a template fragment and renders that fragment to a `<ng-container>` element with `NgTemplateOutlet`:
+El siguiente ejemplo declara un fragmento de plantilla y renderiza ese fragmento en un elemento `<ng-container>` con `NgTemplateOutlet`:
 
 ```angular-html
 <p>This is a normal element</p>
@@ -152,20 +152,20 @@ The following example declares a template fragment and renders that fragment to
 <ng-container *ngTemplateOutlet="myFragment"></ng-container>
 ```
 
-This example produces the following rendered DOM:
+Este ejemplo produce el siguiente DOM renderizado:
 
 ```angular-html
 <p>This is a normal element</p>
 <p>This is a fragment</p>
 ```
 
-### Using `ViewContainerRef`
+### Usando `ViewContainerRef`
 
-A **view container** is a node in Angular's component tree that can contain content. Any component or directive can inject `ViewContainerRef` to get a reference to a view container corresponding to that component or directive's location in the DOM.
+Un **contenedor de vista** es un nodo en el árbol de componentes de Angular que puede contener contenido. Cualquier componente o directiva puede inyectar `ViewContainerRef` para obtener una referencia a un contenedor de vista correspondiente a la ubicación de ese componente o directiva en el DOM.
 
-You can use the `createEmbeddedView` method on `ViewContainerRef` to dynamically render a template fragment. When you render a fragment with a `ViewContainerRef`, Angular appends it into the DOM as the next sibling of the component or directive that injected the `ViewContainerRef`.
+Puedes usar el método `createEmbeddedView` en `ViewContainerRef` para renderizar dinámicamente un fragmento de plantilla. Cuando renderizas un fragmento con un `ViewContainerRef`, Angular lo agrega al DOM como el siguiente hermano del componente o directiva que inyectó el `ViewContainerRef`.
 
-The following example shows a component that accepts a reference to a template fragment as an input and renders that fragment into the DOM on a button click.
+El siguiente ejemplo muestra un componente que acepta una referencia a un fragmento de plantilla como entrada y renderiza ese fragmento en el DOM al hacer clic en un botón.
 
 ```angular-ts
 @Component({
@@ -198,7 +198,7 @@ export class MyOutlet {
 }
 ```
 
-In the example above, clicking the "Show" button results in the following output:
+En el ejemplo anterior, hacer clic en el botón "Show" resulta en la siguiente salida:
 
 ```angular-html
 <component-with-fragment>
@@ -210,11 +210,11 @@ In the example above, clicking the "Show" button results in the following output
 </component-with-fragment>
 ```
 
-## Passing parameters when rendering a template fragment
+## Pasando parámetros al renderizar un fragmento de plantilla
 
-When declaring a template fragment with `<ng-template>`, you can additionally declare parameters accepted by the fragment. When you render a fragment, you can optionally pass a `context` object corresponding to these parameters. You can use data from this context object in binding expressions and statements, in addition to referencing data from the component in which the fragment is declared.
+Al declarar un fragmento de plantilla con `<ng-template>`, puedes adicionalmente declarar parámetros aceptados por el fragmento. Cuando renderizas un fragmento, puedes opcionalmente pasar un objeto `context` correspondiente a estos parámetros. Puedes usar datos de este objeto de contexto en expresiones y declaraciones de enlace, además de referenciar datos del componente en el que se declara el fragmento.
 
-Each parameter is written as an attribute prefixed with `let-` with a value matching a property name in the context object:
+Cada parámetro se escribe como un atributo con prefijo `let-` con un valor que coincide con un nombre de propiedad en el objeto de contexto:
 
 ```angular-html
 <ng-template let-pizzaTopping="topping">
@@ -222,9 +222,9 @@ Each parameter is written as an attribute prefixed with `let-` with a value matc
 </ng-template>
 ```
 
-### Using `NgTemplateOutlet`
+### Usando `NgTemplateOutlet`
 
-You can bind a context object to the `ngTemplateOutletContext` input:
+Puedes vincular un objeto de contexto a la entrada `ngTemplateOutletContext`:
 
 ```angular-html
 <ng-template #myFragment let-pizzaTopping="topping">
@@ -237,22 +237,22 @@ You can bind a context object to the `ngTemplateOutletContext` input:
 />
 ```
 
-### Using `ViewContainerRef`
+### Usando `ViewContainerRef`
 
-You can pass a context object as the second argument to `createEmbeddedView`:
+Puedes pasar un objeto de contexto como segundo argumento a `createEmbeddedView`:
 
 ```angular-ts
 this.viewContainer.createEmbeddedView(this.myFragment, {topping: 'onion'});
 ```
 
-## Structural directives
+## Directivas estructurales
 
-A **structural directive** is any directive that:
+Una **directiva estructural** es cualquier directiva que:
 
-- Injects `TemplateRef`
-- Injects `ViewContainerRef` and programmatically renders the injected `TemplateRef`
+- Inyecta `TemplateRef`
+- Inyecta `ViewContainerRef` y renderiza programáticamente el `TemplateRef` inyectado
 
-Angular supports a special convenience syntax for structural directives. If you apply the directive to an element and prefix the directive's selector with an asterisk (`*`) character, Angular interprets the entire element and all of its content as a template fragment:
+Angular soporta una sintaxis de conveniencia especial para directivas estructurales. Si aplicas la directiva a un elemento y prefigas el selector de la directiva con un carácter asterisco (`*`), Angular interpreta el elemento completo y todo su contenido como un fragmento de plantilla:
 
 ```angular-html
 <section *myDirective>
@@ -260,7 +260,7 @@ Angular supports a special convenience syntax for structural directives. If you
 </section>
 ```
 
-This is equivalent to:
+Esto es equivalente a:
 
 ```angular-html
 <ng-template myDirective>
@@ -270,13 +270,13 @@ This is equivalent to:
 </ng-template>
 ```
 
-Developers typically use structural directives to conditionally render fragments or render fragments multiple times.
+Los desarrolladores típicamente usan directivas estructurales para renderizar fragmentos condicionalmente o renderizar fragmentos múltiples veces.
 
-For more details, see [Structural Directives](/guide/directives/structural-directives).
+Para más detalles, consulta [Directivas Estructurales](/guide/directives/structural-directives).
 
-## Additional resources
+## Recursos adicionales
 
-For examples of how `ng-template` is used in other libraries, check out:
+Para ejemplos de cómo se usa `ng-template` en otras bibliotecas, consulta:
 
-- [Tabs from Angular Material](https://material.angular.dev/components/tabs/overview) - nothing gets rendered into the DOM until the tab is activated
-- [Table from Angular Material](https://material.angular.dev/components/table/overview) - allows developers to define different ways to render data
+- [Tabs de Angular Material](https://material.angular.dev/components/tabs/overview) - nada se renderiza en el DOM hasta que la pestaña se activa
+- [Table de Angular Material](https://material.angular.dev/components/table/overview) - permite a los desarrolladores definir diferentes formas de renderizar datos
diff --git a/adev-es/src/content/guide/templates/overview.en.md b/adev-es/src/content/guide/templates/overview.en.md
new file mode 100644
index 0000000..2d3b6a7
--- /dev/null
+++ b/adev-es/src/content/guide/templates/overview.en.md
@@ -0,0 +1,48 @@
+<docs-decorative-header title="Template syntax" imgSrc="adev/src/assets/images/templates.svg"> <!-- markdownlint-disable-line -->
+In Angular, a template is a chunk of HTML.
+Use special syntax within a template to leverage many of Angular's features.
+</docs-decorative-header>
+
+TIP: Check out Angular's [Essentials](essentials/templates) before diving into this comprehensive guide.
+
+Every Angular component has a **template** that defines the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) that the component renders onto the page. By using templates, Angular is able to automatically keep your page up-to-date as data changes.
+
+Templates are usually found within either the `template` property of a `*.component.ts` file or the `*.component.html` file. To learn more, check out the [in-depth components guide](/guide/components).
+
+## How do templates work?
+
+Templates are based on [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) syntax, with additional features such as built-in template functions, data binding, event listening, variables, and more.
+
+Angular compiles templates into JavaScript in order to build up an internal understanding of your application. One of the benefits of this are built-in rendering optimizations that Angular applies to your application automatically.
+
+### Differences from standard HTML
+
+Some differences between templates and standard HTML syntax include:
+
+- Comments in the template source code are not included in the rendered output
+- Component and directive elements can be self-closed (e.g., `<UserProfile />`)
+- Attributes with certain characters (i.e., `[]`, `()`, etc.) have special meaning to Angular. See [binding docs](guide/templates/binding) and [adding event listeners docs](guide/templates/event-listeners) for more information.
+- The `@` character has a special meaning to Angular for adding dynamic behavior, such as [control flow](guide/templates/control-flow), to templates. You can include a literal `@` character by escaping it as an HTML entity code (`&commat;` or `&#64;`).
+- Angular ignores and collapses unnecessary whitespace characters. See [whitespace in templates](guide/templates/whitespace) for more details.
+- Angular may add comment nodes to a page as placeholders for dynamic content, but developers can ignore these.
+
+In addition, while most HTML syntax is valid template syntax, Angular does not support `<script>` element in templates. For more information, see the [Security](best-practices/security) page.
+
+## What's next?
+
+You might also be interested in the following:
+
+| Topics                                                                      | Details                                                                                 |
+| :-------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------- |
+| [Binding dynamic text, properties, and attributes](guide/templates/binding) | Bind dynamic data to text, properties and attributes.                                   |
+| [Adding event listeners](guide/templates/event-listeners)                   | Respond to events in your templates.                                                    |
+| [Two-way binding](guide/templates/two-way-binding)                          | Simultaneously binds a value and propagate changes.                                     |
+| [Control flow](guide/templates/control-flow)                                | Conditionally show, hide and repeat elements.                                           |
+| [Pipes](guide/templates/pipes)                                              | Transform data declaratively.                                                           |
+| [Slotting child content with ng-content](guide/templates/ng-content)        | Control how components render content.                                                  |
+| [Create template fragments with ng-template](guide/templates/ng-template)   | Declare a template fragment.                                                            |
+| [Grouping elements with ng-container](guide/templates/ng-container)         | Group multiple elements together or mark a location for rendering.                      |
+| [Variables in templates](guide/templates/variables)                         | Learn about variable declarations.                                                      |
+| [Deferred loading with @defer](guide/templates/defer)                       | Create deferrable views with `@defer`.                                                  |
+| [Expression syntax](guide/templates/expression-syntax)                      | Learn similarities and differences between Angular expressions and standard JavaScript. |
+| [Whitespace in templates](guide/templates/whitespace)                       | Learn how Angular handles whitespace.                                                   |
diff --git a/adev-es/src/content/guide/templates/overview.md b/adev-es/src/content/guide/templates/overview.md
index 2d3b6a7..7406307 100644
--- a/adev-es/src/content/guide/templates/overview.md
+++ b/adev-es/src/content/guide/templates/overview.md
@@ -1,48 +1,48 @@
-<docs-decorative-header title="Template syntax" imgSrc="adev/src/assets/images/templates.svg"> <!-- markdownlint-disable-line -->
-In Angular, a template is a chunk of HTML.
-Use special syntax within a template to leverage many of Angular's features.
+<docs-decorative-header title="Sintaxis de plantillas" imgSrc="adev/src/assets/images/templates.svg"> <!-- markdownlint-disable-line -->
+En Angular, una plantilla es un fragmento de HTML.
+Usa sintaxis especial dentro de una plantilla para aprovechar muchas de las características de Angular.
 </docs-decorative-header>
 
-TIP: Check out Angular's [Essentials](essentials/templates) before diving into this comprehensive guide.
+CONSEJO: Consulta los [Fundamentos](essentials/templates) de Angular antes de sumergirte en esta guía completa.
 
-Every Angular component has a **template** that defines the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) that the component renders onto the page. By using templates, Angular is able to automatically keep your page up-to-date as data changes.
+Cada componente de Angular tiene una **plantilla** que define el [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) que el componente renderiza en la página. Al usar plantillas, Angular es capaz de mantener automáticamente tu página actualizada a medida que los datos cambian.
 
-Templates are usually found within either the `template` property of a `*.component.ts` file or the `*.component.html` file. To learn more, check out the [in-depth components guide](/guide/components).
+Las plantillas generalmente se encuentran dentro de la propiedad `template` de un archivo `*.component.ts` o en el archivo `*.component.html`. Para aprender más, consulta la [guía detallada de componentes](/guide/components).
 
-## How do templates work?
+## ¿Cómo funcionan las plantillas?
 
-Templates are based on [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) syntax, with additional features such as built-in template functions, data binding, event listening, variables, and more.
+Las plantillas están basadas en la sintaxis de [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML), con características adicionales como funciones de plantilla integradas, enlace de datos, escucha de eventos, variables y más.
 
-Angular compiles templates into JavaScript in order to build up an internal understanding of your application. One of the benefits of this are built-in rendering optimizations that Angular applies to your application automatically.
+Angular compila las plantillas en JavaScript para construir una comprensión interna de tu aplicación. Uno de los beneficios de esto son las optimizaciones de renderización integradas que Angular aplica a tu aplicación automáticamente.
 
-### Differences from standard HTML
+### Diferencias con HTML estándar
 
-Some differences between templates and standard HTML syntax include:
+Algunas diferencias entre las plantillas y la sintaxis HTML estándar incluyen:
 
-- Comments in the template source code are not included in the rendered output
-- Component and directive elements can be self-closed (e.g., `<UserProfile />`)
-- Attributes with certain characters (i.e., `[]`, `()`, etc.) have special meaning to Angular. See [binding docs](guide/templates/binding) and [adding event listeners docs](guide/templates/event-listeners) for more information.
-- The `@` character has a special meaning to Angular for adding dynamic behavior, such as [control flow](guide/templates/control-flow), to templates. You can include a literal `@` character by escaping it as an HTML entity code (`&commat;` or `&#64;`).
-- Angular ignores and collapses unnecessary whitespace characters. See [whitespace in templates](guide/templates/whitespace) for more details.
-- Angular may add comment nodes to a page as placeholders for dynamic content, but developers can ignore these.
+- Los comentarios en el código fuente de la plantilla no se incluyen en la salida renderizada
+- Los elementos de componentes y directivas pueden cerrarse automáticamente (por ejemplo, `<UserProfile />`)
+- Los atributos con ciertos caracteres (es decir, `[]`, `()`, etc.) tienen un significado especial para Angular. Consulta la [documentación de enlace](guide/templates/binding) y la [documentación de agregar event listeners](guide/templates/event-listeners) para más información.
+- El carácter `@` tiene un significado especial para Angular para agregar comportamiento dinámico, como [control de flujo](guide/templates/control-flow), a las plantillas. Puedes incluir un carácter `@` literal escapándolo como un código de entidad HTML (`&commat;` o `&#64;`).
+- Angular ignora y colapsa caracteres de espacios en blanco innecesarios. Consulta [espacios en blanco en plantillas](guide/templates/whitespace) para más detalles.
+- Angular puede agregar nodos de comentarios a una página como marcadores de posición para contenido dinámico, pero los desarrolladores pueden ignorarlos.
 
-In addition, while most HTML syntax is valid template syntax, Angular does not support `<script>` element in templates. For more information, see the [Security](best-practices/security) page.
+Además, aunque la mayoría de la sintaxis HTML es sintaxis de plantilla válida, Angular no admite el elemento `<script>` en plantillas. Para más información, consulta la página de [Seguridad](best-practices/security).
 
-## What's next?
+## ¿Qué sigue?
 
-You might also be interested in the following:
+También podrías estar interesado en lo siguiente:
 
-| Topics                                                                      | Details                                                                                 |
-| :-------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------- |
-| [Binding dynamic text, properties, and attributes](guide/templates/binding) | Bind dynamic data to text, properties and attributes.                                   |
-| [Adding event listeners](guide/templates/event-listeners)                   | Respond to events in your templates.                                                    |
-| [Two-way binding](guide/templates/two-way-binding)                          | Simultaneously binds a value and propagate changes.                                     |
-| [Control flow](guide/templates/control-flow)                                | Conditionally show, hide and repeat elements.                                           |
-| [Pipes](guide/templates/pipes)                                              | Transform data declaratively.                                                           |
-| [Slotting child content with ng-content](guide/templates/ng-content)        | Control how components render content.                                                  |
-| [Create template fragments with ng-template](guide/templates/ng-template)   | Declare a template fragment.                                                            |
-| [Grouping elements with ng-container](guide/templates/ng-container)         | Group multiple elements together or mark a location for rendering.                      |
-| [Variables in templates](guide/templates/variables)                         | Learn about variable declarations.                                                      |
-| [Deferred loading with @defer](guide/templates/defer)                       | Create deferrable views with `@defer`.                                                  |
-| [Expression syntax](guide/templates/expression-syntax)                      | Learn similarities and differences between Angular expressions and standard JavaScript. |
-| [Whitespace in templates](guide/templates/whitespace)                       | Learn how Angular handles whitespace.                                                   |
+| Temas                                                                                   | Detalles                                                              |
+| :-------------------------------------------------------------------------------------- | :-------------------------------------------------------------------- |
+| [Enlace de texto, propiedades y atributos dinámicos](guide/templates/binding)          | Vincula datos dinámicos a texto, propiedades y atributos.             |
+| [Agregar event listeners](guide/templates/event-listeners)                     | Responde a eventos en tus plantillas.                                 |
+| [Enlace bidireccional](guide/templates/two-way-binding)                                | Vincula un valor y propaga cambios simultáneamente.                   |
+| [Control de flujo](guide/templates/control-flow)                                       | Muestra, oculta y repite elementos condicionalmente.                  |
+| [Pipes](guide/templates/pipes)                                                          | Transforma datos de forma declarativa.                                |
+| [Incrustar contenido hijo con ng-content](guide/templates/ng-content)                  | Controla cómo los componentes renderizan contenido.                   |
+| [Crear fragmentos de plantilla con ng-template](guide/templates/ng-template)           | Declara un fragmento de plantilla.                                    |
+| [Agrupar elementos con ng-container](guide/templates/ng-container)                     | Agrupa múltiples elementos juntos o marca una ubicación para renderizar. |
+| [Variables en plantillas](guide/templates/variables)                                   | Aprende sobre declaraciones de variables.                            |
+| [Carga diferida con @defer](guide/templates/defer)                                     | Crea vistas diferibles con `@defer`.                                  |
+| [Sintaxis de expresiones](guide/templates/expression-syntax)                           | Aprende similitudes y diferencias entre expresiones de Angular y JavaScript estándar. |
+| [Espacios en blanco en plantillas](guide/templates/whitespace)                         | Aprende cómo Angular maneja los espacios en blanco.                  |
diff --git a/adev-es/src/content/guide/templates/pipes.en.md b/adev-es/src/content/guide/templates/pipes.en.md
new file mode 100644
index 0000000..61e558c
--- /dev/null
+++ b/adev-es/src/content/guide/templates/pipes.en.md
@@ -0,0 +1,290 @@
+# Pipes
+
+## Overview
+
+Pipes are a special operator in Angular template expressions that allows you to transform data declaratively in your template. Pipes let you declare a transformation function once and then use that transformation across multiple templates. Angular pipes use the vertical bar character (`|`), inspired by the [Unix pipe](<https://en.wikipedia.org/wiki/Pipeline_(Unix)>).
+
+NOTE: Angular's pipe syntax deviates from standard JavaScript, which uses the vertical bar character for the [bitwise OR operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_OR). Angular template expressions do not support bitwise operators.
+
+Here is an example using some built-in pipes that Angular provides:
+
+```angular-ts
+import { Component } from '@angular/core';
+import { CurrencyPipe, DatePipe, TitleCasePipe } from '@angular/common';
+
+@Component({
+  selector: 'app-root',
+  imports: [CurrencyPipe, DatePipe, TitleCasePipe],
+  template: `
+    <main>
+       <!-- Transform the company name to title-case and
+       transform the purchasedOn date to a locale-formatted string -->
+<h1>Purchases from {{ company | titlecase }} on {{ purchasedOn | date }}</h1>
+
+	    <!-- Transform the amount to a currency-formatted string -->
+      <p>Total: {{ amount | currency }}</p>
+    </main>
+  `,
+})
+export class ShoppingCartComponent {
+  amount = 123.45;
+  company = 'acme corporation';
+  purchasedOn = '2024-07-08';
+}
+```
+
+When Angular renders the component, it will ensure that the appropriate date format and currency is based on the locale of the user. If the user is in the United States, it would render:
+
+```angular-html
+<main>
+  <h1>Purchases from Acme Corporation on Jul 8, 2024</h1>
+  <p>Total: $123.45</p>
+</main>
+```
+
+See the [in-depth guide on i18n](/guide/i18n) to learn more about how Angular localizes values.
+
+### Built-in Pipes
+
+Angular includes a set of built-in pipes in the `@angular/common` package:
+
+| Name                                          | Description                                                                                   |
+| --------------------------------------------- | --------------------------------------------------------------------------------------------- |
+| [`AsyncPipe`](api/common/AsyncPipe)           | Read the value from a `Promise` or an RxJS `Observable`.                                      |
+| [`CurrencyPipe`](api/common/CurrencyPipe)     | Transforms a number to a currency string, formatted according to locale rules.                |
+| [`DatePipe`](api/common/DatePipe)             | Formats a `Date` value according to locale rules.                                             |
+| [`DecimalPipe`](api/common/DecimalPipe)       | Transforms a number into a string with a decimal point, formatted according to locale rules.  |
+| [`I18nPluralPipe`](api/common/I18nPluralPipe) | Maps a value to a string that pluralizes the value according to locale rules.                 |
+| [`I18nSelectPipe`](api/common/I18nSelectPipe) | Maps a key to a custom selector that returns a desired value.                                 |
+| [`JsonPipe`](api/common/JsonPipe)             | Transforms an object to a string representation via `JSON.stringify`, intended for debugging. |
+| [`KeyValuePipe`](api/common/KeyValuePipe)     | Transforms Object or Map into an array of key value pairs.                                    |
+| [`LowerCasePipe`](api/common/LowerCasePipe)   | Transforms text to all lower case.                                                            |
+| [`PercentPipe`](api/common/PercentPipe)       | Transforms a number to a percentage string, formatted according to locale rules.              |
+| [`SlicePipe`](api/common/SlicePipe)           | Creates a new Array or String containing a subset (slice) of the elements.                    |
+| [`TitleCasePipe`](api/common/TitleCasePipe)   | Transforms text to title case.                                                                |
+| [`UpperCasePipe`](api/common/UpperCasePipe)   | Transforms text to all upper case.                                                            |
+
+## Using pipes
+
+Angular's pipe operator uses the vertical bar character (`|`), within a template expression. The pipe operator is a binary operator– the left-hand operand is the value passed to the transformation function, and the right side operand is the name of the pipe and any additional arguments (described below).
+
+```angular-html
+<p>Total: {{ amount | currency }}</p>
+```
+
+In this example, the value of `amount` is passed into the `CurrencyPipe` where the pipe name is `currency`. It then renders the default currency for the user’s locale.
+
+### Combining multiple pipes in the same expression
+
+You can apply multiple transformations to a value by using multiple pipe operators. Angular runs the pipes from left to right.
+
+The following example demonstrates a combination of pipes to display a localized date in all uppercase:
+
+```angular-html
+<p>The event will occur on {{ scheduledOn | date | uppercase }}.</p>
+```
+
+### Passing parameters to pipes
+
+Some pipes accept parameters to configure the transformation. To specify a parameter, append the pipe name with a colon (`:`) followed by the parameter value.
+
+For example, the `DatePipe` is able to take parameters to format the date in a specific way.
+
+```angular-html
+<p>The event will occur at {{ scheduledOn | date:'hh:mm' }}.</p>
+```
+
+Some pipes may accept multiple parameters. You can specify additional parameter values separated by the colon character (`:`).
+
+For example, we can also pass a second optional parameter to control the timezone.
+
+```angular-html
+<p>The event will occur at {{ scheduledOn | date:'hh:mm':'UTC' }}.</p>
+```
+
+## How pipes work
+
+Conceptually, pipes are functions that accept an input value and return a transformed value.
+
+```angular-ts
+import { Component } from '@angular/core';
+import { CurrencyPipe} from '@angular/common';
+
+@Component({
+  selector: 'app-root',
+  imports: [CurrencyPipe],
+  template: `
+    <main>
+      <p>Total: {{ amount | currency }}</p>
+    </main>
+  `,
+})
+export class AppComponent {
+  amount = 123.45;
+}
+```
+
+In this example:
+
+1. `CurrencyPipe` is imported from `@angular/common`
+1. `CurrencyPipe` is added to the `imports` array
+1. The `amount` data is passed to the `currency` pipe
+
+### Pipe operator precedence
+
+The pipe operator has lower precedence than other binary operators, including `+`, `-`, `*`, `/`, `%`, `&&`, `||`, and `??`.
+
+```angular-html
+<!-- firstName and lastName are concatenated before the result is passed to the uppercase pipe -->
+{{ firstName + lastName | uppercase }}
+```
+
+The pipe operator has higher precedence than the conditional (ternary) operator.
+
+```angular-html
+{{ (isAdmin ? 'Access granted' : 'Access denied') | uppercase }}
+```
+
+If the same expression were written without parentheses:
+
+```angular-html
+{{ isAdmin ? 'Access granted' : 'Access denied' | uppercase }}
+```
+
+It will be parsed instead as:
+
+```angular-html
+{{ isAdmin ? 'Access granted' : ('Access denied' | uppercase) }}
+```
+
+Always use parentheses in your expressions when operator precedence may be ambiguous.
+
+### Change detection with pipes
+
+By default, all pipes are considered `pure`, which means that it only executes when a primitive input value (such as a `String`, `Number`, `Boolean`, or `Symbol`) or a object reference (such as `Array`, `Object`, `Function`, or `Date`) is changed. Pure pipes offer a performance advantage because Angular can avoid calling the transformation function if the passed value has not changed.
+
+As a result, this means that mutations to object properties or array items are not detected unless the entire object or array reference is replaced with a different instance. If you want this level of change detection, refer to [detecting changes within arrays or objects](#detecting-change-within-arrays-or-objects).
+
+## Creating custom pipes
+
+You can define a custom pipe by implementing a TypeScript class with the `@Pipe` decorator. A pipe must have two things:
+
+- A name, specified in the pipe decorator
+- A method named `transform` that performs the value transformation.
+
+The TypeScript class should additionally implement the `PipeTransform` interface to ensure that it satisfies the type signature for a pipe.
+
+Here is an example of a custom pipe that transforms strings to kebab case:
+
+```angular-ts
+// kebab-case.pipe.ts
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'kebabCase',
+})
+export class KebabCasePipe implements PipeTransform {
+  transform(value: string): string {
+    return value.toLowerCase().replace(/ /g, '-');
+  }
+}
+```
+
+### Using the `@Pipe` decorator
+
+When creating a custom pipe, import `Pipe` from the `@angular/core` package and use it as a decorator for the TypeScript class.
+
+```angular-ts
+import { Pipe } from '@angular/core';
+
+@Pipe({
+  name: 'myCustomTransformation',
+})
+export class MyCustomTransformationPipe {}
+```
+
+The `@Pipe` decorator requires a `name` that controls how the pipe is used in a template.
+
+### Naming convention for custom pipes
+
+The naming convention for custom pipes consists of two conventions:
+
+- `name` - camelCase is recommended. Do not use hyphens.
+- `class name` - PascalCase version of the `name` with `Pipe` appended to the end
+
+### Implement the `PipeTransform` interface
+
+In addition to the `@Pipe` decorator, custom pipes should always implement the `PipeTransform` interface from `@angular/core`.
+
+```angular-ts
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'myCustomTransformation',
+})
+export class MyCustomTransformationPipe implements PipeTransform {}
+```
+
+Implementing this interface ensures that your pipe class has the correct structure.
+
+### Transforming the value of a pipe
+
+Every transformation is invoked by the `transform` method with the first parameter being the value being passed in and the return value being the transformed value.
+
+```angular-ts
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'myCustomTransformation',
+})
+export class MyCustomTransformationPipe implements PipeTransform {
+  transform(value: string): string {
+    return `My custom transformation of ${value}.`
+  }
+}
+```
+
+### Adding parameters to a custom pipe
+
+You can add parameters to your transformation by adding additional parameters to the `transform` method:
+
+```angular-ts
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'myCustomTransformation',
+})
+export class MyCustomTransformationPipe implements PipeTransform {
+  transform(value: string, format: string): string {
+    let msg = `My custom transformation of ${value}.`
+
+    if (format === 'uppercase') {
+      return msg.toUpperCase()
+    } else {
+      return msg
+    }
+  }
+}
+```
+
+### Detecting change within arrays or objects
+
+When you want a pipe to detect changes within arrays or objects, it must be marked as an impure function by passing the `pure` flag with a value of `false`.
+
+Avoid creating impure pipes unless absolutely necessary, as they can incur a significant performance penalty if used without care.
+
+```angular-ts
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'joinNamesImpure',
+  pure: false,
+})
+export class JoinNamesImpurePipe implements PipeTransform {
+  transform(names: string[]): string {
+    return names.join();
+  }
+}
+```
+
+Angular developers often adopt the convention of including `Impure` in the pipe `name` and class name to indicate the potential performance pitfall to other developers.
diff --git a/adev-es/src/content/guide/templates/pipes.md b/adev-es/src/content/guide/templates/pipes.md
index 61e558c..55b0e40 100644
--- a/adev-es/src/content/guide/templates/pipes.md
+++ b/adev-es/src/content/guide/templates/pipes.md
@@ -1,12 +1,12 @@
 # Pipes
 
-## Overview
+## Visión general
 
-Pipes are a special operator in Angular template expressions that allows you to transform data declaratively in your template. Pipes let you declare a transformation function once and then use that transformation across multiple templates. Angular pipes use the vertical bar character (`|`), inspired by the [Unix pipe](<https://en.wikipedia.org/wiki/Pipeline_(Unix)>).
+Los pipes son un operador especial en las expresiones de plantilla de Angular que te permite transformar datos de forma declarativa en tu plantilla. Los pipes te permiten declarar una función de transformación una vez y luego usar esa transformación a través de múltiples plantillas. Los pipes de Angular usan el carácter de barra vertical (`|`), inspirado en el [pipe de Unix](<https://en.wikipedia.org/wiki/Pipeline_(Unix)>).
 
-NOTE: Angular's pipe syntax deviates from standard JavaScript, which uses the vertical bar character for the [bitwise OR operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_OR). Angular template expressions do not support bitwise operators.
+NOTA: La sintaxis de pipe de Angular se desvía del JavaScript estándar, que usa el carácter de barra vertical para el [operador OR bit a bit](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_OR). Las expresiones de plantilla de Angular no soportan operadores bit a bit.
 
-Here is an example using some built-in pipes that Angular provides:
+Aquí hay un ejemplo usando algunos pipes integrados que Angular proporciona:
 
 ```angular-ts
 import { Component } from '@angular/core';
@@ -17,11 +17,11 @@ import { CurrencyPipe, DatePipe, TitleCasePipe } from '@angular/common';
   imports: [CurrencyPipe, DatePipe, TitleCasePipe],
   template: `
     <main>
-       <!-- Transform the company name to title-case and
-       transform the purchasedOn date to a locale-formatted string -->
+       <!-- Transforma el nombre de la empresa a title-case y
+       transforma la fecha purchasedOn a una cadena con formato regional -->
 <h1>Purchases from {{ company | titlecase }} on {{ purchasedOn | date }}</h1>
 
-	    <!-- Transform the amount to a currency-formatted string -->
+	    <!-- Transforma el monto a una cadena con formato de moneda -->
       <p>Total: {{ amount | currency }}</p>
     </main>
   `,
@@ -33,7 +33,7 @@ export class ShoppingCartComponent {
 }
 ```
 
-When Angular renders the component, it will ensure that the appropriate date format and currency is based on the locale of the user. If the user is in the United States, it would render:
+Cuando Angular renderiza el componente, asegurará que el formato de fecha y moneda apropiados se basen en la configuración regional del usuario. Si el usuario está en los Estados Unidos, renderizará:
 
 ```angular-html
 <main>
@@ -42,69 +42,69 @@ When Angular renders the component, it will ensure that the appropriate date for
 </main>
 ```
 
-See the [in-depth guide on i18n](/guide/i18n) to learn more about how Angular localizes values.
+Consulta la [guía en profundidad sobre i18n](/guide/i18n) para aprender más sobre cómo Angular localiza valores.
 
-### Built-in Pipes
+### Pipes integrados
 
-Angular includes a set of built-in pipes in the `@angular/common` package:
+Angular incluye un conjunto de pipes integrados en el paquete `@angular/common`:
 
-| Name                                          | Description                                                                                   |
-| --------------------------------------------- | --------------------------------------------------------------------------------------------- |
-| [`AsyncPipe`](api/common/AsyncPipe)           | Read the value from a `Promise` or an RxJS `Observable`.                                      |
-| [`CurrencyPipe`](api/common/CurrencyPipe)     | Transforms a number to a currency string, formatted according to locale rules.                |
-| [`DatePipe`](api/common/DatePipe)             | Formats a `Date` value according to locale rules.                                             |
-| [`DecimalPipe`](api/common/DecimalPipe)       | Transforms a number into a string with a decimal point, formatted according to locale rules.  |
-| [`I18nPluralPipe`](api/common/I18nPluralPipe) | Maps a value to a string that pluralizes the value according to locale rules.                 |
-| [`I18nSelectPipe`](api/common/I18nSelectPipe) | Maps a key to a custom selector that returns a desired value.                                 |
-| [`JsonPipe`](api/common/JsonPipe)             | Transforms an object to a string representation via `JSON.stringify`, intended for debugging. |
-| [`KeyValuePipe`](api/common/KeyValuePipe)     | Transforms Object or Map into an array of key value pairs.                                    |
-| [`LowerCasePipe`](api/common/LowerCasePipe)   | Transforms text to all lower case.                                                            |
-| [`PercentPipe`](api/common/PercentPipe)       | Transforms a number to a percentage string, formatted according to locale rules.              |
-| [`SlicePipe`](api/common/SlicePipe)           | Creates a new Array or String containing a subset (slice) of the elements.                    |
-| [`TitleCasePipe`](api/common/TitleCasePipe)   | Transforms text to title case.                                                                |
-| [`UpperCasePipe`](api/common/UpperCasePipe)   | Transforms text to all upper case.                                                            |
+| Nombre                                        | Descripción                                                                                              |
+| --------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| [`AsyncPipe`](api/common/AsyncPipe)           | Lee el valor de una `Promise` o un `Observable` de RxJS.                                                 |
+| [`CurrencyPipe`](api/common/CurrencyPipe)     | Transforma un número en una cadena de moneda, formateada según las reglas de configuración regional.     |
+| [`DatePipe`](api/common/DatePipe)             | Formatea un valor `Date` según las reglas de configuración regional.                                     |
+| [`DecimalPipe`](api/common/DecimalPipe)       | Transforma un número en una cadena con un punto decimal, formateada según las reglas de configuración regional. |
+| [`I18nPluralPipe`](api/common/I18nPluralPipe) | Mapea un valor a una cadena que pluraliza el valor según las reglas de configuración regional.           |
+| [`I18nSelectPipe`](api/common/I18nSelectPipe) | Mapea una clave a un selector personalizado que devuelve un valor deseado.                               |
+| [`JsonPipe`](api/common/JsonPipe)             | Transforma un objeto a una representación de cadena mediante `JSON.stringify`, destinado a depuración.   |
+| [`KeyValuePipe`](api/common/KeyValuePipe)     | Transforma Object o Map en un array de pares clave-valor.                                                |
+| [`LowerCasePipe`](api/common/LowerCasePipe)   | Transforma texto a minúsculas.                                                                            |
+| [`PercentPipe`](api/common/PercentPipe)       | Transforma un número en una cadena de porcentaje, formateada según las reglas de configuración regional. |
+| [`SlicePipe`](api/common/SlicePipe)           | Crea un nuevo Array o String que contiene un subconjunto (slice) de los elementos.                       |
+| [`TitleCasePipe`](api/common/TitleCasePipe)   | Transforma texto a title case.                                                                            |
+| [`UpperCasePipe`](api/common/UpperCasePipe)   | Transforma texto a mayúsculas.                                                                            |
 
-## Using pipes
+## Usar pipes
 
-Angular's pipe operator uses the vertical bar character (`|`), within a template expression. The pipe operator is a binary operator– the left-hand operand is the value passed to the transformation function, and the right side operand is the name of the pipe and any additional arguments (described below).
+El operador pipe de Angular usa el carácter de barra vertical (`|`), dentro de una expresión de plantilla. El operador pipe es un operador binario: el operando del lado izquierdo es el valor pasado a la función de transformación, y el operando del lado derecho es el nombre del pipe y cualquier argumento adicional (descrito a continuación).
 
 ```angular-html
 <p>Total: {{ amount | currency }}</p>
 ```
 
-In this example, the value of `amount` is passed into the `CurrencyPipe` where the pipe name is `currency`. It then renders the default currency for the user’s locale.
+En este ejemplo, el valor de `amount` se pasa al `CurrencyPipe` donde el nombre del pipe es `currency`. Luego renderiza la moneda predeterminada para la configuración regional del usuario.
 
-### Combining multiple pipes in the same expression
+### Combinar múltiples pipes en la misma expresión
 
-You can apply multiple transformations to a value by using multiple pipe operators. Angular runs the pipes from left to right.
+Puedes aplicar múltiples transformaciones a un valor usando múltiples operadores pipe. Angular ejecuta los pipes de izquierda a derecha.
 
-The following example demonstrates a combination of pipes to display a localized date in all uppercase:
+El siguiente ejemplo demuestra una combinación de pipes para mostrar una fecha localizada en mayúsculas:
 
 ```angular-html
 <p>The event will occur on {{ scheduledOn | date | uppercase }}.</p>
 ```
 
-### Passing parameters to pipes
+### Pasar parámetros a pipes
 
-Some pipes accept parameters to configure the transformation. To specify a parameter, append the pipe name with a colon (`:`) followed by the parameter value.
+Algunos pipes aceptan parámetros para configurar la transformación. Para especificar un parámetro, agrega al nombre del pipe dos puntos (`:`) seguido del valor del parámetro.
 
-For example, the `DatePipe` is able to take parameters to format the date in a specific way.
+Por ejemplo, el `DatePipe` puede tomar parámetros para formatear la fecha de una manera específica.
 
 ```angular-html
 <p>The event will occur at {{ scheduledOn | date:'hh:mm' }}.</p>
 ```
 
-Some pipes may accept multiple parameters. You can specify additional parameter values separated by the colon character (`:`).
+Algunos pipes pueden aceptar múltiples parámetros. Puedes especificar valores de parámetros adicionales separados por el carácter de dos puntos (`:`).
 
-For example, we can also pass a second optional parameter to control the timezone.
+Por ejemplo, también podemos pasar un segundo parámetro opcional para controlar la zona horaria.
 
 ```angular-html
 <p>The event will occur at {{ scheduledOn | date:'hh:mm':'UTC' }}.</p>
 ```
 
-## How pipes work
+## Cómo funcionan los pipes
 
-Conceptually, pipes are functions that accept an input value and return a transformed value.
+Conceptualmente, los pipes son funciones que aceptan un valor de entrada y devuelven un valor transformado.
 
 ```angular-ts
 import { Component } from '@angular/core';
@@ -124,57 +124,57 @@ export class AppComponent {
 }
 ```
 
-In this example:
+En este ejemplo:
 
-1. `CurrencyPipe` is imported from `@angular/common`
-1. `CurrencyPipe` is added to the `imports` array
-1. The `amount` data is passed to the `currency` pipe
+1. `CurrencyPipe` se importa desde `@angular/common`
+1. `CurrencyPipe` se agrega al array `imports`
+1. Los datos de `amount` se pasan al pipe `currency`
 
-### Pipe operator precedence
+### Precedencia del operador pipe
 
-The pipe operator has lower precedence than other binary operators, including `+`, `-`, `*`, `/`, `%`, `&&`, `||`, and `??`.
+El operador pipe tiene menor precedencia que otros operadores binarios, incluyendo `+`, `-`, `*`, `/`, `%`, `&&`, `||`, y `??`.
 
 ```angular-html
-<!-- firstName and lastName are concatenated before the result is passed to the uppercase pipe -->
+<!-- firstName y lastName se concatenan antes de que el resultado se pase al pipe uppercase -->
 {{ firstName + lastName | uppercase }}
 ```
 
-The pipe operator has higher precedence than the conditional (ternary) operator.
+El operador pipe tiene mayor precedencia que el operador condicional (ternario).
 
 ```angular-html
 {{ (isAdmin ? 'Access granted' : 'Access denied') | uppercase }}
 ```
 
-If the same expression were written without parentheses:
+Si la misma expresión se escribiera sin paréntesis:
 
 ```angular-html
 {{ isAdmin ? 'Access granted' : 'Access denied' | uppercase }}
 ```
 
-It will be parsed instead as:
+Se analizaría en cambio como:
 
 ```angular-html
 {{ isAdmin ? 'Access granted' : ('Access denied' | uppercase) }}
 ```
 
-Always use parentheses in your expressions when operator precedence may be ambiguous.
+Siempre usa paréntesis en tus expresiones cuando la precedencia de operadores pueda ser ambigua.
 
-### Change detection with pipes
+### Detección de cambios con pipes
 
-By default, all pipes are considered `pure`, which means that it only executes when a primitive input value (such as a `String`, `Number`, `Boolean`, or `Symbol`) or a object reference (such as `Array`, `Object`, `Function`, or `Date`) is changed. Pure pipes offer a performance advantage because Angular can avoid calling the transformation function if the passed value has not changed.
+Por defecto, todos los pipes se consideran `pure`, lo que significa que solo se ejecuta cuando un valor de entrada primitivo (como `String`, `Number`, `Boolean`, o `Symbol`) o una referencia de objeto (como `Array`, `Object`, `Function`, o `Date`) es cambiado. Los pipes puros ofrecen una ventaja de rendimiento porque Angular puede evitar llamar a la función de transformación si el valor pasado no ha cambiado.
 
-As a result, this means that mutations to object properties or array items are not detected unless the entire object or array reference is replaced with a different instance. If you want this level of change detection, refer to [detecting changes within arrays or objects](#detecting-change-within-arrays-or-objects).
+Como resultado, esto significa que las mutaciones a propiedades de objetos o elementos de arrays no se detectan a menos que se reemplace toda la referencia de objeto o array con una instancia diferente. Si quieres este nivel de detección de cambios, consulta [detectar cambios dentro de arrays u objetos](#detectar-cambios-dentro-de-arrays-u-objetos).
 
-## Creating custom pipes
+## Crear pipes personalizados
 
-You can define a custom pipe by implementing a TypeScript class with the `@Pipe` decorator. A pipe must have two things:
+Puedes definir un pipe personalizado implementando una clase TypeScript con el decorador `@Pipe`. Un pipe debe tener dos cosas:
 
-- A name, specified in the pipe decorator
-- A method named `transform` that performs the value transformation.
+- Un nombre, especificado en el decorador pipe
+- Un método llamado `transform` que realiza la transformación del valor.
 
-The TypeScript class should additionally implement the `PipeTransform` interface to ensure that it satisfies the type signature for a pipe.
+La clase TypeScript debería además implementar la interfaz `PipeTransform` para asegurar que satisfaga la firma de tipo para un pipe.
 
-Here is an example of a custom pipe that transforms strings to kebab case:
+Aquí hay un ejemplo de un pipe personalizado que transforma cadenas a kebab case:
 
 ```angular-ts
 // kebab-case.pipe.ts
@@ -190,9 +190,9 @@ export class KebabCasePipe implements PipeTransform {
 }
 ```
 
-### Using the `@Pipe` decorator
+### Usar el decorador `@Pipe`
 
-When creating a custom pipe, import `Pipe` from the `@angular/core` package and use it as a decorator for the TypeScript class.
+Al crear un pipe personalizado, importa `Pipe` del paquete `@angular/core` y úsalo como decorador para la clase TypeScript.
 
 ```angular-ts
 import { Pipe } from '@angular/core';
@@ -203,18 +203,18 @@ import { Pipe } from '@angular/core';
 export class MyCustomTransformationPipe {}
 ```
 
-The `@Pipe` decorator requires a `name` that controls how the pipe is used in a template.
+El decorador `@Pipe` requiere un `name` que controla cómo se usa el pipe en una plantilla.
 
-### Naming convention for custom pipes
+### Convención de nombres para pipes personalizados
 
-The naming convention for custom pipes consists of two conventions:
+La convención de nombres para pipes personalizados consiste en dos convenciones:
 
-- `name` - camelCase is recommended. Do not use hyphens.
-- `class name` - PascalCase version of the `name` with `Pipe` appended to the end
+- `name` - se recomienda camelCase. No uses guiones.
+- `class name` - versión PascalCase del `name` con `Pipe` agregado al final
 
-### Implement the `PipeTransform` interface
+### Implementar la interfaz `PipeTransform`
 
-In addition to the `@Pipe` decorator, custom pipes should always implement the `PipeTransform` interface from `@angular/core`.
+Además del decorador `@Pipe`, los pipes personalizados siempre deben implementar la interfaz `PipeTransform` de `@angular/core`.
 
 ```angular-ts
 import { Pipe, PipeTransform } from '@angular/core';
@@ -225,11 +225,11 @@ import { Pipe, PipeTransform } from '@angular/core';
 export class MyCustomTransformationPipe implements PipeTransform {}
 ```
 
-Implementing this interface ensures that your pipe class has the correct structure.
+Implementar esta interfaz asegura que tu clase pipe tenga la estructura correcta.
 
-### Transforming the value of a pipe
+### Transformar el valor de un pipe
 
-Every transformation is invoked by the `transform` method with the first parameter being the value being passed in and the return value being the transformed value.
+Cada transformación se invoca mediante el método `transform` con el primer parámetro siendo el valor que se pasa y el valor de retorno siendo el valor transformado.
 
 ```angular-ts
 import { Pipe, PipeTransform } from '@angular/core';
@@ -244,9 +244,9 @@ export class MyCustomTransformationPipe implements PipeTransform {
 }
 ```
 
-### Adding parameters to a custom pipe
+### Agregar parámetros a un pipe personalizado
 
-You can add parameters to your transformation by adding additional parameters to the `transform` method:
+Puedes agregar parámetros a tu transformación agregando parámetros adicionales al método `transform`:
 
 ```angular-ts
 import { Pipe, PipeTransform } from '@angular/core';
@@ -267,11 +267,11 @@ export class MyCustomTransformationPipe implements PipeTransform {
 }
 ```
 
-### Detecting change within arrays or objects
+### Detectar cambios dentro de arrays u objetos
 
-When you want a pipe to detect changes within arrays or objects, it must be marked as an impure function by passing the `pure` flag with a value of `false`.
+Cuando quieres que un pipe detecte cambios dentro de arrays u objetos, debe ser marcado como una función impura pasando la bandera `pure` con un valor de `false`.
 
-Avoid creating impure pipes unless absolutely necessary, as they can incur a significant performance penalty if used without care.
+Evita crear pipes impuros a menos que sea absolutamente necesario, ya que pueden incurrir en una penalización de rendimiento significativa si se usan sin cuidado.
 
 ```angular-ts
 import { Pipe, PipeTransform } from '@angular/core';
@@ -287,4 +287,4 @@ export class JoinNamesImpurePipe implements PipeTransform {
 }
 ```
 
-Angular developers often adopt the convention of including `Impure` in the pipe `name` and class name to indicate the potential performance pitfall to other developers.
+Los desarrolladores de Angular a menudo adoptan la convención de incluir `Impure` en el `name` del pipe y el nombre de clase para indicar el potencial problema de rendimiento a otros desarrolladores.
diff --git a/adev-es/src/content/guide/templates/two-way-binding.en.md b/adev-es/src/content/guide/templates/two-way-binding.en.md
new file mode 100644
index 0000000..f102f3d
--- /dev/null
+++ b/adev-es/src/content/guide/templates/two-way-binding.en.md
@@ -0,0 +1,136 @@
+# Two-way binding
+
+**Two way binding** is a shorthand to simultaneously bind a value into an element, while also giving that element the ability to propagate changes back through this binding.
+
+## Syntax
+
+The syntax for two-way binding is a combination of square brackets and parentheses, `[()]`. It combines the syntax from property binding, `[]`, and the syntax from event binding, `()`. The Angular community informally refers to this syntax as "banana-in-a-box".
+
+## Two-way binding with form controls
+
+Developers commonly use two-way binding to keep component data in sync with a form control as a user interacts with the control. For example, when a user fills out a text input, it should update the state in the component.
+
+The following example dynamically updates the `firstName` attribute on the page:
+
+```angular-ts
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  imports: [FormsModule],
+  template: `
+    <main>
+      <h2>Hello {{ firstName }}!</h2>
+      <input type="text" [(ngModel)]="firstName" />
+    </main>
+  `
+})
+export class AppComponent {
+  firstName = 'Ada';
+}
+```
+
+To use two-way binding with native form controls, you need to:
+
+1. Import the `FormsModule` from `@angular/forms`
+1. Use the `ngModel` directive with the two-way binding syntax (e.g., `[(ngModel)]`)
+1. Assign it the state that you want it to update (e.g., `firstName`)
+
+Once that is set up, Angular will ensure that any updates in the text input will reflect correctly inside of the component state!
+
+Learn more about [`NgModel`](guide/directives#displaying-and-updating-properties-with-ngmodel) in the official docs.
+
+## Two-way binding between components
+
+Leveraging two-way binding between a parent and child component requires more configuration compared to form elements.
+
+Here is an example where the `AppComponent` is responsible for setting the initial count state, but the logic for updating and rendering the UI for the counter primarily resides inside its child `CounterComponent`.
+
+```angular-ts
+// ./app.component.ts
+import { Component } from '@angular/core';
+import { CounterComponent } from './counter/counter.component';
+
+@Component({
+  selector: 'app-root',
+  imports: [CounterComponent],
+  template: `
+    <main>
+      <h1>Counter: {{ initialCount }}</h1>
+      <app-counter [(count)]="initialCount"></app-counter>
+    </main>
+  `,
+})
+export class AppComponent {
+  initialCount = 18;
+}
+```
+
+```angular-ts
+// './counter/counter.component.ts';
+import { Component, model } from '@angular/core';
+
+@Component({
+  selector: 'app-counter',
+  template: `
+    <button (click)="updateCount(-1)">-</button>
+    <span>{{ count() }}</span>
+    <button (click)="updateCount(+1)">+</button>
+  `,
+})
+export class CounterComponent {
+  count = model<number>(0);
+
+  updateCount(amount: number): void {
+    this.count.update(currentCount => currentCount + amount);
+  }
+}
+```
+
+### Enabling two-way binding between components
+
+If we break down the example above to its core, each two-way binding for components requires the following:
+
+The child component must contain a `model` property.
+
+Here is a simplified example:
+
+```angular-ts
+// './counter/counter.component.ts';
+import { Component, model } from '@angular/core';
+
+@Component({ /* Omitted for brevity */ })
+export class CounterComponent {
+  count = model<number>(0);
+
+  updateCount(amount: number): void {
+    this.count.update(currentCount => currentCount + amount);
+  }
+}
+```
+
+The parent component must:
+
+1. Wrap the `model` property name in the two-way binding syntax.
+1. Assign a property or a signal to the `model` property.
+
+Here is a simplified example:
+
+```angular-ts
+// ./app.component.ts
+import { Component } from '@angular/core';
+import { CounterComponent } from './counter/counter.component';
+
+@Component({
+  selector: 'app-root',
+  imports: [CounterComponent],
+  template: `
+    <main>
+      <app-counter [(count)]="initialCount"></app-counter>
+    </main>
+  `,
+})
+export class AppComponent {
+  initialCount = 18;
+}
+```
diff --git a/adev-es/src/content/guide/templates/two-way-binding.md b/adev-es/src/content/guide/templates/two-way-binding.md
index f102f3d..02f7a3c 100644
--- a/adev-es/src/content/guide/templates/two-way-binding.md
+++ b/adev-es/src/content/guide/templates/two-way-binding.md
@@ -1,16 +1,16 @@
-# Two-way binding
+# Enlace bidireccional
 
-**Two way binding** is a shorthand to simultaneously bind a value into an element, while also giving that element the ability to propagate changes back through this binding.
+El **enlace bidireccional** es una forma abreviada de enlazar simultáneamente un valor a un elemento, mientras también le da a ese elemento la capacidad de propagar cambios de vuelta a través de este enlace.
 
-## Syntax
+## Sintaxis
 
-The syntax for two-way binding is a combination of square brackets and parentheses, `[()]`. It combines the syntax from property binding, `[]`, and the syntax from event binding, `()`. The Angular community informally refers to this syntax as "banana-in-a-box".
+La sintaxis para el enlace bidireccional es una combinación de corchetes y paréntesis, `[()]`. Combina la sintaxis del enlace de propiedad, `[]`, y la sintaxis del enlace de evento, `()`. La comunidad de Angular se refiere informalmente a esta sintaxis como "banana-in-a-box" (plátano en una caja).
 
-## Two-way binding with form controls
+## Enlace bidireccional con controles de formulario
 
-Developers commonly use two-way binding to keep component data in sync with a form control as a user interacts with the control. For example, when a user fills out a text input, it should update the state in the component.
+Los desarrolladores comúnmente usan el enlace bidireccional para mantener los datos del componente sincronizados con un control de formulario mientras el usuario interactúa con el control. Por ejemplo, cuando un usuario llena un campo de texto, debería actualizar el estado en el componente.
 
-The following example dynamically updates the `firstName` attribute on the page:
+El siguiente ejemplo actualiza dinámicamente el atributo `firstName` en la página:
 
 ```angular-ts
 import { Component } from '@angular/core';
@@ -30,21 +30,21 @@ export class AppComponent {
 }
 ```
 
-To use two-way binding with native form controls, you need to:
+Para usar el enlace bidireccional con controles de formulario nativos, necesitas:
 
-1. Import the `FormsModule` from `@angular/forms`
-1. Use the `ngModel` directive with the two-way binding syntax (e.g., `[(ngModel)]`)
-1. Assign it the state that you want it to update (e.g., `firstName`)
+1. Importar el `FormsModule` desde `@angular/forms`
+1. Usar la directiva `ngModel` con la sintaxis de enlace bidireccional (por ejemplo, `[(ngModel)]`)
+1. Asignarle el estado que quieres que actualice (por ejemplo, `firstName`)
 
-Once that is set up, Angular will ensure that any updates in the text input will reflect correctly inside of the component state!
+Una vez que esté configurado, Angular asegurará que cualquier actualización en el campo de texto se refleje correctamente dentro del estado del componente.
 
-Learn more about [`NgModel`](guide/directives#displaying-and-updating-properties-with-ngmodel) in the official docs.
+Aprende más sobre [`NgModel`](guide/directives#displaying-and-updating-properties-with-ngmodel) en la documentación oficial.
 
-## Two-way binding between components
+## Enlace bidireccional entre componentes
 
-Leveraging two-way binding between a parent and child component requires more configuration compared to form elements.
+Aprovechar el enlace bidireccional entre un componente padre e hijo requiere más configuración en comparación con elementos de formulario.
 
-Here is an example where the `AppComponent` is responsible for setting the initial count state, but the logic for updating and rendering the UI for the counter primarily resides inside its child `CounterComponent`.
+Aquí hay un ejemplo donde el `AppComponent` es responsable de establecer el estado de conteo inicial, pero la lógica para actualizar y renderizar la UI del contador reside principalmente dentro de su componente hijo `CounterComponent`.
 
 ```angular-ts
 // ./app.component.ts
@@ -87,13 +87,13 @@ export class CounterComponent {
 }
 ```
 
-### Enabling two-way binding between components
+### Habilitar el enlace bidireccional entre componentes
 
-If we break down the example above to its core, each two-way binding for components requires the following:
+Si desglosamos el ejemplo anterior a su núcleo, cada enlace bidireccional para componentes requiere lo siguiente:
 
-The child component must contain a `model` property.
+El componente hijo debe contener una propiedad `model`.
 
-Here is a simplified example:
+Aquí hay un ejemplo simplificado:
 
 ```angular-ts
 // './counter/counter.component.ts';
@@ -109,12 +109,12 @@ export class CounterComponent {
 }
 ```
 
-The parent component must:
+El componente padre debe:
 
-1. Wrap the `model` property name in the two-way binding syntax.
-1. Assign a property or a signal to the `model` property.
+1. Envolver el nombre de la propiedad `model` en la sintaxis de enlace bidireccional.
+1. Asignar una propiedad o un signal a la propiedad `model`.
 
-Here is a simplified example:
+Aquí hay un ejemplo simplificado:
 
 ```angular-ts
 // ./app.component.ts
diff --git a/adev-es/src/content/guide/templates/variables.en.md b/adev-es/src/content/guide/templates/variables.en.md
new file mode 100644
index 0000000..9860581
--- /dev/null
+++ b/adev-es/src/content/guide/templates/variables.en.md
@@ -0,0 +1,188 @@
+# Variables in templates
+
+Angular has two types of variable declarations in templates: local template variables and template reference variables.
+
+## Local template variables with `@let`
+
+Angular's `@let` syntax allows you to define a local variable and re-use it across a template, similar to the [JavaScript `let` syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let).
+
+### Using `@let`
+
+Use `@let` to declare a variable whose value is based on the result of a template expression. Angular automatically keeps the variable's value up-to-date with the given expression, similar to [bindings](./templates/bindings).
+
+```angular-html
+@let name = user.name;
+@let greeting = 'Hello, ' + name;
+@let data = data$ | async;
+@let pi = 3.14159;
+@let coordinates = {x: 50, y: 100};
+@let longExpression = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit ' +
+                      'sed do eiusmod tempor incididunt ut labore et dolore magna ' +
+                      'Ut enim ad minim veniam...';
+```
+
+Each `@let` block can declare exactly one variable. You cannot declare multiple variables in the same block with a comma.
+
+### Referencing the value of `@let`
+
+Once you've declared a variable with `@let`, you can reuse it in the same template:
+
+```angular-html
+@let user = user$ | async;
+
+@if (user) {
+  <h1>Hello, {{user.name}}</h1>
+  <user-avatar [photo]="user.photo"/>
+
+  <ul>
+    @for (snack of user.favoriteSnacks; track snack.id) {
+      <li>{{snack.name}}</li>
+    }
+  </ul>
+
+  <button (click)="update(user)">Update profile</button>
+}
+```
+
+### Assignability
+
+A key difference between `@let` and JavaScript's `let` is that `@let` cannot be reassigned after declaration. However, Angular automatically keeps the variable's value up-to-date with the given expression.
+
+```angular-html
+@let value = 1;
+
+<!-- Invalid - This does not work! -->
+<button (click)="value = value + 1">Increment the value</button>
+```
+
+### Variable scope
+
+`@let` declarations are scoped to the current view and its descendants. Angular creates a new view at component boundaries and wherever a template might contain dynamic content, such as control flow blocks, `@defer` blocks, or structural directives.
+
+Since `@let` declarations are not hoisted, they **cannot** be accessed by parent views or siblings:
+
+```angular-html
+@let topLevel = value;
+
+<div>
+  @let insideDiv = value;
+</div>
+
+{{topLevel}} <!-- Valid -->
+{{insideDiv}} <!-- Valid -->
+
+@if (condition) {
+  {{topLevel + insideDiv}} <!-- Valid -->
+
+  @let nested = value;
+
+  @if (condition) {
+    {{topLevel + insideDiv + nested}} <!-- Valid -->
+  }
+}
+
+{{nested}} <!-- Error, not hoisted from @if -->
+```
+
+### Full syntax
+
+The `@let` syntax is formally defined as:
+
+- The `@let` keyword.
+- Followed by one or more whitespaces, not including new lines.
+- Followed by a valid JavaScript name and zero or more whitespaces.
+- Followed by the = symbol and zero or more whitespaces.
+- Followed by an Angular expression which can be multi-line.
+- Terminated by the `;` symbol.
+
+## Template reference variables
+
+Template reference variables give you a way to declare a variable that references a value from an element in your template.
+
+A template reference variable can refer to the following:
+
+- a DOM element within a template (including [custom elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements))
+- an Angular component or directive
+- a [TemplateRef](/api/core/TemplateRef) from an [ng-template](/api/core/ng-template)
+
+You can use template reference variables to read information from one part of the template in another part of the same template.
+
+### Declaring a template reference variable
+
+You can declare a variable on an element in a template by adding an attribute that starts with the hash character (`#`) followed by the variable name.
+
+```angular-html
+<!-- Create a template reference variable named "taskInput", referring to the HTMLInputElement. -->
+<input #taskInput placeholder="Enter task name">
+```
+
+### Assigning values to template reference variables
+
+Angular assigns a value to template variables based on the element on which the variable is declared.
+
+If you declare the variable on a Angular component, the variable refers to the component instance.
+
+```angular-html
+<!-- The `startDate` variable is assigned the instance of `MyDatepicker`. -->
+<my-datepicker #startDate />
+```
+
+If you declare the variable on an `<ng-template>` element, the variable refers to a TemplateRef instance which represents the template. For more information, see [How Angular uses the asterisk, \*, syntax](/guide/directives/structural-directives#structural-directive-shorthand) in [Structural directives](/guide/directives/structural-directives).
+
+```angular-html
+<!-- The `myFragment` variable is assigned the `TemplateRef` instance corresponding to this template fragment. -->
+<ng-template #myFragment>
+  <p>This is a template fragment</p>
+</ng-template>
+```
+
+If you declare the variable on any other displayed element, the variable refers to the `HTMLElement` instance.
+
+```angular-html
+<!-- The "taskInput" variable refers to the HTMLInputElement instance. -->
+<input #taskInput placeholder="Enter task name">
+```
+
+#### Assigning a reference to an Angular directive
+
+Angular directives may have an `exportAs` property that defines a name by which the directive can be referenced in a template:
+
+```angular-ts
+@Directive({
+  selector: '[dropZone]',
+  exportAs: 'dropZone',
+})
+export class DropZone { /* ... */ }
+```
+
+When you declare a template variable on an element, you can assign that variable a directive instance by specifying this `exportAs` name:
+
+```angular-html
+<!-- The `firstZone` variable refers to the `DropZone` directive instance. -->
+<section dropZone #firstZone="dropZone"> ... </section>
+```
+
+You cannot refer to a directive that does not specify an `exportAs` name.
+
+### Using template reference variables with queries
+
+In addition to using template variables to read values from another part of the same template, you can also use this style of variable declaration to "mark" an element for [component and directive queries](/guide/components/queries).
+
+When you want to query for a specific element in a template, you can declare a template variable on that element and then query for the element based on the variable name.
+
+```angular-html
+ <input #description value="Original description">
+```
+
+```angular-ts
+@Component({
+  /* ... */,
+  template: `<input #description value="Original description">`,
+})
+export class AppComponent {
+  // Query for the input element based on the template variable name.
+  @ViewChild('description') input: ElementRef | undefined;
+}
+```
+
+See [Referencing children with queries](/guide/components/queries) for more information on queries.
diff --git a/adev-es/src/content/guide/templates/variables.md b/adev-es/src/content/guide/templates/variables.md
index 9860581..5e894ec 100644
--- a/adev-es/src/content/guide/templates/variables.md
+++ b/adev-es/src/content/guide/templates/variables.md
@@ -1,14 +1,14 @@
-# Variables in templates
+# Variables en plantillas
 
-Angular has two types of variable declarations in templates: local template variables and template reference variables.
+Angular tiene dos tipos de declaraciones de variables en plantillas: variables locales de plantilla y variables de referencia de plantilla.
 
-## Local template variables with `@let`
+## Variables locales de plantilla con `@let`
 
-Angular's `@let` syntax allows you to define a local variable and re-use it across a template, similar to the [JavaScript `let` syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let).
+La sintaxis `@let` de Angular te permite definir una variable local y reutilizarla en toda la plantilla, similar a la [sintaxis `let` de JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let).
 
-### Using `@let`
+### Usando `@let`
 
-Use `@let` to declare a variable whose value is based on the result of a template expression. Angular automatically keeps the variable's value up-to-date with the given expression, similar to [bindings](./templates/bindings).
+Usa `@let` para declarar una variable cuyo valor se basa en el resultado de una expresión de plantilla. Angular mantiene automáticamente el valor de la variable actualizado con la expresión dada, similar a los [bindings](./templates/bindings).
 
 ```angular-html
 @let name = user.name;
@@ -21,11 +21,11 @@ Use `@let` to declare a variable whose value is based on the result of a templat
                       'Ut enim ad minim veniam...';
 ```
 
-Each `@let` block can declare exactly one variable. You cannot declare multiple variables in the same block with a comma.
+Cada bloque `@let` puede declarar exactamente una variable. No puedes declarar múltiples variables en el mismo bloque con una coma.
 
-### Referencing the value of `@let`
+### Referenciando el valor de `@let`
 
-Once you've declared a variable with `@let`, you can reuse it in the same template:
+Una vez que has declarado una variable con `@let`, puedes reutilizarla en la misma plantilla:
 
 ```angular-html
 @let user = user$ | async;
@@ -44,22 +44,22 @@ Once you've declared a variable with `@let`, you can reuse it in the same templa
 }
 ```
 
-### Assignability
+### Asignabilidad
 
-A key difference between `@let` and JavaScript's `let` is that `@let` cannot be reassigned after declaration. However, Angular automatically keeps the variable's value up-to-date with the given expression.
+Una diferencia clave entre `@let` y el `let` de JavaScript es que `@let` no puede ser reasignado después de la declaración. Sin embargo, Angular mantiene automáticamente el valor de la variable actualizado con la expresión dada.
 
 ```angular-html
 @let value = 1;
 
-<!-- Invalid - This does not work! -->
+<!-- Inválido - ¡Esto no funciona! -->
 <button (click)="value = value + 1">Increment the value</button>
 ```
 
-### Variable scope
+### Alcance de variables
 
-`@let` declarations are scoped to the current view and its descendants. Angular creates a new view at component boundaries and wherever a template might contain dynamic content, such as control flow blocks, `@defer` blocks, or structural directives.
+Las declaraciones `@let` tienen alcance a la vista actual y sus descendientes. Angular crea una nueva vista en los límites de componentes y en cualquier lugar donde una plantilla pueda contener contenido dinámico, como bloques de control de flujo, bloques `@defer`, o directivas estructurales.
 
-Since `@let` declarations are not hoisted, they **cannot** be accessed by parent views or siblings:
+Dado que las declaraciones `@let` no se elevan (no son hoisted), **no pueden** ser accedidas por vistas padres o hermanas:
 
 ```angular-html
 @let topLevel = value;
@@ -68,84 +68,84 @@ Since `@let` declarations are not hoisted, they **cannot** be accessed by parent
   @let insideDiv = value;
 </div>
 
-{{topLevel}} <!-- Valid -->
-{{insideDiv}} <!-- Valid -->
+{{topLevel}} <!-- Válido -->
+{{insideDiv}} <!-- Válido -->
 
 @if (condition) {
-  {{topLevel + insideDiv}} <!-- Valid -->
+  {{topLevel + insideDiv}} <!-- Válido -->
 
   @let nested = value;
 
   @if (condition) {
-    {{topLevel + insideDiv + nested}} <!-- Valid -->
+    {{topLevel + insideDiv + nested}} <!-- Válido -->
   }
 }
 
-{{nested}} <!-- Error, not hoisted from @if -->
+{{nested}} <!-- Error, no se eleva desde @if -->
 ```
 
-### Full syntax
+### Sintaxis completa
 
-The `@let` syntax is formally defined as:
+La sintaxis `@let` está formalmente definida como:
 
-- The `@let` keyword.
-- Followed by one or more whitespaces, not including new lines.
-- Followed by a valid JavaScript name and zero or more whitespaces.
-- Followed by the = symbol and zero or more whitespaces.
-- Followed by an Angular expression which can be multi-line.
-- Terminated by the `;` symbol.
+- La palabra clave `@let`.
+- Seguida de uno o más espacios en blanco, sin incluir nuevas líneas.
+- Seguida de un nombre JavaScript válido y cero o más espacios en blanco.
+- Seguida del símbolo = y cero o más espacios en blanco.
+- Seguida de una expresión Angular que puede ser multilínea.
+- Terminada por el símbolo `;`.
 
-## Template reference variables
+## Variables de referencia de plantilla
 
-Template reference variables give you a way to declare a variable that references a value from an element in your template.
+Las variables de referencia de plantilla te dan una forma de declarar una variable que referencia un valor de un elemento en tu plantilla.
 
-A template reference variable can refer to the following:
+Una variable de referencia de plantilla puede referirse a lo siguiente:
 
-- a DOM element within a template (including [custom elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements))
-- an Angular component or directive
-- a [TemplateRef](/api/core/TemplateRef) from an [ng-template](/api/core/ng-template)
+- un elemento DOM dentro de una plantilla (incluyendo [elementos personalizados](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements))
+- un componente o directiva de Angular
+- un [TemplateRef](/api/core/TemplateRef) de un [ng-template](/api/core/ng-template)
 
-You can use template reference variables to read information from one part of the template in another part of the same template.
+Puedes usar variables de referencia de plantilla para leer información de una parte de la plantilla en otra parte de la misma plantilla.
 
-### Declaring a template reference variable
+### Declarando una variable de referencia de plantilla
 
-You can declare a variable on an element in a template by adding an attribute that starts with the hash character (`#`) followed by the variable name.
+Puedes declarar una variable en un elemento de una plantilla agregando un atributo que comienza con el carácter hash (`#`) seguido del nombre de la variable.
 
 ```angular-html
-<!-- Create a template reference variable named "taskInput", referring to the HTMLInputElement. -->
+<!-- Crea una variable de referencia de plantilla llamada "taskInput", que referencia al HTMLInputElement. -->
 <input #taskInput placeholder="Enter task name">
 ```
 
-### Assigning values to template reference variables
+### Asignando valores a variables de referencia de plantilla
 
-Angular assigns a value to template variables based on the element on which the variable is declared.
+Angular asigna un valor a las variables de plantilla basándose en el elemento en el que se declara la variable.
 
-If you declare the variable on a Angular component, the variable refers to the component instance.
+Si declaras la variable en un componente de Angular, la variable se refiere a la instancia del componente.
 
 ```angular-html
-<!-- The `startDate` variable is assigned the instance of `MyDatepicker`. -->
+<!-- La variable `startDate` se asigna a la instancia de `MyDatepicker`. -->
 <my-datepicker #startDate />
 ```
 
-If you declare the variable on an `<ng-template>` element, the variable refers to a TemplateRef instance which represents the template. For more information, see [How Angular uses the asterisk, \*, syntax](/guide/directives/structural-directives#structural-directive-shorthand) in [Structural directives](/guide/directives/structural-directives).
+Si declaras la variable en un elemento `<ng-template>`, la variable se refiere a una instancia de TemplateRef que representa la plantilla. Para más información, consulta [Cómo Angular usa el asterisco, \*, sintaxis](/guide/directives/structural-directives#structural-directive-shorthand) en [Directivas estructurales](/guide/directives/structural-directives).
 
 ```angular-html
-<!-- The `myFragment` variable is assigned the `TemplateRef` instance corresponding to this template fragment. -->
+<!-- La variable `myFragment` se asigna a la instancia de `TemplateRef` correspondiente a este fragmento de plantilla. -->
 <ng-template #myFragment>
   <p>This is a template fragment</p>
 </ng-template>
 ```
 
-If you declare the variable on any other displayed element, the variable refers to the `HTMLElement` instance.
+Si declaras la variable en cualquier otro elemento mostrado, la variable se refiere a la instancia de `HTMLElement`.
 
 ```angular-html
-<!-- The "taskInput" variable refers to the HTMLInputElement instance. -->
+<!-- La variable "taskInput" se refiere a la instancia de HTMLInputElement. -->
 <input #taskInput placeholder="Enter task name">
 ```
 
-#### Assigning a reference to an Angular directive
+#### Asignando una referencia a una directiva de Angular
 
-Angular directives may have an `exportAs` property that defines a name by which the directive can be referenced in a template:
+Las directivas de Angular pueden tener una propiedad `exportAs` que define un nombre por el cual la directiva puede ser referenciada en una plantilla:
 
 ```angular-ts
 @Directive({
@@ -155,20 +155,20 @@ Angular directives may have an `exportAs` property that defines a name by which
 export class DropZone { /* ... */ }
 ```
 
-When you declare a template variable on an element, you can assign that variable a directive instance by specifying this `exportAs` name:
+Cuando declaras una variable de plantilla en un elemento, puedes asignar a esa variable una instancia de directiva especificando este nombre `exportAs`:
 
 ```angular-html
-<!-- The `firstZone` variable refers to the `DropZone` directive instance. -->
+<!-- La variable `firstZone` se refiere a la instancia de la directiva `DropZone`. -->
 <section dropZone #firstZone="dropZone"> ... </section>
 ```
 
-You cannot refer to a directive that does not specify an `exportAs` name.
+No puedes referirte a una directiva que no especifica un nombre `exportAs`.
 
-### Using template reference variables with queries
+### Usando variables de referencia de plantilla con consultas
 
-In addition to using template variables to read values from another part of the same template, you can also use this style of variable declaration to "mark" an element for [component and directive queries](/guide/components/queries).
+Además de usar variables de plantilla para leer valores de otra parte de la misma plantilla, también puedes usar este estilo de declaración de variable para "marcar" un elemento para [consultas de componentes y directivas](/guide/components/queries).
 
-When you want to query for a specific element in a template, you can declare a template variable on that element and then query for the element based on the variable name.
+Cuando quieres consultar por un elemento específico en una plantilla, puedes declarar una variable de plantilla en ese elemento y luego consultar por el elemento basándote en el nombre de la variable.
 
 ```angular-html
  <input #description value="Original description">
@@ -180,9 +180,9 @@ When you want to query for a specific element in a template, you can declare a t
   template: `<input #description value="Original description">`,
 })
 export class AppComponent {
-  // Query for the input element based on the template variable name.
+  // Consulta por el elemento input basándose en el nombre de la variable de plantilla.
   @ViewChild('description') input: ElementRef | undefined;
 }
 ```
 
-See [Referencing children with queries](/guide/components/queries) for more information on queries.
+Consulta [Referenciando hijos con consultas](/guide/components/queries) para más información sobre consultas.
diff --git a/adev-es/src/content/guide/templates/whitespace.en.md b/adev-es/src/content/guide/templates/whitespace.en.md
new file mode 100644
index 0000000..21886c5
--- /dev/null
+++ b/adev-es/src/content/guide/templates/whitespace.en.md
@@ -0,0 +1,64 @@
+# Whitespace in templates
+
+By default, Angular templates do not preserve whitespace that the framework considers unnecessary. This commonly occurs in two situations: whitespace between elements, and collapsible whitespace inside of text.
+
+## Whitespace between elements
+
+Most developers prefer to format their templates with newlines and indentation to make the template readable:
+
+```angular-html
+<section>
+  <h3>User profile</h3>
+  <label>
+    User name
+    <input>
+  </label>
+</section>
+```
+
+This template contains whitespace between all of the elements. The following snippet shows the same HTML with each whitespace character replaced with the hash (`#`) character to highlight how much whitespace is present:
+
+```angular-html
+<!-- Total Whitespace: 20 -->
+<section>###<h3>User profile</h3>###<label>#####User name#####<input>###</label>#</section>
+```
+
+Preserving the whitespace as written in the template would result in many unnecessary [text nodes](https://developer.mozilla.org/en-US/docs/Web/API/Text) and increase page rendering overhead. By ignoring this whitespace between elements, Angular performs less work when rendering the template on the page, improving overall performance.
+
+## Collapsible whitespace inside text
+
+When your web browser renders HTML on a page, it collapses multiple consecutive whitespace characters to a single character:
+
+```angular-html
+<!-- What it looks like in the template -->
+<p>Hello         world</p>
+```
+
+In this example, the browser displays only a single space between "Hello" and "world".
+
+```angular-html
+<!-- What shows up in the browser -->
+<p>Hello world</p>
+```
+
+See [How whitespace is handled by HTML, CSS, and in the DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace) for more context on how this works.
+
+Angular avoids sending these unnecessary whitespace characters to the browser in the first place by collapsing them to a single character when it compiles the template.
+
+## Preserving whitespace
+
+You can tell Angular to preserve whitespace in a template by specifying `preserveWhitespaces: true` in the `@Component` decorator for a template.
+
+```angular-ts
+@Component({
+  /* ... */,
+  preserveWhitespaces: true,
+  template: `
+    <p>Hello         world</p>
+  `
+})
+```
+
+Avoid setting this option unless absolutely necessary. Preserving whitespace can cause Angular to produce significantly more nodes while rendering, slowing down your application.
+
+You can additionally use a special HTML entity unique to Angular, `&ngsp;`. This entity produces a single space character that's preserved in the compiled output.
diff --git a/adev-es/src/content/guide/templates/whitespace.md b/adev-es/src/content/guide/templates/whitespace.md
index 21886c5..d498192 100644
--- a/adev-es/src/content/guide/templates/whitespace.md
+++ b/adev-es/src/content/guide/templates/whitespace.md
@@ -1,10 +1,10 @@
-# Whitespace in templates
+# Espacios en blanco en plantillas
 
-By default, Angular templates do not preserve whitespace that the framework considers unnecessary. This commonly occurs in two situations: whitespace between elements, and collapsible whitespace inside of text.
+Por defecto, las plantillas de Angular no preservan espacios en blanco que el framework considera innecesarios. Esto ocurre comúnmente en dos situaciones: espacios en blanco entre elementos, y espacios en blanco colapsables dentro de texto.
 
-## Whitespace between elements
+## Espacios en blanco entre elementos
 
-Most developers prefer to format their templates with newlines and indentation to make the template readable:
+La mayoría de los desarrolladores prefieren formatear sus plantillas con saltos de línea e indentación para hacer la plantilla legible:
 
 ```angular-html
 <section>
@@ -16,38 +16,38 @@ Most developers prefer to format their templates with newlines and indentation t
 </section>
 ```
 
-This template contains whitespace between all of the elements. The following snippet shows the same HTML with each whitespace character replaced with the hash (`#`) character to highlight how much whitespace is present:
+Esta plantilla contiene espacios en blanco entre todos los elementos. El siguiente fragmento muestra el mismo HTML con cada carácter de espacio en blanco reemplazado con el carácter hash (`#`) para resaltar cuánto espacio en blanco está presente:
 
 ```angular-html
-<!-- Total Whitespace: 20 -->
+<!-- Total de espacios en blanco: 20 -->
 <section>###<h3>User profile</h3>###<label>#####User name#####<input>###</label>#</section>
 ```
 
-Preserving the whitespace as written in the template would result in many unnecessary [text nodes](https://developer.mozilla.org/en-US/docs/Web/API/Text) and increase page rendering overhead. By ignoring this whitespace between elements, Angular performs less work when rendering the template on the page, improving overall performance.
+Preservar los espacios en blanco tal como están escritos en la plantilla resultaría en muchos [nodos de texto](https://developer.mozilla.org/en-US/docs/Web/API/Text) innecesarios y aumentaría la sobrecarga de renderización de la página. Al ignorar estos espacios en blanco entre elementos, Angular realiza menos trabajo al renderizar la plantilla en la página, mejorando el rendimiento general.
 
-## Collapsible whitespace inside text
+## Espacios en blanco colapsables dentro de texto
 
-When your web browser renders HTML on a page, it collapses multiple consecutive whitespace characters to a single character:
+Cuando tu navegador web renderiza HTML en una página, colapsa múltiples caracteres de espacio en blanco consecutivos a un solo carácter:
 
 ```angular-html
-<!-- What it looks like in the template -->
+<!-- Cómo se ve en la plantilla -->
 <p>Hello         world</p>
 ```
 
-In this example, the browser displays only a single space between "Hello" and "world".
+En este ejemplo, el navegador muestra solo un espacio único entre "Hello" y "world".
 
 ```angular-html
-<!-- What shows up in the browser -->
+<!-- Lo que se muestra en el navegador -->
 <p>Hello world</p>
 ```
 
-See [How whitespace is handled by HTML, CSS, and in the DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace) for more context on how this works.
+Consulta [Cómo maneja los espacios en blanco HTML, CSS y el DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace) para más contexto sobre cómo funciona esto.
 
-Angular avoids sending these unnecessary whitespace characters to the browser in the first place by collapsing them to a single character when it compiles the template.
+Angular evita enviar estos caracteres de espacio en blanco innecesarios al navegador en primer lugar colapsándolos a un solo carácter cuando compila la plantilla.
 
-## Preserving whitespace
+## Preservando espacios en blanco
 
-You can tell Angular to preserve whitespace in a template by specifying `preserveWhitespaces: true` in the `@Component` decorator for a template.
+Puedes indicarle a Angular que preserve los espacios en blanco en una plantilla especificando `preserveWhitespaces: true` en el decorador `@Component` para una plantilla.
 
 ```angular-ts
 @Component({
@@ -59,6 +59,6 @@ You can tell Angular to preserve whitespace in a template by specifying `preserv
 })
 ```
 
-Avoid setting this option unless absolutely necessary. Preserving whitespace can cause Angular to produce significantly more nodes while rendering, slowing down your application.
+Evita configurar esta opción a menos que sea absolutamente necesario. Preservar espacios en blanco puede hacer que Angular produzca significativamente más nodos durante la renderización, ralentizando tu aplicación.
 
-You can additionally use a special HTML entity unique to Angular, `&ngsp;`. This entity produces a single space character that's preserved in the compiled output.
+Puedes adicionalmente usar una entidad HTML especial única de Angular, `&ngsp;`. Esta entidad produce un solo carácter de espacio que se preserva en la salida compilada.