Paweł Łukasiewicz
2020-01-05
Paweł Łukasiewicz
2020-01-05
Udostępnij Udostępnij Kontakt
Wprowadzenie

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. Angular 8: dyrektywy

Dyrektywy

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ę: Angular 8: dyrektywy komponentów

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.