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:
Captura de pantalla 2017-10-26 a las 5.03.24 p.m.

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:

Captura de pantalla 2017-10-26 a las 5.21.19 p.m.

Una vez que se oprima el botón Search se mostrará lo siguiente:
Captura de pantalla 2017-10-26 a las 5.22.11 p.m.

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

 

Configura Bootstrap en Angular 4


En este post se explicará como configurar bootstrap en una aplicación de Angular 4, para esto se tomará como base la aplicación creada en el post Introducción a Angular JS en español.

Paso 1 : Ir al folder del proyecto

El primer paso es, haciendo uso de la linea de comandos posicionarse en el directorio que contiene nuestro proyecto de angular:

cd angular-js-example

Y ejecutar el siguiente comando :

npm install --save bootstrap

Una vez que el comando termina de ejecutarse, bootstrap estará disponible en el folder ../node_modules/bootstrap/dist/css/bootstrap.min.css .

Paso 2: Incluir el css en Angular

Para hacer esto el siguiente paso es editar el archivo angular-cli.json e incluir en el arreglo de styles el css de bootstrap:

 "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ]

Paso 3: Probar todo junto

El tercer y último paso es probar todo junto, para esto simplemente ejecutaremos de nuevo nuestro servidor de angular utilizando el comando:

ng serve

Con esto tu aplicación tendrá soporte para bootstrap y ya serás capaz de usarlo en cualquier parte de tu aplicación.

Autor: Alejandro Agapito Bautista

Twitter: @raidentrance

Contacto:raidentrance@gmail.com