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

HOME

Les directives personalitzades a Angular permeten crear comportaments reutilitzables que es poden aplicar a elements del DOM. Aquestes directives poden manipular l'aparença, el comportament o fins i tot la lògica dels elements als quals s'apliquen.

Objectius d'aquest tema

Comprendre què són les directives personalitzades.
Aprendre a crear directives personalitzades.
Veure exemples pràctics d'ús de directives personalitzades.
Realitzar exercicis pràctics per reforçar els conceptes apresos.

Què són les directives personalitzades?

Les directives personalitzades són classes que poden modificar el comportament dels elements del DOM. A Angular, hi ha tres tipus principals de directives:

Directives d'atribut: Canvien l'aparença o el comportament d'un element, component o altra directiva.
Directives estructurals: Canvien l'estructura del DOM afegint o eliminant elements.
Components: Són directives amb una plantilla associada.

En aquest tema, ens centrarem en les directives d'atribut personalitzades.

Crear una directiva personalitzada

Pas 1: Crear la classe de la directiva

Per crear una directiva personalitzada, primer hem de crear una classe i decorar-la amb el decorador @Directive. A continuació, definirem el selector de la directiva, que és l'atribut que utilitzarem en els elements del DOM.

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string) {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', color);
  }
}

Explicació del codi

ElementRef: Serveix per obtenir una referència a l'element del DOM al qual s'aplica la directiva.
Renderer2: S'utilitza per manipular l'estil i altres propietats de l'element de manera segura.
@HostListener: Permet escoltar esdeveniments de l'element del DOM. En aquest cas, escoltem els esdeveniments mouseenter i mouseleave per canviar el color de fons de l'element.

Pas 2: Utilitzar la directiva en una plantilla

Un cop creada la directiva, podem utilitzar-la en qualsevol element del DOM dins de les nostres plantilles Angular.

<p appHighlight>Passa el ratolí per sobre d'aquest paràgraf per veure l'efecte de la directiva.</p>

Exercici pràctic

Exercici 1: Crear una directiva de canvi de text

Crea una directiva que canviï el text d'un element quan es faci clic sobre ell.

Pas 1: Crear la classe de la directiva

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({
  selector: '[appChangeText]'
})
export class ChangeTextDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('click') onClick() {
    this.changeText('Text canviat!');
  }

  private changeText(text: string) {
    this.renderer.setProperty(this.el.nativeElement, 'innerText', text);
  }
}

Pas 2: Utilitzar la directiva en una plantilla

<p appChangeText>Fes clic en aquest paràgraf per canviar el text.</p>

Solució

Quan es fa clic en el paràgraf, el text canvia a "Text canviat!".

Errors comuns i consells

No oblidar importar la directiva al mòdul: Assegura't d'importar la directiva al mòdul corresponent perquè Angular la reconegui.
Ús incorrecte de ElementRef: Utilitza Renderer2 en lloc de manipular directament el DOM amb ElementRef per garantir la seguretat i compatibilitat amb plataformes com Angular Universal.

Resum

En aquest tema, hem après què són les directives personalitzades i com crear-les i utilitzar-les en les nostres aplicacions Angular. Hem vist exemples pràctics i hem realitzat un exercici per reforçar els conceptes apresos. Les directives personalitzades són una eina poderosa per crear comportaments reutilitzables i modulars en les nostres aplicacions.

Directives personalitzades

Objectius d'aquest tema

Què són les directives personalitzades?

Crear una directiva personalitzada

Pas 1: Crear la classe de la directiva

Explicació del codi

Pas 2: Utilitzar la directiva en una plantilla

Exercici pràctic

Exercici 1: Crear una directiva de canvi de text

Pas 1: Crear la classe de la directiva

Pas 2: Utilitzar la directiva en una plantilla

Solució

Errors comuns i consells

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