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/signals`
4. `introduction/essentials/templates`
5. `introduction/essentials/dependency-injection`
6. `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 are the main building blocks of Angular applications. Each component represents a part of a larger web page. Organizing an application into components helps provide structure to your project, clearly separating code into specific parts that are easy to maintain and grow over time.
6
+
7
+
## Defining a component
8
+
9
+
Every component has a few main parts:
10
+
11
+
1. A `@Component`[decorator](https://www.typescriptlang.org/docs/handbook/decorators.html) that contains some configuration used by Angular.
12
+
2. An HTML template that controls what renders into the DOM.
13
+
3. A [CSS selector](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors) that defines how the component is used in HTML.
14
+
4. A TypeScript class with behaviors, such as handling user input or making requests to a server.
15
+
16
+
Here is a simplified example of a `UserProfile` component.
17
+
18
+
```angular-ts
19
+
// user-profile.ts
20
+
@Component({
21
+
selector: 'user-profile',
22
+
template: `
23
+
<h1>User profile</h1>
24
+
<p>This is the user profile page</p>
25
+
`,
26
+
})
27
+
export class UserProfile { /* Your component code goes here */ }
28
+
```
29
+
30
+
The `@Component` decorator also optionally accepts a `styles` property for any CSS you want to apply to your template:
31
+
32
+
```angular-ts
33
+
// user-profile.ts
34
+
@Component({
35
+
selector: 'user-profile',
36
+
template: `
37
+
<h1>User profile</h1>
38
+
<p>This is the user profile page</p>
39
+
`,
40
+
styles: `h1 { font-size: 3em; } `,
41
+
})
42
+
export class UserProfile { /* Your component code goes here */ }
43
+
```
44
+
45
+
### Separating HTML and CSS into separate files
46
+
47
+
You can define a component's HTML and CSS in separate files using `templateUrl` and `styleUrl`:
48
+
49
+
```angular-ts
50
+
// user-profile.ts
51
+
@Component({
52
+
selector: 'user-profile',
53
+
templateUrl: 'user-profile.html',
54
+
styleUrl: 'user-profile.css',
55
+
})
56
+
export class UserProfile {
57
+
// Component behavior is defined in here
58
+
}
59
+
```
60
+
61
+
```angular-html
62
+
<!-- user-profile.html -->
63
+
<h1>User profile</h1>
64
+
<p>This is the user profile page</p>
65
+
```
66
+
67
+
```css
68
+
/* user-profile.css */
69
+
h1 {
70
+
font-size: 3em;
71
+
}
72
+
```
73
+
74
+
## Using components
75
+
76
+
You build an application by composing multiple components together. For example, if you are building a user profile page, you might break the page up into several components like this:
77
+
78
+
```mermaid
79
+
flowchart TD
80
+
A[UserProfile]-->B
81
+
A-->C
82
+
B[UserBiography]-->D
83
+
C[ProfilePhoto]
84
+
D[UserAddress]
85
+
```
86
+
87
+
Here, the `UserProfile` component uses several other components to produce the final page.
88
+
89
+
To import and use a component, you need to:
90
+
1. In your component's TypeScript file, add an `import` statement for the component you want to use.
91
+
2. In your `@Component` decorator, add an entry to the `imports` array for the component you want to use.
92
+
3. In your component's template, add an element that matches the selector of the component you want to use.
93
+
94
+
Here's an example of a `UserProfile` component importing a `ProfilePhoto` component:
95
+
96
+
```angular-ts
97
+
// user-profile.ts
98
+
import {ProfilePhoto} from 'profile-photo.ts';
99
+
100
+
@Component({
101
+
selector: 'user-profile',
102
+
imports: [ProfilePhoto],
103
+
template: `
104
+
<h1>User profile</h1>
105
+
<profile-photo />
106
+
<p>This is the user profile page</p>
107
+
`,
108
+
})
109
+
export class UserProfile {
110
+
// Component behavior is defined in here
111
+
}
112
+
```
113
+
114
+
TIP: Want to know more about Angular components? See the [In-depth Components guide](guide/components) for the full details.
115
+
116
+
## Next Step
117
+
118
+
Now that you know how components work in Angular, it's time to learn how we add and manage dynamic data in our application.
119
+
120
+
<docs-pill-row>
121
+
<docs-pilltitle="Reactivity with signals"href="essentials/signals" />
El elemento fundamental para crear aplicaciones en Angular.
3
3
</docs-decorative-header>
4
4
5
-
Components are the main building blocks of Angular applications. Each component represents a part of a larger web page. Organizing an application into components helps provide structure to your project, clearly separating code into specific parts that are easy to maintain and grow over time.
5
+
Los componentes son los bloques principales de construcción de las aplicaciones Angular. Cada componente representa una parte de una página web más grande. Organizar una aplicación en componentes ayuda a proporcionar estructura a tu proyecto, separando claramente el código en partes específicas que son fáciles de mantener y crecer con el tiempo.
6
6
7
-
## Defining a component
7
+
## Definir un Componente
8
8
9
-
Every component has a few main parts:
9
+
Cada componente tiene algunas partes principales:
10
10
11
-
1.A `@Component`[decorator](https://www.typescriptlang.org/docs/handbook/decorators.html)that contains some configuration used by Angular.
12
-
2.An HTML template that controls what renders into the DOM.
13
-
3.A [CSS selector](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors)that defines how the component is used in HTML.
14
-
4.A TypeScript class with behaviors, such as handling user input or making requests to a server.
11
+
1.Un [decorador](https://www.typescriptlang.org/docs/handbook/decorators.html)`@Component` que contiene alguna configuración utilizada por Angular.
12
+
2.Una plantilla HTML que controla lo que se renderiza en el DOM.
13
+
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.
14
+
4.Una clase TypeScript con comportamientos, como manejar la entrada del usuario o hacer solicitudes a un servidor..
15
15
16
-
Here is a simplified example of a `UserProfile` component.
16
+
Aquí hay un ejemplo simplificado de un componente `UserProfile`.
17
17
18
18
```angular-ts
19
19
// user-profile.ts
20
20
@Component({
21
21
selector: 'user-profile',
22
22
template: `
23
-
<h1>User profile</h1>
24
-
<p>This is the user profile page</p>
23
+
<h1>Perfil de usuario</h1>
24
+
<p>Esta es la página del perfil de usuario</p>
25
25
`,
26
26
})
27
-
export class UserProfile { /* Your component code goes here */ }
27
+
export class UserProfile { /* Tu código del componente va aquí */ }
28
28
```
29
29
30
-
The `@Component`decorator also optionally accepts a`styles`property for any CSS you want to apply to your template:
30
+
El decorador `@Component`también acepta opcionalmente una propiedad`styles`para cualquier CSS que quieras aplicar a tu plantilla:
31
31
32
32
```angular-ts
33
33
// user-profile.ts
34
34
@Component({
35
35
selector: 'user-profile',
36
36
template: `
37
-
<h1>User profile</h1>
38
-
<p>This is the user profile page</p>
37
+
<h1>Perfil de usuario</h1>
38
+
<p>Esta es la página del perfil de usuario</p>
39
39
`,
40
40
styles: `h1 { font-size: 3em; } `,
41
41
})
42
-
export class UserProfile { /* Your component code goes here */ }
42
+
export class UserProfile { /* Tu código del componente va aquí */ }
43
43
```
44
44
45
-
### Separating HTML and CSS into separate files
45
+
### Separar HTML y CSS en archivos
46
46
47
-
You can define a component's HTML and CSS in separate files using `templateUrl`and`styleUrl`:
47
+
Puedes definir el HTML y CSS de un componente en archivos separados usando `templateUrl`y`styleUrl`:
48
48
49
49
```angular-ts
50
50
// user-profile.ts
@@ -54,26 +54,27 @@ You can define a component's HTML and CSS in separate files using `templateUrl`
54
54
styleUrl: 'user-profile.css',
55
55
})
56
56
export class UserProfile {
57
-
// Component behavior is defined in here
57
+
// El comportamiento del componente se define aquí
58
58
}
59
59
```
60
60
61
61
```angular-html
62
62
<!-- user-profile.html -->
63
-
<h1>User profile</h1>
64
-
<p>This is the user profile page</p>
63
+
<h1>Perfil del usuario</h1>
64
+
<p>Esta es la página del perfil de usuario</p>
65
65
```
66
66
67
67
```css
68
68
/* user-profile.css */
69
-
h1 {
70
-
font-size: 3em;
69
+
li {
70
+
color: red;
71
+
font-weight: 300;
71
72
}
72
73
```
73
74
74
-
## Using components
75
+
## Usar un Component
75
76
76
-
You build an application by composing multiple components together. For example, if you are building a user profile page, you might break the page up into several components like this:
77
+
Construyes una aplicación componiendo múltiples componentes juntos. Por ejemplo, si estás creando una página de perfil de usuario, podrías dividir la página en varios componentes como este:
77
78
78
79
```mermaid
79
80
flowchart TD
@@ -83,15 +84,18 @@ flowchart TD
83
84
C[ProfilePhoto]
84
85
D[UserAddress]
85
86
```
87
+
Aquí, el componente `UserProfile` utiliza varios otros componentes para generar la página final.
86
88
87
-
Here, the `UserProfile` component uses several other components to produce the final page.
89
+
Para importar y usar un componente, debes:
90
+
1. En el archivo TypeScript de tu componente, agregar una declaración `import` para el componente que deseas usar.
91
+
2. En el decorador `@Component`, agregar el componente que deseas usar al arreglo `imports`.
92
+
3. En la plantilla de tu componente, agregar un elemento que coincida con el selector del componente que deseas usar.
88
93
89
-
To import and use a component, you need to:
90
-
1. In your component's TypeScript file, add an `import` statement for the component you want to use.
91
-
2. In your `@Component` decorator, add an entry to the `imports` array for the component you want to use.
92
-
3. In your component's template, add an element that matches the selector of the component you want to use.
94
+
Aquí tienes un ejemplo del componente `UserProfile` que importa y utiliza el componente `ProfilePhoto`:
93
95
94
-
Here's an example of a `UserProfile` component importing a `ProfilePhoto` component:
96
+
```angular-ts
97
+
// user-profile.ts
98
+
import {ProfilePhoto} from 'profile-photo.ts';
95
99
96
100
```angular-ts
97
101
// user-profile.ts
@@ -101,23 +105,23 @@ import {ProfilePhoto} from 'profile-photo.ts';
101
105
selector: 'user-profile',
102
106
imports: [ProfilePhoto],
103
107
template: `
104
-
<h1>User profile</h1>
108
+
<h1>Perfil del usuario</h1>
105
109
<profile-photo />
106
-
<p>This is the user profile page</p>
110
+
<p>Esta es la página del perfil de usuario</p>
107
111
`,
108
112
})
109
113
export class UserProfile {
110
-
// Component behavior is defined in here
114
+
// El comportamiento del componente se define aquí
111
115
}
112
116
```
113
117
114
-
TIP: Want to know more about Angular components? See the [In-depth Components guide](guide/components)for the full details.
118
+
TIP: ¿Quieres saber más sobre los componentes en Angular? [Consulta la guía detallada de componentes](guide/components)para todos todos los detalles.
115
119
116
-
## Next Step
120
+
## Siguiente Paso
117
121
118
-
Now that you know how components work in Angular, it's time to learn how we add and manage dynamic data in our application.
122
+
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.
119
123
120
124
<docs-pill-row>
121
-
<docs-pilltitle="Reactivity with signals"href="essentials/signals" />
0 commit comments