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

Directives personalitzades

Següent ►
►

Introducció

Les directives són una de les característiques més potents d'Angular. Permeten modificar el comportament dels elements del DOM de manera declarativa. En aquest tema, aprendrem a crear directives personalitzades per afegir funcionalitats específiques als nostres components.

Objectius

  • Entendre què són les directives personalitzades.
  • Aprendre a crear directives personalitzades.
  • Aplicar directives personalitzades en components Angular.
  • Veure exemples pràctics d'ús de directives personalitzades.

Què són les directives personalitzades?

Les directives personalitzades són directives creades per l'usuari que permeten afegir comportaments específics als elements del DOM. A diferència de les directives integrades, que venen amb Angular, les directives personalitzades es creen per satisfer necessitats específiques de l'aplicació.

Creació d'una directiva personalitzada

Pas 1: Crear la directiva

Per crear una directiva personalitzada, utilitzarem l'Angular CLI. Executa la següent comanda en el terminal:

ng generate directive highlight

Això crearà un fitxer highlight.directive.ts amb el següent contingut:

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

  • @Directive: Decorador que marca la classe com una directiva Angular.
  • selector: El selector CSS que s'utilitzarà per aplicar la directiva. En aquest cas, [appHighlight] indica que la directiva s'aplicarà a qualsevol element que tingui l'atribut appHighlight.
  • ElementRef: Servei que proporciona una referència a l'element del DOM al qual s'aplica la directiva.
  • Renderer2: Servei que permet manipular els elements del DOM de manera segura.
  • @HostListener: Decorador que 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 un component

Ara que hem creat la nostra directiva, podem utilitzar-la en un component. Suposem que tenim el següent component:

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

@Component({
  selector: 'app-root',
  template: `
    <h1 appHighlight>Passa el ratolí per sobre d'aquest text!</h1>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

Explicació del codi

  • appHighlight: Atribut que aplica la directiva HighlightDirective a l'element <h1>. Quan el ratolí passa per sobre del text, el color de fons canvia a groc.

Exercicis pràctics

Exercici 1: Crear una directiva per canviar el color del text

Crea una directiva anomenada TextColorDirective que canviï el color del text quan el ratolí passa per sobre d'un element.

Solució

  1. Genera la directiva:
ng generate directive textColor
  1. Implementa la directiva:
import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';

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

  @HostListener('mouseenter') onMouseEnter() {
    this.changeColor('blue');
  }

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

  private changeColor(color: string) {
    this.renderer.setStyle(this.el.nativeElement, 'color', color);
  }
}
  1. Utilitza la directiva en un component:
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <p appTextColor>Passa el ratolí per sobre d'aquest text per canviar el color!</p>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

Exercici 2: Crear una directiva per afegir una classe CSS

Crea una directiva anomenada AddClassDirective que afegeixi una classe CSS a un element quan es faci clic sobre ell.

Solució

  1. Genera la directiva:
ng generate directive addClass
  1. Implementa la directiva:
import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';

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

  @HostListener('click') onClick() {
    this.renderer.addClass(this.el.nativeElement, 'highlight');
  }
}
  1. Defineix la classe CSS en styles.css:
.highlight {
  background-color: yellow;
}
  1. Utilitza la directiva en un component:
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div appAddClass>Fes clic aquí per afegir una classe CSS!</div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

Resum

En aquest tema, hem après a crear directives personalitzades en Angular. Hem vist com utilitzar ElementRef i Renderer2 per manipular elements del DOM de manera segura, i hem après a escoltar esdeveniments del DOM amb @HostListener. També hem practicat amb exemples pràctics per reforçar els conceptes apresos. Les directives personalitzades són una eina poderosa per afegir comportaments específics als nostres components Angular.

◄ Anterior
◄
Següent ►
►

Curs d'Angular 2+

Mòdul 1: Introducció a Angular

Mòdul 2: Conceptes bàsics de TypeScript

Mòdul 3: Components i plantilles

Mòdul 4: Directives i pipes

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

Mòdul 6: Enrutament i navegació

Mòdul 7: Formularis en Angular

Mòdul 8: Client HTTP i observables

Mòdul 9: Gestió d'estat

Mòdul 10: Proves en Angular

Mòdul 11: Temes avançats

Mòdul 12: Desplegament i millors pràctiques

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats