Angular 2 - Entrada de usuario

En Angular 2, puede utilizar la estructura de elementos DOM de HTML para cambiar los valores de los elementos en tiempo de ejecución. Veamos algunos en detalle.

La etiqueta de entrada

En el archivo app.component.ts coloque el siguiente código.

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

@Component ({ 
   selector: 'my-app', 
   template: ' 
      <div> 
         <input [value] = "name" (input) = "name = $event.target.value"> 
         {{name}} 
      </div> 
   ' 
}) 
export class AppComponent { }

Se deben tener en cuenta las siguientes cosas sobre el código anterior.

  • [value] = ”username” - Se utiliza para vincular la expresión nombre de usuario a la propiedad de valor del elemento de entrada.

  • (input) = ”expression” - Esta es una forma declarativa de vincular una expresión al evento de entrada del elemento de entrada.

  • username = $event.target.value - La expresión que se ejecuta cuando se dispara el evento de entrada.

  • $event - Es una expresión expuesta en enlaces de eventos por Angular, que tiene el valor de la carga útil del evento.

Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

Ahora puede escribir cualquier cosa y la misma entrada se reflejará en el texto junto al control de entrada.

Haga clic en Entrada

En el archivo app.component.ts coloque el siguiente código.

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

@Component ({
   selector: 'my-app',
   template: '<button (click) = "onClickMe()"> Click Me </button> {{clickMessage}}'
})

export class AppComponent {
   clickMessage = 'Hello';
   onClickMe() {
      this.clickMessage = 'This tutorial!';
   }
}

Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

Cuando presiona el botón Hacer clic en mí, obtendrá el siguiente resultado.