Cum să construiți directive personalizate în Angular

de
Tweet
Share
Share
Pin

Explorarea Directivelor în Angular: Un Ghid Detaliat

Un aspect fundamental al framework-ului Angular îl reprezintă directivele. Acestea oferă o modalitate eficientă de a controla comportamentul elementelor DOM. Angular pune la dispoziție o gamă variată de directive predefinite, dar permite și crearea de directive personalizate, adaptate necesităților specifice ale fiecărei aplicații.

Ce sunt Directivele?

Directivele pot fi considerate ca fiind coduri personalizate care modifică felul în care elementele HTML funcționează sau arată. Prin intermediul directivelor, se pot implementa funcții precum gestionarea evenimentelor, manipularea structurii DOM sau afișarea/ascunderea elementelor.

În Angular, există două categorii principale de directive: structurale și de atribut. Directivele structurale sunt folosite pentru a schimba structura DOM, în timp ce directivele de atribut influențează aspectul sau comportamentul elementelor. Directivele reprezintă un mecanism puternic de a extinde capabilitățile componentelor Angular.

Avantajele Utilizării Directivelor

Utilizarea directivelor în Angular aduce multiple beneficii:

  • Reutilizabilitate: Directivele pot fi folosite în multiple componente, ceea ce duce la economii de timp și efort.
  • Extensibilitate: Directivele pot fi extinse cu noi funcționalități, îmbunătățind astfel performanța componentelor.
  • Flexibilitate: Prin intermediul directivelor, comportamentul și aspectul elementelor pot fi modificate într-o varietate de moduri, oferind o mare flexibilitate în dezvoltarea aplicațiilor.

Pregătirea Mediului de Dezvoltare Angular

Pentru a începe lucrul cu Angular, este necesară instalarea Angular CLI. Aceasta se face executând următoarea comandă în terminal:

 npm install -g @angular/cli

După instalarea CLI, se poate crea un nou proiect Angular utilizând următoarea comandă:

 ng new custom-directives-app

Această comandă va genera un proiect Angular cu denumirea „custom-directives-app”.

Crearea unei Directive Personalizate

Odată ce proiectul Angular este pregătit, se poate trece la crearea de directive personalizate. Pentru aceasta, se va crea un fișier TypeScript și se va defini o clasă marcată cu decoratorul @Directive.

Decoratorul @Directive este un element specific TypeScript, utilizat pentru a marca și configura clasele ca directive personalizate. De exemplu, vom crea un fișier „highlight.directive.ts” în directorul „src/app” și vom defini acolo directiva noastră de evidențiere.

Exemplu de cod:

 import { Directive } from "@angular/core";
@Directive({
  selector: "[myHighlight]",
})
export class HighlightDirective {
  constructor() {}
}

Acest cod importă decoratorul Directive din modulul „@angular/core” și îl utilizează pentru a decora clasa HighlightDirective. Decoratorul primește un obiect ca argument, care include proprietatea selector.

În acest caz, proprietatea selector este setată la [myHighlight], ceea ce înseamnă că directiva poate fi aplicată în șabloane prin adăugarea atributului myHighlight la un element.

Exemplu de utilizare a directivei în șabloane:

 <main>
<p myHighlight>Some text</p>
</main>

Adăugarea Comportamentului Directivei

După crearea directivei, următorul pas este să îi adăugăm un comportament, pentru ca aceasta să poată modifica structura DOM. Pentru aceasta, este necesară utilizarea ElementRef din „@angular/core”.

ElementRef va fi injectat în constructorul directivei și este un înveliș în jurul unui element nativ din cadrul vizualizării.

Iată cum se poate adăuga un comportament directivei:

 import { Directive, ElementRef } from "@angular/core";
@Directive({
    selector: "[myHighlight]"
})
export class HighlightDirective {
    constructor(private element: ElementRef) {
        this.element.nativeElement.style.backgroundColor="lightblue";
    }
}

În acest exemplu, constructorul clasei HighlightDirective primește un parametru ElementRef, care este injectat automat de Angular. ElementRef oferă acces la elementul DOM subiacent.

Prin proprietatea element.nativeElement, se accesează elementul DOM nativ și se setează culoarea de fundal la albastru deschis folosind proprietatea style. Astfel, orice element pe care este aplicată directiva myHighlight va avea fundalul albastru deschis.

Pentru a activa directiva, aceasta trebuie importată și declarată în fișierul „app.module.ts”.

Exemplu:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HighlightDirective } from './highlight.directive';

@NgModule({
  declarations: [
    AppComponent,
    HighlightDirective,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Acum directiva myHighlight poate fi aplicată elementelor din componentele Angular.

 <main>
<p myHighlight>Some text</p>
</main>

Pentru a testa funcționarea directivei, aplicația poate fi rulată pe serverul de dezvoltare folosind comanda:

 ng serve

După rularea comenzii, se poate accesa adresa „http://localhost:4200/” în browser pentru a vedea interfața aplicației.

Directivele predefinite din Angular pot primi valori pentru a modifica aspectul elementelor, lucru care nu se întâmplă în mod implicit cu directiva personalizată myHighlight. Această limitare poate fi depășită prin configurarea directivei să accepte o valoare care va fi folosită pentru a seta dinamic culoarea de fundal a șablonului.

Pentru a face acest lucru, codul din fișierul „highlight.directive.ts” va fi înlocuit cu următorul:

 import { Directive, ElementRef, Input } from "@angular/core";
@Directive({
    selector: "[myHighlight]"
})
export class HighlightDirective {
    @Input() set myHighlight(color: string) {
        this.element.nativeElement.style.backgroundColor = color;
    }

    constructor(private element: ElementRef) {
    }
}

În acest cod, clasa HighlightDirective include o metodă setter numită myHighlight. Această metodă primește un parametru de tip șir, numit color. Metoda setter este decorată cu @Input, ceea ce permite transmiterea valorii culorii către directivă din componenta părinte.

Acum se poate controla culoarea de fundal prin transmiterea unei valori către directiva myHighlight.

Exemplu:

 <main>
<p myHighlight="pink">Some text</p>
</main>

Crearea unei Directive Structurale Personalizate

În secțiunile anterioare, s-a învățat cum să creăm, să adăugăm comportamente și să aplicăm directive de atribut personalizate șabloanelor. În timp ce directivele de atribut modifică aspectul elementelor DOM, directivele structurale se ocupă de adăugarea, eliminarea sau mutarea elementelor în DOM.

Angular oferă două directive structurale principale: ngFor și ngIf. Directiva ngFor permite afișarea unui șablon pentru fiecare element dintr-o colecție (matrice), iar directiva ngIf se ocupă de afișarea condiționată a elementelor.

În această secțiune, vom crea o directivă structurală personalizată care imită funcționalitatea directivei ngIf. Pentru a începe, vom crea un nou fișier numit „condition.directive.ts”.

În fișierul „condition.directive.ts”, introducem următorul cod:

 import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'
@Directive({
    selector: "[condition]"
})
export class ConditionDirective {

    @Input() set condition(arg: boolean) {
        if(arg) {
            this.viewContainer.createEmbeddedView(this.template)
        } else {
            this.viewContainer.clear();
        }
    }

    constructor(
private template: TemplateRef<unknown>,
private viewContainer: ViewContainerRef
) {}
}

Acest cod permite afișarea condiționată a elementelor prin aplicarea directivei condition unui element și transmiterea unei valori booleene din componenta părinte.

În constructorul clasei ConditionDirective, injectăm instanțe ale claselor TemplateRef și ViewContainerRef. TemplateRef reprezintă șablonul asociat directivei, în timp ce ViewContainerRef reprezintă containerul în care aplicația va afișa vizualizările.

Metoda setter a clasei ConditionDirective utilizează o instrucțiune if-else pentru a verifica valoarea parametrului arg. Dacă parametrul este adevărat, directiva va crea o vizualizare încorporată utilizând șablonul furnizat. Metoda createEmbeddedView a clasei ViewContainerRef creează și afișează vizualizarea în DOM.

Dacă parametrul este fals, directiva va șterge containerul de vizualizare folosind metoda clear a clasei ViewContainerRef. Acest lucru va elimina toate vizualizările afișate anterior din DOM.

După crearea directivei, aceasta trebuie înregistrată în proiect prin importarea și declararea ei în fișierul „app.module.ts”. Odată ce acest pas este finalizat, directiva poate fi utilizată în șabloane.

Exemplu de utilizare în șabloane:

 <main>
<p *condition="true">Hello There!!!</p>
</main>

Concluzie

Directivele personalizate din Angular sunt un instrument puternic pentru a manipula DOM-ul și a adăuga un comportament dinamic șabloanelor. În cadrul acestui articol, s-a învățat cum să creăm și să aplicăm atât directive de atribut, cât și structurale, în aplicațiile Angular. Înțelegând cum să creăm și să utilizăm directive personalizate, veți putea valorifica la maxim capacitățile framework-ului Angular.