Programación

Data Binding Angular

Data Binding en Angular

Data Binding en Angular se define como la sincronización de los datos entre el componente y la vista y es una de sus características más populares.

PROPERTY BINDING

Property Binding es un mecanismo que consiste en la transferencia desde el componente hacia la vista, es decir, desde el componente se están pasando datos que configuran un elemento de la vista. Este enlace de propiedades permite definir propiedades a un elemento HTML, a un componente o a una directiva mediante expresiones y se pueden manejar estos valores y cambiarlos en caso de ser necesario.

Nota: Preciso recordar que no es lo mismo atributos que propiedades, mejor explicado en //www.pensemosweb.com/enlazado-propiedades-property-binding-angular/

En el ejemplo siguiente se puede observar como el atributo disabled envuelto entre corchetes tiene asignado el objeto boton y su propiedad test, definidas en el archivo typescript del componente. El uso de setTimeout permite cambiar la propiedad y realizar la sincronización automática de la vista.

component.ts

  1. export class NuevoComponent implements OnInit {
  2.   boton={
  3.     test: true
  4.   };
  5.   constructor() { }
  6.   ngOnInit() {
  7.     setTimeout(() => {
  8.       this.boton.test=false;
  9.     },3000);
  10.   }
  11. }

component.html

  1. <button mat-button disabled = "true">Botón Normal</button>
  2. <button mat-button [disabled] = "!boton.test">Botón Property</button>


DIRECTIVAS ESTRUCTURALES

Las directivas son atributos asignables a un componente y que permiten manejar el DOM y añadir propiedades a elementos HTML en la vista del componente.

DIRECTIVAS *ngIf & *ngFor

Las directivas *ngIf & *ngFor se denominan directivas estructurales, ya que, permiten manipular la estructura del DOM. Estas directivas son atributos que se añaden a un elemento HTML y que nos permiten generar un condicional y un bucle respectivamente. La directiva *ngIf permite ocultar el elemento o mostrarlo según la condición y la directiva *ngFor permite generar un bucle que repite el elemento el número de veces que se cumpla.

*ngIf

  1. <div>
  2.     <img *ngIf="usuario.imaprofile" [src]="usuario.imaprofile">
  3.     <span>{{ usuario.nombre }}</span>
  4.     <span>{{ usuario.pais}}</span>
  5. </div>


  1. <div>
  2.     <img *ngIf="usuario.imaprofile" [src]="usuario.imaprofile">
  3.     <img *ngIf="!usuario.imaprofile" [src]="profiledefault">
  4.     <span>{{ usuario.nombre }}</span>
  5.     <span>{{ usuario.pais}}</span>
  6. </div>

*ngif (if - else)

  1. <div *ngIf=usuario;then datosValidos; else sinDatos>        
  2. </div>
  3. <ng-template #datosValidos>
  4.     <span>{{ usuario.nombre }}</span>
  5.     <span>{{ usuarios.pais }}</span>
  6. </ng-template>
  7. <ng-template #sinDatos>
  8.     <span>No existe usuario</span>
  9. </ng-template>

*ngFor

  1. <div *ngFor="let usuario of arrayUsuarios">
  2.     <img *ngIf="usuario.imaprofile"  [src]="usuario.imaprofile">
  3.     <img *ngIf="!usuario.imaprofile" [src]="DEFAULT_PICTURE">
  4.     <span>{{ usuario.nombre }}</span>
  5.     <span>{{ usuario.pais }}</span>
  6. </div>

*ngSwitch

  1. <ul [ngSwitch]="color">
  2.     <li *ngSwitchCase=" 'yellow' ">
  3.         El color es el amarillo
  4.     </li>
  5.      <li  *ngSwitchCase="'red'">
  6.         El color es el rojo
  7.     </li>
  8. </ul>


DIRECTIVAS DE ATRIBUTO

ngClass

Permite asignar una clase a un elemento con la opción  de añadirla si se cumple una condición.

  1. <span [class.oferta] = "coche.precio <= 1000">{{coche.precio}}€ </span>


  1. <span [ngClass] = '{ "oferta" : coche.precio <=1000 }'>{{ coche.precio }} </span>


EVENT BINDING

El Event Binding es la transferencia que usa Angular para manejar los eventos, esta transferencia va desde la vista hacia el componente. De la misma forma que Javascript, se añade un atributo al elemento HTML y se le asigna una función con sus parámetros (si los hay). Pero en Angular este atributo va cerrado entre paréntesis y para lanzar un evento, Angular dispone de la palabra reservada $event que lanza un evento de tipo Angular y desde el archivo typescript del componente podrá ser capturado.

  1. <button (click) = "onClick($event)">
  2.   Botón
  3. </button>
  4. <input (keyup) = "onKeyUp($event)">


  1. export class BotonComponent implements OnInit { 
  2.   constructor() { }
  3.   ngOnInit() {
  4.     
  5.   }
  6.   onClick($event){
  7.       console.log("Event Click",$event);
  8.   }
  9.   onKeyUp($event){
  10.       console.log("Event Tecla presionada",$event);
  11.   }
  12. }

DIRECTIVAS PERSONALIZADAS

Crear directiva

  1. ng generate directive fondo

Ejemplo de directiva personalizada

  1. import { Directive, ElementRef } from '@angular/core';
  3. @Directive({
  4.   selector: '[edFondo]'
  5. })
  6. export class FondoDirective {
  8.   constructor(public elemento: ElementRef) {
  9.   }
  10.   
  11. ngOnInit(){
  12.     var fondo = this.elemento.nativeElement;
  13.     fondo.style.color= "white";
  14.     fondo.style.background = "orange";
  15.     console.log(fondo.innerText);
  16.   }
  17. }


  1. <div class="container">
  2.   <p edFondo>hola que tal</p>
  3. </div>


COMUNICACIÓN ENTRE COMPONENTES

INPUT DINÁMICO (@INPUT)

Este decorador permite  que la propiedad de un componente padre esté disponible en un componente hijo mediante el uso de atributos.

En el código de ejemplo siguiente se ha creado una lista de usuarios del tipo Usuario en el componente padre.

  1. import { Component, OnInit } from '@angular/core';
  2. import { Usuario } from "../../shared/model/usuario";
  3. @Component({
  4.   selector: 'pre-lista-padre',
  5.   templateUrl: './lista-padre.component.html',
  6.   styleUrls: ['./lista-padre.component.css']
  7. })
  8. export class ListaPadreComponent implements OnInit {
  9.   usuario1: Usuario;
  10.   usuario2: Usuario;
  11.   usuario3: Usuario;
  12.   listaUsuarios : Usuario[];  
  13.   constructor() { }
  14.   ngOnInit() {
  15.     this.usuario1 = {
  16.       id:1,
  17.       nombre: "Mónica Cañero",
  18.       pais: "Bolivia",
  19.     };
  20.     this.usuario2 = {
  21.       id:2,
  22.       nombre: "Susana Beltrán",
  23.       pais: "España"
  24.     };
  25.     this.usuario3 = {
  26.       id:3,
  27.       nombre: "Vanesa Pantoja",
  28.       pais: "Venezuela"
  29.     };
  30.     this.listaUsuarios = [ this.usuario1,this.usuario2,this.usuario3 ];
  31.   }
  32. }

En la plantilla del componente padre añadimos el selector del componente hijo y la directiva de atributo asignando los datos.

  1. <div>
  2.     <pre-lista-hijo *ngFor="let user of listaUsuarios" [usuario] = "user"></pre-lista-hijo>
  3. </div>

En el componente hijo importamos el modelo de  Usuario y se añade el decorador @Input() y a continuación el atributo usuario de tipo Usuario. Este decorador es el que permite que desde la plantilla o vista del componente hijo sea posible el acceso a los datos (usuario).

  1. import { Component, OnInit, Input } from '@angular/core';
  2. import { Usuario } from "../../../shared/model/usuario";
  3. @Component({
  4.   selector: 'pre-lista-hijo',
  5.   templateUrl: './lista-hijo.component.html',
  6.   styleUrls: ['./lista-hijo.component.css']
  7. })
  8. export class ListaHijoComponent implements OnInit {
  10.   @Input()
  11.   usuario: Usuario;
  13.   constructor() { }
  15.   ngOnInit() {
  16.   }
  17. }

En la vista del componente hijo ya es posible mostrar los valores obteniéndolos del componente padre.

  1. <div>    
  2.     <span>{{ usuario.nombre }}</span>
  3.     <span>{{ usuario.pais }}</span>
  4. </div>

OUTPUT DINÁMICO (@OUTPUT)

Este decorador junto con EventEmitter permite que un evento de un componente hijo esté disponible en un componente padre.

Manteniendo el código del ejemplo anterior la plantilla del componente hijo solo es necesario añadir un evento Angular y asignarle la función que emitirá los datos.

  1. <div (click) = "capturarEvento(usuario)">    
  2.     <span>{{ usuario.nombre }}</span>
  3.     <span>{{ usuario.pais }}</span>
  4. </div>

Tipos de evento más comunes en Angular

  • (click), (dblclick), (keyup), (keypress), (keydown), (focus), (blur), (submit), (scroll), (submit), (drag),(dragover),(drop), (cut), (copy), (paste).

Desde el componente hijo es necesario importar el Output y el EventMitter, para poder añadir el decorador @Output y a continuación crear un objeto EventEmitter. Al final de la clase se crea el método (que es el asignado anteriormente en la plantilla), incluyendo el tipo de objeto como parámetro. Este método llama al método emit() de la clase EventMitter que es el que propaga los datos.

  1. import { Component, OnInit, Input,Output, EventEmitter } from '@angular/core';
  2. import { Usuario } from "../../../shared/model/usuario";
  3. @Component({
  4.   selector: 'pre-lista-hijo',
  5.   templateUrl: './lista-hijo.component.html',
  6.   styleUrls: ['./lista-hijo.component.css']
  7. })
  8. export class ListaHijoComponent implements OnInit {
  9.   @Input()
  10.   usuario: Usuario;
  11.   @Output()
  12.   propagarDatos = new EventEmitter<Usuario>();
  13.   constructor() { }
  14.   ngOnInit() {
  15.   }
  16. capturarEvento(ev: Usuario){
  17.     this.propagarDatos.emit(ev);
  18.   }
  19. }

Desde la vista del componente padre se añade como atributo  el objeto anteriormente creado (propagarDatos) cerrado entre paréntesis y se le asigna una función (mostrarDato)pasando como parámetros el "$event" que es una palabra reservada de Angular.

  1. <div>
  2.     <pre-lista-hijo *ngFor="let user of listaUsuarios" [usuario] = "user" (propagarDatos)="mostrarDatos($event)"></pre-lista-hijo>
  3. </div>

Al final de la clase se crea el método que será el que maneje los datos a través del parámetro $event.

  1. import { Component, OnInit } from '@angular/core';
  2. import { Usuario } from "../../shared/model/usuario";
  3. @Component({
  4.   selector: 'pre-lista-padre',
  5.   templateUrl: './lista-padre.component.html',
  6.   styleUrls: ['./lista-padre.component.css']
  7. })
  8. export class ListaPadreComponent implements OnInit {
  9.   usuario1: Usuario;
  10.   usuario2: Usuario;
  11.   usuario3: Usuario;
  12.   listaUsuarios : Usuario[];  
  13.   constructor() { }
  14.   ngOnInit() {
  15.     this.usuario1 = {
  16.       id:1,
  17.       nombre: "Mónica Cañero",
  18.       pais: "Bolivia",
  19.     };
  20.     this.usuario2 = {
  21.       id:2,
  22.       nombre: "Susana Beltrán",
  23.       pais: "España"
  24.     };
  25.     this.usuario3 = {
  26.       id:3,
  27.       nombre: "Vanesa Pantoja",
  28.       pais: "Venezuela"
  29.     };
  30.     this.listaUsuarios = [ this.usuario1,this.usuario2,this.usuario3 ];
  31.   }
  32. mostrarDatos($event){    
  33.     console.log("Nombre del registro pulsado: ",$event.nombre);
  34.   }
  35. }


PIPES O FILTROS

Los pipes son funciones de Angular que permiten modificar datos (que a menudo son rutinarios o repetitivos) en la vista, como pueden ser formatear la fecha, modificar el texto...

  1. export class ExternoComponent implements OnInit {
  2. 	
  3.     public fecha: Date;
  5. ngOnInit()
  6. {
  7.     this.fecha=new Date();  
  8. }


  1. <hr>
  2. <p>{{ fecha | date: "dd/MM/y"}}</p>
  3. <hr>


  1.     <hr>
  2.     <p>{{ fecha | date: "fullDate"}}</p><br>
  3.     <p>{{ "texto en mayúsculas con PIPES" | uppercase }}</p>
  4.     <hr>


PIPES PERSONALIZADOS

module.ts

  1. import { CalculadoraPipe } from "./pipes/calculadora.pipe";
  3. declarations:[ CalculadoraPipe ]

component.ts

  1. import { Pipe, PipeTransform } from "@angular/core";
  3. @Pipe({
  4. 	name: "calculadora"
  5. })
  6. export class CalculadoraPipe implements PipeTransform{
  7. 	//dato | calculadora: dato2
  8. 	//param1            param2
  9. 	transform(value1:any,value2:any){
  10. 		let operaciones =`
  11. 			Suma: ${value1+value2} - 
  12. 			Resta: ${value1-value2} - 
  13. 			Multiplicación: ${value1*value2} - 
  14. 			División: ${value1/value2}
  15. 			`;
  16. 		return operaciones;
  17. 	}
  18. }

component.html

  1. <div>
  2.     <p>{{ 4 | calculadora: 2 }}</p>
  3. </div>


Comentarios: 0

Para poder comentar es necesario iniciar sesión


Este dominio utiliza cookies de terceros para crear estadísticas y publicidad personalizada. Si continúa navegando está aceptando su uso