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
Translations for the following guides
1. `introduction/essentials/overview`
2. `introduction/essentials/components`
3. `introduction/essentials/managing-dynamic-data`
4. `introduction/essentials/rendering-dynamic-templates`
5. `introduction/essentials/conditionals-and-loops`
6. `introduction/essentials/handling-user-interaction`
7. `introduction/essentials/sharing-logic`
8. `introduction/essentials/next-steps`
These translations include changes on the `sub-navigations-data.ts` file as well.
Fixes#12
The fundamental building block for creating applications in Angular.
3
+
</docs-decorative-header>
4
+
5
+
Components provide structure for organizing your project into easy-to-understand parts with clear responsibilities so that your code is maintainable and scalable.
6
+
7
+
Here is an example of how a Todo application could be broken down into a tree of components.
8
+
9
+
```mermaid
10
+
flowchart TD
11
+
A[TodoApp]-->B
12
+
A-->C
13
+
B[TodoList]-->D
14
+
C[TodoMetrics]
15
+
D[TodoListItem]
16
+
```
17
+
18
+
In this guide, we'll take a look at how to create and use components in Angular.
19
+
20
+
## Defining a Component
21
+
22
+
Every component has the following core properties:
23
+
24
+
1. A `@Component`[decorator](https://www.typescriptlang.org/docs/handbook/decorators.html) that contains some configuration
25
+
2. An HTML template that controls what renders into the DOM
26
+
3. A [CSS selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) that defines how the component is used in HTML
27
+
4. A TypeScript class with behaviors such as managing state, handling user input, or fetching data from a server.
28
+
29
+
Here is a simplified example of a TodoListItem component.
30
+
31
+
```ts
32
+
// todo-list-item.component.ts
33
+
@Component({
34
+
selector: 'todo-list-item',
35
+
template: `
36
+
<li>(TODO) Read Angular Essentials Guide</li>
37
+
`,
38
+
})
39
+
exportclassTodoListItem {
40
+
/* Component behavior is defined in here */
41
+
}
42
+
```
43
+
44
+
Other common metadata that you'll also see in components include:
45
+
46
+
-`standalone: true` — The recommended approach of streamlining the authoring experience of components
47
+
-`styles` — A string or array of strings that contains any CSS styles you want applied to the component
48
+
49
+
Knowing this, here is an updated version of our `TodoListItem` component.
50
+
51
+
```ts
52
+
// todo-list-item.component.ts
53
+
@Component({
54
+
standalone: true,
55
+
selector: 'todo-list-item',
56
+
template: `
57
+
<li>(TODO) Read Angular Essentials Guide</li>
58
+
`,
59
+
styles: `
60
+
li {
61
+
color: red;
62
+
font-weight: 300;
63
+
}
64
+
`,
65
+
})
66
+
exportclassTodoListItem {
67
+
/* Component behavior is defined in here */
68
+
}
69
+
```
70
+
71
+
### Separating HTML and CSS into separate files
72
+
73
+
For teams that prefer managing their HTML and/or CSS in separate files, Angular provides two additional properties: `templateUrl` and `styleUrl`.
74
+
75
+
Using the previous `TodoListItem` component, the alternative approach looks like:
76
+
77
+
```ts
78
+
// todo-list-item.component.ts
79
+
@Component({
80
+
standalone: true,
81
+
selector: 'todo-list-item',
82
+
templateUrl: './todo-list-item.component.html',
83
+
styleUrl: './todo-list-item.component.css',
84
+
})
85
+
exportclassTodoListItem {
86
+
/* Component behavior is defined in here */
87
+
}
88
+
```
89
+
90
+
```html
91
+
<!-- todo-list-item.component.html -->
92
+
<li>(TODO) Read Angular Essentials Guide</li>
93
+
```
94
+
95
+
```css
96
+
// todo-list-item.component.css
97
+
li {
98
+
color: red;
99
+
font-weight: 300;
100
+
}
101
+
```
102
+
103
+
## Using a Component
104
+
105
+
One advantage of component architecture is that your application is modular. In other words, components can be used in other components.
106
+
107
+
To use a component, you need to:
108
+
109
+
1. Import the component into the file
110
+
2. Add it to the component's `imports` array
111
+
3. Use the component's selector in the `template`
112
+
113
+
Here's an example of a `TodoList` component importing the `TodoListItem` component from before:
El elemento fundamental para crear aplicaciones en Angular.
3
3
</docs-decorative-header>
4
4
5
-
Components provide structure for organizing your project into easy-to-understand parts with clear responsibilities so that your code is maintainable and scalable.
5
+
Los componentes proporcionan la estructura para organizar su proyecto en partes fáciles de entender con responsabilidades claras para que su código sea mantenible y escalable.
6
6
7
-
Here is an example of how a Todo application could be broken down into a tree of components.
7
+
Aquí hay un ejemplo de cómo una aplicación de Tareas Pendientes (ToDo en inglés) se podría dividir en un árbol de componentes.
8
8
9
9
```mermaid
10
10
flowchart TD
@@ -15,46 +15,46 @@ flowchart TD
15
15
D[TodoListItem]
16
16
```
17
17
18
-
In this guide, we'll take a look at how to create and use components in Angular.
18
+
En esta guía, veremos cómo crear y usar componentes en Angular.
19
19
20
-
## Defining a Component
20
+
## Definiendo un Componente
21
21
22
-
Every component has the following core properties:
22
+
Cada componente tiene las siguientes propiedades principales:
23
23
24
-
1.A `@Component`[decorator](https://www.typescriptlang.org/docs/handbook/decorators.html)that contains some configuration
25
-
2.An HTML template that controls what renders into the DOM
26
-
3.A [CSS selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors)that defines how the component is used in HTML
27
-
4.A TypeScript class with behaviors such as managing state, handling user input, or fetching data from a server.
2.Una plantilla HTML que controla lo que se renderiza en el DOM
26
+
3.Un [selector CSS ](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors)que define cómo se usa el componente en HTML
27
+
4.Una clase de TypeScript con comportamientos como gestión de estado, manejo de entrada de usuario o recuperación de datos de un servidor.
28
28
29
-
Here is a simplified example of a TodoListItem component.
29
+
Aquí hay un ejemplo simplificado de un componente TodoListItem.
30
30
31
31
```ts
32
32
// todo-list-item.component.ts
33
33
@Component({
34
34
selector: 'todo-list-item',
35
35
template: `
36
-
<li>(TODO) Read Angular Essentials Guide</li>
36
+
<li>(TODO) Lea la guía de Angular Essentials</li>
37
37
`,
38
38
})
39
39
exportclassTodoListItem {
40
-
/*Component behavior is defined in here*/
40
+
/*El comportamiento de los componentes se define aquí*/
41
41
}
42
42
```
43
43
44
-
Other common metadata that you'll also see in components include:
44
+
Otros metadatos comunes que también verás en los componentes incluyen:
45
45
46
-
-`standalone: true` — The recommended approach of streamlining the authoring experience of components
47
-
-`styles` — A string or array of strings that contains any CSS styles you want applied to the component
46
+
-`standalone: true` — El enfoque recomendado para simplificar la experiencia de creación de componentes
47
+
-`styles` — Una cadena o matriz de cadenas que contiene cualquier estilo CSS que desee aplicar al componente
48
48
49
-
Knowing this, here is an updated version of our `TodoListItem` component.
49
+
Sabiendo esto, aquí hay una versión actualizada de nuestro componente `TodoListItem`.
50
50
51
51
```ts
52
52
// todo-list-item.component.ts
53
53
@Component({
54
54
standalone: true,
55
55
selector: 'todo-list-item',
56
56
template: `
57
-
<li>(TODO) Read Angular Essentials Guide</li>
57
+
<li>(TODO) Lea la guía de Angular Essentials</li>
58
58
`,
59
59
styles: `
60
60
li {
@@ -64,15 +64,15 @@ Knowing this, here is an updated version of our `TodoListItem` component.
64
64
`,
65
65
})
66
66
exportclassTodoListItem {
67
-
/*Component behavior is defined in here*/
67
+
/*El comportamiento de los componentes se define aquí*/
68
68
}
69
69
```
70
70
71
-
### Separating HTML and CSS into separate files
71
+
### Separando HTML y CSS en archivos separados
72
72
73
-
For teams that prefer managing their HTML and/or CSS in separate files, Angular provides two additional properties: `templateUrl`and`styleUrl`.
73
+
Para los equipos que prefieren administrar su HTML y/o CSS en archivos separados, Angular proporciona dos propiedades adicionales: `templateUrl`y`styleUrl`.
74
74
75
-
Using the previous`TodoListItem`component, the alternative approach looks like:
75
+
Usando el componente`TodoListItem`anterior, el enfoque alternativo se ve así:
76
76
77
77
```ts
78
78
// todo-list-item.component.ts
@@ -83,13 +83,13 @@ Using the previous `TodoListItem` component, the alternative approach looks like
83
83
styleUrl: './todo-list-item.component.css',
84
84
})
85
85
exportclassTodoListItem {
86
-
/*Component behavior is defined in here*/
86
+
/*El comportamiento de los componentes se define aquí*/
87
87
}
88
88
```
89
89
90
90
```html
91
91
<!-- todo-list-item.component.html -->
92
-
<li>(TODO) Read Angular Essentials Guide</li>
92
+
<li>(TODO) Lea la guía de Angular Essentials</li>
93
93
```
94
94
95
95
```css
@@ -100,17 +100,17 @@ li {
100
100
}
101
101
```
102
102
103
-
## Using a Component
103
+
## Usando un Component
104
104
105
-
One advantage of component architecture is that your application is modular. In other words, components can be used in other components.
105
+
Una ventaja de la arquitectura de componentes es que su aplicación es modular. En otras palabras, los componentes se pueden usar en otros componentes.
106
106
107
-
To use a component, you need to:
107
+
Para usar un componente, necesitas:
108
108
109
-
1.Import the component into the file
110
-
2.Add it to the component's `imports` array
111
-
3.Use the component's selector in the `template`
109
+
1.Importar el componente en el archivo
110
+
2.Añadirlo a la matriz de `importaciones` del componente
111
+
3.Utilice el selector del componente en la `plantilla`
112
112
113
-
Here's an example of a `TodoList`component importing the`TodoListItem`component from before:
113
+
Aquí hay un ejemplo del componente `TodoList`importando el componente`TodoListItem`de antes:
114
114
115
115
```ts
116
116
// todo-list.component.ts
@@ -128,10 +128,10 @@ import {TodoListItem} from './todo-list-item.component.ts';
128
128
exportclassTodoList {}
129
129
```
130
130
131
-
## Next Step
131
+
## Siguiente Paso
132
132
133
-
Now that you know how components work in Angular, it's time to learn how we add and manage dynamic data in our application.
133
+
Ahora que sabe cómo funcionan los componentes en Angular, es hora de aprender cómo agregamos y gestionamos los datos dinámicos en nuestra aplicación.
0 commit comments