Direttive personalizzate in Angular

Le direttive consentono di estendere l'HTML. In questa lezione verranno introdotte le direttive personalizzate e imparerà a crearne di proprie.

Che cos'è una direttiva?

Le direttive modificano l'aspetto o il comportamento degli elementi del DOM. Angular fornisce direttive integrate come *ngIf e *ngFor.

Tipi di direttive

• Direttive dei componenti
• Direttive degli attributi - modificano l'aspetto o il comportamento
• Direttive strutturali - modificano la struttura, come *ngIf

Creare una direttiva di attributo

Crei una direttiva utilizzando Angular CLI:

ng generate directive highlight

ng generate directive highlight

Applicare la direttiva

Utilizzi la direttiva come attributo nel template:

<p appHighlight>Highlighted Text</p>

<p appHighlight>Highlighted Text</p>

Logica della direttiva

Le direttive contengono la logica che modifica gli elementi del DOM. Ad esempio, può impostare dinamicamente il colore di sfondo.

constructor(private el: ElementRef) {
  this.el.nativeElement.style.backgroundColor = 'yellow';
}

Decorator @HostListener

Utilizzi @HostListener per rispondere agli eventi sugli elementi a cui è applicata la direttiva:

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

@Input() nelle direttive

@Input() consente di passare dati alle direttive dai template:

@Input() defaultColor: string;

Riepilogo

Ha imparato a creare e utilizzare direttive personalizzate per potenziare le sue app Angular. Ottimo lavoro!