Dopo aver giocato con Angular per molto tempo, ho finalmente trovato una spiegazione comprensibile delle direttive Angular. In questo articolo, prima capiremo cos'è esattamente una direttiva e come usarla in Angular. Creeremo anche le nostre direttive personalizzate. Allora, cosa stiamo aspettando? Immergiamoci in profondità.

Cos'è una direttiva angolare?

Le direttive sono le funzioni che verranno eseguite ogni volta che il compilatore Angular lo trova . Le direttive angolari migliorano la capacità degli elementi HTML allegando comportamenti personalizzati al DOM.

Dal concetto di base, le direttive Angular sono classificate in tre categorie.

1. Direttive sugli attributi
2. Direttive strutturali
3. Componenti

Direttive sugli attributi

Le direttive sugli attributi sono responsabili della manipolazione dell'aspetto e del comportamento degli elementi DOM. Possiamo usare le direttive degli attributi per cambiare lo stile degli elementi DOM. Queste direttive sono anche usate per nascondere o mostrare condizionatamente particolari elementi DOM. Angular fornisce molte direttive sugli attributi incorporate come NgStyle , NgClass , ecc. Possiamo anche creare le nostre direttive sugli attributi personalizzate per le funzionalità desiderate.

Direttive strutturali

Le direttive strutturali sono responsabili della modifica della struttura del DOM. Funzionano aggiungendo o rimuovendo gli elementi dal DOM, a differenza delle direttive sugli attributi che modificano semplicemente l'aspetto e il comportamento dell'elemento.

Puoi facilmente distinguere tra la direttiva strutturale e quella degli attributi osservando la sintassi. Il nome della direttiva strutturale inizia sempre con un asterisco (*), mentre la direttiva sugli attributi non contiene alcun prefisso. Le tre direttive strutturali integrate più popolari fornite da Angular sono NgIf , NgFor e NgSwitch .

Componenti

I componenti sono direttive con modelli. L'unica differenza tra i componenti e gli altri due tipi di direttive è il modello. Le direttive sugli attributi e le direttive strutturali non hanno modelli. Quindi, possiamo dire che il componente è una versione più pulita della direttiva con un modello, che è più facile da usare.

Utilizzo di direttive angolari integrate

Ci sono molte direttive integrate disponibili in Angular che puoi usare facilmente. In questa sezione useremo due direttive incorporate molto semplici.

NgStyle Directive è una direttiva Attribute usata per cambiare lo stile di qualsiasi elemento DOM sulla base di alcune condizioni.

 I am an Attribute Directive

Nello snippet di codice sopra, stiamo aggiungendo uno sfondo blu se il valore della isBluevariabile è vero. Se il valore della isBluevariabile è falso, lo sfondo dell'elemento sopra sarà rosso.

La direttiva NgIf è una direttiva strutturale utilizzata per aggiungere elementi nel DOM in base a determinate condizioni.

I am a Structural Directive

Nello snippet di codice sopra, l'intero paragrafo rimarrà nel DOM se il valore della showvariabile è vero, altrimenti partirà dal DOM.

Creazione di una direttiva sugli attributi personalizzati

Creare una direttiva personalizzata è proprio come creare un componente angolare. Per creare una direttiva personalizzata dobbiamo sostituire @Componentdecorator con @Directivedecorator.

Quindi, iniziamo con la creazione della nostra prima direttiva sugli attributi personalizzati. In questa direttiva, evidenzieremo l'elemento DOM selezionato impostando il colore di sfondo di un elemento.

Crea un app-highlight.directive.tsfile nella src/appcartella e aggiungi lo snippet di codice di seguito.

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

@Directive({

 selector: '[appHighlight]'

})

export class HighlightDirective {

 constructor(private eleRef: ElementRef) {

 eleRef.nativeElement.style.background = 'red';

 }

}

Qui stiamo importando Directivee ElementRefda Angular core. Il Directivefornisce la funzionalità di @Directivedecoratore in cui forniamo il selettore proprietà appHighLightin modo da poter utilizzare questo ovunque selettore nell'applicazione. Stiamo anche importando il ElementRefche è responsabile dell'accesso all'elemento DOM.

Ora, per far funzionare la appHighlightdirettiva, dobbiamo aggiungere la nostra direttiva all'array delle dichiarazioni nel app.module.tsfile.

import ...;

import { ChangeThemeDirective } from './app-highlight.directive';

@NgModule({

declarations: [

AppComponent,

ChangeThemeDirective

],

imports: [

...

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Ora useremo la nostra direttiva personalizzata appena creata. Sto aggiungendo la appHightlightdirettiva in app.component.htmlma puoi usarla ovunque nell'applicazione.

Highlight Me !

L'output dello snippet di codice sopra sarà simile a questo.

Creazione di una direttiva strutturale personalizzata

Nella sezione precedente, abbiamo creato la nostra prima direttiva Attribute. Lo stesso approccio viene utilizzato anche per creare la direttiva strutturale.

Quindi, iniziamo con la creazione della nostra direttiva strutturale. In questa direttiva, implementeremo la *appNotdirettiva che funzionerà esattamente all'opposto di *ngIf.

Ora crea un app-not.directive.tsfile nella src/appcartella e aggiungi il codice qui sotto.

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({

 selector: '[appNot]'

})

export class AppNotDirective {

constructor(

 private templateRef: TemplateRef,

 private viewContainer: ViewContainerRef) { }

 @Input() set appNot(condition: boolean) {

 if (!condition) {

 this.viewContainer.createEmbeddedView(this.templateRef);

 } else {

 this.viewContainer.clear(); }

 }

}

Come hai visto nello snippet di codice sopra, stiamo importando Directive, Input, TemplateRef and ViewContainerRefda@angular/core.

Directivefornisce la stessa funzionalità per il @Directivedecoratore. Il Inputdecoratore viene utilizzato per comunicare tra i due componenti. Invia i dati da un componente all'altro utilizzando l'associazione di proprietà.

TemplateRefrappresenta il modello incorporato che viene utilizzato per creare un'istanza delle viste incorporate. Queste viste incorporate sono collegate al modello che deve essere renderizzato.

ViewContainerRefè un contenitore in cui è possibile allegare una o più viste. Possiamo usare la createEmbeddedView()funzione per allegare i modelli incorporati nel contenitore.

Ora, per far funzionare la appNotdirettiva, dobbiamo aggiungere la nostra direttiva all'array delle dichiarazioni nel app.module.tsfile.

import ...;

import { AppNotDirective } from './app-not.directive';

@NgModule({

declarations: [

AppComponent,

AppNotDirective

],

imports: [

...

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Ora è il momento di utilizzare la nostra direttiva strutturale appena creata.

Sto aggiungendo la appNotdirettiva in app.component.htmlma puoi usarla ovunque nell'applicazione.

True
False

La *appNotdirettiva è progettata in modo da aggiungere l'elemento modello nel DOM se il *appNotvalore è falseesattamente opposto alla *ngIfdirettiva.

L'output dello snippet di codice sopra sarà simile a questo.

Spero che questo articolo abbia risposto alla maggior parte delle tue domande sulle direttive Angular. Se hai domande o dubbi, non esitare a contattarmi nella casella dei commenti.