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

HOME

L'enllaç d'esdeveniments és una característica fonamental d'Angular que permet als desenvolupadors respondre a les accions dels usuaris, com ara clics de botons, moviments del ratolí, tecles pressionades, etc. En aquesta secció, aprendrem com utilitzar l'enllaç d'esdeveniments per capturar i gestionar aquests esdeveniments en les nostres aplicacions Angular.

Conceptes clau

Enllaç d'esdeveniments: Permet associar esdeveniments del DOM amb mètodes del component.
Sintaxi: Utilitza parèntesis per envoltar l'esdeveniment del DOM.
Gestió d'esdeveniments: Els mètodes del component gestionen la lògica quan es produeix un esdeveniment.

Sintaxi bàsica

La sintaxi bàsica per a l'enllaç d'esdeveniments en Angular és la següent:

<button (click)="onClick()">Fes clic aquí</button>

En aquest exemple, l'esdeveniment click del botó està enllaçat al mètode onClick() del component.

Exemple pràctic

Pas 1: Crear el component

Primer, creem un component anomenat EventBindingComponent.

ng generate component event-binding

Pas 2: Definir el mètode del component

Afegim un mètode onClick al nostre component per gestionar l'esdeveniment de clic.

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

@Component({
  selector: 'app-event-binding',
  templateUrl: './event-binding.component.html',
  styleUrls: ['./event-binding.component.css']
})
export class EventBindingComponent {
  message: string = '';

  onClick() {
    this.message = 'Botó clicat!';
  }
}

Pas 3: Enllaçar l'esdeveniment en la plantilla

Ara, enllacem l'esdeveniment click del botó al mètode onClick en la plantilla del component.

<!-- event-binding.component.html -->
<button (click)="onClick()">Fes clic aquí</button>
<p>{{ message }}</p>

Pas 4: Executar l'aplicació

Executem l'aplicació per veure el resultat.

ng serve

Quan fem clic al botó, el missatge "Botó clicat!" apareixerà a la pàgina.

Enllaç d'esdeveniments amb paràmetres

Podem passar paràmetres als mètodes del component des de l'enllaç d'esdeveniments.

Exemple

<button (click)="onClick('Hola, Angular!')">Fes clic aquí</button>

// event-binding.component.ts
onClick(message: string) {
  this.message = message;
}

Enllaç d'esdeveniments amb l'objecte d'esdeveniment

Podem accedir a l'objecte d'esdeveniment del DOM en el nostre mètode del component.

Exemple

<input (input)="onInput($event)" placeholder="Escriu alguna cosa">
<p>{{ inputText }}</p>

// event-binding.component.ts
inputText: string = '';

onInput(event: Event) {
  const inputElement = event.target as HTMLInputElement;
  this.inputText = inputElement.value;
}

Exercicis pràctics

Exercici 1: Canviar el color de fons

Crea un component que canviï el color de fons d'un div quan es faci clic en un botó.

Solució

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

@Component({
  selector: 'app-background-color',
  templateUrl: './background-color.component.html',
  styleUrls: ['./background-color.component.css']
})
export class BackgroundColorComponent {
  backgroundColor: string = 'white';

  changeColor() {
    this.backgroundColor = this.backgroundColor === 'white' ? 'blue' : 'white';
  }
}

<!-- background-color.component.html -->
<div [style.background-color]="backgroundColor" style="width: 200px; height: 200px;"></div>
<button (click)="changeColor()">Canvia el color</button>

Exercici 2: Comptador de clics

Crea un component que mostri un comptador que s'incrementi cada vegada que es faci clic en un botó.

Solució

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

@Component({
  selector: 'app-click-counter',
  templateUrl: './click-counter.component.html',
  styleUrls: ['./click-counter.component.css']
})
export class ClickCounterComponent {
  count: number = 0;

  increment() {
    this.count++;
  }
}

<!-- click-counter.component.html -->
<p>Comptador: {{ count }}</p>
<button (click)="increment()">Incrementa</button>

Resum

En aquesta secció, hem après com utilitzar l'enllaç d'esdeveniments en Angular per capturar i gestionar esdeveniments del DOM. Hem vist exemples pràctics de com enllaçar esdeveniments a mètodes del component, passar paràmetres i accedir a l'objecte d'esdeveniment. També hem practicat amb exercicis per reforçar els conceptes apresos. Ara estem preparats per avançar cap a l'enllaç de dades bidireccional en el següent tema.

Enllaç d'esdeveniments

Conceptes clau

Sintaxi bàsica

Exemple pràctic

Pas 1: Crear el component

Pas 2: Definir el mètode del component

Pas 3: Enllaçar l'esdeveniment en la plantilla

Pas 4: Executar l'aplicació

Enllaç d'esdeveniments amb paràmetres

Exemple

Enllaç d'esdeveniments amb l'objecte d'esdeveniment

Exemple

Exercicis pràctics

Exercici 1: Canviar el color de fons

Solució

Exercici 2: Comptador de clics

Solució

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