Data Binding

Es la sincronización automática de los datos entre el modelo y la vista, por ejemplo si yo quiero mostrar un mensaje de bienvenida, cambiar el titulo de mi página web al pulsar un botón o por ejemplo cuando pulso un botón en nuestra página web se oculte la lista de los clientes, etc...

Tenemos cuatro maneras:

• {{}} Mediante Interpolación.
•  ()  Mediante eventos.
•  [()] Two-way Data Binding.
•  [] Property Binding

 

 

 

 

Interpolación

Los datos van desde el código al HTML.

Utilizamos llaves para el enlace de datos: {{}}; Este proceso se llama interpolación.

app.component.ts:

import { Component } from '@angular/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  mensajeBienvenida= 'Bienvenido a Angular';

}

app.component.hmtl:

<p>{{mensajeBienvenida}}</p>

 

La variable en el archivo app.component.html se denomina {{mensajeBienvenida}} y el valor de mensajeBienvenida se muestra en app.component.html.

 

Event Binding

Los datos van desde la plantilla al código.

app.component.ts:

import { Component } from '@angular/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {  

  nombre: string = 'Pedro';

  cambiar() {

    this.nombre = 'Luis';

  }

}

app.components.html:

<p> {{this.nombre}}</p>

<input type="button" value="aceptar" (click)="cambiar()"/>

 

Al hacer click en el botón aceptar se desencadena un evento que nos cambia el nombre de Pedro por Luis.

Two-way Data Binding

El enlace de datos bidireccional combina el enlace de entrada y salida en una sola notación utilizando la siguiente directiva:

 [(ngModel)]="model.property"

Establece el doble enlace entre el elemento de la vista al que se le aplica y una propiedad del modelo. Los cambios en la vista son trasladados automáticamente al modelo, y al revés; cualquier cambio en el modelo se refleja inmediatamente en la vista.

Ponemos en app.module.ts y lo insertamos en los imports:

import {FormsModule} from '@angular/forms';

Una vez configurado el Forms módulo podemos actualizar nuestra plantilla y usar la directiva de Angular ngModel como en el ejemplo siguiente:

app-module.ts:

import { Component } from '@angular/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {  

  nombre: string = 'Juan';  

}

app-module.html:

<input type="text" name="nombre" [(ngModel)]="this.nombre" />

<p> {{this.nombre}}</p>

 

 

Lo que yo escriba en el input se verá reflejado abajo en la vista, y lo que yo escriba en la variable nombre del código se verá reflejado en la vista.

 

Property binding

El property binding es un mecanismo unidireccional que permite establecer la propiedad de un elemento de la vista, actualiza el valor de una propiedad en el componente y lo vincula a un elemento en la plantilla de vista. El enlace de propiedad utiliza la sintaxis [] para el enlace de datos. Por ejemplo la configuración de la alineación de un texto.

app.component.ts:

import { Component } from '@angular/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  alinearTexto = 'center';

}

app.component.html:

<p [align] = "alinearTexto" >Texto alineado</p>