Dyrektywy w Angularze są kluczowym elementem, który pozwala manipulować elementami DOM lub modyfikować ich zachowanie w aplikacji Angular. Służą do dodawania nowej funkcjonalności do istniejących elementów w szablonach HTML. W Angularze mamy trzy główne rodzaje dyrektyw:
- Dyrektywy Atrybutów: Modyfikują zachowanie lub wygląd elementów DOM, na które są nałożone. Przykłady to
ngClass
ingStyle
, które pozwalają na zmianę klas i stylów elementów dynamicznie. - Dyrektywy Strukturalne: Zmieniają strukturę layoutu DOM poprzez dodawanie, usuwanie i manipulowanie elementami DOM. Przykłady to
ngIf
,ngFor
, ingSwitch
. - Dyrektywy Komponentów: Każdy komponent w Angularze jest technicznie dyrektywą z selektorem i szablonem. Komponenty są używane do definiowania widoków aplikacji, które są połączone z logiką danych i logiką sterowania.
Importowanie Dyrektyw
W tradycyjnych aplikacjach Angular, aby użyć dyrektyw takich jak ngIf
czy ngFor
, musisz mieć moduł CommonModule
zaimportowany w module, gdzie są używane te dyrektywy. W przypadku komponentów standalone, które pojawiły się w Angularze 17, import dyrektyw odbywa się nieco inaczej.
Struktura Komponentu Standalone
Struktura standalone używa nowego podejścia Angulara do komponentów, co oznacza, że komponent jest samodzielny i nie wymaga być zadeklarowany w NgModule
. Oto jak dyrektywy są importowane w takim środowisku:
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-my-component',
standalone: true,
imports: [CommonModule], // Importowanie dyrektyw takich jak ngIf, ngFor, ngClass, ngStyle
templateUrl: './my-component.component.html',
styleUrl: ['./my-component.component.css']
})
export class MyComponentComponent {
// Logika komponentu
}
Użycie Dyrektyw w Komponencie
Jeśli chcesz użyć dyrektyw strukturalnych jak ngIf
lub ngFor
w komponencie musisz je zaimportować poprzez CommonModule
w sekcji imports
dekoratora @Component
:
<!-- my-component.component.html -->
<div *ngIf="isVisible">Widoczny, gdy isVisible jest true</div>
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
W tym przykładzie, ngIf
i ngFor
są dyrektywami strukturalnymi, które wymagają, aby CommonModule
był zaimportowany w deklaracji komponentu, jak pokazano wcześniej.