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
<docs-decorative-headertitle="Anatomy of a component"imgSrc="adev/src/assets/images/components.svg"> <!-- markdownlint-disable-line -->
2
+
</docs-decorative-header>
3
+
4
+
TIP: This guide assumes you've already read the [Essentials Guide](essentials). Read that first if you're new to Angular.
5
+
6
+
Every component must have:
7
+
8
+
* A TypeScript class with _behaviors_ such as handling user input and fetching data from a server
9
+
* An HTML template that controls what renders into the DOM
10
+
* A [CSS selector](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors) that defines how the component is used in HTML
11
+
12
+
You provide Angular-specific information for a component by adding a `@Component`[decorator](https://www.typescriptlang.org/docs/handbook/decorators.html) on top of the TypeScript class:
For full details on writing Angular templates, including data binding, event handling, and control flow, see the [Templates guide](guide/templates).
23
+
24
+
The object passed to the `@Component` decorator is called the component's **metadata**. This includes the `selector`, `template`, and other properties described throughout this guide.
25
+
26
+
Components can optionally include a list of CSS styles that apply to that component's DOM:
By default, a component's styles only affect elements defined in that component's template. See [Styling Components](guide/components/styling) for details on Angular's approach to styling.
38
+
39
+
You can alternatively choose to write your template and styles in separate files:
This can help separate the concerns of _presentation_ from _behavior_ in your project. You can choose one approach for your entire project, or you decide which to use for each component.
51
+
52
+
Both `templateUrl` and `styleUrl` are relative to the directory in which the component resides.
53
+
54
+
## Using components
55
+
56
+
### Imports in the `@Component` decorator
57
+
58
+
To use a component, [directive](guide/directives), or [pipe](guide/templates/pipes), you must add
59
+
it to the `imports` array in the `@Component` decorator:
60
+
61
+
```angular-ts
62
+
import {ProfilePhoto} from './profile-photo';
63
+
64
+
@Component({
65
+
// Import the `ProfilePhoto` component in
66
+
// order to use it in this component's template.
67
+
imports: [ProfilePhoto],
68
+
/* ... */
69
+
})
70
+
export class UserProfile { }
71
+
```
72
+
73
+
By default, Angular components are *standalone*, meaning that you can directly add them to the `imports` array of other components. Components created with an earlier version of Angular may instead specify `standalone: false` in their `@Component` decorator. For these components, you instead import the `NgModule` in which the component is defined. See the full [`NgModule` guide](guide/ngmodules) for details.
74
+
75
+
Important: In Angular versions before 19.0.0, the `standalone` option defaults to `false`.
76
+
77
+
### Showing components in a template
78
+
79
+
Every component defines a [CSS selector](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors):
80
+
81
+
<docs-codelanguage="angular-ts"highlight="[2]">
82
+
@Component({
83
+
selector: 'profile-photo',
84
+
...
85
+
})
86
+
export class ProfilePhoto { }
87
+
</docs-code>
88
+
89
+
See [Component Selectors](guide/components/selectors) for details about which types of selectors Angular supports and guidance on choosing a selector.
90
+
91
+
You show a component by creating a matching HTML element in the template of _other_ components:
92
+
93
+
<docs-codelanguage="angular-ts"highlight="[8]">
94
+
@Component({
95
+
selector: 'profile-photo',
96
+
})
97
+
export class ProfilePhoto { }
98
+
99
+
@Component({
100
+
imports: [ProfilePhoto],
101
+
template: `<profile-photo />`
102
+
})
103
+
export class UserProfile { }
104
+
</docs-code>
105
+
106
+
Angular creates an instance of the component for every matching HTML element it encounters. The DOM element that matches a component's selector is referred to as that component's **host element**. The contents of a component's template are rendered inside its host element.
107
+
108
+
The DOM rendered by a component, corresponding to that component's template, is called that
109
+
component's **view**.
110
+
111
+
In composing components in this way, **you can think of your Angular application as a tree of components**.
112
+
113
+
```mermaid
114
+
flowchart TD
115
+
A[AccountSettings]-->B
116
+
A-->C
117
+
B[UserProfile]-->D
118
+
B-->E
119
+
C[PaymentInfo]
120
+
D[ProfilePic]
121
+
E[UserBio]
122
+
```
123
+
124
+
125
+
This tree structure is important to understanding several other Angular concepts, including [dependency injection](guide/di) and [child queries](guide/components/queries).
<docs-decorative-headertitle="Anatomy of a component"imgSrc="adev/src/assets/images/components.svg"> <!-- markdownlint-disable-line -->
1
+
<docs-decorative-headertitle="Anatomía de un componente"imgSrc="adev/src/assets/images/components.svg"> <!-- markdownlint-disable-line -->
2
2
</docs-decorative-header>
3
3
4
-
TIP: This guide assumes you've already read the [Essentials Guide](essentials). Read that first if you're new to Angular.
4
+
SUGERENCIA: Esta guía asume que ya has leído [Guía de Esenciales](essentials). Lee eso primero si eres nuevo en Angular.
5
5
6
-
Every component must have:
6
+
Cada componente debe tener:
7
7
8
-
*A TypeScript class with _behaviors_ such as handling user input and fetching data from a server
9
-
*An HTML template that controls what renders into the DOM
10
-
*A [CSS selector](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors) that defines how the component is used in HTML
8
+
*Una clase TypeScript con _comportamientos_ como el manejo de la entrada del usuario y la obtención de datos desde un servidor
9
+
*Una plantilla HTML que controla lo que se renderiza en el DOM
10
+
*Un [selector CSS](https://developer.mozilla.org/es/docs/Learn_web_development/Core/Styling_basics/Basic_selectors) que define cómo se utiliza el componente en el HTML
11
11
12
-
You provide Angular-specific information for a component by adding a `@Component`[decorator](https://www.typescriptlang.org/docs/handbook/decorators.html)on top of the TypeScript class:
12
+
Puedes proporcionar información específica de Angular para un componente agregando un [decorador](https://www.typescriptlang.org/docs/handbook/decorators.html)`@Component` en la parte superior de la clase TypeScript:
template: `<img src="profile-photo.jpg" alt="Su foto de perfil">`,
18
18
})
19
19
export class ProfilePhoto { }
20
20
</docs-code>
21
21
22
-
For full details on writing Angular templates, including data binding, event handling, and control flow, see the [Templates guide](guide/templates).
22
+
Para más detalles sobre cómo escribir plantillas de Angular, consulte la [Guía de Plantillas](guide/templates).
23
23
24
-
The object passed to the`@Component`decorator is called the component's **metadata**. This includes the`selector`, `template`, and other properties described throughout this guide.
24
+
El objeto pasado al decorador`@Component`se llama **metadatos** del componente. Esto incluye el`selector`, `template`, y otras propiedades descritas a lo largo de esta guía.
25
25
26
-
Components can optionally include a list of CSS styles that apply to that component's DOM:
26
+
Los componentes pueden incluir opcionalmente una lista de estilos CSS que se aplican exclusivamente al DOM de ese componente.
template: `<img src="profile-photo.jpg" alt="Tu foto de perfil">`,
32
32
styles: `img { border-radius: 50%; }`,
33
33
})
34
34
export class ProfilePhoto { }
35
35
</docs-code>
36
36
37
-
By default, a component's styles only affect elements defined in that component's template. See [Styling Components](guide/components/styling)for details on Angular's approach to styling.
37
+
Por defecto, los estilos de un componente solo afectan a los elementos definidos en la plantilla de ese componente. Consulta [Estilos de Componentes](guide/components/styling)para detalles sobre el enfoque de Angular para el manejo de estilos
38
38
39
-
You can alternatively choose to write your template and styles in separate files:
39
+
Alternativamente, puedes elegir por escribir su plantilla y estilos en archivos separados:
@@ -47,36 +47,36 @@ You can alternatively choose to write your template and styles in separate files
47
47
export class ProfilePhoto { }
48
48
</docs-code>
49
49
50
-
This can help separate the concerns of _presentation_ from _behavior_ in your project. You can choose one approach for your entire project, or you decide which to use for each component.
50
+
Esto puede ayudar a separar las preocupaciones de _presentación_ del _comportamiento_ en tu proyecto. Puede elegir un enfoque para todo tu proyecto, o decidir cuál usar para cada componente.
51
51
52
-
Both`templateUrl`and `styleUrl` are relative to the directory in which the component resides.
52
+
Tanto`templateUrl`como `styleUrls` son relativos al directorio en el que reside el componente.
53
53
54
-
## Using components
54
+
## Usar Componentes
55
55
56
56
### Imports in the `@Component` decorator
57
57
58
-
To use a component, [directive](guide/directives), or[pipe](guide/templates/pipes), you must add
59
-
it to the `imports`array in the`@Component` decorator:
58
+
Para usar un component, [directive](guide/directives), o[pipe](guide/templates/pipes), debes agregarlo al arreglo de
59
+
`imports`en el decorador`@Component`:
60
60
61
61
```angular-ts
62
62
import {ProfilePhoto} from './profile-photo';
63
63
64
64
@Component({
65
-
// Import the `ProfilePhoto` component in
66
-
// order to use it in this component's template.
65
+
// Importa el componente `ProfilePhoto` para
66
+
// poder usarlo en la plantilla de este componente.
67
67
imports: [ProfilePhoto],
68
68
/* ... */
69
69
})
70
70
export class UserProfile { }
71
71
```
72
72
73
-
By default, Angular components are *standalone*, meaning that you can directly add them to the`imports`array of other components. Components created with an earlier version of Angular may instead specify `standalone: false`in their `@Component` decorator. For these components, you instead import the `NgModule`in which the component is defined. See the full [`NgModule` guide](guide/ngmodules)for details.
73
+
Por defecto, los componentes de Angular son *independientes* (standalone), lo que significa que puedes agregarlos directamente al arreglo`imports`de otros componentes. Los componentes creados con una versión anterior de Angular pueden especificar `standalone: false`en su decorador `@Component`. Para estos componentes, en su lugar importas el `NgModule`en el que está definido el componente. Consulta la [guía completa de `NgModule`](guide/ngmodules)para detalles.
74
74
75
-
Important: In Angular versions before 19.0.0, the `standalone`option defaults to`false`.
75
+
Importante: En versiones de Angular anteriores a 19.0.0, la opción `standalone`por defecto es`false`.
76
76
77
-
### Showing components in a template
77
+
### Mostrar componentes en una plantilla
78
78
79
-
Every component defines a [CSS selector](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors):
79
+
Todo componente define un[CSS selector](https://developer.mozilla.org/es/docs/Learn_web_development/Core/Styling_basics/Basic_selectors):
80
80
81
81
<docs-codelanguage="angular-ts"highlight="[2]">
82
82
@Component({
@@ -86,9 +86,9 @@ Every component defines a [CSS selector](https://developer.mozilla.org/docs/Lear
86
86
export class ProfilePhoto { }
87
87
</docs-code>
88
88
89
-
See [Component Selectors](guide/components/selectors)for details about which types of selectors Angular supports and guidance on choosing a selector.
89
+
Consulta [Selectores de Componentes](guide/components/selectors)para detalles sobre qué tipos de selectores soporta Angular y orientación sobre cómo elegir un selector.
90
90
91
-
You show a component by creating a matching HTML element in the template of _other_ components:
91
+
Muestras un componente creando un elemento HTML coincidente en la plantilla de _otros_ componentes:
92
92
93
93
<docs-codelanguage="angular-ts"highlight="[8]">
94
94
@Component({
@@ -103,12 +103,12 @@ export class ProfilePhoto { }
103
103
export class UserProfile { }
104
104
</docs-code>
105
105
106
-
Angular creates an instance of the component for every matching HTML element it encounters. The DOM element that matches a component's selector is referred to as that component's **host element**. The contents of a component's template are rendered inside its host element.
106
+
Angular crea una instancia del componente para cada elemento HTML coincidente que encuentra. El elemento DOM que coincide con el selector de un componente se conoce como el **elemento host** de ese componente. El contenido de la plantilla de un componente se renderiza dentro de su elemento host.
107
107
108
-
The DOM rendered by a component, corresponding to that component's template, is called that
109
-
component's **view**.
108
+
El DOM renderizado por un componente, correspondiente a la plantilla de ese componente, se llama la
109
+
**vista** de ese componente.
110
110
111
-
In composing components in this way, **you can think of your Angular application as a tree of components**.
111
+
Al componer componentes de esta manera, **puedes pensar en tu aplicación Angular como un árbol de componentes**.
112
112
113
113
```mermaid
114
114
flowchart TD
@@ -122,4 +122,4 @@ flowchart TD
122
122
```
123
123
124
124
125
-
This tree structure is important to understanding several other Angular concepts, including [dependency injection](guide/di)and [child queries](guide/components/queries).
125
+
Esta estructura de árbol es importante para entender varios otros conceptos de Angular, incluyendo [inyección de dependencias](guide/di)y [consultas de componentes hijos](guide/components/queries).
0 commit comments