Enlace de Propiedades

Ahora tenemos nuestro componente input, pero no hace mucho. Queremos hacerlo mas vivo.

Vamos a hacer que el título refleje el valor de la propiedad de title.

Así es como nuestro componente se ve ahora:

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

@Component({
  selector: 'todo-input',
  template: `                           
    <input>
    <button>Save</button>
    <p>The title is: {{ title }}</p>    
  `,  
  styleUrls: ['./input.component.css']  
})    
export class InputComponent implements OnInit {
  title: string = 'My First Todo Title !!!';           

  constructor() { }                     

  ngOnInit() {
  }
}

Usamos interpolación para presentar el valor presente de la propiedad title: {{title}}

Angular entonces presenta el valor de title cada vez que nuestro componente input es mostrado.

¿Qué si queremos mostrar el valor del título dentro del control de entrada en si mismo?

Cada elemento input tiene una propiedad llamada value, la cual tine una cadena que es mostrada dentro de la caja input. En HTML nosotros podemos pasar esta cadena directamente como el atributo value:

<input value="Hello World">

Pero nosotros perdemos en enlace dinámico entre propiedades en el controlador y la plantilla.

Angular nos deja enlazar propiedades a la plantilla fácil y convenientemente. Podemos ver eso con la interpolación. Ahora nosotros veremos como enlazarla a una propiedad de un elemento (No se confunda con propiedades de clases...) Nosotros rodeamos la propiedad que queremos con corchetes y le pasamos el miembro de la clase:

<input [value]="title">

Puedes continuar en el siguiente capítulo, pero si tu quieres aprender mas sobre la detección de cambios, manténte leyendo.

Detección de cambios

Angular tiene un mecanismo bastante eficiente para la detección de cambios. El mira los enlaces en los componentes y las plantillas, luego actualiza el valor cada vez que la expresión es cambiada.

Para mostrar esto, vamos a cambiar el valor de title después algunos segundos y ver loq ue pasa. Llama la fución setTimeout dentro de ngOnInit:

ngOnInit() {
  setTimeout(() => {
    this.title = 'This is not the title you are looking for';  
  }, 3000);
}

setTimeout es una función de Javascript. Su primer parámetro es lo que queremos que pase, una función de nuestra eleción. El segundo parámetro es cuanto queremos demorarlo, en milisegundos. En este ejemplo, le pasamos una función anónima en linea, la cual define el valor de this.title. Para esto usamos una de las nuevas caracterísiticas de Javascript (ES6): funciones flecha.

Enlazar a métodos

Las expresiones que podemos enlazar en la plantilla no están limitadas a propiedades de clase. También pueden ser llamadas a métodos o casi cualquier otra expresión válida de Javascript.

Por ejemplo, vamos a enlazar el valor del input a la llamada de un método que retorne un valor.

Primero, agreguemos el método generateTitle() en cualquier lugar dentro de la case, pero no dentro de otros métodos. La mejor práctica es tener nuestro métodos personalizados debajo del ciclo de vida de los métodos (ngOnInit en este caso).

generateTitle(): string {
  return 'This title was generated by a method.';
}

Reemplaza uno o ambos enlaces del título en la plantilla con la llamada al método (no olvides los paréntesis):

  <input [value]="generateTitle()">

  {{ generateTitle() }}

Así que por ahora, tenemos nuestro controlador que muestra el título de nuestra tarea en él. Nosotros queremos hacer que el valor ingresado cambie el título al presionar enter. ¿Cómo hacemos eso? Vamos al siguiente capítulo a averiguarlo...

Recursos

Angular Guide - Template Property Binding

Nota sobre acceder al DOM

Usando Javascript regular, podemos insertar el valor del input por sus propiedades. Vamos a obtener el elemento del DOM y asignar el valor del miembro title a la propiedad value del elemento.

let inputElement = document.getElementById('#my-input');
inputElement.value = this.title;

En Javascript, encontramos que el elemento en el DOM por su id, y luego definimos su propiedada value con el título de la variable. Necesitamos agregar el id al elemento. Entonces:

<input id="my-input">

Excelente.

Sin embargo, esto es altamente no recomendado en Angular. ¡Nunca deberías acceder al DOM directamente!

Por eso es que puedes asignar diferentes renderizadores a Angular y ejecutar la aplicación en diferentes plataformas. Pueden ser móviles o escritorio, o incluso rovots. ¡Y ellas no necesitan tener el objeto document con el cual manipular el resultado!