El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

L'enllaç de dades bidireccional és una característica poderosa d'Angular que permet sincronitzar automàticament les dades entre el model i la vista. Això significa que qualsevol canvi en el model es reflecteix immediatament en la vista i viceversa.

Conceptes clau

Model: Representa les dades de l'aplicació.
Vista: Representa la interfície d'usuari.
Enllaç de dades bidireccional: Sincronització automàtica entre el model i la vista.

Com funciona l'enllaç de dades bidireccional

L'enllaç de dades bidireccional en Angular es realitza mitjançant la directiva ngModel. Aquesta directiva permet vincular una propietat del model a un element de formulari de la vista, com ara un camp de text.

Sintaxi

<input [(ngModel)]="property">

[(ngModel)]: La sintaxi de doble parèntesi i claudàtors indica l'enllaç de dades bidireccional.
property: La propietat del model que es vincula a l'element de la vista.

Exemple pràctic

A continuació, es mostra un exemple pràctic d'enllaç de dades bidireccional en Angular.

Pas 1: Configuració del mòdul

Primer, assegura't d'importar el mòdul FormsModule en el mòdul principal de l'aplicació (app.module.ts).

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // Importa FormsModule

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // Afegeix FormsModule als imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Pas 2: Creació del component

Crea un component senzill amb una propietat name en el fitxer app.component.ts.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name: string = '';
}

Pas 3: Plantilla del component

Utilitza l'enllaç de dades bidireccional en la plantilla del component (app.component.html).

<div>
  <label for="name">Nom:</label>
  <input id="name" [(ngModel)]="name">
</div>
<p>Hola, {{ name }}!</p>

Explicació del codi

<input id="name" [(ngModel)]="name">: L'element input està vinculat a la propietat name del model. Qualsevol canvi en el camp de text actualitza la propietat name i viceversa.
<p>Hola, {{ name }}!</p>: La propietat name es mostra en la vista utilitzant la interpolació.

Exercici pràctic

Objectiu

Crea un formulari senzill amb camps per al nom i el correu electrònic, utilitzant l'enllaç de dades bidireccional.

Instruccions

Afegeix els camps email i name al component AppComponent.
Utilitza l'enllaç de dades bidireccional per vincular aquests camps a elements de formulari en la plantilla.
Mostra els valors dels camps en la vista.

Solució

`app.component.ts`

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name: string = '';
  email: string = '';
}

`app.component.html`

<div>
  <label for="name">Nom:</label>
  <input id="name" [(ngModel)]="name">
</div>
<div>
  <label for="email">Correu electrònic:</label>
  <input id="email" [(ngModel)]="email">
</div>
<p>Hola, {{ name }}!</p>
<p>El teu correu electrònic és: {{ email }}</p>

Errors comuns

Oblidar importar FormsModule: Si no importes FormsModule en el mòdul principal, l'enllaç de dades bidireccional no funcionarà.
Sintaxi incorrecta: Assegura't d'utilitzar la sintaxi correcta [(ngModel)] per a l'enllaç de dades bidireccional.

Resum

L'enllaç de dades bidireccional és una característica essencial d'Angular que facilita la sincronització automàtica entre el model i la vista. Utilitzant la directiva ngModel, pots crear formularis interactius i dinàmics amb facilitat. Practica amb exemples senzills per comprendre millor aquest concepte i aplicar-lo en projectes més complexos.

Enllaç de dades bidireccional

Conceptes clau

Com funciona l'enllaç de dades bidireccional

Sintaxi

Exemple pràctic

Pas 1: Configuració del mòdul

Pas 2: Creació del component

Pas 3: Plantilla del component

Explicació del codi

Exercici pràctic

Objectiu

Instruccions

Solució

`app.component.ts`

`app.component.html`

Errors comuns

Resum

Curs d'Angular

Mòdul 1: Introducció a Angular

Mòdul 2: Components d'Angular

Mòdul 3: Enllaç de dades i directives

Mòdul 4: Serveis i injecció de dependències

Mòdul 5: Enrutament i navegació

Mòdul 6: Formularis a Angular

Mòdul 7: Client HTTP i observables

Mòdul 8: Gestió d'estat

Mòdul 9: Proves a Angular

Mòdul 10: Conceptes avançats d'Angular

Mòdul 11: Desplegament i millors pràctiques