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

 

Databinding en Angular 4 Parte 1


Databinding en Angular 4 es utilizado para comunicar los templates (Archivos html) con typescript (La lógica de negocio de nuestra aplicación). Esto nos permitirá generar aplicaciones web dinámicas que puedan generar contenido diferente de acuerdo a los usuarios.

Existen distintos modos de comunicación:

  • Para envío de información (Typescript->HTML):Permite tomar información de nuestro código typescript, este puede obtenerlo de un servicio web o de un cálculo y desplegarlo en una pantalla HTML, realizar este envío de información es posible a través de las siguientes opciones:
    • String interpolation:{{data}}
    • Property binding:[property]=”data”
  • Para la reacción a eventos del usuario(HTML-> Typescript): Los archivos HTML son la forma en la que el usuario interactúa con una aplicación, por esto es necesario disparar eventos hacia el código que es capaz de ejecutar la lógica de negocio, para hacerlo lo haremos con lo siguiente:
    • Event binding : (event)=”expression”
  • Combinación de ambos (Two way binding): También seremos capaces de ejecutar ambos al mismo tiempo con esto seremos capaces de disparar eventos y mostrar información al mismo del siguiente modo:
    • Two way data binding : [(ngModel)]=”data”

Con esto seremos capaces de realizar la comunicación entre nuestro sitio código typescript y nuestros templates html, veamos algunos ejemplos de cada modo. Se tomará como base para este post el ejemplo Crear componentes en Angular 4.

String interpolation

String interpolation funciona muy parecido a expression language, con esto es posible tanto declarar variables en el archivo typescript e utilizarlas dentro de nuestro html como escribir cualquier expresión que pueda ser traducida a un String veamos un ejemplo editando nuestro componente posts.components:

posts.components.ts

import { Component } from '@angular/core'
@Component({
    selector: 'app-posts',
    templateUrl: './posts.component.html'
})
export class PostsComponent {
    author='@raidentrance';
    title='Angular from scratch';

    getTitle(){
        return this.title;
    }
}

Como se puede observar, dentro de nuestro componente PostsComponent declararemos 2 atributos el atributo author y el atributo title y los inicializaremos con algunos valores por defecto. Es importante mencionar que es posible declarar métodos que devuelvan el valor de alguno de nuestros atributos, muestra de esto es el método getTitle().

posts.component.html

<div align="center">
    <h3>Post List</h3>
    <div>
        <table  class="table">
            <tr>
                <th>Author Twitter</th>
                <th>Post name</th>
                <th>Post date</th>
            </tr>
            <tr>
                <td>{{author}}</td>
                <td>{{getTitle()}}</td>
                <td> {{'19/08/1988'}}</td>
            </tr>
        </table>
    </div>
</div>

Es momento de analizar el funcionamiento del archivo HTML, como se puede observar en la tabla se utilizarán los símbolos {{}} para definir que utilizaremos String interpolation y se colocarán las variables definidas dentro de nuestra clase en typescript, a demás es importante resaltar que la fecha fue declarada como una expresión String, por esto es posible colocarla dentro de nuestro String interpolation y que del mismo modo que podemos obtener el valor de un atributo podemos obtener el resultado de un método.

Property binding

Una vez que entendimos como funciona String interpolation es tiempo de entender como funciona property binding, para esto agregaremos un botón a nuestro componente posts y lo modificaremos de acuerdo a un evento dirigido por un componente typescript, veamos el ejemplo:

posts.component.ts

import { Component } from '@angular/core'
@Component({
    selector: 'app-posts',
    templateUrl: './posts.component.html'
})
export class PostsComponent {
    author = '@raidentrance';
    title = 'Angular from scratch';
    disableNewPost = true;

    constructor() {
        setTimeout(() => { this.disableNewPost = false }, 2000);
    }

    getTitle() {
        return this.title;
    }
}

Podrás notar que al código anterior se realizaron las siguientes modificaciones:

  • Se le agregó el atributo disableNewPost inicializado en true, con esto seremos capaces de determinar que un botón que se agregará se encontrará desactivado al principio
  • Se declaró un constructor el cual se ejecutará cuando se cree el objeto de nuestra clase
  • Se utilizó la función setTimeout() la cual definirá que una vez pasados 2 segundos se cambiará el valor de la variable disableNewPost a false lo cual permitirá que el botón se active después de este periodo de tiempo

posts.components.html

<div align="center">
    <h3>Post List</h3>

    <button class="btn btn-primery" [disabled]="disableNewPost">Create</button>
    <div>
        <table  class="table">
            <tr>
                <th>Author Twitter</th>
                <th>Post name</th>
                <th>Post date</th>
            </tr>
            <tr>
                <td>{{author}}</td>
                <td>{{getTitle()}}</td>
                <td> {{'19/08/1988'}}</td>
            </tr>
        </table>
    </div>
</div>

Al principio del archivo HTML se agregó un botón nuevo con el texto Create, como ya sabrán el tag button contiene una propiedad tipo boolean llamada disabled, con esta es posible determinar si el elemento será habilitado o no. Utilizando property binding determinaremos el valor de este atributos de acuerdo al valor del atributo disableNewPost que se encuentra en nuestro archivo typescript, con esto el botón se encontrará des habilitado durante 2 segundos y pasando esto se habilitará de nuevo sin necesidad de actualizar algún elemento del DOM.

En el siguiente post se explicarán los otros modos disponibles en Angular 4 para realizar el databinding en nuestras aplicaciones. 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

Crear componentes en Angular 4


Como se explicó en el primer post de Angular 4, la forma en la que se crea una aplicación es a través de componentes. En este post se explicará como crear componentes manualmente y haciendo uso de la CLI(Command line interface). Se tomará como base el post Configura Bootstrap en Angular 4.

Una vez que se tiene un proyecto construido veremos un componente llamado app.component que será utilizado para cargar el contenido al archivo index.html. A continuación veremos como crear componentes adicionales a nuestra aplicación.

Creación de componentes manualmente

A continuación crearemos un componente nuevo llamado posts siguiendo los siguientes pasos:

  • Crear un folder con el nombre del componente dentro del folder src/app/ , en este caso nuestro folder sería /src/app/posts.
  • Dentro del folder /src/app/posts crearemos los siguientes archivos:
    • posts.component.html : Contendrá el HTML que se desplegará donde se inserte el componente
    • posts.component.ts : Contendrá una clase typescript que definirá el componente.
  • Dentro del folder /src/app editaremos el archivo app.modules.ts para registrar el nuevo componente.

Paso 1 Editar el archivo app.component.html

El primer paso para este ejemplo será editar el archivo 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>

Con esto la aplicación se verá como se muestra en la siguiente imagen:

Captura de pantalla 2017-10-11 a las 21.13.14

Paso 2: Agregar un nuevo componente

Una vez que tenemos el componente base que es app.component, el siguiente paso es crear el componente posts. Para esto seguiremos los siguientes pasos:

1.- Crear un folder vacío en el folder /src/app/ llamado posts

2.- Crear el archivo posts.components.html dentro del folder /src/app/posts.

<div align="center">
<h3>Post List</h3>
<div>
<table  class="table">
<tr>
<th>Author Twitter</th>
<th>Post name</th>
<th>Post date</th>
</tr>
<tr>
<td>@raidentrance</td>
<td>Angular from scratch</td>
<td> 10/10/2017</td>
</tr>
</table>
</div>
</div>

3.- Crear el archivo posts.components.ts dentro del folder /src/app/posts.

import { Component } from '@angular/core'
@Component({
    selector: 'app-posts',
    templateUrl: './posts.component.html'
})
export class PostsComponent {

}

Paso 3: Incluir el nuevo componente en el archivo app.modules.ts

Una vez que ya se creó el componente el siguiente paso es registrarlo dentro del archivo app.modules.ts. Para hacerlo debemos editar el archivo como se muestra a continuación:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { PostsComponent } from './posts/posts.component';

@NgModule({
  declarations: [
    AppComponent,PostsComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Las modificaciones que se harán al archivo app.modules.ts son las siguientes:

  1. Incluir la sentencia import para PostsComponent desde ./posts/posts.component
  2. Incluir PostsComponent en el objeto declarations

Paso 4: Incluir el nuevo componente en el componente principal

Para hacer esto lo único que debemos hacer es editar el archivo app.components.html Como se muestra a continuación:

<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-posts></app-posts>

Como se puede observar,la única modificación fue agregar al final el selector de nuestro componente llamado .

Una vez concluido lo anterior la página se verá como se muestra a continuación:
Captura de pantalla 2017-10-11 a las 21.42.39

Creando un componente utilizando la CLI

Crear un componente utilizando la línea de comandos es mucho más sencillo, solo debes ejecutar el siguiente comando:

ng generate component posts

Una vez hecho esto verás que todos los archivos necesarios fueron creados automáticamente y que lo único que resta es editar los archivos para tener todo listo. Si tienes alguna pregunta sobre como hacerlo tu mismo, agrégala a los comentarios.

Autor: Alejandro Agapito Bautista

Twitter: @raidentrance

Contacto:raidentrance@gmail.com