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
