Jak budować niestandardowe dyrektywy w Angular

Jednym z fundamentów frameworka Angular są dyrektywy, które pozwalają na wzbogacanie elementów drzewa DOM o nowe funkcjonalności. Angular oferuje bogaty zbiór wbudowanych dyrektyw, lecz umożliwia także tworzenie własnych, niestandardowych rozwiązań w tym zakresie.

Czym dokładnie są dyrektywy?

Dyrektywy to fragmenty kodu, które Angular wykorzystuje do modyfikacji zachowania lub wyglądu elementów HTML. Dzięki nim można na przykład reagować na zdarzenia, zmieniać strukturę DOM, czy też warunkowo pokazywać lub ukrywać pewne elementy.

W Angularze wyróżniamy dwa główne rodzaje wbudowanych dyrektyw: strukturalne i atrybutowe. Dyrektywy strukturalne mają wpływ na całą strukturę DOM, dodając, usuwając lub zmieniając rozmieszczenie elementów, natomiast dyrektywy atrybutowe oddziałują na wygląd lub zachowanie pojedynczego elementu. Dyrektywy stanowią potężne narzędzie, dzięki któremu możemy rozszerzać możliwości komponentów w Angularze.

Jakie korzyści płyną z używania dyrektyw?

Stosowanie dyrektyw w Angularze niesie za sobą szereg korzyści:

• Możliwość wielokrotnego użycia: Dyrektywy mogą być wykorzystywane w różnych komponentach, co przekłada się na oszczędność czasu i zasobów.
• Rozszerzalność: Istnieje możliwość rozbudowy dyrektyw o nowe funkcjonalności, co pozwala na zwiększenie efektywności komponentów.
• Elastyczność: Dyrektywy umożliwiają różnorodne modyfikacje zachowania lub wyglądu elementów, co zapewnia dużą swobodę podczas projektowania aplikacji.

Konfiguracja aplikacji Angular

Aby przygotować środowisko do pracy z Angular, zacznij od zainstalowania Angular CLI (Command Line Interface) za pomocą następującego polecenia w terminalu:

 npm install -g @angular/cli

Po pomyślnej instalacji Angular CLI, utwórz nowy projekt Angular, wpisując w terminalu:

 ng new custom-directives-app

W rezultacie tego polecenia powstanie nowy projekt o nazwie „custom-directives-app”.

Tworzenie własnej dyrektywy

Mając gotowy projekt Angular, możesz przystąpić do tworzenia własnych dyrektyw. W tym celu należy utworzyć plik TypeScript i zdefiniować klasę, która będzie oznaczona dekoratorem @Directive.

Dekorator @Directive jest elementem TypeScript, który pozwala na tworzenie niestandardowych dyrektyw. Utwórz plik Highlight.directive.ts w katalogu src/app. W tym pliku umieścisz definicję dyrektywy, która będzie odpowiadała za wyróżnienie.

Przykładowo:

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

Powyższy kod importuje dekorator dyrektywy z modułu @angular/core. Dekorator @Directive jest stosowany do klasy HighlightDirective. Przyjmuje on obiekt jako argument, który zawiera właściwość selektora.

W tym przykładzie selektor ustawiony jest na [myHighlight], co oznacza, że dyrektywę można zastosować w szablonach poprzez dodanie atrybutu myHighlight do wybranego elementu.

Oto sposób użycia dyrektywy w szablonie:

 <main>
<p myHighlight>Przykładowy tekst</p>
</main>

Implementacja zachowania w dyrektywie

Po utworzeniu dyrektywy, kolejnym krokiem jest zaimplementowanie jej zachowania, czyli mechanizmu, dzięki któremu będzie ona modyfikować drzewo DOM. W tym celu wykorzystasz ElementRef z @angular/core.

ElementRef zostanie wstrzyknięty do konstruktora dyrektywy. Jest to otoczka natywnego elementu w obrębie widoku.

Oto przykład dodania zachowania do dyrektywy:

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

W tym przypadku konstruktor klasy HighlightDirective pobiera parametr ElementRef, który Angular automatycznie wstrzykuje. ElementRef umożliwia dostęp do bazowego elementu DOM.

Za pomocą właściwości this.element.nativeElement możesz uzyskać dostęp do natywnego elementu DOM parametru element. Następnie ustawiasz kolor tła elementu na jasnoniebieski, modyfikując właściwość style. W efekcie każdy element, do którego zastosujesz dyrektywę myHighlight, będzie miał jasnoniebieskie tło.

Aby dyrektywa poprawnie działała, nie zapomnij o jej zaimportowaniu i zadeklarowaniu w pliku app.module.ts.

Na przykład:

 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 { }
 

Po tych krokach dyrektywa myHighlight może być już używana w szablonach komponentów Angulara.

 <main>
<p myHighlight>Przykładowy tekst</p>
</main>

Uruchom aplikację na serwerze deweloperskim, aby sprawdzić działanie dyrektywy. Możesz to zrobić, wpisując w terminalu:

 ng serve

Po uruchomieniu polecenia, przejdź na adres http://localhost:4200/ w przeglądarce internetowej. Efekt działania dyrektywy powinien być widoczny – tekst będzie wyróżniony na jasnoniebieskim tle.

Wbudowane dyrektywy Angulara pozwalają na przekazywanie wartości modyfikujących wygląd elementu, jednak nasza dyrektywa myHighlight jeszcze tego nie potrafi. Możesz rozbudować ją tak, aby przyjmowała wartość, która będzie dynamicznie ustawiała kolor tła elementu.

W tym celu zmodyfikuj kod w pliku Highlight.directive.ts na następujący:

 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) {  }
}
 

W powyższym przykładzie, w klasie HighlightDirective pojawiła się metoda ustawiająca o nazwie myHighlight, która przyjmuje parametr color typu string. Metoda została oznaczona dekoratorem @Input, co pozwala na przekazywanie wartości koloru do dyrektywy z poziomu komponentu nadrzędnego.

Teraz można ustawić kolor tła, przekazując wartość do dyrektywy myHighlight.

Na przykład:

 <main>
<p myHighlight="pink">Przykładowy tekst</p>
</main>

Tworzenie niestandardowej dyrektywy strukturalnej

W poprzednich krokach nauczyłeś się tworzyć, dodawać funkcjonalność i wykorzystywać niestandardowe dyrektywy atrybutowe. Dyrektywy atrybutowe modyfikują wygląd elementów DOM, podczas gdy dyrektywy strukturalne odpowiadają za dodawanie, usuwanie lub przemieszczanie elementów w strukturze DOM.

Angular oferuje dwie podstawowe dyrektywy strukturalne: ngFor i ngIf. Dyrektywa ngFor powiela szablon dla każdego elementu w kolekcji (tablicy), a ngIf odpowiada za renderowanie warunkowe.

W tej sekcji stworzysz własną dyrektywę strukturalną, działającą na podobnej zasadzie co ngIf. W tym celu utwórz plik o nazwie Condition.directive.ts.

W pliku Condition.directive.ts umieść następujący kod:

 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 
) {}
}
 

Powyższy kod umożliwia warunkowe renderowanie elementów poprzez zastosowanie dyrektywy condition do elementu i przekazanie wartości logicznej z komponentu nadrzędnego.

W konstruktorze klasy ConditionDirective wstrzyknięte są instancje TemplateRef i ViewContainerRef. TemplateRef reprezentuje szablon powiązany z dyrektywą, a ViewContainerRef to kontener, w którym aplikacja umieszcza widoki.

Metoda ustawiająca w klasie ConditionDirective, za pomocą instrukcji warunkowej if else, sprawdza wartość argumentu arg. Jeśli wartość argumentu jest równa true, dyrektywa tworzy osadzony widok, wykorzystując dostarczony szablon. Metoda createEmbeddedView klasy ViewContainerRef tworzy i renderuje widok w drzewie DOM.

Jeżeli parametr ma wartość false, dyrektywa usuwa widoki z kontenera za pomocą metody clear klasy ViewContainerRef. W konsekwencji usunięte zostaną wszystkie wyrenderowane wcześniej widoki z drzewa DOM.

Po utworzeniu dyrektywy, zarejestruj ją w swoim projekcie, importując i deklarując ją w pliku app.module.ts. Po wykonaniu tej operacji, będziesz mógł zacząć używać dyrektywy w szablonach.

Oto przykład użycia w szablonie:

 <main>
<p *condition="true">Witaj świecie!!!</p>
</main>

Teraz możesz już samodzielnie tworzyć niestandardowe dyrektywy

Niestandardowe dyrektywy w Angularze stanowią potężne narzędzie do manipulowania drzewem DOM oraz dodawania dynamicznego zachowania do szablonów. W trakcie tego artykułu nauczyłeś się, jak tworzyć i wykorzystywać zarówno dyrektywy atrybutowe, jak i strukturalne w aplikacjach Angular. Dzięki zrozumieniu procesu tworzenia i stosowania niestandardowych dyrektyw, możesz w pełni wykorzystać możliwości, jakie daje Angular.