El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Introducció al Binding de Dades

Següent ►
►

El binding de dades és un concepte fonamental en el desenvolupament d'aplicacions amb Ionic i Angular. Permet la sincronització automàtica de dades entre el model de dades de l'aplicació i la interfície d'usuari. En aquesta secció, aprendrem què és el binding de dades, els diferents tipus de binding disponibles i com utilitzar-los en una aplicació Ionic.

Què és el Binding de Dades?

El binding de dades és el procés de connectar la interfície d'usuari (UI) d'una aplicació amb el model de dades. Això permet que els canvis en el model de dades es reflecteixin automàticament en la UI i viceversa. En Angular, el binding de dades es pot fer de diverses maneres, incloent:

  • Binding unidireccional (One-way binding): La informació flueix en una sola direcció, des del model de dades cap a la UI o des de la UI cap al model de dades.
  • Binding bidireccional (Two-way binding): La informació flueix en ambdues direccions, permetent que els canvis en la UI actualitzin el model de dades i viceversa.

Tipus de Binding de Dades en Angular

  1. Interpolació

L'interpolació és una forma de binding unidireccional que permet inserir valors de variables en el codi HTML. S'utilitza amb les claus dobles {{ }}.

Exemple:

<p>Hola, {{ nom }}!</p>

En aquest exemple, el valor de la variable nom es mostrarà dins del paràgraf.

  1. Binding de Propietats

El binding de propietats permet establir valors de propietats HTML o atributs directament des del model de dades. S'utilitza amb els claudàtors [ ].

Exemple:

<img [src]="imatgeURL" alt="Imatge de prova">

En aquest exemple, el valor de la variable imatgeURL s'assignarà a l'atribut src de l'etiqueta img.

  1. Binding d'Esdeveniments

El binding d'esdeveniments permet capturar esdeveniments de la UI i executar funcions del component. S'utilitza amb els parèntesis ( ).

Exemple:

<button (click)="saludar()">Saluda</button>

En aquest exemple, quan es faci clic al botó, es cridarà la funció saludar() del component.

  1. Binding Bidireccional

El binding bidireccional permet sincronitzar automàticament el valor d'un element de la UI amb una variable del model de dades. S'utilitza amb la directiva ngModel.

Exemple:

<input [(ngModel)]="nom" placeholder="Escriu el teu nom">
<p>Hola, {{ nom }}!</p>

En aquest exemple, el valor de l'input es sincronitzarà amb la variable nom, i qualsevol canvi en l'input es reflectirà automàticament en el paràgraf.

Exemple Pràctic

A continuació, crearem un exemple pràctic per il·lustrar els diferents tipus de binding de dades en una aplicació Ionic.

Pas 1: Crear un Nou Component

Primer, crearem un nou component anomenat binding-example.

ionic generate component binding-example

Pas 2: Editar el Component

Editem el fitxer binding-example.component.ts per definir les variables i funcions necessàries.

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

@Component({
  selector: 'app-binding-example',
  templateUrl: './binding-example.component.html',
  styleUrls: ['./binding-example.component.scss'],
})
export class BindingExampleComponent {
  nom: string = 'Món';
  imatgeURL: string = 'https://via.placeholder.com/150';

  saludar() {
    alert(`Hola, ${this.nom}!`);
  }
}

Pas 3: Editar la Plantilla

Editem el fitxer binding-example.component.html per utilitzar els diferents tipus de binding de dades.

<ion-content>
  <h1>Exemple de Binding de Dades</h1>

  <!-- Interpolació -->
  <p>Hola, {{ nom }}!</p>

  <!-- Binding de Propietats -->
  <img [src]="imatgeURL" alt="Imatge de prova">

  <!-- Binding d'Esdeveniments -->
  <button (click)="saludar()">Saluda</button>

  <!-- Binding Bidireccional -->
  <ion-item>
    <ion-label>Nom:</ion-label>
    <ion-input [(ngModel)]="nom" placeholder="Escriu el teu nom"></ion-input>
  </ion-item>
</ion-content>

Pas 4: Afegir el Component a una Pàgina

Finalment, afegim el component binding-example a una pàgina existent, com ara home.page.html.

<ion-content>
  <app-binding-example></app-binding-example>
</ion-content>

Exercicis Pràctics

Exercici 1: Interpolació

  1. Crea una variable cognom en el component.
  2. Mostra el valor de cognom en la plantilla utilitzant interpolació.

Solució:

// binding-example.component.ts
export class BindingExampleComponent {
  nom: string = 'Món';
  cognom: string = 'Exemple';
  imatgeURL: string = 'https://via.placeholder.com/150';

  saludar() {
    alert(`Hola, ${this.nom} ${this.cognom}!`);
  }
}
<!-- binding-example.component.html -->
<p>Hola, {{ nom }} {{ cognom }}!</p>

Exercici 2: Binding de Propietats

  1. Crea una variable altText en el component.
  2. Assigna el valor de altText a l'atribut alt de l'etiqueta img.

Solució:

// binding-example.component.ts
export class BindingExampleComponent {
  nom: string = 'Món';
  cognom: string = 'Exemple';
  imatgeURL: string = 'https://via.placeholder.com/150';
  altText: string = 'Imatge de prova';

  saludar() {
    alert(`Hola, ${this.nom} ${this.cognom}!`);
  }
}
<!-- binding-example.component.html -->
<img [src]="imatgeURL" [alt]="altText">

Exercici 3: Binding d'Esdeveniments

  1. Crea una funció canviarNom en el component que canviï el valor de nom.
  2. Afegeix un botó que cridi la funció canviarNom quan es faci clic.

Solució:

// binding-example.component.ts
export class BindingExampleComponent {
  nom: string = 'Món';
  cognom: string = 'Exemple';
  imatgeURL: string = 'https://via.placeholder.com/150';
  altText: string = 'Imatge de prova';

  saludar() {
    alert(`Hola, ${this.nom} ${this.cognom}!`);
  }

  canviarNom() {
    this.nom = 'Ionic';
  }
}
<!-- binding-example.component.html -->
<button (click)="canviarNom()">Canvia Nom</button>

Conclusió

En aquesta secció, hem après què és el binding de dades i els diferents tipus de binding disponibles en Angular. Hem vist exemples pràctics de com utilitzar interpolació, binding de propietats, binding d'esdeveniments i binding bidireccional en una aplicació Ionic. A més, hem practicat aquests conceptes amb exercicis pràctics. En la propera secció, explorarem com utilitzar serveis Angular per gestionar dades de manera eficient.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats