Etiqueta: javascript

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