Angular2: variable de referencia de templates

En la entrada de hoy vamos a ver las variables de referencia de plantillas.
Una variable de referencia de plantilla es una referencia a un elemento o directiva DOM dentro de una plantilla.
Se declara utilizando el prefijo # o bien la etiqueta ref- as dentro del elemento html. 
Asi por ejemplo, #edad, ref-edad serían declaraciones válidas.

Vamos a ver mejor su uso con un ejemplo. 

import { Component } from '@angular/core';

@Component({

selector: 'app-template-variable',

template: `

Nombre: <input type="text" #nombre placeholder="Introduce tu nombre">

<br> Edad: <input type="text" ref-edad placeholder="Introduce tu edad">

<br> Email: <input type="email" #email placeholder="Introduce tu email">

<br> <button (click)="mostrarDatos(nombre.value, edad.value, email.value)">
Mostrar datos</button>

`

})

export class TemplateVariableComponent {

mostrarDatos(nombre, edad, email) {

console.log(nombre);

console.log(edad);

console.log(email);

}

}

Como podemos observar en el código, hemos creado tres variables de referencia en la plantilla. Dos de ellas estan declaradas como #nombre y #email, y la restante con la otra forma permitida, es decir, con ref-edad.

Al hacer click en el botón, llamamos al método mostrarDatos que muestra en la consola los valores pasados como parametros al mismo. Estos parametros son los valores de los elementos del formulario.

Código disponible en https://gist.github.com/jorgetrigueros/951cc37f6d41b82403682ec7e82fef2a