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
Within a template, you can use special syntax to leverage many of Angular's features.
5
+
6
+
7
+
## Prerequisites
8
+
9
+
Before learning template syntax, you should be familiar with the following:
10
+
11
+
*[Angular concepts](guide/architecture)
12
+
* JavaScript
13
+
* HTML
14
+
* CSS
15
+
16
+
17
+
<!-- Do we still need the following section? It seems more relevant to those coming from AngularJS, which is now 7 versions ago. -->
18
+
<!-- You may be familiar with the component/template duality from your experience with model-view-controller (MVC) or model-view-viewmodel (MVVM).
19
+
In Angular, the component plays the part of the controller/viewmodel, and the template represents the view. -->
20
+
21
+
<hr />
22
+
23
+
Each Angular template in your app is a section of HTML that you can include as a part of the page that the browser displays.
24
+
An Angular HTML template renders a view, or user interface, in the browser, just like regular HTML, but with a lot more functionality.
25
+
26
+
When you generate an Angular app with the Angular CLI, the `app.component.html` file is the default template containing placeholder HTML.
27
+
28
+
The template syntax guides show you how you can control the UX/UI by coordinating data between the class and the template.
29
+
30
+
<divclass="is-helpful alert">
31
+
32
+
Most of the Template Syntax guides have dedicated working example apps that demonstrate the individual topic of each guide.
33
+
To see all of them working together in one app, see the comprehensive <live-exampletitle="Template Syntax Live Code"></live-example>.
34
+
35
+
</div>
36
+
37
+
38
+
## Empower your HTML
39
+
40
+
With special Angular syntax in your templates, you can extend the HTML vocabulary of your apps.
41
+
For example, Angular helps you get and set DOM (Document Object Model) values dynamically with features such as built-in template functions, variables, event listening, and data binding.
42
+
43
+
Almost all HTML syntax is valid template syntax.
44
+
However, because an Angular template is part of an overall webpage, and not the entire page, you don't need to include elements such as `<html>`, `<body>`, or `<base>`.
45
+
You can focus exclusively on the part of the page you are developing.
46
+
47
+
48
+
<divclass="alert is-important">
49
+
50
+
To eliminate the risk of script injection attacks, Angular does not support the `<script>` element in templates.
51
+
Angular ignores the `<script>` tag and outputs a warning to the browser console.
52
+
For more information, see the [Security](guide/security) page.
53
+
54
+
</div>
55
+
56
+
<hr />
57
+
58
+
## More on template syntax
59
+
60
+
You may also be interested in the following:
61
+
62
+
*[Interpolation](guide/interpolation)—learn how to use interpolation and expressions in HTML.
63
+
*[Template statements](guide/template-statements)—respond to events in your templates.
64
+
*[Binding syntax](guide/binding-syntax)—use binding to coordinate values in your app.
65
+
*[Property binding](guide/property-binding)—set properties of target elements or directive `@Input()` decorators.
66
+
*[Attribute, class, and style bindings](guide/attribute-binding)—set the value of attributes, classes, and styles.
67
+
*[Event binding](guide/event-binding)—listen for events and your HTML.
68
+
*[Two-way binding](guide/two-way-binding)—share data between a class and its template.
69
+
*[Built-in directives](guide/built-in-directives)—listen to and modify the behavior and layout of HTML.
70
+
*[Template reference variables](guide/template-reference-variables)—use special variables to reference a DOM element within a template.
71
+
*[Inputs and Outputs](guide/inputs-outputs)—share data between the parent context and child directives or components
72
+
*[Template expression operators](guide/template-expression-operators)—learn about the pipe operator, `|`, and protect against `null` or `undefined` values in your HTML.
73
+
*[SVG in templates](guide/svg-in-templates)—dynamically generate interactive graphics.
Within a template, you can use special syntax to leverage many of Angular's features.
3
+
En Angular, una *plantilla* es un fragmento de HTML.
4
+
Dentro de una plantilla, puedes usar una sintaxis especial para aprovechar muchas de las características de Angular.
5
5
6
6
7
-
## Prerequisites
7
+
## Prerrequisitos
8
8
9
-
Before learning template syntax, you should be familiar with the following:
9
+
Antes de aprender la sintaxis de la plantilla, debes estar familiarizado con lo siguiente:
10
10
11
-
*[Angular concepts](guide/architecture)
11
+
*[Conceptos de Angular](guide/architecture)
12
12
* JavaScript
13
13
* HTML
14
14
* CSS
@@ -20,54 +20,55 @@ In Angular, the component plays the part of the controller/viewmodel, and the te
20
20
21
21
<hr />
22
22
23
-
Each Angular template in your app is a section of HTML that you can include as a part of the page that the browser displays.
24
-
An Angular HTML template renders a view, or user interface, in the browser, just like regular HTML, but with a lot more functionality.
23
+
Cada plantilla Angular de tu aplicación es una sección de HTML que puedes incluir como parte de la página que muestra el navegador.
24
+
Una plantilla HTML Angular muestra una vista, o interfaz de usuario, en el navegador, como HTML normal, pero con mucha más funcionalidad.
25
25
26
-
When you generate an Angular app with the Angular CLI, the `app.component.html` file is the default template containing placeholder HTML.
26
+
Cuando generas una aplicación Angular con Angular CLI, el archivo `app.component.html` es la plantilla predeterminada que contiene HTML de marcador de posición.
27
+
28
+
Las guías de sintaxis de la plantilla te muestran cómo puedes controlar la UX/UI coordinando los datos entre la clase y la plantilla.
27
29
28
-
The template syntax guides show you how you can control the UX/UI by coordinating data between the class and the template.
29
30
30
31
<divclass="is-helpful alert">
31
32
32
-
Most of the Template Syntax guides have dedicated working example apps that demonstrate the individual topic of each guide.
33
-
To see all of them working together in one app, see the comprehensive <live-exampletitle="Template Syntax Live Code"></live-example>.
33
+
La mayoría de las guías de sintaxis de plantillas tienen aplicaciones de ejemplo de trabajo dedicadas que demuestran el tema individual de cada guía.
34
+
Para verlos a todos trabajando juntos en una aplicación, consulta al completo<live-exampletitle="Template Syntax Live Code"></live-example>.
34
35
35
36
</div>
36
37
37
38
38
-
## Empower your HTML
39
+
## Potencia tu HTML
39
40
40
-
With special Angular syntax in your templates, you can extend the HTML vocabulary of your apps.
41
-
For example, Angular helps you get and set DOM (Document Object Model) values dynamically with features such as built-in template functions, variables, event listening, and data binding.
41
+
Con una sintaxis Angular especial en tus plantillas, puedes ampliar el vocabulario HTML de tus aplicaciones.
42
+
Por ejemplo, Angular te ayuda a obtener y establecer valores DOM (Document Object Model) dinámicamente con características como funciones de plantilla integradas, variables, escucha de eventos y enlace de datos.
42
43
43
-
Almost all HTML syntax is valid template syntax.
44
-
However, because an Angular template is part of an overall webpage, and not the entire page, you don't need to include elements such as `<html>`, `<body>`, or`<base>`.
45
-
You can focus exclusively on the part of the page you are developing.
44
+
Casi toda la sintaxis HTML es una sintaxis de plantilla válida.
45
+
Sin embargo, debido a que una plantilla Angular es parte de una página web general, y no de toda la página, no es necesario incluir elementos como `<html>`, `<body>` o`<base>`.
46
+
Puedes centrarte exclusivamente en la parte de la página que estás desarrollando.
46
47
47
48
48
49
<divclass="alert is-important">
49
50
50
-
To eliminate the risk of script injection attacks, Angular does not support the`<script>`element in templates.
51
-
Angular ignores the `<script>`tag and outputs a warning to the browser console.
52
-
For more information, see the [Security](guide/security) page.
51
+
Para eliminar el riesgo de ataques de inyección de scripts, Angular no admite el elemento`<script>`en las plantillas.
52
+
Angular ignora la etiqueta `<script>`y envía una advertencia a la consola del navegador.
53
+
Para obtener más información, consulta la página [Seguridad](guide/security).
53
54
54
55
</div>
55
56
56
57
<hr />
57
58
58
-
## More on template syntax
59
-
60
-
You may also be interested in the following:
61
-
62
-
*[Interpolation](guide/interpolation)—learn how to use interpolation and expressions in HTML.
63
-
*[Template statements](guide/template-statements)—respond to events in your templates.
64
-
*[Binding syntax](guide/binding-syntax)—use binding to coordinate values in your app.
65
-
*[Property binding](guide/property-binding)—set properties of target elements or directive `@Input()` decorators.
66
-
*[Attribute, class, and style bindings](guide/attribute-binding)—set the value of attributes, classes, and styles.
67
-
*[Event binding](guide/event-binding)—listen for events and your HTML.
68
-
*[Two-way binding](guide/two-way-binding)—share data between a class and its template.
69
-
*[Built-in directives](guide/built-in-directives)—listen to and modify the behavior and layout of HTML.
70
-
*[Template reference variables](guide/template-reference-variables)—use special variables to reference a DOM element within a template.
71
-
*[Inputs and Outputs](guide/inputs-outputs)—share data between the parent context and child directives or components
72
-
*[Template expression operators](guide/template-expression-operators)—learn about the pipe operator, `|`, and protect against `null` or `undefined` values in your HTML.
73
-
*[SVG in templates](guide/svg-in-templates)—dynamically generate interactive graphics.
59
+
## Más sobre la sintaxis de la plantilla
60
+
61
+
También te puede interesar lo siguiente:
62
+
63
+
*[Interpolación](guide/interpolation)—aprende a utilizar la interpolación y las expresiones en HTML.
64
+
*[Declaraciones de plantilla](guide/template-statements)—responde a eventos en sus plantillas.
65
+
*[Sintaxis de enlace](guide/binding-syntax)—utiliza el enlace para coordinar valores en su aplicación.
66
+
*[Vinculación de propiedad](guide/property-binding)—establece las propiedades de los elementos de destino o los decoradores de la directiva `@Input()`.
67
+
*[Vinculaciones de atributos, clases y estilos](guide/attribute-binding)—establece el valor de atributos, clases y estilos.
68
+
*[Enlace de eventos](guide/event-binding)—escucha los eventos y tu HTML.
69
+
*[Enlace bidireccional](guide/two-way-binding)—comparte datos entre una clase y su plantilla.
70
+
*[Directivas integradas](guide/built-in-directives)—escucha y modifica el comportamiento y el diseño del HTML.
71
+
*[Variables de referencia de plantilla](guide/template-reference-variables)—usa variables especiales para hacer referencia a un elemento DOM dentro de una plantilla.
72
+
*[Entradas y salidas](guide/inputs-outputs)—comparte datos entre el contexto principal y las directivas o componentes secundarios
73
+
*[Operadores de expresión de plantilla](guide/template-expression-operators)—aprende sobre el operador de tubería, `|`, y protégete contra valores `nulos` o` indefinidos` en tu HTML.
74
+
*[SVG en plantillas](guide/svg-in-templates)—genera gráficos interactivos de forma dinámica.
0 commit comments