docs(template-reference-variables): traducir template reference varia…

aio/content/guide/template-reference-variables.en.md

@@ -0,0 +1,69 @@
+# Template reference variables (`#var`)
+
+A **template reference variable** is often a reference to a DOM element within a template.
+It can also refer to a directive (which contains a component), an element, [TemplateRef](api/core/TemplateRef), or a <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" title="MDN: Web Components">web component</a>.
+
+<div class="alert is-helpful">
+
+See the <live-example></live-example> for a working example containing the code snippets in this guide.
+
+</div>
+
+Use the hash symbol (#) to declare a reference variable.
+The following reference variable, `#phone`, declares a `phone` variable on an `<input>` element.
+
+<code-example path="template-reference-variables/src/app/app.component.html" region="ref-var" header="src/app/app.component.html"></code-example>
+
+You can refer to a template reference variable anywhere in the component's template.
+Here, a `<button>` further down the template refers to the `phone` variable.
+
+<code-example path="template-reference-variables/src/app/app.component.html" region="ref-phone" header="src/app/app.component.html"></code-example>
+
+Angular assigns each template reference variable a value based on where you declare the variable:
+
+* If you declare the variable on a component, the variable refers to the component instance.
+* If you declare the variable on a standard HTML tag, the variable refers to the element.
+* If you declare the variable on an `<ng-template>` element, the variable refers to a `TemplateRef` instance, which represents the template.
+* If the variable specifies a name on the right-hand side, such as `#var="ngModel"`, the variable refers to the directive or component on the element with a matching `exportAs` name.
+
+<h3 class="no-toc">How a reference variable gets its value</h3>
+
+In most cases, Angular sets the reference variable's value to the element on which it is declared.
+In the previous example, `phone` refers to the phone number `<input>`.
+The button's click handler passes the `<input>` value to the component's `callPhone()` method.
+
+The `NgForm` directive can change that behavior and set the value to something else. In the following example, the template reference variable, `itemForm`, appears three times separated
+by HTML.
+
+<code-example path="template-reference-variables/src/app/app.component.html" region="ngForm" header="src/app/hero-form.component.html"></code-example>
+
+The reference value of itemForm, without the ngForm attribute value, would be
+the [HTMLFormElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement).
+There is, however, a difference between a Component and a Directive in that a `Component`
+will be referenced without specifying the attribute value, and a `Directive` will not
+change the implicit reference (that is, the element).
+
+
+
+However, with `NgForm`, `itemForm` is a reference to the [NgForm](api/forms/NgForm "API: NgForm")
+directive with the ability to track the value and validity of every control in the form.
+
+The native `<form>` element doesn't have a `form` property, but the `NgForm` directive does, which allows disabling the submit button
+if the `itemForm.form.valid` is invalid and passing the entire form control tree
+to the parent component's `onSubmit()` method.
+
+<h3 class="no-toc">Template reference variable considerations</h3>
+
+A template _reference_ variable (`#phone`) is not the same as a template _input_ variable (`let phone`) such as in an [`*ngFor`](guide/built-in-directives#template-input-variable).
+See [_Structural directives_](guide/structural-directives#template-input-variable) for more information.
+
+The scope of a reference variable is the entire template. So, don't define the same variable name more than once in the same template as the runtime value will be unpredictable.
+
+### Alternative syntax
+
+You can use the `ref-` prefix alternative to `#`.
+This example declares the `fax` variable as `ref-fax` instead of `#fax`.
+
+
+<code-example path="template-reference-variables/src/app/app.component.html" region="ref-fax" header="src/app/app.component.html"></code-example>
+

aio/content/guide/template-reference-variables.md

@@ -1,69 +1,56 @@
-# Template reference variables (`#var`)
+# Variables de referencia en plantillas HTML
 
-A **template reference variable** is often a reference to a DOM element within a template.
-It can also refer to a directive (which contains a component), an element, [TemplateRef](api/core/TemplateRef), or a <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" title="MDN: Web Components">web component</a>.
+Una **variable de referencia** a menudo es una referencia a un elemento del DOM dentro de una plantilla HTML.
+También se puede referir a una directiva (que contiene un componente), un elemento [TemplateRef](api/core/TemplateRef), o a un <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" title="MDN: Web Components">web component</a>.
 
 <div class="alert is-helpful">
-
-See the <live-example></live-example> for a working example containing the code snippets in this guide.
-
+Visita el <live-example></live-example> para ver un ejemplo práctico con los fragmentos de código que se presentan en esta guía.
 </div>
 
-Use the hash symbol (#) to declare a reference variable.
-The following reference variable, `#phone`, declares a `phone` variable on an `<input>` element.
+Usa el símbolo (#) para declarar una variable de referencia.
+La siguiente variable de referencia, `#phone`, declara la variable `phone` en un elemento `<input>`.
 
 <code-example path="template-reference-variables/src/app/app.component.html" region="ref-var" header="src/app/app.component.html"></code-example>
 
-You can refer to a template reference variable anywhere in the component's template.
-Here, a `<button>` further down the template refers to the `phone` variable.
+Puedes hacer referencia a tu variable en cualquier lugar de la plantilla HTML.
+Aquí, un `<button>` ubicado más abajo en nuestro HTML, hace referencia a la variable `phone`.
 
 <code-example path="template-reference-variables/src/app/app.component.html" region="ref-phone" header="src/app/app.component.html"></code-example>
 
-Angular assigns each template reference variable a value based on where you declare the variable:
+Angular asigna a cada variable de referencia un valor con base en dónde se declaró la variable.
 
-* If you declare the variable on a component, the variable refers to the component instance.
-* If you declare the variable on a standard HTML tag, the variable refers to the element.
-* If you declare the variable on an `<ng-template>` element, the variable refers to a `TemplateRef` instance, which represents the template.
-* If the variable specifies a name on the right-hand side, such as `#var="ngModel"`, the variable refers to the directive or component on the element with a matching `exportAs` name.
+- Si declaras la variable en un componente, la variable hace referencia a la instancia del componente
+- Si declaras la variable en una etiqueta HTML estándar, la variable hace referencia al elemento.
+- Si declaras la variable en un elemento `<ng-template>`, la variable hace referencia a la instancia del `TemplateRef`, la cual representa el template.
+- Si la variable especifica un nombre del lado derecho, como `#var="ngModel"`, la variable hace referencia a la directiva o componente en el nombre del elemento que coincida con un `exportAs`.
 
-<h3 class="no-toc">How a reference variable gets its value</h3>
+<h3 class="no-toc">¿Cómo una variable de referencia obtiene su valor?</h3>
 
-In most cases, Angular sets the reference variable's value to the element on which it is declared.
-In the previous example, `phone` refers to the phone number `<input>`.
-The button's click handler passes the `<input>` value to the component's `callPhone()` method.
+En la mayoría de casos, Angular coloca el valor de la variable de referencia en el elemento en el cual es declarado.
+En el ejemplo anterior, `phone` hace referencia al `<input>` del número de teléfono.
+El controlador del botón pasa el valor del `<input>` al método `callPhone()` del componente.
 
-The `NgForm` directive can change that behavior and set the value to something else. In the following example, the template reference variable, `itemForm`, appears three times separated
-by HTML.
+La directiva `NgForm` puede cambiar ese comportamiento y establecer cualquier otro valor. En el siguiente ejemplo, la variable de referencia, `itemForm`, aparece tres veces separada por HTML.
 
 <code-example path="template-reference-variables/src/app/app.component.html" region="ngForm" header="src/app/hero-form.component.html"></code-example>
 
-The reference value of itemForm, without the ngForm attribute value, would be
-the [HTMLFormElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement).
-There is, however, a difference between a Component and a Directive in that a `Component`
-will be referenced without specifying the attribute value, and a `Directive` will not
-change the implicit reference (that is, the element).
-
+La variable de referencia del itemForm, sin el atributo ngForm, será el elemento[HTMLFormElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement).
+Sin embargo, una diferencia entre un componente y una directiva es que un `Component` será referenciado sin especificar el valor del atributo, y una `Directive` no cambiará la referencia implícita (la cual es, el elemento).
 
+Sin embargo, con `NgForm`, `itemForm` es una referencia a la directiva [NgForm](api/forms/NgForm "API: NgForm") con la capacidad de realizar un seguimiento al valor y validar cada control en el formulario.
 
-However, with `NgForm`, `itemForm` is a reference to the [NgForm](api/forms/NgForm "API: NgForm")
-directive with the ability to track the value and validity of every control in the form.
+El elemento nativo `<form>` no tiene una propiedad `form`, pero la directiva `NgForm` sí lo tiene, la cual permite deshabilitar el botón de envío si el `itemForm.form.valid` es inválido y pasa todo el árbol de controladores del formulario al método `onSubmit()` del componente padre.
 
-The native `<form>` element doesn't have a `form` property, but the `NgForm` directive does, which allows disabling the submit button
-if the `itemForm.form.valid` is invalid and passing the entire form control tree
-to the parent component's `onSubmit()` method.
+<h3 class="no-toc">Consideraciones sobre la variable de referencia de la plantilla</h3>
 
-<h3 class="no-toc">Template reference variable considerations</h3>
+Una variable de _referencia_ de una plantilla (`#phone`) no es lo mismo que una variable de _input_ de una plantilla (`let phone`) como en un [`*ngFor`](guide/built-in-directives#template-input-variable).
+Para más información visita [_Structural directives_](guide/structural-directives#template-input-variable).
 
-A template _reference_ variable (`#phone`) is not the same as a template _input_ variable (`let phone`) such as in an [`*ngFor`](guide/built-in-directives#template-input-variable).
-See [_Structural directives_](guide/structural-directives#template-input-variable) for more information.
+El scope o alcance de una variable de referencia es la plantilla completa. Por lo tanto, no definas el mismo nombre de una variable más de una vez en la misma plantilla ya que el tiempo de ejecución será impredecible.
 
-The scope of a reference variable is the entire template. So, don't define the same variable name more than once in the same template as the runtime value will be unpredictable.
-
-### Alternative syntax
-
-You can use the `ref-` prefix alternative to `#`.
-This example declares the `fax` variable as `ref-fax` instead of `#fax`.
+### Sintaxis alternativa
 
+Puedes usar el prefijo `ref-` como una alternativa a `#`.
+Este ejemplo se declara la variable `fax` como `ref-fax` en lugar de `#fax`.
 
 <code-example path="template-reference-variables/src/app/app.component.html" region="ref-fax" header="src/app/app.component.html"></code-example>
-