You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Muy bien, [comencemos](/tutorials/learn-angular/1-components-in-angular).
14
14
15
-
## Using AI for Development
15
+
## Usando IA para desarrollo
16
16
17
-
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).
17
+
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).
Components are the foundational building blocks for any Angular application. Each component has three parts:
4
+
5
+
- TypeScript class
6
+
- HTML template
7
+
- CSS styles
8
+
9
+
Note: Learn more about [components in the essentials guide](/essentials/components).
10
+
11
+
In this activity, you'll learn how to update the template and styles of a component.
12
+
13
+
<hr />
14
+
15
+
This is a great opportunity for you to get started with Angular.
16
+
17
+
<docs-workflow>
18
+
19
+
<docs-steptitle="Update the component template">
20
+
Update the `template` property to read `Hello Universe`
21
+
22
+
```ts
23
+
template: `
24
+
Hello Universe
25
+
`,
26
+
```
27
+
28
+
When you changed the HTML template, the preview updated with your message. Let's go one step further: change the color of the text.
29
+
</docs-step>
30
+
31
+
<docs-steptitle="Update the component styles">
32
+
Update the styles value and change the `color` property from `blue` to `#a144eb`.
33
+
34
+
```ts
35
+
styles: `
36
+
:host {
37
+
color: #a144eb;
38
+
}
39
+
`,
40
+
```
41
+
42
+
When you check the preview, you'll find that the text color will be changed.
43
+
</docs-step>
44
+
45
+
</docs-workflow>
46
+
47
+
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.
Components are the foundational building blocks for any Angular application. Each component has three parts:
3
+
Los componentes son los bloques de construcción fundamentales para cualquier aplicación Angular. Cada componente tiene tres partes:
4
4
5
-
-TypeScript class
6
-
-HTML template
7
-
-CSS styles
5
+
-Clase TypeScript
6
+
-Plantilla HTML
7
+
-Estilos CSS
8
8
9
-
Note: Learn more about [components in the essentials guide](/essentials/components).
9
+
NOTA: Aprende más sobre [componentes en la guía esencial](/essentials/components).
10
10
11
-
In this activity, you'll learn how to update the template and styles of a component.
11
+
En esta actividad, aprenderás cómo actualizar la plantilla y los estilos de un componente.
12
12
13
13
<hr />
14
14
15
-
This is a great opportunity for you to get started with Angular.
15
+
Esta es una gran oportunidad para que comiences con Angular.
16
16
17
17
<docs-workflow>
18
18
19
-
<docs-steptitle="Update the component template">
20
-
Update the `template`property to read`Hello Universe`
19
+
<docs-steptitle="Actualiza la plantilla del componente">
20
+
Actualiza la propiedad `template`para que tenga el valor`Hello Universe`
21
21
22
22
```ts
23
23
template: `
24
24
Hello Universe
25
25
`,
26
26
```
27
27
28
-
When you changed the HTML template, the preview updated with your message. Let's go one step further: change the color of the text.
28
+
Cuando cambiaste la plantilla HTML, la vista previa se actualizó con tu mensaje. Vayamos un paso más allá: cambia el color del texto.
29
29
</docs-step>
30
30
31
-
<docs-steptitle="Update the component styles">
32
-
Update the styles value and change the`color`property from `blue`to`#a144eb`.
31
+
<docs-steptitle="Actualiza los estilos del componente">
32
+
Actualiza el valor de `styles` y cambia la propiedad`color`de `blue`a`#a144eb`.
33
33
34
34
```ts
35
35
styles: `
@@ -39,9 +39,9 @@ styles: `
39
39
`,
40
40
```
41
41
42
-
When you check the preview, you'll find that the text color will be changed.
42
+
Cuando revises la vista previa, verás que el color del texto ha cambiado.
43
43
</docs-step>
44
44
45
45
</docs-workflow>
46
46
47
-
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.
47
+
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.
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.
4
+
5
+
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.
6
+
7
+
Note: Learn more about [deferred loading with @defer in the in-depth guide](/guide/templates/defer).
8
+
9
+
In this activity, you'll learn how to use deferrable views to defer load a section of your component template.
10
+
11
+
<hr>
12
+
13
+
<docs-workflow>
14
+
15
+
<docs-steptitle="Add a `@defer` block around the comments component">
16
+
17
+
In your app, the blog post page has a comment component after the post details.
18
+
19
+
Wrap the comment component with a `@defer` block to defer load it.
20
+
21
+
```angular-html
22
+
@defer {
23
+
<comments />
24
+
}
25
+
```
26
+
27
+
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.
28
+
29
+
</docs-step>
30
+
31
+
<docs-steptitle="Add a placeholder">
32
+
33
+
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.
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.
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.
64
+
65
+
<docs-codelanguage="angular-html"highlight="[5]">
66
+
@defer {
67
+
<comments />
68
+
} @placeholder {
69
+
<p>Future comments</p>
70
+
} @loading (minimum 2s) {
71
+
<p>Loading comments...</p>
72
+
}
73
+
</docs-code>
74
+
75
+
</docs-step>
76
+
77
+
<docs-steptitle="Add a viewport trigger">
78
+
79
+
Deferrable views have a number of trigger options. Add a viewport trigger so the content will defer load once it enters the viewport.
80
+
81
+
<docs-codelanguage="angular-html"highlight="[1]">
82
+
@defer (on viewport) {
83
+
<comments />
84
+
}
85
+
</docs-code>
86
+
87
+
</docs-step>
88
+
89
+
<docs-steptitle="Add content">
90
+
91
+
A viewport trigger is best used when you're deferring content that's far enough down the page that it needs to be scrolled to see. So let's add some content to our blog post. You can either write your own, or you can copy the content below and put it inside the `<article>` element.
92
+
93
+
<docs-codelanguage="html"highlight="[1]">
94
+
<article>
95
+
<p>Angular is my favorite framework, and this is why. Angular has the coolest deferrable view feature that makes defer loading content the easiest and most ergonomic it could possibly be. The Angular community is also filled with amazing contributors and experts that create excellent content. The community is welcoming and friendly, and it really is the best community out there.</p>
96
+
<p>I can't express enough how much I enjoy working with Angular. It offers the best developer experience I've ever had. I love that the Angular team puts their developers first and takes care to make us very happy. They genuinely want Angular to be the best framework it can be, and they're doing such an amazing job at it, too. This statement comes from my heart and is not at all copied and pasted. In fact, I think I'll say these exact same things again a few times.</p>
97
+
<p>Angular is my favorite framework, and this is why. Angular has the coolest deferrable view feature that makes defer loading content the easiest and most ergonomic it could possibly be. The Angular community is also filled with amazing contributors and experts that create excellent content. The community is welcoming and friendly, and it really is the best community out there.</p>
98
+
<p>I can't express enough how much I enjoy working with Angular. It offers the best developer experience I've ever had. I love that the Angular team puts their developers first and takes care to make us very happy. They genuinely want Angular to be the best framework it can be, and they're doing such an amazing job at it, too. This statement comes from my heart and is not at all copied and pasted. In fact, I think I'll say these exact same things again a few times.</p>
99
+
<p>Angular is my favorite framework, and this is why. Angular has the coolest deferrable view feature that makes defer loading content the easiest and most ergonomic it could possibly be. The Angular community is also filled with amazing contributors and experts that create excellent content. The community is welcoming and friendly, and it really is the best community out there.</p>
100
+
<p>I can't express enough how much I enjoy working with Angular. It offers the best developer experience I've ever had. I love that the Angular team puts their developers first and takes care to make us very happy. They genuinely want Angular to be the best framework it can be, and they're doing such an amazing job at it, too. This statement comes from my heart and is not at all copied and pasted.</p>
101
+
</article>
102
+
</docs-code>
103
+
104
+
Once you've added this code, now scroll down to see the deferred content load once you scroll it into the viewport.
105
+
106
+
</docs-step>
107
+
108
+
</docs-workflow>
109
+
110
+
In the activity, you've learned how to use deferrable views in your applications. Great work. 🙌
111
+
112
+
There's even more you can do with them, like different triggers, prefetching, and `@error` blocks.
113
+
114
+
If you would like to learn more, check out the [documentation for Deferrable views](guide/defer).
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.
3
+
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.
4
4
5
-
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.
5
+
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).
6
6
7
-
Note: Learn more about [deferred loading with@deferin the in-depth guide](/guide/templates/defer).
7
+
NOTA: Aprende más sobre [carga diferida con@deferen la guía detallada](/guide/templates/defer).
8
8
9
-
In this activity, you'll learn how to use deferrable views to defer load a section of your component template.
9
+
En esta actividad, aprenderás cómo usar vistas diferibles para cargar de forma diferida una sección de la plantilla de tu componente.
10
10
11
11
<hr>
12
12
13
13
<docs-workflow>
14
14
15
-
<docs-steptitle="Add a `@defer` block around the comments component">
15
+
<docs-steptitle="Agrega un bloque `@defer` alrededor del componente de comentarios">
16
16
17
-
In your app, the blog post page has a comment component after the post details.
17
+
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.
18
18
19
-
Wrap the comment component with a `@defer`block to defer load it.
19
+
Envuelve el componente de comentarios con un bloque `@defer`para cargarlo de forma diferida.
20
20
21
21
```angular-html
22
22
@defer {
23
23
<comments />
24
24
}
25
25
```
26
26
27
-
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.
27
+
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.
28
28
29
29
</docs-step>
30
30
31
-
<docs-steptitle="Add a placeholder">
31
+
<docs-steptitle="Agrega un placeholder">
32
32
33
-
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.
33
+
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.
@@ -42,9 +42,9 @@ Add a `@placeholder` block to the `@defer` block. The `@placeholder` block is wh
42
42
43
43
</docs-step>
44
44
45
-
<docs-steptitle="Add a loading block">
45
+
<docs-steptitle="Agrega un bloque de carga (loading)">
46
46
47
-
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.
47
+
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.
@@ -58,9 +58,9 @@ Add a `@loading` block to the `@defer` block. The `@loading` block is where you
58
58
59
59
</docs-step>
60
60
61
-
<docs-steptitle="Add a minimum duration">
61
+
<docs-steptitle="Agrega una duración mínima">
62
62
63
-
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.
63
+
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.
64
64
65
65
<docs-codelanguage="angular-html"highlight="[5]">
66
66
@defer {
@@ -74,9 +74,9 @@ Both `@placeholder` and `@loading` sections have optional parameters to prevent
74
74
75
75
</docs-step>
76
76
77
-
<docs-steptitle="Add a viewport trigger">
77
+
<docs-steptitle="Agrega un disparador de viewport">
78
78
79
-
Deferrable views have a number of trigger options. Add a viewport trigger so the content will defer load once it enters the viewport.
79
+
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.
80
80
81
81
<docs-codelanguage="angular-html"highlight="[1]">
82
82
@defer (on viewport) {
@@ -86,9 +86,9 @@ Deferrable views have a number of trigger options. Add a viewport trigger so the
86
86
87
87
</docs-step>
88
88
89
-
<docs-steptitle="Add content">
89
+
<docs-steptitle="Agrega contenido">
90
90
91
-
A viewport trigger is best used when you're deferring content that's far enough down the page that it needs to be scrolled to see. So let's add some content to our blog post. You can either write your own, or you can copy the content below and put it inside the`<article>` element.
91
+
Un disparador de viewport se usa mejor cuando estás difiriendo contenido que está lo suficientemente abajo en la página como para que necesite ser desplazado para verse. Así que agreguemos algo de contenido a nuestra publicación del blog. Puedes escribir el tuyo propio, o puedes copiar el contenido de abajo y ponerlo dentro del elemento`<article>`.
92
92
93
93
<docs-codelanguage="html"highlight="[1]">
94
94
<article>
@@ -101,14 +101,14 @@ A viewport trigger is best used when you're deferring content that's far enough
101
101
</article>
102
102
</docs-code>
103
103
104
-
Once you've added this code, now scroll down to see the deferred content load once you scroll it into the viewport.
104
+
Una vez que hayas agregado este código, desplázate hacia abajo para ver el contenido diferido cargarse cuando lo despliegues dentro del viewport.
105
105
106
106
</docs-step>
107
107
108
108
</docs-workflow>
109
109
110
-
In the activity, you've learned how to use deferrable views in your applications. Great work. 🙌
110
+
En esta actividad, has aprendido cómo usar vistas diferibles en tus aplicaciones. Excelente trabajo. 🙌
111
111
112
-
There's even more you can do with them, like different triggers, prefetching, and `@error` blocks.
112
+
Hay aún más que puedes hacer con ellas, como diferentes disparadores, precarga (prefetching) y bloques `@error`.
113
113
114
-
If you would like to learn more, check out the [documentation for Deferrable views](guide/defer).
114
+
Si deseas aprender más, consulta la [documentación sobre vistas diferibles (Deferrable views)](guide/defer).
0 commit comments