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/en-US/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, 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:
40
+
41
+
<docs-codelanguage="ts"highlight="[3, 4]">
42
+
@Component({
43
+
selector: 'profile-photo',
44
+
templateUrl: 'profile-photo.html',
45
+
styleUrl: 'profile-photo.css',
46
+
})
47
+
export class ProfilePhoto { }
48
+
</docs-code>
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.
51
+
52
+
Both `templateUrl` and `styleUrl` are relative to the directory in which the component resides.
53
+
54
+
## Using components
55
+
56
+
Every component defines a [CSS selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors):
57
+
58
+
<docs-codelanguage="ts"highlight="[2]">
59
+
@Component({
60
+
selector: 'profile-photo',
61
+
...
62
+
})
63
+
export class ProfilePhoto { }
64
+
</docs-code>
65
+
66
+
See [Component Selectors](guide/components/selectors) for details about which types of selectors Angular supports and guidance on choosing a selector.
67
+
68
+
You use a component by creating a matching HTML element in the template of _other_ components:
69
+
70
+
<docs-codelanguage="ts"highlight="[4]">
71
+
@Component({
72
+
selector: 'user-profile',
73
+
template: `
74
+
<profile-photo />
75
+
<button>Upload a new profile photo</button>`,
76
+
...,
77
+
})
78
+
export class UserProfile { }
79
+
</docs-code>
80
+
81
+
See [Importing and using components](guide/components/importing) for details on how to reference and use other components in your template.
82
+
83
+
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.
84
+
85
+
The DOM rendered by a component, corresponding to that component's template, is called that
86
+
component's **view**.
87
+
88
+
In composing components in this way, **you can think of your Angular application as a tree of components**.
89
+
90
+
```mermaid
91
+
flowchart TD
92
+
A[AccountSettings]-->B
93
+
A-->C
94
+
B[UserProfile]-->D
95
+
B-->E
96
+
C[PaymentInfo]
97
+
D[ProfilePic]
98
+
E[UserBio]
99
+
```
100
+
101
+
102
+
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 Componentes"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/en-US/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/en-US/docs/Learn/CSS/Building_blocks/Selectors)que define cómo se utiliza el componente en 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
+
Usted proporciona 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, see the [Templates guide](guide/templates).
22
+
Para obtener más información 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. Éste 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="Su 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. Consulte [Estilos de Componentes](guide/components/styling)para obtener detalles sobre el enfoque de Angular para el estilo.
38
38
39
-
You can alternatively choose to write your template and styles in separate files:
39
+
Alternativamente, puede optar por escribir su plantilla y estilos en archivos separados:
40
40
41
41
<docs-codelanguage="ts"highlight="[3, 4]">
42
42
@Component({
@@ -47,13 +47,13 @@ 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 la _presentación_ del _comportamiento_ en su proyecto. Puede elegir un enfoque para todo su 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
+
## Usando Componentes
55
55
56
-
Every component defines a [CSS selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors):
56
+
Cada componente define un [selector CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors):
57
57
58
58
<docs-codelanguage="ts"highlight="[2]">
59
59
@Component({
@@ -63,29 +63,29 @@ Every component defines a [CSS selector](https://developer.mozilla.org/en-US/doc
63
63
export class ProfilePhoto { }
64
64
</docs-code>
65
65
66
-
See [Component Selectors](guide/components/selectors)for details about which types of selectors Angular supports and guidance on choosing a selector.
66
+
Consulte [Selectores de Componentes](guide/components/selectors)para conocer más detalles sobre qué tipos de selectores soporta Angular y orientación para eleguir un selector.
67
67
68
-
You use a component by creating a matching HTML element in the template of _other_ components:
68
+
Usa componente creando un elemento HTML correspondiente en la plantilla de _otros_ componentes.
69
69
70
70
<docs-codelanguage="ts"highlight="[4]">
71
71
@Component({
72
72
selector: 'user-profile',
73
73
template: `
74
74
<profile-photo />
75
-
<button>Upload a new profile photo</button>`,
75
+
<button>Cargar una nueva foto de perfil</button>`,
76
76
...,
77
77
})
78
78
export class UserProfile { }
79
79
</docs-code>
80
80
81
-
See [Importing and using components](guide/components/importing)for details on how to reference and use other components in your template.
81
+
Consulte [Importación y Uso de Componentes](guide/components/importing)para conocer más detalles sobre cómo referenciar y usar otros componentes en su template.
82
82
83
-
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.
83
+
Angular crea una instancia del componente por cada elemento HTML coincidente que encuentre. 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.
84
84
85
-
The DOM rendered by a component, corresponding to that component's template, is called that
86
-
component's **view**.
85
+
El DOM renderizado por un componente, correspondiente a la plantilla de ese componente,
86
+
se denomina **vista** de ese componente.
87
87
88
-
In composing components in this way, **you can think of your Angular application as a tree of components**.
88
+
Al componer componentes de esta manera, **puede pensar en su aplicación Angular como un árbol de componentes**.
89
89
90
90
```mermaid
91
91
flowchart TD
@@ -99,4 +99,4 @@ flowchart TD
99
99
```
100
100
101
101
102
-
This tree structure is important to understanding several other Angular concepts, including [dependency injection](guide/di) and [child queries](guide/components/queries).
102
+
Esta estructura en árbol es importante para comprender varios otros conceptos de Angular, incluyendo la [inyección de dependencias](guide/di) and [consultas de elementos secundarios](guide/components/queries).
0 commit comments