diff --git a/adev-es/src/content/tutorials/learn-angular/intro/README.en.md b/adev-es/src/content/tutorials/learn-angular/intro/README.en.md new file mode 100644 index 0000000..92210d5 --- /dev/null +++ b/adev-es/src/content/tutorials/learn-angular/intro/README.en.md @@ -0,0 +1,17 @@ +# Welcome to the Angular tutorial + +This interactive tutorial will teach you the basic building blocks to start building great apps with Angular. + +## How to use this tutorial + +You'll need to have basic familiarity with HTML, CSS and JavaScript to understand Angular. + +Each step represents a concept in Angular. You can do one, or all of them. + +If you get stuck, click "Reveal answer" at the top. + +Alright, let's [get started](/tutorials/learn-angular/1-components-in-angular). + +## Using AI for Development + +In case you're following this tutorial in your preferred AI powered IDE, [check out Angular prompt rules and best practices](/ai/develop-with-ai). diff --git a/adev-es/src/content/tutorials/learn-angular/intro/README.md b/adev-es/src/content/tutorials/learn-angular/intro/README.md index 92210d5..9b91d60 100644 --- a/adev-es/src/content/tutorials/learn-angular/intro/README.md +++ b/adev-es/src/content/tutorials/learn-angular/intro/README.md @@ -1,17 +1,17 @@ -# Welcome to the Angular tutorial +# Bienvenido al tutorial de Angular -This interactive tutorial will teach you the basic building blocks to start building great apps with Angular. +Este tutorial interactivo te enseñará los componentes básicos para comenzar a crear aplicaciones increíbles con Angular. -## How to use this tutorial +## Cómo usar este tutorial -You'll need to have basic familiarity with HTML, CSS and JavaScript to understand Angular. +Necesitarás tener familiaridad básica con HTML, CSS y JavaScript para entender Angular. -Each step represents a concept in Angular. You can do one, or all of them. +Cada paso representa un concepto en Angular. Puedes hacer uno, o todos ellos. -If you get stuck, click "Reveal answer" at the top. +Si te quedas atascado, haz clic en "Reveal answer" (Mostrar respuesta) en la parte superior. -Alright, let's [get started](/tutorials/learn-angular/1-components-in-angular). +Muy bien, [comencemos](/tutorials/learn-angular/1-components-in-angular). -## Using AI for Development +## Usando IA para desarrollo -In case you're following this tutorial in your preferred AI powered IDE, [check out Angular prompt rules and best practices](/ai/develop-with-ai). +En caso de que estés siguiendo este tutorial en tu IDE con IA preferido, [consulta las reglas de prompt y mejores prácticas de Angular](/ai/develop-with-ai). diff --git a/adev-es/src/content/tutorials/learn-angular/steps/1-components-in-angular/README.en.md b/adev-es/src/content/tutorials/learn-angular/steps/1-components-in-angular/README.en.md new file mode 100644 index 0000000..f67cf24 --- /dev/null +++ b/adev-es/src/content/tutorials/learn-angular/steps/1-components-in-angular/README.en.md @@ -0,0 +1,47 @@ +# Components in Angular + +Components are the foundational building blocks for any Angular application. Each component has three parts: + +- TypeScript class +- HTML template +- CSS styles + +Note: Learn more about [components in the essentials guide](/essentials/components). + +In this activity, you'll learn how to update the template and styles of a component. + +
+ +This is a great opportunity for you to get started with Angular. + + + + +Update the `template` property to read `Hello Universe` + +```ts +template: ` + Hello Universe +`, +``` + +When you changed the HTML template, the preview updated with your message. Let's go one step further: change the color of the text. + + + +Update the styles value and change the `color` property from `blue` to `#a144eb`. + +```ts +styles: ` + :host { + color: #a144eb; + } +`, +``` + +When you check the preview, you'll find that the text color will be changed. + + + + +In Angular, you can use all the browser supported CSS and HTML that's available. If you'd like, you can store your template and styles in separate files. diff --git a/adev-es/src/content/tutorials/learn-angular/steps/1-components-in-angular/README.md b/adev-es/src/content/tutorials/learn-angular/steps/1-components-in-angular/README.md index f67cf24..1db8eab 100644 --- a/adev-es/src/content/tutorials/learn-angular/steps/1-components-in-angular/README.md +++ b/adev-es/src/content/tutorials/learn-angular/steps/1-components-in-angular/README.md @@ -1,23 +1,23 @@ -# Components in Angular +# Componentes en Angular -Components are the foundational building blocks for any Angular application. Each component has three parts: +Los componentes son los bloques de construcción fundamentales para cualquier aplicación Angular. Cada componente tiene tres partes: -- TypeScript class -- HTML template -- CSS styles +- Clase TypeScript +- Plantilla HTML +- Estilos CSS -Note: Learn more about [components in the essentials guide](/essentials/components). +NOTA: Aprende más sobre [componentes en la guía esencial](/essentials/components). -In this activity, you'll learn how to update the template and styles of a component. +En esta actividad, aprenderás cómo actualizar la plantilla y los estilos de un componente.
-This is a great opportunity for you to get started with Angular. +Esta es una gran oportunidad para que comiences con Angular. - -Update the `template` property to read `Hello Universe` + +Actualiza la propiedad `template` para que tenga el valor `Hello Universe` ```ts template: ` @@ -25,11 +25,11 @@ template: ` `, ``` -When you changed the HTML template, the preview updated with your message. Let's go one step further: change the color of the text. +Cuando cambiaste la plantilla HTML, la vista previa se actualizó con tu mensaje. Vayamos un paso más allá: cambia el color del texto. - -Update the styles value and change the `color` property from `blue` to `#a144eb`. + +Actualiza el valor de `styles` y cambia la propiedad `color` de `blue` a `#a144eb`. ```ts styles: ` @@ -39,9 +39,9 @@ styles: ` `, ``` -When you check the preview, you'll find that the text color will be changed. +Cuando revises la vista previa, verás que el color del texto ha cambiado. -In Angular, you can use all the browser supported CSS and HTML that's available. If you'd like, you can store your template and styles in separate files. +En Angular, puedes usar todo el CSS y HTML compatible con navegadores que esté disponible. Si lo deseas, puedes almacenar tus plantillas y estilos en archivos separados. diff --git a/adev-es/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.en.md b/adev-es/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.en.md new file mode 100644 index 0000000..fc0a174 --- /dev/null +++ b/adev-es/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.en.md @@ -0,0 +1,114 @@ +# Deferrable Views + +Sometimes in app development, you end up with a lot of components that you need to reference in your app, but some of those don't need to be loaded right away for various reasons. + +Maybe they are below the visible fold or are heavy components that aren't interacted with until later. In that case, we can load some of those resources later with deferrable views. + +Note: Learn more about [deferred loading with @defer in the in-depth guide](/guide/templates/defer). + +In this activity, you'll learn how to use deferrable views to defer load a section of your component template. + +
+ + + + + +In your app, the blog post page has a comment component after the post details. + +Wrap the comment component with a `@defer` block to defer load it. + +```angular-html +@defer { + +} +``` + +The code above is an example of how to use a basic `@defer` block. By default `@defer` will load the `comments` component when the browser is idle. + + + + + +Add a `@placeholder` block to the `@defer` block. The `@placeholder` block is where you put html that will show before the deferred loading starts. The content in `@placeholder` blocks is eagerly loaded. + + +@defer { + +} @placeholder { +

Future comments

+} + + + + + + +Add a `@loading` block to the `@defer` block. The `@loading` block is where you put html that will show _while_ the deferred content is actively being fetched, but hasn't finished yet. The content in `@loading` blocks is eagerly loaded. + + +@defer { + +} @placeholder { +

Future comments

+} @loading { +

Loading comments...

+} + + + + + + +Both `@placeholder` and `@loading` sections have optional parameters to prevent flickering from occurring when loading happens quickly. `@placeholder` has `minimum` and `@loading` has `minimum` and `after`. Add a `minimum` duration to the `@loading` block so it will be rendered for at least 2 seconds. + + +@defer { + +} @placeholder { +

Future comments

+} @loading (minimum 2s) { +

Loading comments...

+} + + + + + + +Deferrable views have a number of trigger options. Add a viewport trigger so the content will defer load once it enters the viewport. + + +@defer (on viewport) { + +} + + + + + + +A viewport trigger is best used when you're deferring content that's far enough down the page that it needs to be scrolled to see. So let's add some content to our blog post. You can either write your own, or you can copy the content below and put it inside the `
` element. + + +
+

Angular is my favorite framework, and this is why. Angular has the coolest deferrable view feature that makes defer loading content the easiest and most ergonomic it could possibly be. The Angular community is also filled with amazing contributors and experts that create excellent content. The community is welcoming and friendly, and it really is the best community out there.

+

I can't express enough how much I enjoy working with Angular. It offers the best developer experience I've ever had. I love that the Angular team puts their developers first and takes care to make us very happy. They genuinely want Angular to be the best framework it can be, and they're doing such an amazing job at it, too. This statement comes from my heart and is not at all copied and pasted. In fact, I think I'll say these exact same things again a few times.

+

Angular is my favorite framework, and this is why. Angular has the coolest deferrable view feature that makes defer loading content the easiest and most ergonomic it could possibly be. The Angular community is also filled with amazing contributors and experts that create excellent content. The community is welcoming and friendly, and it really is the best community out there.

+

I can't express enough how much I enjoy working with Angular. It offers the best developer experience I've ever had. I love that the Angular team puts their developers first and takes care to make us very happy. They genuinely want Angular to be the best framework it can be, and they're doing such an amazing job at it, too. This statement comes from my heart and is not at all copied and pasted. In fact, I think I'll say these exact same things again a few times.

+

Angular is my favorite framework, and this is why. Angular has the coolest deferrable view feature that makes defer loading content the easiest and most ergonomic it could possibly be. The Angular community is also filled with amazing contributors and experts that create excellent content. The community is welcoming and friendly, and it really is the best community out there.

+

I can't express enough how much I enjoy working with Angular. It offers the best developer experience I've ever had. I love that the Angular team puts their developers first and takes care to make us very happy. They genuinely want Angular to be the best framework it can be, and they're doing such an amazing job at it, too. This statement comes from my heart and is not at all copied and pasted.

+
+ + +Once you've added this code, now scroll down to see the deferred content load once you scroll it into the viewport. + + + + + +In the activity, you've learned how to use deferrable views in your applications. Great work. 🙌 + +There's even more you can do with them, like different triggers, prefetching, and `@error` blocks. + +If you would like to learn more, check out the [documentation for Deferrable views](guide/defer). diff --git a/adev-es/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.md b/adev-es/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.md index fc0a174..a2d3ed2 100644 --- a/adev-es/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.md +++ b/adev-es/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.md @@ -1,22 +1,22 @@ -# Deferrable Views +# Vistas diferibles (deferrable views) -Sometimes in app development, you end up with a lot of components that you need to reference in your app, but some of those don't need to be loaded right away for various reasons. +A veces en el desarrollo de aplicaciones, terminas con muchos componentes que necesitas referenciar en tu app, pero algunos de ellos no necesitan cargarse de inmediato por varias razones. -Maybe they are below the visible fold or are heavy components that aren't interacted with until later. In that case, we can load some of those resources later with deferrable views. +Quizás están debajo del pliegue visible o son componentes pesados con los que no se interactúa hasta más tarde. En ese caso, podemos cargar algunos de esos recursos más tarde con vistas diferibles (deferrable views). -Note: Learn more about [deferred loading with @defer in the in-depth guide](/guide/templates/defer). +NOTA: Aprende más sobre [carga diferida con @defer en la guía detallada](/guide/templates/defer). -In this activity, you'll learn how to use deferrable views to defer load a section of your component template. +En esta actividad, aprenderás cómo usar vistas diferibles para cargar de forma diferida una sección de la plantilla de tu componente.
- + -In your app, the blog post page has a comment component after the post details. +En tu app, la página de publicación del blog tiene un componente de comentarios después de los detalles de la publicación. -Wrap the comment component with a `@defer` block to defer load it. +Envuelve el componente de comentarios con un bloque `@defer` para cargarlo de forma diferida. ```angular-html @defer { @@ -24,13 +24,13 @@ Wrap the comment component with a `@defer` block to defer load it. } ``` -The code above is an example of how to use a basic `@defer` block. By default `@defer` will load the `comments` component when the browser is idle. +El código anterior es un ejemplo de cómo usar un bloque `@defer` básico. Por defecto, `@defer` cargará el componente `comments` cuando el navegador esté inactivo. - + -Add a `@placeholder` block to the `@defer` block. The `@placeholder` block is where you put html that will show before the deferred loading starts. The content in `@placeholder` blocks is eagerly loaded. +Agrega un bloque `@placeholder` al bloque `@defer`. El bloque `@placeholder` es donde pones HTML que se mostrará antes de que comience la carga diferida. El contenido en los bloques `@placeholder` se carga de forma inmediata. @defer { @@ -42,9 +42,9 @@ Add a `@placeholder` block to the `@defer` block. The `@placeholder` block is wh - + -Add a `@loading` block to the `@defer` block. The `@loading` block is where you put html that will show _while_ the deferred content is actively being fetched, but hasn't finished yet. The content in `@loading` blocks is eagerly loaded. +Agrega un bloque `@loading` al bloque `@defer`. El bloque `@loading` es donde pones HTML que se mostrará _mientras_ el contenido diferido se está obteniendo activamente, pero aún no ha terminado. El contenido en los bloques `@loading` se carga de forma inmediata. @defer { @@ -58,9 +58,9 @@ Add a `@loading` block to the `@defer` block. The `@loading` block is where you - + -Both `@placeholder` and `@loading` sections have optional parameters to prevent flickering from occurring when loading happens quickly. `@placeholder` has `minimum` and `@loading` has `minimum` and `after`. Add a `minimum` duration to the `@loading` block so it will be rendered for at least 2 seconds. +Tanto las secciones `@placeholder` como `@loading` tienen parámetros opcionales para evitar parpadeos cuando la carga ocurre rápidamente. `@placeholder` tiene `minimum` y `@loading` tiene `minimum` y `after`. Agrega una duración `minimum` al bloque `@loading` para que se renderice durante al menos 2 segundos. @defer { @@ -74,9 +74,9 @@ Both `@placeholder` and `@loading` sections have optional parameters to prevent - + -Deferrable views have a number of trigger options. Add a viewport trigger so the content will defer load once it enters the viewport. +Las vistas diferibles tienen varias opciones de disparadores (triggers). Agrega un disparador de viewport para que el contenido se cargue de forma diferida una vez que entre en el viewport. @defer (on viewport) { @@ -86,9 +86,9 @@ Deferrable views have a number of trigger options. Add a viewport trigger so the - + -A viewport trigger is best used when you're deferring content that's far enough down the page that it needs to be scrolled to see. So let's add some content to our blog post. You can either write your own, or you can copy the content below and put it inside the `
` element. +Un disparador de viewport se usa mejor cuando estás difiriendo contenido que está lo suficientemente abajo en la página como para que necesite ser desplazado para verse. Así que agreguemos algo de contenido a nuestra publicación del blog. Puedes escribir el tuyo propio, o puedes copiar el contenido de abajo y ponerlo dentro del elemento `
`.
@@ -101,14 +101,14 @@ A viewport trigger is best used when you're deferring content that's far enough
-Once you've added this code, now scroll down to see the deferred content load once you scroll it into the viewport. +Una vez que hayas agregado este código, desplázate hacia abajo para ver el contenido diferido cargarse cuando lo despliegues dentro del viewport. -In the activity, you've learned how to use deferrable views in your applications. Great work. 🙌 +En esta actividad, has aprendido cómo usar vistas diferibles en tus aplicaciones. Excelente trabajo. 🙌 -There's even more you can do with them, like different triggers, prefetching, and `@error` blocks. +Hay aún más que puedes hacer con ellas, como diferentes disparadores, precarga (prefetching) y bloques `@error`. -If you would like to learn more, check out the [documentation for Deferrable views](guide/defer). +Si deseas aprender más, consulta la [documentación sobre vistas diferibles (Deferrable views)](guide/defer). diff --git a/adev-es/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.en.md b/adev-es/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.en.md new file mode 100644 index 0000000..6c085fe --- /dev/null +++ b/adev-es/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.en.md @@ -0,0 +1,105 @@ +# Optimizing images + +Images are a big part of many applications, and can be a major contributor to application performance problems, including low [Core Web Vitals](https://web.dev/explore/learn-core-web-vitals) scores. + +Image optimization can be a complex topic, but Angular handles most of it for you, with the `NgOptimizedImage` directive. + +Note: Learn more about [image optimization with NgOptimizedImage in the in-depth guide](/guide/image-optimization). + +In this activity, you'll learn how to use `NgOptimizedImage` to ensure your images are loaded efficiently. + +
+ + + + + +In order to leverage the `NgOptimizedImage` directive, first import it from the `@angular/common` library and add it to the component `imports` array. + +```ts +import { NgOptimizedImage } from '@angular/common'; + +@Component({ + imports: [NgOptimizedImage], + ... +}) +``` + + + + + +To enable the `NgOptimizedImage` directive, swap out the `src` attribute for `ngSrc`. This applies for both static image sources (i.e., `src`) and dynamic image sources (i.e., `[src]`). + + +import { NgOptimizedImage } from '@angular/common'; + +@Component({ +template: ` ... +
  • + Static Image: + Angular logo +
    • +
  • + Dynamic Image: + +
    • + ... + `, +imports: [NgOptimizedImage], +}) +     + +     + + + +Note that in the above code example, each image has both `width` and `height` attributes. In order to prevent [layout shift](https://web.dev/articles/cls), the `NgOptimizedImage` directive requires both size attributes on each image. + +In situations where you can't or don't want to specify a static `height` and `width` for images, you can use [the `fill` attribute](https://web.dev/articles/cls) to tell the image to act like a "background image", filling its containing element: + +```angular-html +
    //Container div has 'position: "relative"' + +
    +``` + +NOTE: For the `fill` image to render properly, its parent element must be styled with `position: "relative"`, `position: "fixed"`, or `position: "absolute"`. + +     + + + +One of the most important optimizations for loading performance is to prioritize any image which might be the ["LCP element"](https://web.dev/articles/optimize-lcp), which is the largest on-screen graphical element when the page loads. To optimize your loading times, make sure to add the `priority` attribute to your "hero image" or any other images that you think could be an LCP element. + +```ts + +``` + + + + + +`NgOptimizedImage` allows you to specify an [image loader](guide/image-optimization#configuring-an-image-loader-for-ngoptimizedimage), which tells the directive how to format URLs for your images. Using a loader allows you to define your images with short, relative URLs: + +```ts +providers: [ + provideImgixLoader('https://my.base.url/'), +] +``` + +Final URL will be 'https://my.base.url/image.png' + +```angular-html + +``` + +Image loaders are for more than just convenience--they allow you to use the full capabilities of `NgOptimizedImage`. Learn more about these optimizations and the built-in loaders for popular CDNs [here](guide/image-optimization#configuring-an-image-loader-for-ngoptimizedimage). + + + +     + +By adding this directive to your workflow, your images are now loading using best practices with the help of Angular 🎉 + +If you would like to learn more, check out the [documentation for `NgOptimizedImage`](guide/image-optimization). Keep up the great work and let's learn about routing next. diff --git a/adev-es/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md b/adev-es/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md index 6c085fe..0baff51 100644 --- a/adev-es/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md +++ b/adev-es/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md @@ -1,20 +1,20 @@ -# Optimizing images +# Optimizando imágenes -Images are a big part of many applications, and can be a major contributor to application performance problems, including low [Core Web Vitals](https://web.dev/explore/learn-core-web-vitals) scores. +Las imágenes son una gran parte de muchas aplicaciones, y pueden ser un contribuyente importante a problemas de rendimiento de la aplicación, incluyendo puntuaciones bajas de [Core Web Vitals](https://web.dev/explore/learn-core-web-vitals). -Image optimization can be a complex topic, but Angular handles most of it for you, with the `NgOptimizedImage` directive. +La optimización de imágenes puede ser un tema complejo, pero Angular maneja la mayor parte por ti, con la directiva `NgOptimizedImage`. -Note: Learn more about [image optimization with NgOptimizedImage in the in-depth guide](/guide/image-optimization). +NOTA: Aprende más sobre [optimización de imágenes con NgOptimizedImage en la guía detallada](/guide/image-optimization). -In this activity, you'll learn how to use `NgOptimizedImage` to ensure your images are loaded efficiently. +En esta actividad, aprenderás cómo usar `NgOptimizedImage` para asegurar que tus imágenes se carguen de manera eficiente.
    - + -In order to leverage the `NgOptimizedImage` directive, first import it from the `@angular/common` library and add it to the component `imports` array. +Para aprovechar la directiva `NgOptimizedImage`, primero impórtala desde la librería `@angular/common` y agrégala al arreglo `imports` del componente. ```ts import { NgOptimizedImage } from '@angular/common'; @@ -27,9 +27,9 @@ import { NgOptimizedImage } from '@angular/common'; - + -To enable the `NgOptimizedImage` directive, swap out the `src` attribute for `ngSrc`. This applies for both static image sources (i.e., `src`) and dynamic image sources (i.e., `[src]`). +Para habilitar la directiva `NgOptimizedImage`, reemplaza el atributo `src` por `ngSrc`. Esto aplica tanto para fuentes de imagen estáticas (es decir, `src`) como dinámicas (es decir, `[src]`). import { NgOptimizedImage } from '@angular/common'; @@ -52,25 +52,25 @@ imports: [NgOptimizedImage], - + -Note that in the above code example, each image has both `width` and `height` attributes. In order to prevent [layout shift](https://web.dev/articles/cls), the `NgOptimizedImage` directive requires both size attributes on each image. +Nota que en el ejemplo de código anterior, cada imagen tiene atributos `width` y `height`. Para prevenir [cambio de layout (layout shift)](https://web.dev/articles/cls), la directiva `NgOptimizedImage` requiere ambos atributos de tamaño en cada imagen. -In situations where you can't or don't want to specify a static `height` and `width` for images, you can use [the `fill` attribute](https://web.dev/articles/cls) to tell the image to act like a "background image", filling its containing element: +En situaciones donde no puedes o no quieres especificar un `height` y `width` estáticos para las imágenes, puedes usar [el atributo `fill`](https://web.dev/articles/cls) para indicarle a la imagen que actúe como una "imagen de fondo", llenando su elemento contenedor: ```angular-html -
    //Container div has 'position: "relative"' +
    // El div contenedor tiene 'position: "relative"'
    ``` -NOTE: For the `fill` image to render properly, its parent element must be styled with `position: "relative"`, `position: "fixed"`, or `position: "absolute"`. +NOTA: Para que la imagen con `fill` se renderice correctamente, su elemento padre debe tener estilo `position: "relative"`, `position: "fixed"` o `position: "absolute"`. - + -One of the most important optimizations for loading performance is to prioritize any image which might be the ["LCP element"](https://web.dev/articles/optimize-lcp), which is the largest on-screen graphical element when the page loads. To optimize your loading times, make sure to add the `priority` attribute to your "hero image" or any other images that you think could be an LCP element. +Una de las optimizaciones más importantes para el rendimiento de carga es priorizar cualquier imagen que pueda ser el ["elemento LCP"](https://web.dev/articles/optimize-lcp), que es el elemento gráfico más grande en pantalla cuando la página se carga. Para optimizar tus tiempos de carga, asegúrate de agregar el atributo `priority` a tu "imagen principal" o cualquier otra imagen que creas que podría ser un elemento LCP. ```ts @@ -78,9 +78,9 @@ One of the most important optimizations for loading performance is to prioritize - + -`NgOptimizedImage` allows you to specify an [image loader](guide/image-optimization#configuring-an-image-loader-for-ngoptimizedimage), which tells the directive how to format URLs for your images. Using a loader allows you to define your images with short, relative URLs: +`NgOptimizedImage` te permite especificar un [image loader](guide/image-optimization#configuring-an-image-loader-for-ngoptimizedimage), que le indica a la directiva cómo formatear las URLs de tus imágenes. Usar un loader te permite definir tus imágenes con URLs cortas y relativas: ```ts providers: [ @@ -88,18 +88,18 @@ providers: [ ] ``` -Final URL will be 'https://my.base.url/image.png' +La URL final será 'https://my.base.url/image.png' ```angular-html ``` -Image loaders are for more than just convenience--they allow you to use the full capabilities of `NgOptimizedImage`. Learn more about these optimizations and the built-in loaders for popular CDNs [here](guide/image-optimization#configuring-an-image-loader-for-ngoptimizedimage). +Los image loaders son más que solo conveniencia -- te permiten usar todas las capacidades de `NgOptimizedImage`. Aprende más sobre estas optimizaciones y los loaders incorporados para CDNs populares [aquí](guide/image-optimization#configuring-an-image-loader-for-ngoptimizedimage). -By adding this directive to your workflow, your images are now loading using best practices with the help of Angular 🎉 +Al agregar esta directiva a tu flujo de trabajo, tus imágenes ahora se cargan usando mejores prácticas con la ayuda de Angular 🎉 -If you would like to learn more, check out the [documentation for `NgOptimizedImage`](guide/image-optimization). Keep up the great work and let's learn about routing next. +Si deseas aprender más, consulta la [documentación de `NgOptimizedImage`](guide/image-optimization). Sigue con el excelente trabajo y aprendamos sobre routing a continuación. diff --git a/adev-es/src/content/tutorials/learn-angular/steps/12-enable-routing/README.en.md b/adev-es/src/content/tutorials/learn-angular/steps/12-enable-routing/README.en.md new file mode 100644 index 0000000..3009baa --- /dev/null +++ b/adev-es/src/content/tutorials/learn-angular/steps/12-enable-routing/README.en.md @@ -0,0 +1,77 @@ +# Routing Overview + +For most apps, there comes a point where the app requires more than a single page. When that time inevitably comes, routing becomes a big part of the performance story for users. + +Note: Learn more about [routing in the in-depth guide](/guide/routing). + +In this activity, you'll learn how to set up and configure your app to use Angular Router. + +
    + + + + + +Inside `app.routes.ts`, make the following changes: + +1. Import `Routes` from the `@angular/router` package. +2. Export a constant called `routes` of type `Routes`, assign it `[]` as the value. + +```ts +import {Routes} from '@angular/router'; + +export const routes: Routes = []; +``` + + + + + +In `app.config.ts`, configure the app to Angular Router with the following steps: + +1. Import the `provideRouter` function from `@angular/router`. +1. Import `routes` from the `./app.routes.ts`. +1. Call the `provideRouter` function with `routes` passed in as an argument in the `providers` array. + + +import {ApplicationConfig} from '@angular/core'; +import {provideRouter} from '@angular/router'; +import {routes} from './app.routes'; + +export const appConfig: ApplicationConfig = { +providers: [provideRouter(routes)], +}; + + + + + + +Finally, to make sure your app is ready to use the Angular Router, you need to tell the app where you expect the router to display the desired content. Accomplish that by using the `RouterOutlet` directive from `@angular/router`. + +Update the template for `App` by adding `` + + +import {RouterOutlet} from '@angular/router'; + +@Component({ +... +template: ` + + `, +imports: [RouterOutlet], +}) +export class App {} + + + + + + +Your app is now set up to use Angular Router. Nice work! 🙌 + +Keep the momentum going to learn the next step of defining the routes for our app. diff --git a/adev-es/src/content/tutorials/learn-angular/steps/12-enable-routing/README.md b/adev-es/src/content/tutorials/learn-angular/steps/12-enable-routing/README.md index 3009baa..e24cb3c 100644 --- a/adev-es/src/content/tutorials/learn-angular/steps/12-enable-routing/README.md +++ b/adev-es/src/content/tutorials/learn-angular/steps/12-enable-routing/README.md @@ -1,21 +1,21 @@ -# Routing Overview +# Descripción general de enrutamiento (Routing) -For most apps, there comes a point where the app requires more than a single page. When that time inevitably comes, routing becomes a big part of the performance story for users. +Para la mayoría de las aplicaciones, llega un punto donde la app requiere más de una sola página. Cuando ese momento llega inevitablemente, el enrutamiento (routing) se convierte en una gran parte de la historia de rendimiento para los usuarios. -Note: Learn more about [routing in the in-depth guide](/guide/routing). +NOTA: Aprende más sobre [enrutamiento en la guía detallada](/guide/routing). -In this activity, you'll learn how to set up and configure your app to use Angular Router. +En esta actividad, aprenderás cómo configurar tu app para usar el Router de Angular.
    - + -Inside `app.routes.ts`, make the following changes: +Dentro de `app.routes.ts`, realiza los siguientes cambios: -1. Import `Routes` from the `@angular/router` package. -2. Export a constant called `routes` of type `Routes`, assign it `[]` as the value. +1. Importa `Routes` desde el paquete `@angular/router`. +2. Exporta una constante llamada `routes` de tipo `Routes`, asígnale `[]` como valor. ```ts import {Routes} from '@angular/router'; @@ -25,13 +25,13 @@ export const routes: Routes = []; - + -In `app.config.ts`, configure the app to Angular Router with the following steps: +En `app.config.ts`, configura la app para usar el Router de Angular con los siguientes pasos: -1. Import the `provideRouter` function from `@angular/router`. -1. Import `routes` from the `./app.routes.ts`. -1. Call the `provideRouter` function with `routes` passed in as an argument in the `providers` array. +1. Importa la función `provideRouter` desde `@angular/router`. +1. Importa `routes` desde `./app.routes.ts`. +1. Llama a la función `provideRouter` con `routes` pasada como argumento en el arreglo `providers`. import {ApplicationConfig} from '@angular/core'; @@ -45,11 +45,11 @@ providers: [provideRouter(routes)], - + -Finally, to make sure your app is ready to use the Angular Router, you need to tell the app where you expect the router to display the desired content. Accomplish that by using the `RouterOutlet` directive from `@angular/router`. +Finalmente, para asegurarte de que tu app esté lista para usar el Router de Angular, necesitas indicarle a la app dónde esperas que el router muestre el contenido deseado. Logra eso usando la directiva `RouterOutlet` desde `@angular/router`. -Update the template for `App` by adding `` +Actualiza la plantilla de `App` agregando `` import {RouterOutlet} from '@angular/router'; @@ -72,6 +72,6 @@ export class App {} -Your app is now set up to use Angular Router. Nice work! 🙌 +Tu app ahora está configurada para usar el Router de Angular. ¡Buen trabajo! 🙌 -Keep the momentum going to learn the next step of defining the routes for our app. +Mantén el impulso para aprender el siguiente paso: definir las rutas para nuestra app. diff --git a/adev-es/src/content/tutorials/learn-angular/steps/13-define-a-route/README.en.md b/adev-es/src/content/tutorials/learn-angular/steps/13-define-a-route/README.en.md new file mode 100644 index 0000000..861a4f2 --- /dev/null +++ b/adev-es/src/content/tutorials/learn-angular/steps/13-define-a-route/README.en.md @@ -0,0 +1,65 @@ +# Define a Route + +Now that you've set up the app to use Angular Router, you need to define the routes. + +Note: Learn more about [defining a basic route in the in-depth guide](/guide/routing/common-router-tasks#defining-a-basic-route). + +In this activity, you'll learn how to add and configure routes with your app. + +
    + + + + + +In your app, there are two pages to display: (1) Home Page and (2) User Page. + +To define a route, add a route object to the `routes` array in `app.routes.ts` that contains: + +- The `path` of the route (which automatically starts at the root path (i.e., `/`)) +- The `component` that you want the route to display + +```ts +import {Routes} from '@angular/router'; +import {Home} from './home/home'; + +export const routes: Routes = [ + { + path: '', + component: Home, + }, +]; +``` + +The code above is an example of how `Home` can be added as a route. Now go ahead and implement this along with the `User` in the playground. + +Use `'user'` for the path of `User`. + + + + + +In addition to defining the routes correctly, Angular Router also enables you to set the page title whenever users are navigating by adding the `title` property to each route. + +In `app.routes.ts`, add the `title` property to the default route (`path: ''`) and the `user` route. Here's an example: + + +import {Routes} from '@angular/router'; +import {Home} from './home/home'; + +export const routes: Routes = [ +{ +path: '', +title: 'App Home Page', +component: Home, +}, +]; + + + + + + +In the activity, you've learned how to define and configure routes in your Angular app. Nice work. 🙌 + +The journey to fully enabling routing in your app is almost complete, keep going. diff --git a/adev-es/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md b/adev-es/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md index 861a4f2..98432ee 100644 --- a/adev-es/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md +++ b/adev-es/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md @@ -1,23 +1,23 @@ -# Define a Route +# Definiendo una ruta -Now that you've set up the app to use Angular Router, you need to define the routes. +Ahora que has configurado la app para usar el Router de Angular, necesitas definir las rutas. -Note: Learn more about [defining a basic route in the in-depth guide](/guide/routing/common-router-tasks#defining-a-basic-route). +NOTA: Aprende más sobre [definir una ruta básica en la guía detallada](/guide/routing/common-router-tasks#defining-a-basic-route). -In this activity, you'll learn how to add and configure routes with your app. +En esta actividad, aprenderás cómo agregar y configurar rutas en tu app.
    - + -In your app, there are two pages to display: (1) Home Page and (2) User Page. +En tu app, hay dos páginas para mostrar: (1) Página de Inicio (Home Page) y (2) Página de Usuario (User Page). -To define a route, add a route object to the `routes` array in `app.routes.ts` that contains: +Para definir una ruta, agrega un objeto de ruta al arreglo `routes` en `app.routes.ts` que contenga: -- The `path` of the route (which automatically starts at the root path (i.e., `/`)) -- The `component` that you want the route to display +- El `path` de la ruta (que automáticamente comienza en la ruta raíz, es decir, `/`) +- El `component` que deseas que la ruta muestre ```ts import {Routes} from '@angular/router'; @@ -31,17 +31,17 @@ export const routes: Routes = [ ]; ``` -The code above is an example of how `Home` can be added as a route. Now go ahead and implement this along with the `User` in the playground. +El código anterior es un ejemplo de cómo se puede agregar `Home` como una ruta. Ahora continúa e implementa esto junto con `User` en el playground. -Use `'user'` for the path of `User`. +Usa `'user'` para el path de `User`. - + -In addition to defining the routes correctly, Angular Router also enables you to set the page title whenever users are navigating by adding the `title` property to each route. +Además de definir las rutas correctamente, el Router de Angular también te permite establecer el título de la página cuando los usuarios navegan, agregando la propiedad `title` a cada ruta. -In `app.routes.ts`, add the `title` property to the default route (`path: ''`) and the `user` route. Here's an example: +En `app.routes.ts`, agrega la propiedad `title` a la ruta predeterminada (`path: ''`) y a la ruta `user`. Aquí hay un ejemplo: import {Routes} from '@angular/router'; @@ -60,6 +60,6 @@ component: Home, -In the activity, you've learned how to define and configure routes in your Angular app. Nice work. 🙌 +En esta actividad, has aprendido cómo definir y configurar rutas en tu app de Angular. Buen trabajo. 🙌 -The journey to fully enabling routing in your app is almost complete, keep going. +El viaje para habilitar completamente el enrutamiento en tu app está casi completo, sigue adelante. diff --git a/adev-es/src/content/tutorials/learn-angular/steps/14-routerLink/README.en.md b/adev-es/src/content/tutorials/learn-angular/steps/14-routerLink/README.en.md new file mode 100644 index 0000000..4d4032d --- /dev/null +++ b/adev-es/src/content/tutorials/learn-angular/steps/14-routerLink/README.en.md @@ -0,0 +1,54 @@ +# Use RouterLink for Navigation + +In the app's current state, the entire page refreshes when we click on an internal link that exists within the app. While this may not seem significant with a small app, this can have performance implications for larger pages with more content where users have to redownload assets and run calculations again. + +Note: Learn more about [adding routes to your application in the in-depth guide](/guide/routing/common-router-tasks#add-your-routes-to-your-application). + +In this activity, you'll learn how to leverage the `RouterLink` directive to make the most use of Angular Router. + +
    + + + + + +In `app.ts` add the `RouterLink` directive import to the existing import statement from `@angular/router` and add it to the `imports` array of your component decorator. + +```ts +... +import { RouterLink, RouterOutlet } from '@angular/router'; + +@Component({ + imports: [RouterLink, RouterOutlet], + ... +}) +``` + + + + + +To use the `RouterLink` directive, replace the `href` attributes with `routerLink`. Update the template with this change. + +```angular-ts +import { RouterLink, RouterOutlet } from '@angular/router'; + +@Component({ + ... + template: ` + ... + Home + User + ... + `, + imports: [RouterLink, RouterOutlet], +}) +``` + + + + + +When you click on the links in the navigation now, you should not see any blinking and only the content of the page itself (i.e., `router-outlet`) being changed 🎉 + +Great job learning about routing with Angular. This is just the surface of the `Router` API, to learn more check out the [Angular Router Documentation](guide/routing). diff --git a/adev-es/src/content/tutorials/learn-angular/steps/14-routerLink/README.md b/adev-es/src/content/tutorials/learn-angular/steps/14-routerLink/README.md index 4d4032d..137381e 100644 --- a/adev-es/src/content/tutorials/learn-angular/steps/14-routerLink/README.md +++ b/adev-es/src/content/tutorials/learn-angular/steps/14-routerLink/README.md @@ -1,18 +1,18 @@ -# Use RouterLink for Navigation +# Usando RouterLink para navegación -In the app's current state, the entire page refreshes when we click on an internal link that exists within the app. While this may not seem significant with a small app, this can have performance implications for larger pages with more content where users have to redownload assets and run calculations again. +En el estado actual de la app, la página completa se recarga cuando hacemos clic en un enlace interno que existe dentro de la app. Si bien esto puede no parecer significativo con una app pequeña, puede tener implicaciones de rendimiento para páginas más grandes con más contenido donde los usuarios tienen que descargar recursos nuevamente y ejecutar cálculos otra vez. -Note: Learn more about [adding routes to your application in the in-depth guide](/guide/routing/common-router-tasks#add-your-routes-to-your-application). +NOTA: Aprende más sobre [agregar rutas a tu aplicación en la guía detallada](/guide/routing/common-router-tasks#add-your-routes-to-your-application). -In this activity, you'll learn how to leverage the `RouterLink` directive to make the most use of Angular Router. +En esta actividad, aprenderás cómo aprovechar la directiva `RouterLink` para aprovechar al máximo el Router de Angular.
    - + -In `app.ts` add the `RouterLink` directive import to the existing import statement from `@angular/router` and add it to the `imports` array of your component decorator. +En `app.ts` agrega la importación de la directiva `RouterLink` a la declaración de importación existente desde `@angular/router` y agrégala al arreglo `imports` del decorador de tu componente. ```ts ... @@ -26,9 +26,9 @@ import { RouterLink, RouterOutlet } from '@angular/router'; - + -To use the `RouterLink` directive, replace the `href` attributes with `routerLink`. Update the template with this change. +Para usar la directiva `RouterLink`, reemplaza los atributos `href` con `routerLink`. Actualiza la plantilla con este cambio. ```angular-ts import { RouterLink, RouterOutlet } from '@angular/router'; @@ -49,6 +49,6 @@ import { RouterLink, RouterOutlet } from '@angular/router'; -When you click on the links in the navigation now, you should not see any blinking and only the content of the page itself (i.e., `router-outlet`) being changed 🎉 +Cuando hagas clic en los enlaces de navegación ahora, no deberías ver parpadeos y solo el contenido de la página en sí (es decir, `router-outlet`) cambiará 🎉 -Great job learning about routing with Angular. This is just the surface of the `Router` API, to learn more check out the [Angular Router Documentation](guide/routing). +Excelente trabajo aprendiendo sobre routing con Angular. Esto es solo la superficie de la API del `Router`, para aprender más consulta la [Documentación del Router de Angular](guide/routing). diff --git a/adev-es/src/content/tutorials/learn-angular/steps/15-forms/README.en.md b/adev-es/src/content/tutorials/learn-angular/steps/15-forms/README.en.md new file mode 100644 index 0000000..e58201a --- /dev/null +++ b/adev-es/src/content/tutorials/learn-angular/steps/15-forms/README.en.md @@ -0,0 +1,70 @@ +# Forms Overview + +Forms are a big part of many apps because they enable your app to accept user input. Let's learn about how forms are handled in Angular. + +In Angular, there are two types of forms: template-driven and reactive. You'll learn about both over the next few activities. + +Note: Learn more about [forms in Angular in the in-depth guide](/guide/forms). + +In this activity, you'll learn how to set up a form using a template-driven approach. + +
    + + + + + +In `user.ts`, update the template by adding a text input with the `id` set to `framework`, type set to `text`. + +```angular-html + +``` + + + + + +For this form to use Angular features that enable data binding to forms, you'll need to import the `FormsModule`. + +Import the `FormsModule` from `@angular/forms` and add it to the `imports` array of the `User`. + + +import {Component} from '@angular/core'; +import {FormsModule} from '@angular/forms'; + +@Component({ +... +imports: [FormsModule], +}) +export class User {} + + + + + + +The `FormsModule` has a directive called `ngModel` that binds the value of the input to a property in your class. + +Update the input to use the `ngModel` directive, specifically with the following syntax `[(ngModel)]="favoriteFramework"` to bind to the `favoriteFramework` property. + + + + + +After you've made changes, try entering a value in the input field. Notice how it updates on the screen (yes, very cool). + +NOTE: The syntax `[()]` is known as "banana in a box" but it represents two-way binding: property binding and event binding. Learn more in the [Angular docs about two-way data binding](guide/templates/two-way-binding). + + + + + +You've now taken an important first step towards building forms with Angular. + +Nice work. Let's keep the momentum going! diff --git a/adev-es/src/content/tutorials/learn-angular/steps/15-forms/README.md b/adev-es/src/content/tutorials/learn-angular/steps/15-forms/README.md index e58201a..16c01c2 100644 --- a/adev-es/src/content/tutorials/learn-angular/steps/15-forms/README.md +++ b/adev-es/src/content/tutorials/learn-angular/steps/15-forms/README.md @@ -1,20 +1,20 @@ -# Forms Overview +# Descripción general de formularios -Forms are a big part of many apps because they enable your app to accept user input. Let's learn about how forms are handled in Angular. +Los formularios son una gran parte de muchas aplicaciones porque permiten que tu app acepte entrada del usuario. Aprendamos cómo se manejan los formularios en Angular. -In Angular, there are two types of forms: template-driven and reactive. You'll learn about both over the next few activities. +En Angular, hay dos tipos de formularios: template-driven y reactivos. Aprenderás sobre ambos en las próximas actividades. -Note: Learn more about [forms in Angular in the in-depth guide](/guide/forms). +NOTA: Aprende más sobre [formularios en Angular en la guía detallada](/guide/forms). -In this activity, you'll learn how to set up a form using a template-driven approach. +En esta actividad, aprenderás cómo configurar un formulario usando el enfoque template-driven.
    - + -In `user.ts`, update the template by adding a text input with the `id` set to `framework`, type set to `text`. +En `user.ts`, actualiza la plantilla agregando un campo de entrada de texto con el `id` establecido a `framework`, type establecido a `text`. ```angular-html - + -For this form to use Angular features that enable data binding to forms, you'll need to import the `FormsModule`. +Para que este formulario use las características de Angular que permiten el enlace de datos a formularios, necesitarás importar el `FormsModule`. -Import the `FormsModule` from `@angular/forms` and add it to the `imports` array of the `User`. +Importa `FormsModule` desde `@angular/forms` y agrégalo al arreglo `imports` de `User`. import {Component} from '@angular/core'; @@ -44,11 +44,11 @@ export class User {} - + -The `FormsModule` has a directive called `ngModel` that binds the value of the input to a property in your class. +`FormsModule` tiene una directiva llamada `ngModel` que enlaza el valor del input a una propiedad en tu clase. -Update the input to use the `ngModel` directive, specifically with the following syntax `[(ngModel)]="favoriteFramework"` to bind to the `favoriteFramework` property. +Actualiza el input para usar la directiva `ngModel`, específicamente con la siguiente sintaxis `[(ngModel)]="favoriteFramework"` para enlazar a la propiedad `favoriteFramework`. -After you've made changes, try entering a value in the input field. Notice how it updates on the screen (yes, very cool). +Después de hacer los cambios, intenta ingresar un valor en el campo de entrada. Nota cómo se actualiza en la pantalla (sí, muy interesante). -NOTE: The syntax `[()]` is known as "banana in a box" but it represents two-way binding: property binding and event binding. Learn more in the [Angular docs about two-way data binding](guide/templates/two-way-binding). +NOTA: La sintaxis `[()]` se conoce como "banana in a box" pero representa el enlace bidireccional: enlace de propiedad y enlace de evento. Aprende más en la [documentación de Angular sobre enlace bidireccional de datos](guide/templates/two-way-binding). -You've now taken an important first step towards building forms with Angular. +Has dado un primer paso importante hacia la construcción de formularios con Angular. -Nice work. Let's keep the momentum going! +Buen trabajo. ¡Mantengamos el impulso! diff --git a/adev-es/src/content/tutorials/learn-angular/steps/16-form-control-values/README.en.md b/adev-es/src/content/tutorials/learn-angular/steps/16-form-control-values/README.en.md new file mode 100644 index 0000000..c8ac0f1 --- /dev/null +++ b/adev-es/src/content/tutorials/learn-angular/steps/16-form-control-values/README.en.md @@ -0,0 +1,66 @@ +# Getting form control value + +Now that your forms are set up with Angular, the next step is to access the values from the form controls. + +Note: Learn more about [adding a basic form control in the in-depth guide](/guide/forms/reactive-forms#adding-a-basic-form-control). + +In this activity, you'll learn how to get the value from your form input. + +
    + + + + + +To display the input value in a template, you can use the interpolation syntax `{{}}` just like any other class property of the component: + + +@Component({ + selector: 'app-user', + template: ` + ... +

    Framework: {{ favoriteFramework }}

    + + `, +}) +export class User { + favoriteFramework = ''; +} +     + +     + + + +When you need to reference the input field value in the component class, you can do so by accessing the class property with the `this` syntax. + + +... +@Component({ + selector: 'app-user', + template: ` + ... + + `, + ... +}) +export class User { + favoriteFramework = ''; + ... + +showFramework() { +alert(this.favoriteFramework); +} +} + + + + +     + +Great job learning how to display the input values in your template and access them programmatically. + +Time to progress onto the next way of managing forms with Angular: reactive forms. If you'd like to learn more about template-driven forms, please refer to the [Angular forms documentation](guide/forms/template-driven-forms). diff --git a/adev-es/src/content/tutorials/learn-angular/steps/16-form-control-values/README.md b/adev-es/src/content/tutorials/learn-angular/steps/16-form-control-values/README.md index c8ac0f1..9b06f6d 100644 --- a/adev-es/src/content/tutorials/learn-angular/steps/16-form-control-values/README.md +++ b/adev-es/src/content/tutorials/learn-angular/steps/16-form-control-values/README.md @@ -1,18 +1,18 @@ -# Getting form control value +# Obteniendo el valor del control de formulario -Now that your forms are set up with Angular, the next step is to access the values from the form controls. +Ahora que tus formularios están configurados con Angular, el siguiente paso es acceder a los valores de los controles de formulario. -Note: Learn more about [adding a basic form control in the in-depth guide](/guide/forms/reactive-forms#adding-a-basic-form-control). +NOTA: Aprende más sobre [agregar un control de formulario básico en la guía detallada](/guide/forms/reactive-forms#adding-a-basic-form-control). -In this activity, you'll learn how to get the value from your form input. +En esta actividad, aprenderás cómo obtener el valor de tu campo de formulario.
    - + -To display the input value in a template, you can use the interpolation syntax `{{}}` just like any other class property of the component: +Para mostrar el valor del input en una plantilla, puedes usar la sintaxis de interpolación `{{}}` como cualquier otra propiedad de clase del componente: @Component({ @@ -33,9 +33,9 @@ export class User { - + -When you need to reference the input field value in the component class, you can do so by accessing the class property with the `this` syntax. +Cuando necesites referenciar el valor del campo de entrada en la clase del componente, puedes hacerlo accediendo a la propiedad de la clase con la sintaxis `this`. ... @@ -61,6 +61,6 @@ alert(this.favoriteFramework); -Great job learning how to display the input values in your template and access them programmatically. +Excelente trabajo aprendiendo cómo mostrar los valores de entrada en tu plantilla y acceder a ellos programáticamente. -Time to progress onto the next way of managing forms with Angular: reactive forms. If you'd like to learn more about template-driven forms, please refer to the [Angular forms documentation](guide/forms/template-driven-forms). +Es hora de avanzar a la siguiente forma de gestionar formularios en Angular: formularios reactivos. Si deseas aprender más sobre formularios template-driven, consulta la [documentación de formularios de Angular](guide/forms/template-driven-forms). diff --git a/adev-es/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.en.md b/adev-es/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.en.md new file mode 100644 index 0000000..067b748 --- /dev/null +++ b/adev-es/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.en.md @@ -0,0 +1,124 @@ +# Reactive Forms + +When you want to manage your forms programmatically instead of relying purely on the template, reactive forms are the answer. + +Note: Learn more about [reactive forms in the in-depth guide](/guide/forms/reactive-forms). + +In this activity, you'll learn how to set up reactive forms. + +
    + + + + + +In `app.ts`, import `ReactiveFormsModule` from `@angular/forms` and add it to the `imports` array of the component. + +```angular-ts +import { ReactiveFormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-root', + template: ` +
    + + + +
    + `, + imports: [ReactiveFormsModule], +}) +``` + +     + + + +Reactive forms use the `FormControl` class to represent the form controls (e.g., inputs). Angular provides the `FormGroup` class to serve as a grouping of form controls into a helpful object that makes handling large forms more convenient for developers. + +Add `FormControl` and `FormGroup` to the import from `@angular/forms` so that you can create a FormGroup for each form, with the properties `name` and `email` as FormControls. + +```ts +import {ReactiveFormsModule, FormControl, FormGroup } from '@angular/forms'; +... +export class App { + profileForm = new FormGroup({ + name: new FormControl(''), + email: new FormControl(''), + }); +} +``` + + + + + +Each `FormGroup` should be attached to a form using the `[formGroup]` directive. + +In addition, each `FormControl` can be attached with the `formControlName` directive and assigned to the corresponding property. Update the template with the following form code: + +```angular-html +
    + + + +
    +``` + +     + + + +When you want to access data from the `FormGroup`, it can be done by accessing the value of the `FormGroup`. Update the `template` to display the form values: + +```angular-html +... +

    Profile Form

    +

    Name: {{ profileForm.value.name }}

    +

    Email: {{ profileForm.value.email }}

    +``` + +     + + +Add a new method to the component class called `handleSubmit` that you'll later use to handle the form submission. +This method will display values from the form, you can access the values from the FormGroup. + +In the component class, add the `handleSubmit()` method to handle the form submission. + + +handleSubmit() { + alert( + this.profileForm.value.name + ' | ' + this.profileForm.value.email + ); +} + + + + +You have access to the form values, now it is time to handle the submission event and use the `handleSubmit` method. +Angular has an event handler for this specific purpose called `ngSubmit`. Update the form element to call the `handleSubmit` method when the form is submitted. + + +
    + + + + + + +And just like that, you know how to work with reactive forms in Angular. + +Fantastic job with this activity. Keep going to learn about form validation. diff --git a/adev-es/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.md b/adev-es/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.md index 067b748..c942590 100644 --- a/adev-es/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.md +++ b/adev-es/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.md @@ -1,18 +1,18 @@ -# Reactive Forms +# Formularios reactivos (Reactive Forms) -When you want to manage your forms programmatically instead of relying purely on the template, reactive forms are the answer. +Cuando quieres gestionar tus formularios programáticamente en lugar de depender puramente de la plantilla, los formularios reactivos son la respuesta. -Note: Learn more about [reactive forms in the in-depth guide](/guide/forms/reactive-forms). +NOTA: Aprende más sobre [formularios reactivos en la guía detallada](/guide/forms/reactive-forms). -In this activity, you'll learn how to set up reactive forms. +En esta actividad, aprenderás cómo configurar formularios reactivos.
    - + -In `app.ts`, import `ReactiveFormsModule` from `@angular/forms` and add it to the `imports` array of the component. +En `app.ts`, importa `ReactiveFormsModule` desde `@angular/forms` y agrégalo al arreglo `imports` del componente. ```angular-ts import { ReactiveFormsModule } from '@angular/forms'; @@ -36,11 +36,11 @@ import { ReactiveFormsModule } from '@angular/forms'; - + -Reactive forms use the `FormControl` class to represent the form controls (e.g., inputs). Angular provides the `FormGroup` class to serve as a grouping of form controls into a helpful object that makes handling large forms more convenient for developers. +Los formularios reactivos usan la clase `FormControl` para representar los controles de formulario (ej., inputs). Angular proporciona la clase `FormGroup` para servir como agrupación de controles de formulario en un objeto útil que hace que manejar formularios grandes sea más conveniente para los desarrolladores. -Add `FormControl` and `FormGroup` to the import from `@angular/forms` so that you can create a FormGroup for each form, with the properties `name` and `email` as FormControls. +Agrega `FormControl` y `FormGroup` a la importación desde `@angular/forms` para que puedas crear un FormGroup para cada formulario, con las propiedades `name` y `email` como FormControls. ```ts import {ReactiveFormsModule, FormControl, FormGroup } from '@angular/forms'; @@ -55,11 +55,11 @@ export class App { - + -Each `FormGroup` should be attached to a form using the `[formGroup]` directive. +Cada `FormGroup` debe adjuntarse a un formulario usando la directiva `[formGroup]`. -In addition, each `FormControl` can be attached with the `formControlName` directive and assigned to the corresponding property. Update the template with the following form code: +Además, cada `FormControl` puede adjuntarse con la directiva `formControlName` y asignarse a la propiedad correspondiente. Actualiza la plantilla con el siguiente código de formulario: ```angular-html @@ -77,9 +77,9 @@ In addition, each `FormControl` can be attached with the `formControlName` direc - + -When you want to access data from the `FormGroup`, it can be done by accessing the value of the `FormGroup`. Update the `template` to display the form values: +Cuando quieras acceder a datos del `FormGroup`, puedes hacerlo accediendo al valor del `FormGroup`. Actualiza la `template` para mostrar los valores del formulario: ```angular-html ... @@ -90,11 +90,11 @@ When you want to access data from the `FormGroup`, it can be done by accessing t - -Add a new method to the component class called `handleSubmit` that you'll later use to handle the form submission. -This method will display values from the form, you can access the values from the FormGroup. + +Agrega un nuevo método a la clase del componente llamado `handleSubmit` que usarás más tarde para manejar el envío del formulario. +Este método mostrará valores del formulario, puedes acceder a los valores desde el FormGroup. -In the component class, add the `handleSubmit()` method to handle the form submission. +En la clase del componente, agrega el método `handleSubmit()` para manejar el envío del formulario. handleSubmit() { @@ -105,9 +105,9 @@ handleSubmit() { - -You have access to the form values, now it is time to handle the submission event and use the `handleSubmit` method. -Angular has an event handler for this specific purpose called `ngSubmit`. Update the form element to call the `handleSubmit` method when the form is submitted. + +Tienes acceso a los valores del formulario, ahora es momento de manejar el evento de envío y usar el método `handleSubmit`. +Angular tiene un manejador de eventos para este propósito específico llamado `ngSubmit`. Actualiza el elemento del formulario para llamar al método `handleSubmit` cuando se envíe el formulario. -And just like that, you know how to work with reactive forms in Angular. +Y así de simple, ya sabes cómo trabajar con formularios reactivos en Angular. -Fantastic job with this activity. Keep going to learn about form validation. +Fantástico trabajo con esta actividad. Sigue adelante para aprender sobre validación de formularios. diff --git a/adev-es/src/content/tutorials/learn-angular/steps/18-forms-validation/README.en.md b/adev-es/src/content/tutorials/learn-angular/steps/18-forms-validation/README.en.md new file mode 100644 index 0000000..0fa8efc --- /dev/null +++ b/adev-es/src/content/tutorials/learn-angular/steps/18-forms-validation/README.en.md @@ -0,0 +1,56 @@ +# Validating forms + +Another common scenario when working with forms is the need to validate the inputs to ensure the correct data is submitted. + +Note: Learn more about [validating form input in the in-depth guide](/guide/forms/reactive-forms#validating-form-input). + +In this activity, you'll learn how to validate forms with reactive forms. + +
    + + + + + +Angular provides a set of validation tools. To use them, first update the component to import `Validators` from `@angular/forms`. + + +import {ReactiveFormsModule, Validators} from '@angular/forms'; + +@Component({...}) +export class App {} + + + + + + +Every `FormControl` can be passed the `Validators` you want to use for validating the `FormControl` values. For example, if you want to make the `name` field in `profileForm` required then use `Validators.required`. +For the `email` field in our Angular form, we want to ensure it's not left empty and follows a valid email address structure. We can achieve this by combining the `Validators.required` and `Validators.email` validators in an array. +Update the `name` and `email` `FormControl`: + +```ts +profileForm = new FormGroup({ + name: new FormControl('', Validators.required), + email: new FormControl('', [Validators.required, Validators.email]), +}); +``` + + + + + +To determine if a form is valid, the `FormGroup` class has a `valid` property. +You can use this property to dynamically bind attributes. Update the submit `button` to be enabled based on the validity of the form. + +```angular-html + +``` + + + + + +You now know the basics around how validation works with reactive forms. + +Great job learning these core concepts of working with forms in Angular. If you want to learn more, be sure to refer to the [Angular forms documentation](guide/forms/form-validation). diff --git a/adev-es/src/content/tutorials/learn-angular/steps/18-forms-validation/README.md b/adev-es/src/content/tutorials/learn-angular/steps/18-forms-validation/README.md index 0fa8efc..adaac26 100644 --- a/adev-es/src/content/tutorials/learn-angular/steps/18-forms-validation/README.md +++ b/adev-es/src/content/tutorials/learn-angular/steps/18-forms-validation/README.md @@ -1,18 +1,18 @@ -# Validating forms +# Validando formularios -Another common scenario when working with forms is the need to validate the inputs to ensure the correct data is submitted. +Otro escenario común cuando se trabaja con formularios es la necesidad de validar las entradas para asegurar que los datos correctos se envíen. -Note: Learn more about [validating form input in the in-depth guide](/guide/forms/reactive-forms#validating-form-input). +NOTA: Aprende más sobre [validación de entrada de formularios en la guía detallada](/guide/forms/reactive-forms#validating-form-input). -In this activity, you'll learn how to validate forms with reactive forms. +En esta actividad, aprenderás cómo validar formularios con formularios reactivos.
    - + -Angular provides a set of validation tools. To use them, first update the component to import `Validators` from `@angular/forms`. +Angular proporciona un conjunto de herramientas de validación. Para usarlas, primero actualiza el componente para importar `Validators` desde `@angular/forms`. import {ReactiveFormsModule, Validators} from '@angular/forms'; @@ -23,11 +23,11 @@ export class App {} - + -Every `FormControl` can be passed the `Validators` you want to use for validating the `FormControl` values. For example, if you want to make the `name` field in `profileForm` required then use `Validators.required`. -For the `email` field in our Angular form, we want to ensure it's not left empty and follows a valid email address structure. We can achieve this by combining the `Validators.required` and `Validators.email` validators in an array. -Update the `name` and `email` `FormControl`: +Cada `FormControl` puede recibir los `Validators` que quieras usar para validar los valores del `FormControl`. Por ejemplo, si quieres hacer que el campo `name` en `profileForm` sea obligatorio, entonces usa `Validators.required`. +Para el campo `email` en nuestro formulario Angular, queremos asegurarnos de que no se deje vacío y que siga una estructura de dirección de email válida. Podemos lograr esto combinando los validadores `Validators.required` y `Validators.email` en un arreglo. +Actualiza los `FormControl` de `name` y `email`: ```ts profileForm = new FormGroup({ @@ -38,10 +38,10 @@ profileForm = new FormGroup({ - + -To determine if a form is valid, the `FormGroup` class has a `valid` property. -You can use this property to dynamically bind attributes. Update the submit `button` to be enabled based on the validity of the form. +Para determinar si un formulario es válido, la clase `FormGroup` tiene una propiedad `valid`. +Puedes usar esta propiedad para enlazar atributos dinámicamente. Actualiza el botón de `submit` para que se habilite según la validez del formulario. ```angular-html @@ -51,6 +51,6 @@ You can use this property to dynamically bind attributes. Update the submit `but -You now know the basics around how validation works with reactive forms. +Ahora conoces los conceptos básicos de cómo funciona la validación con formularios reactivos. -Great job learning these core concepts of working with forms in Angular. If you want to learn more, be sure to refer to the [Angular forms documentation](guide/forms/form-validation). +Excelente trabajo aprendiendo estos conceptos fundamentales para trabajar con formularios en Angular. Si quieres aprender más, asegúrate de consultar la [documentación de formularios de Angular](guide/forms/form-validation). diff --git a/adev-es/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.en.md b/adev-es/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.en.md new file mode 100644 index 0000000..88aafe5 --- /dev/null +++ b/adev-es/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.en.md @@ -0,0 +1,45 @@ +# Creating an injectable service + +Dependency injection (DI) in Angular is one of the framework's most powerful features. Consider dependency injection to be the ability for Angular to _provide_ resources you need for your application at runtime. A dependency could be a service or some other resources. + +Note: Learn more about [dependency injection in the essentials guide](/essentials/dependency-injection). + +In this activity, you'll learn how to create an `injectable` service. + +
    + +One way to use a service is to act as a way to interact with data and APIs. To make a service reusable you should keep the logic in the service and share it throughout the application when it is needed. + +To make a service eligible to be injected by the DI system use the `@Injectable` decorator. For example: + + +@Injectable({ + providedIn: 'root' +}) +class UserService { + // methods to retrieve and return data +} + + +The `@Injectable` decorator notifies the DI system that the `UserService` is available to be requested in a class. `providedIn` sets the scope in which this resource is available. For now, it is good enough to understand that `providedIn: 'root'` means that the `UserService` is available to the entire application. + +Alright, you try: + + + + +Update the code in `car.service.ts` by adding the `@Injectable` decorator. + + + +The values in the object passed to the decorator are considered to be the configuration for the decorator. +
    +Update the `@Injectable` decorator in `car.service.ts` to include the configuration for `providedIn: 'root'`. + +TIP: Use the above example to find the correct syntax. + +     + +     + +Well, done 👍 that service is now `injectable` and can participate in the fun. Now that the service is `injectable`, let's try injecting it into a component 👉 diff --git a/adev-es/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md b/adev-es/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md index 88aafe5..4f4bc9a 100644 --- a/adev-es/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md +++ b/adev-es/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md @@ -1,16 +1,16 @@ -# Creating an injectable service +# Creando un servicio inyectable -Dependency injection (DI) in Angular is one of the framework's most powerful features. Consider dependency injection to be the ability for Angular to _provide_ resources you need for your application at runtime. A dependency could be a service or some other resources. +La inyección de dependencias (DI) en Angular es una de las características más poderosas del framework. Considera la inyección de dependencias como la capacidad de Angular para _proveer_ los recursos que necesitas para tu aplicación en tiempo de ejecución. Una dependencia podría ser un servicio o algún otro recurso. -Note: Learn more about [dependency injection in the essentials guide](/essentials/dependency-injection). +NOTA: Aprende más sobre [inyección de dependencias en la guía esencial](/essentials/dependency-injection). -In this activity, you'll learn how to create an `injectable` service. +En esta actividad, aprenderás cómo crear un servicio `injectable`.
    -One way to use a service is to act as a way to interact with data and APIs. To make a service reusable you should keep the logic in the service and share it throughout the application when it is needed. +Una forma de usar un servicio es como una manera de interactuar con datos y APIs. Para hacer que un servicio sea reutilizable, debes mantener la lógica en el servicio y compartirlo a lo largo de la aplicación cuando sea necesario. -To make a service eligible to be injected by the DI system use the `@Injectable` decorator. For example: +Para hacer que un servicio sea elegible para ser inyectado por el sistema DI, usa el decorador `@Injectable`. Por ejemplo: @Injectable({ @@ -21,25 +21,25 @@ class UserService { } -The `@Injectable` decorator notifies the DI system that the `UserService` is available to be requested in a class. `providedIn` sets the scope in which this resource is available. For now, it is good enough to understand that `providedIn: 'root'` means that the `UserService` is available to the entire application. +El decorador `@Injectable` notifica al sistema DI que `UserService` está disponible para ser solicitado en una clase. `providedIn` establece el ámbito en el que este recurso está disponible. Por ahora, es suficiente entender que `providedIn: 'root'` significa que `UserService` está disponible para toda la aplicación. -Alright, you try: +Bien, intenta tú: - -Update the code in `car.service.ts` by adding the `@Injectable` decorator. + +Actualiza el código en `car.service.ts` agregando el decorador `@Injectable`. - -The values in the object passed to the decorator are considered to be the configuration for the decorator. + +Los valores en el objeto pasado al decorador se consideran la configuración del decorador.
    -Update the `@Injectable` decorator in `car.service.ts` to include the configuration for `providedIn: 'root'`. +Actualiza el decorador `@Injectable` en `car.service.ts` para incluir la configuración `providedIn: 'root'`. -TIP: Use the above example to find the correct syntax. +CONSEJO: Usa el ejemplo anterior para encontrar la sintaxis correcta.     -Well, done 👍 that service is now `injectable` and can participate in the fun. Now that the service is `injectable`, let's try injecting it into a component 👉 +Bien hecho 👍 ese servicio ahora es `injectable` y puede participar en la diversión. Ahora que el servicio es `injectable`, intentemos inyectarlo en un componente 👉 diff --git a/adev-es/src/content/tutorials/learn-angular/steps/2-updating-the-component-class/README.en.md b/adev-es/src/content/tutorials/learn-angular/steps/2-updating-the-component-class/README.en.md new file mode 100644 index 0000000..9ad79e7 --- /dev/null +++ b/adev-es/src/content/tutorials/learn-angular/steps/2-updating-the-component-class/README.en.md @@ -0,0 +1,51 @@ +# Updating the Component Class + +In Angular, the component's logic and behavior are defined in the component's TypeScript class. + +Note: Learn more about [showing dynamic text in the essentials guide](/essentials/templates#showing-dynamic-text). + +In this activity, you'll learn how to update the component class and how to use [interpolation](/guide/templates/binding#render-dynamic-text-with-text-interpolation). + +
    + + + + +Update the component class by adding a property called `city` to the `App` class. + +```ts +export class App { + city = 'San Francisco'; +} +``` + +The `city` property is of type `string` but you can omit the type because of [type inference in TypeScript](https://www.typescriptlang.org/docs/handbook/type-inference.html). The `city` property can be used in the `App` class and can be referenced in the component template. + +
    + +To use a class property in a template, you have to use the `{{ }}` syntax. +     + + +Update the `template` property to match the following HTML: + +```ts +template: `Hello {{ city }}`, +``` + +This is an example of interpolation and is a part of Angular template syntax. It enables you to do much more than put dynamic text in a template. You can also use this syntax to call functions, write expressions and more. + + + +Try this - add another set of `{{ }}` with the contents being `1 + 1`: + +```ts +template: `Hello {{ city }}, {{ 1 + 1 }}`, +``` + +Angular evaluates the contents of the `{{ }}` and renders the output in the template. + + +     + +This is just the beginning of what's possible with Angular templates, keep on learning to find out more. diff --git a/adev-es/src/content/tutorials/learn-angular/steps/2-updating-the-component-class/README.md b/adev-es/src/content/tutorials/learn-angular/steps/2-updating-the-component-class/README.md index 9ad79e7..7f66baf 100644 --- a/adev-es/src/content/tutorials/learn-angular/steps/2-updating-the-component-class/README.md +++ b/adev-es/src/content/tutorials/learn-angular/steps/2-updating-the-component-class/README.md @@ -1,17 +1,17 @@ -# Updating the Component Class +# Actualizando la clase del componente -In Angular, the component's logic and behavior are defined in the component's TypeScript class. +En Angular, la lógica y el comportamiento del componente se definen en la clase TypeScript del componente. -Note: Learn more about [showing dynamic text in the essentials guide](/essentials/templates#showing-dynamic-text). +NOTA: Aprende más sobre [mostrar texto dinámico en la guía esencial](/essentials/templates#showing-dynamic-text). -In this activity, you'll learn how to update the component class and how to use [interpolation](/guide/templates/binding#render-dynamic-text-with-text-interpolation). +En esta actividad, aprenderás cómo actualizar la clase del componente y cómo usar [interpolación](/guide/templates/binding#render-dynamic-text-with-text-interpolation).
    - -Update the component class by adding a property called `city` to the `App` class. + +Actualiza la clase del componente agregando una propiedad llamada `city` a la clase `App`. ```ts export class App { @@ -19,31 +19,31 @@ export class App { } ``` -The `city` property is of type `string` but you can omit the type because of [type inference in TypeScript](https://www.typescriptlang.org/docs/handbook/type-inference.html). The `city` property can be used in the `App` class and can be referenced in the component template. +La propiedad `city` es de tipo `string` pero puedes omitir el tipo debido a la [inferencia de tipos en TypeScript](https://www.typescriptlang.org/docs/handbook/type-inference.html). La propiedad `city` puede usarse en la clase `App` y puede referenciarse en la plantilla del componente.
    -To use a class property in a template, you have to use the `{{ }}` syntax. +Para usar una propiedad de la clase en una plantilla, debes usar la sintaxis `{{ }}`.     - -Update the `template` property to match the following HTML: + +Actualiza la propiedad `template` para que coincida con el siguiente HTML: ```ts template: `Hello {{ city }}`, ``` -This is an example of interpolation and is a part of Angular template syntax. It enables you to do much more than put dynamic text in a template. You can also use this syntax to call functions, write expressions and more. +Este es un ejemplo de interpolación y es parte de la sintaxis de plantillas de Angular. Te permite hacer mucho más que poner texto dinámico en una plantilla. También puedes usar esta sintaxis para llamar funciones, escribir expresiones y más. - -Try this - add another set of `{{ }}` with the contents being `1 + 1`: + +Intenta esto: agrega otro conjunto de `{{ }}` con el contenido `1 + 1`: ```ts template: `Hello {{ city }}, {{ 1 + 1 }}`, ``` -Angular evaluates the contents of the `{{ }}` and renders the output in the template. +Angular evalúa el contenido de `{{ }}` y renderiza el resultado en la plantilla.     diff --git a/adev-es/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.en.md b/adev-es/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.en.md new file mode 100644 index 0000000..e02e67e --- /dev/null +++ b/adev-es/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.en.md @@ -0,0 +1,54 @@ +# Inject-based dependency injection + +Creating an injectable service is the first part of the dependency injection (DI) system in Angular. How do you inject a service into a component? Angular has a convenient function called `inject()` that can be used in the proper context. + +NOTE: Injection contexts are beyond the scope of this tutorial, but you can learn more in the [dependency injection (DI) essentials guide](/essentials/dependency-injection) and [DI context guide](guide/di/dependency-injection-context). + +In this activity, you'll learn how to inject a service and use it in a component. + +
    + +It is often helpful to initialize class properties with values provided by the DI system. Here's an example: + + +@Component({...}) +class PetCareDashboard { + petRosterService = inject(PetRosterService); +} + + + + + + +In `app.ts`, using the `inject()` function inject the `CarService` and assign it to a property called `carService` + +NOTE: Notice the difference between the property `carService` and the class `CarService`. + + + + + +Calling `inject(CarService)` gave you an instance of the `CarService` that you can use in your application, stored in the `carService` property. + +Initialize the `display` property with the following implementation: + +```ts +display = this.carService.getCars().join(' ⭐️ '); +``` + + + + + +Update the component template in `app.ts` with the following code: + +```ts +template: `

    Car Listing: {{ display }}

    `, +``` + +     + +     + +You've just injected your first service into a component - fantastic effort. diff --git a/adev-es/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.md b/adev-es/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.md index e02e67e..3d9fcdc 100644 --- a/adev-es/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.md +++ b/adev-es/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.md @@ -1,14 +1,14 @@ -# Inject-based dependency injection +# Inyección de dependencias basada en inject -Creating an injectable service is the first part of the dependency injection (DI) system in Angular. How do you inject a service into a component? Angular has a convenient function called `inject()` that can be used in the proper context. +Crear un servicio inyectable es la primera parte del sistema de inyección de dependencias (DI) en Angular. ¿Cómo se inyecta un servicio en un componente? Angular tiene una función conveniente llamada `inject()` que puede usarse en el contexto adecuado. -NOTE: Injection contexts are beyond the scope of this tutorial, but you can learn more in the [dependency injection (DI) essentials guide](/essentials/dependency-injection) and [DI context guide](guide/di/dependency-injection-context). +NOTA: Los contextos de inyección están más allá del alcance de este tutorial, pero puedes aprender más en la [guía esencial de inyección de dependencias (DI)](/essentials/dependency-injection) y en la [guía de contexto DI](guide/di/dependency-injection-context). -In this activity, you'll learn how to inject a service and use it in a component. +En esta actividad, aprenderás cómo inyectar un servicio y usarlo en un componente.
    -It is often helpful to initialize class properties with values provided by the DI system. Here's an example: +A menudo es útil inicializar propiedades de clase con valores proporcionados por el sistema DI. Aquí hay un ejemplo: @Component({...}) @@ -19,19 +19,19 @@ class PetCareDashboard { - + -In `app.ts`, using the `inject()` function inject the `CarService` and assign it to a property called `carService` +En `app.ts`, usando la función `inject()` inyecta el `CarService` y asígnalo a una propiedad llamada `carService` -NOTE: Notice the difference between the property `carService` and the class `CarService`. +NOTA: Observa la diferencia entre la propiedad `carService` y la clase `CarService`. - + -Calling `inject(CarService)` gave you an instance of the `CarService` that you can use in your application, stored in the `carService` property. +Llamar a `inject(CarService)` te dio una instancia del `CarService` que puedes usar en tu aplicación, almacenada en la propiedad `carService`. -Initialize the `display` property with the following implementation: +Inicializa la propiedad `display` con la siguiente implementación: ```ts display = this.carService.getCars().join(' ⭐️ '); @@ -39,9 +39,9 @@ display = this.carService.getCars().join(' ⭐️ '); - + -Update the component template in `app.ts` with the following code: +Actualiza la plantilla del componente en `app.ts` con el siguiente código: ```ts template: `

    Car Listing: {{ display }}

    `, @@ -51,4 +51,4 @@ template: `

    Car Listing: {{ display }}

    `,     -You've just injected your first service into a component - fantastic effort. +Acabas de inyectar tu primer servicio en un componente - fantástico esfuerzo. diff --git a/adev-es/src/content/tutorials/learn-angular/steps/22-pipes/README.en.md b/adev-es/src/content/tutorials/learn-angular/steps/22-pipes/README.en.md new file mode 100644 index 0000000..7d78431 --- /dev/null +++ b/adev-es/src/content/tutorials/learn-angular/steps/22-pipes/README.en.md @@ -0,0 +1,64 @@ +# Pipes + +Pipes are functions that are used to transform data in templates. In general, pipes are "pure" functions that don't cause side effects. Angular has a number of helpful built-in pipes you can import and use in your components. You can also create a custom pipe. + +Note: Learn more about [pipes in the in-depth guide](/guide/templates/pipes). + +In this activity, you will import a pipe and use it in the template. + +
    + +To use a pipe in a template include it in an interpolated expression. Check out this example: + + +import {UpperCasePipe} from '@angular/common'; + +@Component({ +... +template: `{{ loudMessage | uppercase }}`, +imports: [UpperCasePipe], +}) +export class App { +loudMessage = 'we think you are doing great!' +} + + +Now, it's your turn to give this a try: + + + + +First, update `app.ts` by adding the file level import for `LowerCasePipe` from `@angular/common`. + +```ts +import { LowerCasePipe } from '@angular/common'; +``` + + + + +Next, update `@Component()` decorator `imports` to include a reference to `LowerCasePipe` + + +@Component({ + ... + imports: [LowerCasePipe] +}) + + + + + +Finally, in `app.ts` update the template to include the `lowercase` pipe: + +```ts +template: `{{username | lowercase }}` +``` + + + + + +Pipes can also accept parameters which can be used to configure their output. Find out more in the next activity. + +P.S. you are doing great ⭐️ diff --git a/adev-es/src/content/tutorials/learn-angular/steps/22-pipes/README.md b/adev-es/src/content/tutorials/learn-angular/steps/22-pipes/README.md index 7d78431..b8ddb78 100644 --- a/adev-es/src/content/tutorials/learn-angular/steps/22-pipes/README.md +++ b/adev-es/src/content/tutorials/learn-angular/steps/22-pipes/README.md @@ -1,14 +1,14 @@ # Pipes -Pipes are functions that are used to transform data in templates. In general, pipes are "pure" functions that don't cause side effects. Angular has a number of helpful built-in pipes you can import and use in your components. You can also create a custom pipe. +Los pipes son funciones que se usan para transformar datos en plantillas. En general, los pipes son funciones "puras" que no causan efectos secundarios. Angular tiene varios pipes integrados útiles que puedes importar y usar en tus componentes. También puedes crear un pipe personalizado. -Note: Learn more about [pipes in the in-depth guide](/guide/templates/pipes). +NOTA: Aprende más sobre [pipes en la guía detallada](/guide/templates/pipes). -In this activity, you will import a pipe and use it in the template. +En esta actividad, importarás un pipe y lo usarás en la plantilla.
    -To use a pipe in a template include it in an interpolated expression. Check out this example: +Para usar un pipe en una plantilla, inclúyelo en una expresión interpolada. Revisa este ejemplo: import {UpperCasePipe} from '@angular/common'; @@ -23,12 +23,12 @@ loudMessage = 'we think you are doing great!' } -Now, it's your turn to give this a try: +Ahora, es tu turno de intentarlo: - -First, update `app.ts` by adding the file level import for `LowerCasePipe` from `@angular/common`. + +Primero, actualiza `app.ts` agregando la importación a nivel de archivo para `LowerCasePipe` desde `@angular/common`. ```ts import { LowerCasePipe } from '@angular/common'; @@ -36,8 +36,8 @@ import { LowerCasePipe } from '@angular/common'; - -Next, update `@Component()` decorator `imports` to include a reference to `LowerCasePipe` + +A continuación, actualiza los `imports` del decorador `@Component()` para incluir una referencia a `LowerCasePipe` @Component({ @@ -48,8 +48,8 @@ Next, update `@Component()` decorator `imports` to include a reference to `Lower - -Finally, in `app.ts` update the template to include the `lowercase` pipe: + +Finalmente, en `app.ts` actualiza la plantilla para incluir el pipe `lowercase`: ```ts template: `{{username | lowercase }}` @@ -59,6 +59,6 @@ template: `{{username | lowercase }}` -Pipes can also accept parameters which can be used to configure their output. Find out more in the next activity. +Los pipes también pueden aceptar parámetros que se pueden usar para configurar su salida. Descubre más en la siguiente actividad. -P.S. you are doing great ⭐️ +P.D. lo estás haciendo excelente ⭐️ diff --git a/adev-es/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.en.md b/adev-es/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.en.md new file mode 100644 index 0000000..07cfe9e --- /dev/null +++ b/adev-es/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.en.md @@ -0,0 +1,74 @@ +# Formatting data with pipes + +You can take your use of pipes even further by configuring them. Pipes can be configured by passing options to them. + +Note: Learn more about [formatting data with pipes in the in-depth guide](/guide/templates/pipes). + +In this activity, you will work with some pipes and pipe parameters. + +
    + +To pass parameters to a pipe, use the `:` syntax followed by the parameter value. Here's an example: + +```ts +template: `{{ date | date:'medium' }}`; +``` + +The output is `Jun 15, 2015, 9:43:11 PM`. + +Time to customize some pipe output: + + + + + +In `app.ts`, update the template to include parameter for the `decimal` pipe. + + +template: ` + ... +
  • Number with "decimal" {{ num | number:"3.2-2" }}
    • +` +     + +NOTE: What's that format? The parameter for the `DecimalPipe` is called `digitsInfo`, this parameter uses the format: `{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}` + +     + + + +Now, update the template to use the `date` pipe. + + +template: ` + ... +
  • Date with "date" {{ birthday | date: 'medium' }}
    • +` +     + +For extra fun, try some different parameters for `date`. More information can be found in the [Angular docs](guide/templates/pipes). + +     + + + +For your last task, update the template to use the `currency` pipe. + + +template: ` + ... +
  • Currency with "currency" {{ cost | currency }}
    • +` +     + +You can also try different parameters for `currency`. More information can be found in the [Angular docs](guide/templates/pipes). + +     + +     + +Great work with pipes. You've made some great progress so far. + +There are even more built-in pipes that you can use in your applications. You can find the list in the [Angular documentation](guide/templates/pipes). + +In the case that the built-in pipes don't cover your needs, you can also create a custom pipe. Check out the next lesson to find out more. diff --git a/adev-es/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.md b/adev-es/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.md index 07cfe9e..dd3ccc2 100644 --- a/adev-es/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.md +++ b/adev-es/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.md @@ -1,28 +1,28 @@ -# Formatting data with pipes +# Formateando datos con pipes -You can take your use of pipes even further by configuring them. Pipes can be configured by passing options to them. +Puedes llevar tu uso de pipes aún más lejos configurándolos. Los pipes pueden configurarse pasándoles opciones. -Note: Learn more about [formatting data with pipes in the in-depth guide](/guide/templates/pipes). +NOTA: Aprende más sobre [formatear datos con pipes en la guía detallada](/guide/templates/pipes). -In this activity, you will work with some pipes and pipe parameters. +En esta actividad, trabajarás con algunos pipes y parámetros de pipes.
    -To pass parameters to a pipe, use the `:` syntax followed by the parameter value. Here's an example: +Para pasar parámetros a un pipe, usa la sintaxis `:` seguida del valor del parámetro. Aquí hay un ejemplo: ```ts template: `{{ date | date:'medium' }}`; ``` -The output is `Jun 15, 2015, 9:43:11 PM`. +El resultado es `Jun 15, 2015, 9:43:11 PM`. -Time to customize some pipe output: +Es hora de personalizar la salida de algunos pipes: - + -In `app.ts`, update the template to include parameter for the `decimal` pipe. +En `app.ts`, actualiza la plantilla para incluir el parámetro del pipe `decimal`. template: ` @@ -31,13 +31,13 @@ template: ` ` -NOTE: What's that format? The parameter for the `DecimalPipe` is called `digitsInfo`, this parameter uses the format: `{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}` +NOTA: ¿Qué es ese formato? El parámetro para `DecimalPipe` se llama `digitsInfo`, este parámetro usa el formato: `{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}` - + -Now, update the template to use the `date` pipe. +Ahora, actualiza la plantilla para usar el pipe `date`. template: ` @@ -46,13 +46,13 @@ template: ` ` -For extra fun, try some different parameters for `date`. More information can be found in the [Angular docs](guide/templates/pipes). +Para más diversión, prueba algunos parámetros diferentes para `date`. Puedes encontrar más información en la [documentación de Angular](guide/templates/pipes). - + -For your last task, update the template to use the `currency` pipe. +Para tu última tarea, actualiza la plantilla para usar el pipe `currency`. template: ` @@ -61,14 +61,14 @@ template: ` ` -You can also try different parameters for `currency`. More information can be found in the [Angular docs](guide/templates/pipes). +También puedes probar diferentes parámetros para `currency`. Puedes encontrar más información en la [documentación de Angular](guide/templates/pipes). -Great work with pipes. You've made some great progress so far. +Excelente trabajo con pipes. Has progresado muy bien hasta ahora. -There are even more built-in pipes that you can use in your applications. You can find the list in the [Angular documentation](guide/templates/pipes). +Hay incluso más pipes integrados que puedes usar en tus aplicaciones. Puedes encontrar la lista en la [documentación de Angular](guide/templates/pipes). -In the case that the built-in pipes don't cover your needs, you can also create a custom pipe. Check out the next lesson to find out more. +En caso de que los pipes integrados no cubran tus necesidades, también puedes crear un pipe personalizado. Revisa la siguiente lección para descubrir más. diff --git a/adev-es/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.en.md b/adev-es/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.en.md new file mode 100644 index 0000000..100ffbf --- /dev/null +++ b/adev-es/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.en.md @@ -0,0 +1,81 @@ +# Create a custom pipe + +You can create custom pipes in Angular to fit your data transformation needs. + +Note: Learn more about [creating custom pipes in the in-depth guide](/guide/templates/pipes#creating-custom-pipes). + +In this activity, you will create a custom pipe and use it in your template. + +
    + +A pipe is a TypeScript class with a `@Pipe` decorator. Here's an example: + +```ts +import {Pipe, PipeTransform} from '@angular/core'; + +@Pipe({ + name: 'star', +}) +export class StarPipe implements PipeTransform { + transform(value: string): string { + return `⭐️ ${value} ⭐️`; + } +} +``` + +The `StarPipe` accepts a string value and returns that string with stars around it. Take note that: + +- the name in the `@Pipe` decorator configuration is what will be used in the template +- the `transform` function is where you put your logic + +Alright, it's your turn to give this a try — you'll create the `ReversePipe`: + + + + + +In `reverse.pipe.ts` add the `@Pipe` decorator to the `ReversePipe` class and provide the following configuration: + +```ts +@Pipe({ + name: 'reverse' +}) +``` + + + + + +Now the `ReversePipe` class is a pipe. Update the `transform` function to add the reversing logic: + + +export class ReversePipe implements PipeTransform { + transform(value: string): string { + let reverse = ''; + + for (let i = value.length - 1; i >= 0; i--) { + reverse += value[i]; + } + + return reverse; + +} +} + + + + + +With the pipe logic implemented, the final step is to use it in the template. In `app.ts` include the pipe in the template and add it to the component imports: + + +@Component({ + ... + template: `Reverse Machine: {{ word | reverse }}` + imports: [ReversePipe] +}) + + + + +And with that you've done it. Congratulations on completing this activity. You now know how to use pipes and even how to implement your own custom pipes. diff --git a/adev-es/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md b/adev-es/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md index 100ffbf..d8fb219 100644 --- a/adev-es/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md +++ b/adev-es/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md @@ -1,14 +1,14 @@ -# Create a custom pipe +# Creando un pipe personalizado -You can create custom pipes in Angular to fit your data transformation needs. +Puedes crear pipes personalizados en Angular para adaptarte a tus necesidades de transformación de datos. -Note: Learn more about [creating custom pipes in the in-depth guide](/guide/templates/pipes#creating-custom-pipes). +NOTA: Aprende más sobre [crear pipes personalizados en la guía detallada](/guide/templates/pipes#creating-custom-pipes). -In this activity, you will create a custom pipe and use it in your template. +En esta actividad, crearás un pipe personalizado y lo usarás en tu plantilla.
    -A pipe is a TypeScript class with a `@Pipe` decorator. Here's an example: +Un pipe es una clase TypeScript con un decorador `@Pipe`. Aquí hay un ejemplo: ```ts import {Pipe, PipeTransform} from '@angular/core'; @@ -23,18 +23,18 @@ export class StarPipe implements PipeTransform { } ``` -The `StarPipe` accepts a string value and returns that string with stars around it. Take note that: +`StarPipe` acepta un valor string y devuelve ese string con estrellas alrededor. Ten en cuenta que: -- the name in the `@Pipe` decorator configuration is what will be used in the template -- the `transform` function is where you put your logic +- el nombre en la configuración del decorador `@Pipe` es lo que se usará en la plantilla +- la función `transform` es donde pones tu lógica -Alright, it's your turn to give this a try — you'll create the `ReversePipe`: +Bien, es tu turno de intentarlo — crearás el `ReversePipe`: - + -In `reverse.pipe.ts` add the `@Pipe` decorator to the `ReversePipe` class and provide the following configuration: +En `reverse.pipe.ts` agrega el decorador `@Pipe` a la clase `ReversePipe` y proporciona la siguiente configuración: ```ts @Pipe({ @@ -44,9 +44,9 @@ In `reverse.pipe.ts` add the `@Pipe` decorator to the `ReversePipe` class and pr - + -Now the `ReversePipe` class is a pipe. Update the `transform` function to add the reversing logic: +Ahora la clase `ReversePipe` es un pipe. Actualiza la función `transform` para agregar la lógica de reversión: export class ReversePipe implements PipeTransform { @@ -65,8 +65,8 @@ export class ReversePipe implements PipeTransform { - -With the pipe logic implemented, the final step is to use it in the template. In `app.ts` include the pipe in the template and add it to the component imports: + +Con la lógica del pipe implementada, el paso final es usarlo en la plantilla. En `app.ts` incluye el pipe en la plantilla y agrégalo a los imports del componente: @Component({ @@ -78,4 +78,4 @@ With the pipe logic implemented, the final step is to use it in the template. In -And with that you've done it. Congratulations on completing this activity. You now know how to use pipes and even how to implement your own custom pipes. +Y con eso lo has logrado. Felicidades por completar esta actividad. Ahora sabes cómo usar pipes e incluso cómo implementar tus propios pipes personalizados. diff --git a/adev-es/src/content/tutorials/learn-angular/steps/25-next-steps/README.en.md b/adev-es/src/content/tutorials/learn-angular/steps/25-next-steps/README.en.md new file mode 100644 index 0000000..f7a6fb5 --- /dev/null +++ b/adev-es/src/content/tutorials/learn-angular/steps/25-next-steps/README.en.md @@ -0,0 +1,18 @@ +# Ready to explore more of Angular? + +You can also learn more in our [guides](overview) and [reference](api), or `ng new`. + + + + Angular is the web development framework for building modern apps! + + + Read about Angular's open source roadmap including current, future and accomplished projects. + + + Play with Angular in your browser! + + + Check out the official Angular YouTube channel for videos, courses and more! + + diff --git a/adev-es/src/content/tutorials/learn-angular/steps/25-next-steps/README.md b/adev-es/src/content/tutorials/learn-angular/steps/25-next-steps/README.md index f7a6fb5..ee55f95 100644 --- a/adev-es/src/content/tutorials/learn-angular/steps/25-next-steps/README.md +++ b/adev-es/src/content/tutorials/learn-angular/steps/25-next-steps/README.md @@ -1,18 +1,18 @@ -# Ready to explore more of Angular? +# ¿Listo para explorar más de Angular? -You can also learn more in our [guides](overview) and [reference](api), or `ng new`. +También puedes aprender más en nuestras [guías](overview) y [referencia](api), o `ng new`. - - Angular is the web development framework for building modern apps! + + ¡Angular es el framework de desarrollo web para construir aplicaciones modernas! - - Read about Angular's open source roadmap including current, future and accomplished projects. + + Lee sobre el roadmap open source de Angular incluyendo proyectos actuales, futuros y completados. - - Play with Angular in your browser! + + ¡Juega con Angular en tu navegador! - - Check out the official Angular YouTube channel for videos, courses and more! + + ¡Revisa el canal oficial de Angular en YouTube para videos, cursos y más! diff --git a/adev-es/src/content/tutorials/learn-angular/steps/3-composing-components/README.en.md b/adev-es/src/content/tutorials/learn-angular/steps/3-composing-components/README.en.md new file mode 100644 index 0000000..8d207f7 --- /dev/null +++ b/adev-es/src/content/tutorials/learn-angular/steps/3-composing-components/README.en.md @@ -0,0 +1,40 @@ +# Composing Components + +You've learned to update the component template, component logic, and component styles, but how do you use a component in your application? + +The `selector` property of the component configuration gives you a name to use when referencing the component in another template. You use the `selector` like an HTML tag, for example `app-user` would be `` in the template. + +Note: Learn more about [using components in the essentials guide](/essentials/components#using-components). + +In this activity, you'll learn how to compose components. + +
    + +In this example, there are two components `User` and `App`. + + + + +Update the `App` template to include a reference to the `User` which uses the selector `app-user`. Be sure to add `User` to the imports array of `App`, this makes it available for use in the `App` template. + +```ts +template: ``, +imports: [User] +``` + +The component now displays the message `Username: youngTech`. You can update the template code to include more markup. + + + +Because you can use any HTML markup that you want in a template, try updating the template for `App` to also include more HTML elements. This example will add a `
    ` element as the parent of the `` element. + +```ts +template: `
    `, +``` + + + + +You can use as much HTML markup and as many components as you need to bring your app idea to reality. You can even have multiple copies of your component on the same page. + +That's a great segue, how would you conditionally show a component based on data? Head to the next section to find out. diff --git a/adev-es/src/content/tutorials/learn-angular/steps/3-composing-components/README.md b/adev-es/src/content/tutorials/learn-angular/steps/3-composing-components/README.md index 8d207f7..c04c495 100644 --- a/adev-es/src/content/tutorials/learn-angular/steps/3-composing-components/README.md +++ b/adev-es/src/content/tutorials/learn-angular/steps/3-composing-components/README.md @@ -1,32 +1,32 @@ -# Composing Components +# Componiendo componentes -You've learned to update the component template, component logic, and component styles, but how do you use a component in your application? +Has aprendido a actualizar la plantilla del componente, la lógica del componente y los estilos del componente, pero ¿cómo usas un componente en tu aplicación? -The `selector` property of the component configuration gives you a name to use when referencing the component in another template. You use the `selector` like an HTML tag, for example `app-user` would be `` in the template. +La propiedad `selector` de la configuración del componente te da un nombre para usar al referenciar el componente en otra plantilla. Usas el `selector` como una etiqueta HTML, por ejemplo `app-user` sería `` en la plantilla. -Note: Learn more about [using components in the essentials guide](/essentials/components#using-components). +NOTA: Aprende más sobre [usar componentes en la guía esencial](/essentials/components#using-components). -In this activity, you'll learn how to compose components. +En esta actividad, aprenderás cómo componer componentes.
    -In this example, there are two components `User` and `App`. +En este ejemplo, hay dos componentes: `User` y `App`. - -Update the `App` template to include a reference to the `User` which uses the selector `app-user`. Be sure to add `User` to the imports array of `App`, this makes it available for use in the `App` template. + +Actualiza la plantilla de `App` para incluir una referencia a `User` que usa el selector `app-user`. Asegúrate de agregar `User` al arreglo `imports` de `App`, esto lo hace disponible para usar en la plantilla de `App`. ```ts template: ``, imports: [User] ``` -The component now displays the message `Username: youngTech`. You can update the template code to include more markup. +El componente ahora muestra el mensaje `Username: youngTech`. Puedes actualizar el código de la plantilla para incluir más marcado. - -Because you can use any HTML markup that you want in a template, try updating the template for `App` to also include more HTML elements. This example will add a `
    ` element as the parent of the `` element. + +Como puedes usar cualquier marcado HTML que desees en una plantilla, intenta actualizar la plantilla de `App` para incluir también más elementos HTML. Este ejemplo agregará un elemento `
    ` como padre del elemento ``. ```ts template: `
    `, @@ -35,6 +35,6 @@ template: `
    `, -You can use as much HTML markup and as many components as you need to bring your app idea to reality. You can even have multiple copies of your component on the same page. +Puedes usar tanto marcado HTML y tantos componentes como necesites para hacer realidad la idea de tu aplicación. Incluso puedes tener múltiples copias de tu componente en la misma página. -That's a great segue, how would you conditionally show a component based on data? Head to the next section to find out. +Esa es una buena transición, ¿cómo mostrarías condicionalmente un componente basado en datos? Dirígete a la siguiente sección para descubrirlo. diff --git a/adev-es/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.en.md b/adev-es/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.en.md new file mode 100644 index 0000000..4d668d2 --- /dev/null +++ b/adev-es/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.en.md @@ -0,0 +1,65 @@ +# Control Flow in Components - `@if` + +Deciding what to display on the screen for a user is a common task in application development. Many times, the decision is made programmatically using conditions. + +To express conditional displays in templates, Angular uses the `@if` template syntax. + +Note: Learn more about [control flow in the essentials guide](/essentials/templates#control-flow-with-if-and-for). + +In this activity, you'll learn how to use conditionals in templates. + +
    + +The syntax that enables the conditional display of elements in a template is `@if`. + +Here's an example of how to use the `@if` syntax in a component: + +```angular-ts +@Component({ + ... + template: ` + @if (isLoggedIn) { +

    Welcome back, Friend!

    + } + `, +}) +export class App { + isLoggedIn = true; +} +``` + +Two things to take note of: + +- There is an `@` prefix for the `if` because it is a special type of syntax called [Angular template syntax](guide/templates) +- For applications using v16 and older please refer to the [Angular documentation for NgIf](guide/directives/structural-directives) for more information. + + + + +In the `App` class, add a `boolean` property called `isServerRunning`, set the initial value to `true`. + + + +Update the template to display the message `Yes, the server is running` if the value of `isServerRunning` is `true`. + + + + +Now Angular supports native template syntax for defining the else case with the `@else` syntax. Update the template to display the message `No, the server is not running` as the else case. + +Here's an example: + +```angular-ts +template: ` + @if (isServerRunning) { ... } + @else { ... } +`; +``` + +Add your code to fill in the missing markup. + + + + + +This type of functionality is called conditional control flow. Next you'll learn how to repeat items in a template. diff --git a/adev-es/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.md b/adev-es/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.md index 4d668d2..c41f918 100644 --- a/adev-es/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.md +++ b/adev-es/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.md @@ -1,18 +1,18 @@ -# Control Flow in Components - `@if` +# Control de flujo en componentes - `@if` -Deciding what to display on the screen for a user is a common task in application development. Many times, the decision is made programmatically using conditions. +Decidir qué mostrar en la pantalla para un usuario es una tarea común en el desarrollo de aplicaciones. Muchas veces, la decisión se toma programáticamente usando condiciones. -To express conditional displays in templates, Angular uses the `@if` template syntax. +Para expresar visualizaciones condicionales en plantillas, Angular usa la sintaxis de plantilla `@if`. -Note: Learn more about [control flow in the essentials guide](/essentials/templates#control-flow-with-if-and-for). +NOTA: Aprende más sobre [control de flujo en la guía esencial](/essentials/templates#control-flow-with-if-and-for). -In this activity, you'll learn how to use conditionals in templates. +En esta actividad, aprenderás cómo usar condicionales en plantillas.
    -The syntax that enables the conditional display of elements in a template is `@if`. +La sintaxis que permite la visualización condicional de elementos en una plantilla es `@if`. -Here's an example of how to use the `@if` syntax in a component: +Aquí hay un ejemplo de cómo usar la sintaxis `@if` en un componente: ```angular-ts @Component({ @@ -28,26 +28,26 @@ export class App { } ``` -Two things to take note of: +Dos cosas a tener en cuenta: -- There is an `@` prefix for the `if` because it is a special type of syntax called [Angular template syntax](guide/templates) -- For applications using v16 and older please refer to the [Angular documentation for NgIf](guide/directives/structural-directives) for more information. +- Hay un prefijo `@` para `if` porque es un tipo especial de sintaxis llamada [sintaxis de plantillas de Angular](guide/templates) +- Para aplicaciones que usan v16 y anteriores, consulta la [documentación de Angular para NgIf](guide/directives/structural-directives) para más información. - -In the `App` class, add a `boolean` property called `isServerRunning`, set the initial value to `true`. + +En la clase `App`, agrega una propiedad `boolean` llamada `isServerRunning`, establece el valor inicial a `true`. - -Update the template to display the message `Yes, the server is running` if the value of `isServerRunning` is `true`. + +Actualiza la plantilla para mostrar el mensaje `Yes, the server is running` si el valor de `isServerRunning` es `true`. - -Now Angular supports native template syntax for defining the else case with the `@else` syntax. Update the template to display the message `No, the server is not running` as the else case. + +Angular ahora soporta sintaxis nativa de plantillas para definir el caso `else` con la sintaxis `@else`. Actualiza la plantilla para mostrar el mensaje `No, the server is not running` como el caso `else`. -Here's an example: +Aquí hay un ejemplo: ```angular-ts template: ` @@ -56,10 +56,10 @@ template: ` `; ``` -Add your code to fill in the missing markup. +Agrega tu código para completar el marcado faltante. -This type of functionality is called conditional control flow. Next you'll learn how to repeat items in a template. +Este tipo de funcionalidad se llama control de flujo condicional. A continuación aprenderás cómo repetir elementos en una plantilla. diff --git a/adev-es/src/content/tutorials/learn-angular/steps/5-control-flow-for/README.en.md b/adev-es/src/content/tutorials/learn-angular/steps/5-control-flow-for/README.en.md new file mode 100644 index 0000000..57ca07d --- /dev/null +++ b/adev-es/src/content/tutorials/learn-angular/steps/5-control-flow-for/README.en.md @@ -0,0 +1,60 @@ +# Control Flow in Components - `@for` + +Often when building web applications, you need to repeat some code a specific number of times - for example, given an array of names, you may want to display each name in a `

    ` tag. + +Note: Learn more about [control flow in the essentials guide](/essentials/templates#control-flow-with-if-and-for). + +In this activity, you'll learn how to use `@for` to repeat elements in a template. + +

    + +The syntax that enables repeating elements in a template is `@for`. + +Here's an example of how to use the `@for` syntax in a component: + +```angular-ts +@Component({ + ... + template: ` + @for (os of operatingSystems; track os.id) { + {{ os.name }} + } + `, +}) +export class App { + operatingSystems = [{id: 'win', name: 'Windows'}, {id: 'osx', name: 'MacOS'}, {id: 'linux', name: 'Linux'}]; +} +``` + +Two things to take note of: + +- There is an `@` prefix for the `for` because it is a special syntax called [Angular template syntax](guide/templates) +- For applications using v16 and older please refer to the [Angular documentation for NgFor](guide/directives/structural-directives) + + + + +In the `App` class, add a property called `users` that contains users and their names. + +```ts +[{id: 0, name: 'Sarah'}, {id: 1, name: 'Amy'}, {id: 2, name: 'Rachel'}, {id: 3, name: 'Jessica'}, {id: 4, name: 'Poornima'}] +``` + + + + +Update the template to display each user name in a `p` element using the `@for` template syntax. + +```angular-html +@for (user of users; track user.id) { +

    {{ user.name }}

    +} +``` + +NOTE: the use of `track` is required, you may use the `id` or some other unique identifier. + +     + +     + +This type of functionality is called control flow. Next, you'll learn to customize and communicate with components - by the way, you're doing a great job so far. diff --git a/adev-es/src/content/tutorials/learn-angular/steps/5-control-flow-for/README.md b/adev-es/src/content/tutorials/learn-angular/steps/5-control-flow-for/README.md index 57ca07d..730272a 100644 --- a/adev-es/src/content/tutorials/learn-angular/steps/5-control-flow-for/README.md +++ b/adev-es/src/content/tutorials/learn-angular/steps/5-control-flow-for/README.md @@ -1,16 +1,16 @@ -# Control Flow in Components - `@for` +# Control de flujo en componentes - `@for` -Often when building web applications, you need to repeat some code a specific number of times - for example, given an array of names, you may want to display each name in a `

    ` tag. +A menudo, al construir aplicaciones web, necesitas repetir algún código una cantidad específica de veces - por ejemplo, dado un arreglo de nombres, puede que quieras mostrar cada nombre en una etiqueta `

    `. -Note: Learn more about [control flow in the essentials guide](/essentials/templates#control-flow-with-if-and-for). +NOTA: Aprende más sobre [control de flujo en la guía esencial](/essentials/templates#control-flow-with-if-and-for). -In this activity, you'll learn how to use `@for` to repeat elements in a template. +En esta actividad, aprenderás cómo usar `@for` para repetir elementos en una plantilla.

    -The syntax that enables repeating elements in a template is `@for`. +La sintaxis que permite repetir elementos en una plantilla es `@for`. -Here's an example of how to use the `@for` syntax in a component: +Aquí hay un ejemplo de cómo usar la sintaxis `@for` en un componente: ```angular-ts @Component({ @@ -26,15 +26,15 @@ export class App { } ``` -Two things to take note of: +Dos cosas a tener en cuenta: -- There is an `@` prefix for the `for` because it is a special syntax called [Angular template syntax](guide/templates) -- For applications using v16 and older please refer to the [Angular documentation for NgFor](guide/directives/structural-directives) +- Hay un prefijo `@` para `for` porque es una sintaxis especial llamada [sintaxis de plantillas de Angular](guide/templates) +- Para aplicaciones que usan v16 y anteriores, consulta la [documentación de Angular para NgFor](guide/directives/structural-directives) - -In the `App` class, add a property called `users` that contains users and their names. + +En la clase `App`, agrega una propiedad llamada `users` que contenga usuarios y sus nombres. ```ts [{id: 0, name: 'Sarah'}, {id: 1, name: 'Amy'}, {id: 2, name: 'Rachel'}, {id: 3, name: 'Jessica'}, {id: 4, name: 'Poornima'}] @@ -42,8 +42,8 @@ In the `App` class, add a property called `users` that contains users and their - -Update the template to display each user name in a `p` element using the `@for` template syntax. + +Actualiza la plantilla para mostrar cada nombre de usuario en un elemento `p` usando la sintaxis de plantilla `@for`. ```angular-html @for (user of users; track user.id) { @@ -51,10 +51,10 @@ Update the template to display each user name in a `p` element using the `@for` } ``` -NOTE: the use of `track` is required, you may use the `id` or some other unique identifier. +NOTA: el uso de `track` es obligatorio, puedes usar el `id` o algún otro identificador único. -This type of functionality is called control flow. Next, you'll learn to customize and communicate with components - by the way, you're doing a great job so far. +Este tipo de funcionalidad se llama control de flujo. A continuación, aprenderás a personalizar y comunicarte con componentes - por cierto, lo estás haciendo muy bien hasta ahora. diff --git a/adev-es/src/content/tutorials/learn-angular/steps/6-property-binding/README.en.md b/adev-es/src/content/tutorials/learn-angular/steps/6-property-binding/README.en.md new file mode 100644 index 0000000..fd72fb0 --- /dev/null +++ b/adev-es/src/content/tutorials/learn-angular/steps/6-property-binding/README.en.md @@ -0,0 +1,48 @@ +# Property Binding in Angular + +Property binding in Angular enables you to set values for properties of HTML elements, Angular components and more. + +Use property binding to dynamically set values for properties and attributes. You can do things such as toggle button features, set image paths programmatically, and share values between components. + +Note: Learn more about [setting dynamic properties and attributes in the essentials guide](/essentials/templates#setting-dynamic-properties-and-attributes). + +In this activity, you'll learn how to use property binding in templates. + +
    + +To bind to an element's attribute, wrap the attribute name in square brackets. Here's an example: + +```angular-html +photo +``` + +In this example, the value of the `src` attribute will be bound to the class property `imageURL`. Whatever value `imageURL` has will be set as the `src` attribute of the `img` tag. + + + + +Update the code in `app.ts` by adding a property to the `App` class called `isEditable` with the initial value set to `true`. + + +export class App { + isEditable = true; +} + + + + +Next, bind the `contentEditable` attribute of the `div` to the `isEditable` property by using the [] syntax. + + +@Component({ + ... + template: `
    `, +}) +     +     + +     + +The div is now editable. Nice work 👍 + +Property binding is one of Angular's many powerful features. If you'd like to learn more checkout [the Angular documentation](guide/templates/property-binding). diff --git a/adev-es/src/content/tutorials/learn-angular/steps/6-property-binding/README.md b/adev-es/src/content/tutorials/learn-angular/steps/6-property-binding/README.md index fd72fb0..05626ea 100644 --- a/adev-es/src/content/tutorials/learn-angular/steps/6-property-binding/README.md +++ b/adev-es/src/content/tutorials/learn-angular/steps/6-property-binding/README.md @@ -1,27 +1,27 @@ -# Property Binding in Angular +# Enlace de propiedad en Angular -Property binding in Angular enables you to set values for properties of HTML elements, Angular components and more. +El enlace de propiedad en Angular te permite establecer valores para propiedades de elementos HTML, componentes de Angular y más. -Use property binding to dynamically set values for properties and attributes. You can do things such as toggle button features, set image paths programmatically, and share values between components. +Usa el enlace de propiedad para establecer dinámicamente valores de propiedades y atributos. Puedes hacer cosas como alternar funciones de botones, establecer rutas de imágenes programáticamente y compartir valores entre componentes. -Note: Learn more about [setting dynamic properties and attributes in the essentials guide](/essentials/templates#setting-dynamic-properties-and-attributes). +NOTA: Aprende más sobre [establecer propiedades y atributos dinámicos en la guía esencial](/essentials/templates#setting-dynamic-properties-and-attributes). -In this activity, you'll learn how to use property binding in templates. +En esta actividad, aprenderás cómo usar el enlace de propiedad en plantillas.
    -To bind to an element's attribute, wrap the attribute name in square brackets. Here's an example: +Para enlazar a un atributo de un elemento, envuelve el nombre del atributo entre corchetes. Aquí hay un ejemplo: ```angular-html photo ``` -In this example, the value of the `src` attribute will be bound to the class property `imageURL`. Whatever value `imageURL` has will be set as the `src` attribute of the `img` tag. +En este ejemplo, el valor del atributo `src` se enlazará a la propiedad de clase `imageURL`. Cualquier valor que tenga `imageURL` se establecerá como el atributo `src` de la etiqueta `img`. - -Update the code in `app.ts` by adding a property to the `App` class called `isEditable` with the initial value set to `true`. + +Actualiza el código en `app.ts` agregando una propiedad a la clase `App` llamada `isEditable` con el valor inicial establecido a `true`. export class App { @@ -30,8 +30,8 @@ export class App { - -Next, bind the `contentEditable` attribute of the `div` to the `isEditable` property by using the [] syntax. + +A continuación, enlaza el atributo `contentEditable` del `div` a la propiedad `isEditable` usando la sintaxis []. @Component({ @@ -43,6 +43,6 @@ Next, bind the `contentEditable` attribute of the `div` to the `isEditable` prop -The div is now editable. Nice work 👍 +El div ahora es editable. Buen trabajo 👍 -Property binding is one of Angular's many powerful features. If you'd like to learn more checkout [the Angular documentation](guide/templates/property-binding). +El enlace de propiedad es una de las características más poderosas de Angular. Si deseas aprender más, consulta [la documentación de Angular](guide/templates/property-binding). diff --git a/adev-es/src/content/tutorials/learn-angular/steps/7-event-handling/README.en.md b/adev-es/src/content/tutorials/learn-angular/steps/7-event-handling/README.en.md new file mode 100644 index 0000000..a1ba9df --- /dev/null +++ b/adev-es/src/content/tutorials/learn-angular/steps/7-event-handling/README.en.md @@ -0,0 +1,53 @@ +# Event handling + +Event handling enables interactive features on web apps. It gives you the ability as a developer to respond to user actions like button presses, form submissions and more. + +Note: Learn more about [handling user interaction in the essentials guide](/essentials/templates#handling-user-interaction). + +In this activity, you'll learn how to add an event handler. + +
    + +In Angular you bind to events with the parentheses syntax `()`. On a given element, wrap the event you want to bind to with parentheses and set an event handler. Consider this `button` example: + +```angular-ts +@Component({ + ... + template: `