Dyrektywy używane w Angular 8 pozwalają na manipulację drzewem DOM. Korzystając z dyrektyw możemy zmieniać zarówno wygląd jak i zachowanie danego elementu. Możemy również rozszerzyć HTML.

Dyrektywy w Angular 8 dzielimy na 3 kategorie w zależności od ich zachowania:

• Component Directives
• Structural Directives
• Attribute Directives

Component Directives (dyrektywy składowe) używane są w klasie głównej. Definiują szczegóły dotyczące sposobu przetrzania, tworzenia instancji oraz używania komponentu w czasie wykonywania programu. Z przykładem takiej dyrektywy spotkaliśmy się we wpisie w którym utworzyliśmy pierwsza aplikację:

Dyrektywy strukturalne (Structural Directives) zaczynają się od znaku specjalnego *. Pozwalają one na manipulowanie oraz zmianę struktury elementów drzewa DOM. Przykładowe dyrektywy to:

• *ngIf - pozwala na dodawanie/usuwanie elementów DOM;
• *ngSwitch - równiez powala na usuwanie/dodawanie elementów DOM. Dyrektywa jest podobna do instrukcji swtich w języku C#;
• *ngFor - pozwala na powtarzanie okreslonej części szablonu HTML zgodnie z każdym elementem znajdującym się na liście (kolekcji).

Dyrektywy atrybutów (Attribute Directives) używane są w celu zmiany wyglądu i zachowania elementów DOM. Najpopularniejsze z nich to:

• ngClass - pozwala na dodawnie lub usuwanie klas CSS z elementów HTML;
• ngStyle - ułatwia modyfikację stylu element HTML za pomocą wyrażenia. Może być również używana do dynamicznej zmiany elementu HTML.

W kolejnych wpisach skupimy się na szczegółach i omówimy sposoby zastowania powyższych dyrektyw.