Angular: DataBinding = Enlace de datos y eventos

DataBinding: Enlace de datos y eventos

Data Binding (Enlace de datos) es el mecanismo que permite sincronizar los datos entre el modelo de datos de la aplicación y la vista (la UI). El data binding facilita la interacción del usuario con la aplicación, permitiendo que los cambios en el modelo de datos se reflejen automáticamente en la vista y viceversa.

Tipos de Data Binding en Angular

1. Interpolación: {{ message }} Vincula datos del componente a la vista. La interpolación se refiere a la incrustación de expresiones en texto marcado. De forma predeterminada, la interpolación utiliza las llaves dobles y como delimitadores.{{}}
2. Binding de Propiedad: [value]="userName" Vincula propiedades de elementos DOM a datos del componente.
3. Binding de Evento: (click)="sayHello()" Vincula eventos del DOM a métodos del componente.
4. Binding de Atributo: [attr.role]="role" Vincula atributos de elementos DOM a datos del componente.
5. Binding Bidireccional: [(ngModel)]="userName" Vincula datos del componente a la vista y viceversa.

Video Tutoriales: 

1. Interpolacion: https://youtu.be/3B2kUT8gsik
2. Interpolación {{ angular }} / On way data binding  https://youtu.be/qjuYVJPb_Qg
3. Enlace de datos bidireccional / Two-way data binding   https://youtu.be/EuFh5s5lYIU
4. Angular 17: Two Way Binding: https://youtu.be/q-TBDu2xwoQ
   
5. Event Binding o enlace de evento:  https://youtu.be/XPJmsKRuMTg
6. Event binding ó (enlace de eventos ) Angular   https://youtu.be/0qvQ_0A35b8
   
7. Class Binding o enlace de clases:    https://youtu.be/uipYQVQd3Iw
8. Property Binding o enlaces de propiedades: https://youtu.be/bGIKUzcyArA
9. ANGULAR: Two Way Data Binding de Inputs con onPush   https://youtu.be/DQEddwB5Rpc
   
10. Data Binding in  Angular 18   https://youtu.be/6axfJtFWsiQ
    
11. DataBinding: https://youtu.be/g8geh3lFpBg

 

 Resumen de Data Binding

Interpolación: {{ message }}


Binding de Propiedad: [value]="userName"

Binding de Evento: (click)="sayHello()"

Binding de Atributo: [attr.role]="role"

Binding Bidireccional: [(ngModel)]="userName"

 

Estructura del proyecto

// Creando nuevo proyecto = practica2
ng new practica2

// Entramos al nuevo proyecto
cd practica2

// Generamos el componente llamado = data-binding
ng generate component data-binding

// Generamos sus componentes --inline-template --inline-style
ng g c --inline-template --inline-style data-binding/Interpolacion

ng g c --inline-template --inline-style data-binding/Binding-Propiedad

ng g c --inline-template --inline-style data-binding/Binding-Evento

ng g c --inline-template --inline-style data-binding/Binding-Atributo

ng g c --inline-template --inline-style data-binding/Binding-Bidireccional

Componentes del data-binding

// data-binding.component.ts
import { Component } from '@angular/core';
// Agregando los componentes creados 
import  {InterpolacionComponent } from './interpolacion/interpolacion.component';
import {BindingPropiedadComponent} from './binding-propiedad/binding-propiedad.component';
import {BindingEventoComponent} from './binding-evento/binding-evento.component';
import {BindingAtributoComponent} from './binding-atributo/binding-atributo.component';
import {BindingBidireccionalComponent} from './binding-bidireccional/binding-bidireccional.component';

@Component({
  selector: 'app-data-binding',
  standalone: true,
  // Declaramos que hemos Agregado los componentes y los vamos usar
  imports: [InterpolacionComponent, BindingPropiedadComponent, 
        BindingEventoComponent, BindingAtributoComponent, BindingBidireccionalComponent],
  template: `
    <h3>Data-Binding</h3>
    <app-interpolacion/>
    <app-binding-propiedad/>
    <app-binding-evento />
    <app-binding-atributo/>
    <app-binding-bidireccional/>
  `,
  styles: [`h3 { color: blue; }`]
})
export class DataBindingComponent {  }

 

Ejemplos de Cada Data Binding en Angular v18

1. Interpolación

// interpolacion.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-interpolacion',
  standalone: true,
  imports: [],
  template: `
    <h3>Interpolación = {{message}} </h3>
  `,
  styles: `[]`
})
export class InterpolacionComponent {
  message = 'On way data binding {{message}} ';
}

import { Component } from '@angular/core';
// @for. Se refiere a cada uno de los miembros de la matriz

@Component({
    selector: 'app-cliente',
    standalone: true,
    template: `
      <div> <!-- Listando Matriz Uno -->
      <ul>
      	@for (cliente of clientes; track cliente) {
        <li>{{ cliente.name }}</li>
        }
     </ul>
    `,
  })
  export class ClienteComponent {
    // Matriz Uno
    clientes = [{name: 'Carlos'}, {name: 'Elmer'}, {name: 'Jose'}];
    cliente = 'Rocha';
  }

2. Binding de Propiedad

Usar el enlace de propiedades de una manera que le ayude a reducir los errores y mantener el código legible. Una expresión de plantilla debe dar como resultado el tipo de valor que espera la propiedad de destino.  Si la propiedad de destino espera una cadena: string,  si espera un número: number, si espera un objeto: object

// .component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-binding-propiedad',
  standalone: true,
  imports: [],
  template: `
    <h3>Property binding: <input [value]="userName"></h3>
  `,
  styles: [`h3 { color: green; }`]
})
export class BindingPropiedadComponent {
  userName = ' [value]="userName" ';
}

// carrusel.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-carrusel',
  standalone: true,
  imports: [],
  // Agregar CDN de Bootstrap en index.html
  template: `
    <div>
    <button class="btn btn-danger" (click)="imag = 'https://www.w3schools.com/html/pic_trulli.jpg'">Imagen-1</button>
    <button class="btn btn-success mx-2" (click)="imag = 'https://www.w3schools.com/html/img_chania.jpg'">Imagen-2</button>
    <button class="btn btn-primary" (click)="imag = 'https://www.w3schools.com/html/programming.gif'">Imagen-3</button>
    <button class="btn btn-secondary" (click)=" imag = 'https://www.w3schools.com/html/img_girl.jpg'"> imagen inicial</button>
    </div>
    <img [src]="imag" alt="img_girl.jpg"  width="250" height="300">
  `,
  styles: ``
})
export class CarruselComponent {
   imag:string = "https://www.w3schools.com/html/img_girl.jpg";
}

3. Binding de Evento

// .component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-binding-evento',
  standalone: true,
  imports: [],
  template: `
      <h3>Event Binding:  (click)="sayFuncion()" </h3>
      <button (click)="sayFuncion()">Click me</button>
  `,
  styles: ``
})
export class BindingEventoComponent {
  sayFuncion() {
    alert('Binding de Evento, sayFuncion() ');
  }
}

// variable-plantilla.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-variable-plantilla',
  standalone: true,
  imports: [],
  // Agregar CDN de Bootstrap en index.html
  template: `
<br>       
<h3>variable de plantilla </h3>
<input type="text" placeholder="Ingresa tu nombre" class="form-control" #name>
<div>
<button class="btn btn-primary" (click)="mostrar_en_consola(name.value)">Mostrar en Consola</button>
      <!-- -->  
<button (click)="miAlerta(name.value)">Mostrar como alerta</button>
</div>
<br>
  `,
  styles: ``
})
export class VariablePlantillaComponent {
    mostrar_en_consola(name:string){
        console.log(name);
    }

    miAlerta(name:string) {
    alert(name);
  }
}

// botones.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-botones',
  standalone: true,
  imports: [],
  // Agregar CDN de Bootstrap en index.html
  template: `
    <div>
    <button [class]="{'disabled':on_off}" class="btn btn-danger" (click)="text_color = 'text-danger'">Color Rojo</button>
    <button [class]="{'disabled':on_off}" class="btn btn-success mx-2" (click)="text_color = 'text-success'">Color Verde</button>
    <button [class]="{'disabled':on_off}" class="btn btn-primary" (click)="text_color = 'text-primary'">Color Azul</button>
    </div>
    <p [class]="text_color">Texto que va a cambiar de color</p>
    <button class="btn btn-secondary" (click)="on_off = !on_off"> Activar/Desactivar</button>
  `,
  styles: ``
})
export class BotonesComponent {
  text_color:string = '';
  on_off:Boolean = false;
}

4. Binding de Atributo

// .component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-binding-atributo',
  standalone: true,
  imports: [],
  template: `
    <h3> attribute-binding: [attr.role]="role"</h3> 
    <div [attr.role]="role">Contentido, Binding de Atributo </div>
  `,
  styles: ``
})
export class BindingAtributoComponent {
  role = 'admin';
}

5. Binding Bidireccional

// .component.ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';


@Component({
  selector: 'app-binding-bidireccional',
  standalone: true,
  imports: [FormsModule],
  template: `
    <h3> two-way-binding: [(ngModel)]="userName" </h3> 
    <input [(ngModel)]="userName"> 
    <p> Binding Bidireccional = Hola, {{ userName }}!</p>
  `,
  styles: ``
})
export class BindingBidireccionalComponent {
  userName = '';
}

mmm