Dyrektywy w Angularze:

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:

1. Dyrektywy Atrybutów: Modyfikują zachowanie lub wygląd elementów DOM, na które są nałożone. Przykłady to ngClass i ngStyle, które pozwalają na zmianę klas i stylów elementów dynamicznie.
2. Dyrektywy Strukturalne: Zmieniają strukturę layoutu DOM poprzez dodawanie, usuwanie i manipulowanie elementami DOM. Przykłady to ngIf, ngFor, i ngSwitch.
3. 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.