Angular 2 - Manejo de eventos

En Angular 2, los eventos como el clic de un botón o cualquier otro tipo de eventos también se pueden manejar con mucha facilidad. Los eventos se activan desde la página html y se envían a la clase Angular JS para su posterior procesamiento.

Veamos un ejemplo de cómo podemos lograr el manejo de eventos. En nuestro ejemplo, veremos cómo se muestra un botón de clic y una propiedad de estado. Inicialmente, la propiedad de estado será verdadera. Cuando se hace clic en el botón, la propiedad de estado se vuelve falsa.

Step 1 - Cambie el código del archivo app.component.ts por el siguiente.

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   Status: boolean = true; 
   clicked(event) { 
      this.Status = false; 
   } 
}

Se deben tener en cuenta los siguientes puntos sobre el código anterior.

  • Estamos definiendo una variable llamada estado del tipo booleano que inicialmente es verdadera.

  • A continuación, estamos definiendo la función en la que se hizo clic que se llamará cada vez que se haga clic en nuestro botón en nuestra página html. En la función, cambiamos el valor de la propiedad Status de verdadero a falso.

Step 2 - Realice los siguientes cambios en el archivo app / app.component.html, que es el archivo de plantilla.

<div> 
   {{Status}} 
   <button (click) = "clicked()">Click</button> 
</div>

Se deben tener en cuenta los siguientes puntos sobre el código anterior.

  • Primero, solo mostramos el valor de la propiedad Status de nuestra clase.

  • Luego estamos definiendo la etiqueta html del botón con el valor de Click. Luego nos aseguramos de que el evento de clic del botón se active en el evento de clic en nuestra clase.

Step 3 - Guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.

Step 4 - Haga clic en el botón Hacer clic, obtendrá el siguiente resultado.