Creazione di Direttive Personalizzate in Angular

Angular offre una serie di direttive integrate come ngIf, ngFor e ngClass. Tuttavia, è anche possibile creare direttive personalizzate per gestire compiti specifici all'interno dell'applicazione. Vediamo come costruirne una con un esempio pratico.

Generazione della direttiva personalizzata

Per una migliore organizzazione del codice, è consigliabile creare una cartella dedicata alle direttive. Chiamiamola directives.

Questo comando crea una nuova cartella denominata directives all'interno della directory app e aggiunge al suo interno il nuovo file della direttiva:

• highlight-on-complete.directive.ts – contiene la logica della direttiva;

• highlight-on-complete.directive.spec.ts – file di test unitario (può essere eliminato se non necessario).

Ecco come si presenta la struttura di base della direttiva:

Definizione della Funzionalità della Direttiva

Questa direttiva evidenzia un elemento attività in verde se è contrassegnato come completato. In caso contrario, rimuove gli stili.

Per indicare ad Angular che questa classe è una direttiva, si utilizza il decoratore @Directive:

@Directive({
  selector: '[appHighlightOnComplete]'
})

Il selettore [appHighlightOnComplete] indica che la direttiva verrà utilizzata come attributo, non come tag o direttiva strutturale.

Nel tuo HTML, verrà applicata in questo modo:

<div [appHighlightOnComplete]="task.completed"></div>

Rendere la direttiva reattiva ai cambiamenti

Per rilevare le modifiche all'input completed, si implementa l'interfaccia OnChanges:

Si definisce anche una proprietà di input per ricevere il valore dal componente:

Cosa fa questo:

• Informa Angular che il valore sarà fornito dal template (in precedenza, abbiamo passato task.complete dal template);

• Collega la proprietà interna completed della direttiva al valore passato dal template;

• Imposta un valore predefinito di true (che verrà sovrascritto una volta ricevuti i dati effettivi).

Accesso sicuro al DOM

Angular utilizza l'iniezione delle dipendenze per fornire accesso al DOM e agli strumenti di rendering.

Nel costruttore, iniettiamo:

ElementRef ci fornisce un riferimento all'elemento DOM host. Renderer2 ci permette di modificare in modo sicuro stili e attributi senza manipolare direttamente il DOM.

Reagire ai cambiamenti con ngOnChanges

Ora implementiamo la logica principale in ngOnChanges, che viene eseguita ogni volta che il valore dell'input cambia.

Implementazione completa:

Il metodo ngOnChanges viene attivato ogni volta che Angular rileva modifiche alle proprietà di input della direttiva.

In questo caso, risponde agli aggiornamenti del valore completed passato dal template. Se completed è true, la direttiva aggiunge un bordo verde e uno sfondo verde chiaro all'elemento. Se è false, questi stili vengono rimossi, riportando l'elemento al suo aspetto originale. Questo fornisce un'indicazione visiva dei task completati.

Questa direttiva personalizzata consente di incapsulare il comportamento di stile in modo riutilizzabile e pulito. Ora è possibile applicarla a qualsiasi elemento dell'applicazione, senza duplicare la logica tra i componenti. È un ottimo esempio di come il sistema di direttive di Angular possa aiutare a scrivere codice più modulare e manutenibile.