Angular 2 Tutorial (Parte 4)

Angular 2 Tutorial (Parte 4)

Angular 2 Tutorial
En esta 4ta entrada de la serie Angular 2 Tutorial, vamos a continuar agregando funciones a nuestra Shopping List App, a medida que vamos aprendiendo más sobre Data Binding en Angular 2.

Al final de la Parte 3 terminamos construyendo una lista de productos con sus respectivas cantidades que incluso al final hicimos que el listado cambiara de forma dinámica cada cierto tiempo.

Ahora lo que haremos es agregar un elemento INPUT de Texto en el cual el usuario podrá introducir el nombre del producto que desea agregar a su Shopping List y veremos como lograr del Two Way Data Binding de Angular 2.

Two Way Data Binding en Angular 2

Gracias al Two Way Data Binding de Angular, es posible transmitir datos de forma dinámica y en ambos sentidos, es decir, del controlador (Componente) a la vista (Template) y viceversa; veamos como lograr esto:

Primero vamos a desactivar el Observable que creamos en el método ngOnInit del app.component.ts para actualizar de forma dinámica la lista de productos, para ellos vamos a comentar el siguiente trozo de código:

let timer = Observable.timer(1000,3000);
timer.subscribe(t=> {
  this._pickRandomItems();
});

El siguiente paso es importar el FormsModule en el fichero app.module.ts, de tal manear que ahora dicho fichero nos quedaría con el siguiente código:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';

/**Importamos el modulo FormsModule */
import { FormsModule } from '@angular/forms';

/*
Haciendo uso del decorator @NgModule declaramos un módulo y en el parámetro array
"imports"" inyectamos los módulos de los cuales depende nuestra app, 
en este caso el modulo BrowserModule y FormsModule
 */
@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

/*Definimos la clase AppModule y la exportamos para que sea accesible*/
export class AppModule { }

Luego necesitamos definir un contenedor de los datos introducidos por el usuario, para ello vamos a definir una clase en el Controller (fichero app.component.ts) que de la siguiente manera:

export class Product {
  productName: string;
  cantidad: number;
}

Esta clase estará definida al final del fichero app.component.ts y como se puede ver es una clase con 2 propiedades:

  • productName: Nombre del producto.
  • cantidad: Cantidad de producto.

Con nuestro contenedor de datos ya definido vamos ahora a crear una instancia de dicho contenedor como propiedad miembro de nuestro Componente, para ello dentro de la clase AppComponent (fichero app.component.ts), creamos una propiedad que llamaremos newProduct de la siguiente manera:

newProduct: Product = {
    productName: "",
    cantidad: 0
  }

También dentro de la clase AppComponent (fichero app.component.ts), vamos a necesitar crear un método el cual contiene la lógica necesaria para agregar un producto a nuestra base de datos de productos. Este método lo llamaremos addProduct() y se define de la siguiente manera:

addProduct():void {
    //Verificamos si el usuario ha introducido un nombre de producto
    if (this.newProduct.productName === ""){
      return;
    }
    //Verificamos si el usuario ha introducido una cantidad
    if (this.newProduct.cantidad === 0){
      return;
    }
    
    //Creamos un nueva instancia del Product
    let newProd: Product = new Product();
    //Agregamos al nuevo producto, el nombre y la cantidad informada por el usuario
    newProd.productName = this.newProduct.productName;
    newProd.cantidad = this.newProduct.cantidad;
    //Agregamos en nuevo producto a la lista
    this.items.push(newProd);

    //Blanqueamos los INPUTS
    this.newProduct.cantidad = 0;
    this.newProduct.productName = "";
}

Ahora necesitamos modificar el fichero donde se define la plantilla HTML para agregar 2 elementos de tipo input y un botón, para ello ajustamos el fichero app.template.html de la siguiente manera:

<h1>{{title}}</h1>
<div class="row">
    <div class="col-lg-4">
        <div class="input-group">
            <span class="input-group-addon">
                <label>Producto:</label>
            </span>
            <input type="text" placeholder="Nombre del producto" class="form-control" id="productName" [(ngModel)]="newProduct.productName">
        </div>
    </div>
    <div class="col-lg-2">
        <div class="input-group">
            <span class="input-group-addon">
                <label>Cantidad:</label>
            </span>
            <input type="ammount" class="form-control" id="cantidad" [(ngModel)]="newProduct.cantidad">
        </div>
    </div>
    <div class="col-lg-2">
        <div class="input-group">
            <button type="button" class="btn btn-primary btn-md glyphicon glyphicon-plus" (click)="addProduct()"></button>
        </div>
    </div>
</div>

<table class="table table-striped">
<thead>
    <tr>
    <td><strong>Producto</strong></td>
    <td><strong>Cantidad</strong></td>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let item of items">
    <td>{{item.productName}}</td>
    <td>{{item.cantidad}}</td>
    </tr>
</tbody>
</table>

Del código veamos los siguiente:

Fíjense que en los inputs hemos agreado una propiedad llamada [(ngModel)] cuyo valor esta mapeado a las propiedades newProduct.productName o newProduct.cantidad segun sea el caso. Pues gracias al [(ngModel)] podemos lograr el Two Way Data Binding en Angular 2 ya que esta es la forma en la que le decimos a Angular que queremos que el mapeo sea bidireccional entre la plantilla HTML y el controlador del componente (clase AppComponente).

Ahora cuando el usuario informe los campos de Nombre del Producto y la cantidad, automáticamente esos valores se cargaran en nuestra propiedad newProduct.productName y newProduct.cantidad de la clase AppComponent, aquí estaremos logrando el Binding del Template al Controlador.

Y luego el Botón de Agregar, el cual se verá como un signo “+” de color blanco con fondo azul, ya que le hemos asignado las clases CSS “btn btn-primary btn-md glyphicon glyphicon-plus”de Bootstrap, veréis que le hemos vinculado el método “addProduct()” al evento (click), de tal manera que dicho método se ejecutará cuando el usuario haga click sobre el mismo.

Ahora cuando se ejecute el método addProduct(), al final del mismo estaría logrando el Binding del Controlador al Template en el momento en que blanqueamos los INPUTS con las siguiente sentencias:

    //Blanqueamos los INPUTS
    this.newProduct.cantidad = 0;
    this.newProduct.productName = "";

Ejecución

Ahora nos queda ejecutarlo, para ello recordemos que tenemos que acceder a la consola de comando o termina, y ubicarnos en el directorio raíz del proyecto (en la misma carpeta donde se encuentra el fichero package.json) y ejecutar el comando:

npm start

Con lo cual se levanta una pestaña del Browser que tengas configurado por defecto y ya podemos hacer uso de nuestra Shoping List App tal como lo mostramos en el siguiente vídeo:

Próximos pasos

En nuestra próxima entrega hablaremos de otro elemento importante en Angular llamado Services, el cual podemos usar para encapsular lógica de negocio re utilizable entre diferentes componentes de una aplicación Angular o incluso entre diferentes aplicaciones Angular.

No olvides suscribirte a nuestro newsletter para que no te pierdas de ninguna de nuestras próximas publicaciones.

Si te ha gustado este entrada compártela con tus amigos en las redes sociales, y así ayudaras a compartir el conocimiento y si tienes dudas, o inquietudes sobre algún tema no olvides comentar.

Happy Coding!

A %d blogueros les gusta esto: