Databinding en Angular 4 Parte 2 Event binding

En este post se explicará Event Binding y será utilizado para disparar eventos desde la vista html hacía el controller en Typescript, para esto crearemos un nuevo componente llamado events, veamos los pasos a seguir para hacerlo.

1 Crear el componente events

Para crear el componente events ejecutaremos el siguiente comando:

ng generate component events

Una vez generado el componente lo incluiremos en nuestro app.component.html Con el siguiente código:

<div align="center">
<h1>Geeks México</h1>
<h3>Base component</h3>
<img class="img-fluid" src="https://geeksjavamexico.files.wordpress.com/2017/09/5.png?w=400" width="25%" height="25%" alt=""></div>
<app-events></app-events>

Esto mostrará la siguiente vista:

2 Modificar events.component.ts

El siguiente paso será modificar el componente events.component.ts como se muestra a continuación:

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

@Component({
  selector: 'app-events',
  templateUrl: './events.component.html',
  styleUrls: ['./events.component.css']
})
export class EventsComponent implements OnInit {
  eventMessage = 'Where is Geeks México ?';

  ngOnInit() {
  }

  onSearchIt(){
    this.eventMessage='Geeks México is here !';
  }

}

Ahora analizaremos el código anterior:

• Se creó el atributo eventMessage y se le asignó el valor Where is Geeks México ?
• Se creó un método llamado onSearchIt() que al ejecutarlo cambia el valor de la variable eventMessage a ‘Geeks México is here !’

3 Modificar events.component.html

Una vez que nuestro método esta listo el siguiente paso es agregarlo a nuestro archivo events.component.html, para hacerlo utilizaremos el siguiente código:

<h3>{{eventMessage}}</h3>
<button class="btn btn-primary" (click)="onSearchIt()">Search</button>

Ahora analizaremos el código anterior:

• En un título se colocará el valor del atributo eventMessage utilizando String interpolation
• Cuando se oprima el botón con la leyenda Search se ejecutará el método onSearchIt() definido en typescript.
• Del mismo modo que es posible utilizar el evento click utilizando la siguiente sintaxis (evento)=”método o código typescript” es posible definir otros eventos definidos en html

4 Probando todo junto

Una vez que creamos el código anterior lo siguiente será probarlo, para hacerlo ejecutaremos el comando ng serve y veremos la siguiente vista:

Una vez que se oprima el botón Search se mostrará lo siguiente:

Como se puede observar al oprimir el botón Search el título que mostraba Where is Geeks México ? Será actualizado a Geeks México is here ! Sin necesidad de actualizar ningún componente HTML.

Si tienes alguna duda o comentario no dudes en hacerlo en la sección de comentarios o en nuestras redes sociales.

Autor: Alejandro Agapito Bautista

Twitter: @raidentrance

Contacto:raidentrance@gmail.com