Komponenty Angular

W ekosystemie Angular, komponenty stanowią kluczowe elementy, które umożliwiają budowanie dynamicznych i interaktywnych aplikacji webowych. Komponent w Angularze to klasa TypeScript z dekoratorem @Component, który dostarcza dodatkowe metadane definiujące szablon HTML, style oraz selektor.

Czym są Komponenty?

Komponenty są podstawowymi budulcami strukturalnymi w aplikacjach Angulara. Każdy komponent zarządza swoim fragmentem widoku (DOM) poprzez szablon oraz logiką, która definiuje zachowanie tego widoku. Komponenty pozwalają na enkapsulację różnych części aplikacji, co ułatwia ich ponowne użycie, testowanie i utrzymanie.

Budowa Komponentu

Komponent w Angularze składa się z:

• Klasy komponentu: Definiuje logikę działania komponentu. Klasa ta jest oznaczona dekoratorem @Component, który informuje Angulara, że dana klasa jest komponentem i dostarcza metadane konfiguracyjne.
• Szablonu (Template): HTML opisujący, jak ma być wyświetlany komponent. Może zawierać dynamiczne dane za pomocą interpolacji, dyrektyw i wiązania danych.
• Stylów (Styles): CSS definiujący wygląd komponentu. Style mogą być załączane bezpośrednio w komponencie lub w zewnętrznych plikach.

Dekorator @Component

Dekorator @Component przyjmuje obiekt konfiguracyjny, który może zawierać następujące właściwości:

• selector: CSS selector określający, w jaki sposób użyć komponentu w szablonie. Na przykład, jeśli selektor to app-my-component, w HTML używamy go jako <app-my-component></app-my-component>.
• templateUrl: Ścieżka do zewnętrznego pliku zawierającego szablon HTML komponentu.
• template: Szablon HTML w formie stringa, jeśli nie używamy zewnętrznego pliku.
• styleUrls: Ścieżki do zewnętrznych plików CSS definiujących style komponentu.
• styles: Style w formie stringa, jeśli nie używamy zewnętrznych plików.

Przykład Komponentu

Poniżej znajduje się przykładowy komponent, który wyświetla proste powitanie:

import { Component } from '@angular/core';

@Component({
  selector: 'app-welcome',
  template: `<h1>Witaj, {{ name }}!</h1>`,
  styles: [`h1 { color: green; }`]
})
export class WelcomeComponent {
  name = 'świecie';
}

W tym przykładzie, @Component dekoruje klasę WelcomeComponent, określając jej selektor (app-welcome), szablon HTML i style. Kiedy Angular napotka selektor app-welcome w szablonie innego komponentu, wyrenderuje szablon zdefiniowany w WelcomeComponent, wyświetlając „Witaj, świecie!” z zielonym kolorem tekstu.