` |
```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
```
-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
@@ -251,6 +251,6 @@ Angular supports binding string values to ARIA attributes.
```
-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) {
+ {{a}} is greater than {{b}}
+}
+```
+
+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) {
+ Item #{{ idx }}: {{ item.name }}
+}
+```
+
+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) {
+ {{ item.name }}
+} @empty {
+ There are no items.
+}
+```
+
+## 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') {
+ Placeholder content
+}
+```
+
+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 {
+ Placeholder content
+}
+```
+
+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 {
+ Placeholder content
+}
+```
+
+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 {
+ Failed to load large component.
+}
+```
+
+## 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 {
+ Large component placeholder
+}
+```
+
+#### `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 component placeholder
+}
+```
+
+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
+Hello!
+@defer (on viewport(greeting)) {
+ Hello!
+
+
+@defer (on viewport({trigger: greeting, rootMargin: '100px', threshold: 0.5})) {
+ Implied trigger
+}
+```
+
+#### `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 component placeholder
+}
+```
+
+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
+Hello!
+@defer (on interaction(greeting)) {
+ Large component placeholder
+}
+```
+
+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
+Hello!
+@defer (on hover(greeting)) {
+ Large component placeholder
+}
+```
+
+#### `timer`
+
+The `timer` trigger loads the deferred content after a specified duration.
+
+```angular-html
+@defer (on timer(500ms)) {
+ Large component placeholder
+}
+```
+
+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 component placeholder
+}
+```
+
+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 component placeholder
+}
+```
+
+## 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 {
+
+ @defer (on timer(2000)) {
+
+```
+
+This ensures that changes are announced to the user when transitions (placeholder → loading → 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 {
Hello!
@@ -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
Hello!
-
+
@defer (on viewport({trigger: greeting, rootMargin: '100px', threshold: 0.5})) {
Hello!
@@ -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
Hello!
@@ -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
@@ -382,4 +382,4 @@ To ensure deferred content changes are announced to screen readers, you can wrap
```
-This ensures that changes are announced to the user when transitions (placeholder → loading → content/error) occur.
+Esto asegura que los cambios sean anunciados al usuario cuando ocurren transiciones (placeholder → loading → 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: `
+
+ `,
+ ...
+})
+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: `
+ ` 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
+
+
+
+ User bio
+ Here's some info about the user
+
+
+```
+
+```angular-html
+
+
+ User bio
+ Here's some info about the user
+
+```
+
+You can apply directives to `` to add behaviors or configuration to a part of your template.
+
+Angular ignores all attribute bindings and event listeners applied to ``, including those applied via directive.
+
+## Using `` to display dynamic contents
+
+`` 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 ``.
+
+```angular-ts
+@Component({
+ template: `
+ Your profile
+ ` element.
+
+### Rendering template fragments
+
+You can use Angular's built-in `NgTemplateOutlet` directive to dynamically render a template fragment to the location of the ``.
+
+```angular-ts
+@Component({
+ template: `
+ Your profile
+ This is the admin profile
+ This is the basic profile
+ `
+})
+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 `` element.
+
+For more information regarding NgTemplateOutlet, see the [NgTemplateOutlets API documentation page](/api/common/NgTemplateOutlet).
+
+## Using `` with structural directives
+
+You can also apply structural directives to `` elements. Common examples of this include `ngIf`and `ngFor`.
+
+```angular-html
+
+ Admin Dashboard
+
+
+
+ {{ item.title }}
+ {{ item.description }}
+
+```
+
+## Using `` for injection
+
+See the Dependency Injection guide for more information on Angular's dependency injection system.
+
+When you apply a directive to ``, 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
+
+
+```
+
+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
-`` 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.
+`` 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
-
+
User bio
@@ -13,24 +13,24 @@
```
```angular-html
-
+
User bio
Here's some info about the user
```
-You can apply directives to `` to add behaviors or configuration to a part of your template.
+Puedes aplicar directivas a `` para agregar comportamientos o configuración a una parte de tu plantilla.
-Angular ignores all attribute bindings and event listeners applied to ``, including those applied via directive.
+Angular ignora todos los enlaces de atributos y event listeners aplicados a ``, incluyendo aquellos aplicados a través de directivas.
-## Using `` to display dynamic contents
+## Usando `` para mostrar contenido dinámico
-`` can act as a placeholder for rendering dynamic content.
+`` 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 ``.
+Puedes usar la directiva integrada de Angular `NgComponentOutlet` para renderizar dinámicamente un componente en la ubicación del ``.
```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 `` element.
+En el ejemplo anterior, la directiva `NgComponentOutlet` renderiza dinámicamente `AdminProfile` o `BasicUserProfile` en la ubicación del elemento ``.
-### 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 ``.
+Puedes usar la directiva integrada de Angular `NgTemplateOutlet` para renderizar dinámicamente un fragmento de plantilla en la ubicación del ``.
```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 `` element.
+En el ejemplo anterior, la directiva `ngTemplateOutlet` renderiza dinámicamente uno de dos fragmentos de plantilla en la ubicación del elemento ``.
-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 `` with structural directives
+## Usando `` con directivas estructurales
-You can also apply structural directives to `` elements. Common examples of this include `ngIf`and `ngFor`.
+También puedes aplicar directivas estructurales a elementos ``. Ejemplos comunes de esto incluyen `ngIf` y `ngFor`.
```angular-html
@@ -89,18 +89,18 @@ You can also apply structural directives to `` elements. Common ex
```
-## Using `` for injection
+## Usando `` 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 ``, 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 ``, 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 {
```
-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`
+
+`` 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: `
+
+ Next
+ `,
+})
+export class AppComponent {}
+```
+
+For more detail, check out the [`` 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`
-`` 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.
+`` 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 [`` 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 ``](/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 `` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template), the `` 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 `` element:
+
+```angular-html
+This is a normal element
+
+
+ This is a template fragment
+
+```
+
+When the above is rendered, the content of the `` 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: `You've selected {{count}} items. `,
+})
+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 `` 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 `` 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 `` element to reference that template fragment in other parts of the same template file:
+
+```angular-html
+This is a normal element
+
+
+ This is a template fragment
+
+```
+
+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: `
+ This is a normal element
+
+
+ This is a template fragment
+
+ `,
+})
+export class ComponentWithFragment {
+ templateRef = viewChild>(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 `` element and querying for the fragments based on that name:
+
+```angular-ts
+@Component({
+ /* ... */,
+ template: `
+ This is a normal element
+
+
+ This is one template fragment
+
+
+
+ This is another template fragment
+
+ `,
+})
+export class ComponentWithFragment {
+ fragmentOne = viewChild>('fragmentOne');
+ fragmentTwo = viewChild>('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 `` element:
+
+```angular-ts
+@Directive({
+ selector: '[myDirective]'
+})
+export class MyDirective {
+ private fragment = inject(TemplateRef);
+}
+```
+
+```angular-html
+
+ This is one template fragment
+
+```
+
+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 [`` 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 `` element with `NgTemplateOutlet`:
+
+```angular-html
+This is a normal element
+
+
+ This is a fragment
+
+
+This is a normal element
+This is a fragment
+```
+
+### 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: `
+ Component with a fragment
+
+ This is the fragment
+
+ Show `,
+})
+export class MyOutlet {
+ private viewContainer = inject(ViewContainerRef);
+ fragment = input | 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 a fragment>
+
+ Show
+
+ This is the fragment
+
+```
+
+## Passing parameters when rendering a template fragment
+
+When declaring a template fragment with ``, 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
+
+ You selected: {{pizzaTopping}}
+
+```
+
+### Using `NgTemplateOutlet`
+
+You can bind a context object to the `ngTemplateOutletContext` input:
+
+```angular-html
+
+ You selected: {{pizzaTopping}}
+
+
+
+
+
+```
+
+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 `` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template), the `` element lets you declare a **template fragment** – a section of content that you can dynamically or programmatically render.
+Inspirado por el [elemento nativo ``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template), el elemento `` 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 `` element:
+Puedes crear un fragmento de plantilla dentro de cualquier plantilla de componente con el elemento ``:
```angular-html
This is a normal element
@@ -14,11 +14,11 @@ You can create a template fragment inside of any component template with the `
```
-When the above is rendered, the content of the `` 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 `` 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 `` 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 `` element.
+- Declarando una [variable de referencia de plantilla](/guide/templates/variables#template-reference-variables) en el elemento ``
+- 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 ``.
-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 `` 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 `` para referenciar ese fragmento de plantilla en otras partes del mismo archivo de plantilla:
```angular-html
This is a normal element
@@ -54,13 +54,13 @@ You can add a template reference variable to an `` element to refer
```
-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 `` 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 `` 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 `` element:
+Una directiva puede inyectar un `TemplateRef` si esa directiva se aplica directamente a un elemento ``:
```angular-ts
@Directive({
@@ -124,23 +124,23 @@ export class MyDirective {
```
-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 [`` 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 ``](/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 `` element with `NgTemplateOutlet`:
+El siguiente ejemplo declara un fragmento de plantilla y renderiza ese fragmento en un elemento `` con `NgTemplateOutlet`:
```angular-html
This is a normal element
@@ -152,20 +152,20 @@ The following example declares a template fragment and renders that fragment to
This is a normal element
This is a fragment
```
-### 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
@@ -210,11 +210,11 @@ In the example above, clicking the "Show" button results in the following output
```
-## Passing parameters when rendering a template fragment
+## Pasando parámetros al renderizar un fragmento de plantilla
-When declaring a template fragment with ``, 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 ``, 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
@@ -222,9 +222,9 @@ Each parameter is written as an attribute prefixed with `let-` with a value matc
```
-### 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
@@ -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
@@ -260,7 +260,7 @@ Angular supports a special convenience syntax for structural directives. If you
```
-This is equivalent to:
+Esto es equivalente a:
```angular-html
@@ -270,13 +270,13 @@ This is equivalent to:
```
-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 @@
+
+In Angular, a template is a chunk of HTML.
+Use special syntax within a template to leverage many of Angular's features.
+
+
+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., `