Una delle caratteristiche principali di Angular sono le direttive. Le direttive angolari sono un modo per aggiungere comportamenti agli elementi DOM. Angular fornisce una varietà di direttive integrate e puoi anche creare direttive personalizzate in questo robusto framework.
Sommario:
Cosa sono le direttive?
Le direttive sono codici personalizzati che Angular utilizza per modificare il comportamento o l’aspetto di un elemento HTML. Puoi utilizzare le direttive per aggiungere ascoltatori di eventi, modificare il DOM o mostrare o nascondere elementi.
Esistono due tipi di direttive integrate in Angular, strutturali e di attributo. Le direttive strutturali modificano la struttura del DOM, mentre le direttive sugli attributi modificano l’aspetto o il comportamento di un elemento. Le direttive sono un modo potente per estendere la funzionalità dei componenti Angular.
Vantaggi delle Direttive
Ecco alcuni dei vantaggi derivanti dall’utilizzo delle direttive in Angular:
- Riutilizzabilità: puoi utilizzare le direttive in più componenti, risparmiando tempo e fatica.
- Estendibilità: puoi estendere le direttive per aggiungere nuove funzionalità, rendendo i tuoi componenti più potenti.
- Flessibilità: utilizzando le direttive, puoi modificare il comportamento o l’aspetto di un elemento in vari modi, offrendoti molta flessibilità durante la creazione delle tue applicazioni.
Configurazione della tua applicazione Angular
Per configurare un’applicazione Angular, installa la CLI Angular eseguendo il seguente codice nel tuo terminale:
npm install -g @angular/cli
Dopo aver installato la CLI Angular, crea un progetto Angular eseguendo il seguente comando:
ng new custom-directives-app
L’esecuzione del comando precedente creerà un progetto Angular denominato custom-directives-app.
Creazione di una direttiva personalizzata
Ora hai un progetto Angular e puoi iniziare a creare le tue direttive personalizzate. Crea un file TypeScript e definisci una classe decorata con il decoratore @Directive.
Il decoratore @Directive è un decoratore TypeScript utilizzato per creare direttive personalizzate. Ora crea un file highlight.directive.ts nella directory src/app. In questo file creerai l’evidenziazione della direttiva personalizzata.
Per esempio:
import { Directive } from "@angular/core";@Directive({
selector: "[myHighlight]",
})
export class HighlightDirective {
constructor() {}
}
Il blocco di codice sopra importa il decoratore Direttiva dal modulo @angular/core. Il decoratore @Directive decora la classe HighlightDirective. Prende un oggetto come argomento con una proprietà di selezione.
In questo caso, imposti la proprietà del selettore su [myHighlight] ciò significa che puoi applicare questa direttiva ai tuoi modelli aggiungendo l’attributo myHighlight a un elemento.
Ecco un esempio di come utilizzare la direttiva nei tuoi modelli:
<main>
<p myHighlight>Some text</p>
</main>
Aggiunta di comportamenti alla direttiva
Ora hai creato con successo una direttiva. Il passo successivo è aggiungere un comportamento alla direttiva in modo che possa manipolare il DOM. Avrai bisogno di ElementRef da @angular/core per aggiungere un comportamento a una direttiva.
Inietterai ElementRef nel costruttore della direttiva. ElementRef è un wrapper attorno a un elemento nativo all’interno di una vista.
Ecco un esempio di come aggiungere un comportamento a una direttiva:
import { Directive, ElementRef } from "@angular/core";@Directive({
selector: "[myHighlight]"
})
export class HighlightDirective {
constructor(private element: ElementRef) {
this.element.nativeElement.style.backgroundColor="lightblue";
}
}
In questo esempio, il costruttore della classe HighlightDirective accetta un parametro ElementRef, che Angular inserisce automaticamente. ElementRef fornisce l’accesso all’elemento DOM sottostante.
Utilizzando la proprietà this.element.nativeElement, accedi all’elemento DOM nativo del parametro dell’elemento. Successivamente imposti il colore di sfondo del componente su azzurro utilizzando la proprietà style. Ciò significa che qualunque elemento a cui applichi la direttiva myHighlight avrà uno sfondo azzurro.
Per rendere funzionale la direttiva, assicurati di importarla e dichiararla nel file app.module.ts.
Per esempio:
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 { }
Ora puoi applicare la direttiva myHighlight agli elementi nei tuoi componenti Angular.
<main>
<p myHighlight>Some text</p>
</main>
Esegui la tua applicazione sul server di sviluppo per verificare se la direttiva funziona. Puoi farlo eseguendo il seguente comando nel tuo terminale:
ng serve
Dopo aver eseguito il comando, vai a http://localhost:4200/ sul tuo browser web e vedrai un’interfaccia simile all’immagine qui sotto.
Le direttive integrate Angular accettano valori per modificare l’aspetto dell’elemento, ma la direttiva personalizzata myHighlight no. Puoi configurare la direttiva per accettare un valore che utilizzerà per impostare dinamicamente il colore di sfondo del modello.
Per fare ciò, sostituisci il codice nel file highlight.directive.ts con questo:
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) {
}
}
Nel blocco di codice precedente, la classe HighlightDirective contiene un metodo setter chiamato myHighlight. Questo metodo accetta un parametro colore del tipo stringa. Decori il metodo setter con il decoratore @Input, permettendoti di passare il valore del colore nella direttiva dal componente genitore.
Ora puoi determinare il colore dello sfondo passando un valore alla direttiva myHighlight.
Per esempio:
<main>
<p myHighlight="pink">Some text</p>
</main>
Creazione di una direttiva strutturale personalizzata
Nelle sezioni precedenti hai imparato come creare, aggiungere comportamenti e applicare direttive sugli attributi personalizzati al tuo modello. Le direttive sugli attributi modificano l’aspetto degli elementi DOM, mentre le direttive strutturali aggiungono, rimuovono o spostano elementi nel DOM.
Angular fornisce due direttive strutturali, ngFor e ngIf. La direttiva ngFor esegue il rendering di un modello per ogni elemento in una raccolta (array), mentre ngIf gestisce il rendering condizionale.
In questa sezione creerai una direttiva strutturale personalizzata che funziona come la direttiva ngIf. Per fare ciò, crea un file condizione.directive.ts.
Nel file condition.directive.ts, scrivi questo codice:
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
) {}
}
Questo blocco di codice consente di eseguire il rendering condizionale degli elementi applicando la direttiva condizione a un elemento e passando un valore booleano dal componente principale.
Nel costruttore della classe ConditionDirective, inserisci un’istanza di TemplateRef e ViewContainerRef. TemplateRef rappresenta il modello associato alla direttiva e ViewContainerRef rappresenta il contenitore in cui l’applicazione esegue il rendering delle visualizzazioni.
Il metodo setter della classe ConditionDirective utilizza un’istruzione if else per controllare il parametro arg. La direttiva crea una vista incorporata utilizzando il modello fornito se il parametro è true. Il metodo createEmbeddedView della classe ViewContainerRef crea ed esegue il rendering della vista nel DOM.
Se il parametro è false, la direttiva cancella il contenitore della vista utilizzando il metodo clear della classe ViewContainerRef. Ciò rimuove qualsiasi vista precedentemente renderizzata dal DOM.
Dopo aver creato la direttiva, registrala nel tuo progetto importandola e dichiarandola nel file app.module.ts. Dopo aver fatto ciò, puoi iniziare a utilizzare la direttiva nei tuoi modelli.
Ecco un esempio di come utilizzarlo nei tuoi modelli:
<main>
<p *condition="true">Hello There!!!</p>
</main>
Ora puoi creare direttive personalizzate
Le direttive personalizzate in Angular forniscono un modo potente per manipolare il DOM e aggiungere comportamenti dinamici ai tuoi modelli. Hai imparato come creare e applicare attributi personalizzati e direttive strutturali nelle tue applicazioni Angular. Comprendendo come creare e utilizzare direttive personalizzate, puoi sfruttare appieno le funzionalità di Angular.