Własny komponent

Czego się dziś nauczysz

Przygotowanie: lekcje 01–03 — masz projekt z Bootstrapem i wiesz, czym jest selektor. Przewidywany czas: 45 min z zadaniami.

Po co dzielić ekran na części

Strona klubu ma pokazywać dziesięć wydarzeń. Możesz dziesięć razy skopiować ten sam kawałek HTML-a karty — i przy pierwszej poprawce zmieniać go w dziesięciu miejscach.

Komponent to taki kawałek opisany raz, z własną nazwą. Używasz go tyle razy, ile potrzeba, a poprawiasz w jednym pliku. Przy okazji nazwa mówi, co to jest: <app-karta /> czyta się lepiej niż <div class="card p-3">.

Znasz już jeden komponent — App z lekcji 02. Każdy nowy wygląda tak samo: klasa, szablon, dekorator @Component z selektorem.

Trzy kroki, zawsze te same

Krok 2 jest podwójny i to nie przypadek: import na górze pliku mówi TypeScriptowi, skąd wziąć klasę; wpis w tablicy imports mówi Angularowi, że wolno jej użyć w tym szablonie.

Wygeneruj komponent jednym poleceniem

CLI utworzy folder z kompletem plików. Nie twórz ich ręcznie — łatwo o literówkę.

ng generate component karta

CREATE src/app/karta/karta.css (0 bytes)
CREATE src/app/karta/karta.spec.ts (525 bytes)
CREATE src/app/karta/karta.ts (181 bytes)
CREATE src/app/karta/karta.html (20 bytes)

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

@Component({
  imports: [],
  selector: 'app-karta',
  styleUrl: './karta.css',
  templateUrl: './karta.html',
})
export class Karta {}

Skrót ng g c karta robi to samo. CLI dopisuje do selektora przedrostek app-, a klasie nadaje nazwę wielką literą. Plik karta.spec.ts to test jednostkowy — w tym kursie go nie używamy, ale nie przeszkadza. Kolejność ustawień w dekoratorze nie ma znaczenia.

Użyj komponentu w innym komponencie

Od tej lekcji każdy przykład ma komponent Demo — to rodzic, w którym pokazujemy nowy mechanizm. Tutaj rodzic wstawia kartę.

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

@Component({
    selector: 'app-karta',
    imports: [],
    templateUrl: './karta.html'
})
export class Karta {}

<div class="card p-3 mb-2" style="width: 20rem">
  <h5>Turniej retro</h5>
  <p class="mb-0">Piątek, sala 12.</p>
</div>

import { Component } from '@angular/core';
import { Karta } from './karta';

@Component({
    selector: 'app-demo',
    imports: [Karta],
    templateUrl: './demo.html'
})
export class Demo {}

<div class="p-3">
  <h4>Nasze wydarzenia</h4>
  <app-karta />
</div>

Nasze wydarzenia
┌────────────────────────┐
│ Turniej retro          │
│ Piątek, sala 12.       │
└────────────────────────┘

Karta i rodzic leżą w tym samym folderze, dlatego ścieżka importu to './karta'. Komponent nie ma pliku .css, więc w dekoratorze nie ma styleUrl — to dozwolone.

Ten sam komponent trzy razy

Tu widać sens dzielenia ekranu na części: jeden opis, wiele wystąpień. Karta trafia do siatki z lekcji 03.

<div class="card p-3">
  <h5>Wydarzenie</h5>
  <p class="mb-0">Szczegóły wkrótce.</p>
</div>

<div class="container mt-3">
  <div class="row g-3">
    <div class="col-12 col-md-4"><app-karta /></div>
    <div class="col-12 col-md-4"><app-karta /></div>
    <div class="col-12 col-md-4"><app-karta /></div>
  </div>
</div>

Pliki karta.ts i demo.ts są takie same jak w przykładzie 2 — zmieniają się tylko szablony.

[Wydarzenie        ] [Wydarzenie        ] [Wydarzenie        ]
[Szczegóły wkrótce.] [Szczegóły wkrótce.] [Szczegóły wkrótce.]

Trzy identyczne karty. Zmień tekst w karta.html raz — zmieni się we wszystkich trzech naraz.

Styl komponentu nie wycieka na zewnątrz

Każdy komponent może mieć własny CSS, który obowiązuje wyłącznie w jego szablonie. Krótki styl można wpisać wprost w dekoratorze, zamiast w osobnym pliku .css.

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

@Component({
    selector: 'app-karta',
    imports: [],
    templateUrl: './karta.html',
    styles: `h5 { color: #d63384; }`
})
export class Karta {}

<div class="card p-3 mb-2">
  <h5>Nagłówek w karcie</h5>
</div>

<div class="p-3">
  <h5>Nagłówek poza kartą</h5>
  <app-karta />
</div>

Plik demo.ts jest taki sam jak w przykładzie 2.

Nagłówek poza kartą      (czarny)
┌──────────────────────┐
│ Nagłówek w karcie    │ (różowy)
└──────────────────────┘

Oba nagłówki to h5, ale różowy jest tylko ten w karcie. Reguła h5 { color: … } działa wyłącznie w szablonie komponentu, który ją zdefiniował. Styl dla całej aplikacji wpisujesz w src/styles.css.

Zestawienie elementów

Zanim utkniesz

Zadania

Co trzeba zapamiętać

• ng generate component nazwa (ng g c) tworzy folder z klasą, szablonem, stylami i testem.
• Użycie komponentu to trzy kroki: wygeneruj, zaimportuj (import + tablica imports), wstaw znacznik.
• import na górze pliku jest dla TypeScriptu, tablica imports — dla Angulara.
• Brak wpisu w imports to błąd NG8001; nieużywany wpis — ostrzeżenie NG8113.
• Importuje ten komponent, w którego szablonie znacznik stoi.
• Ten sam komponent można wstawić wiele razy — na razie wszystkie wystąpienia wyglądają tak samo.
• Styl komponentu działa tylko w jego szablonie; wspólne style idą do src/styles.css.
• Przykład z kursu uruchamiasz, wstawiając jego Demo do App.

Sprawdź się: wstawiłeś <app-karta /> i terminal pokazuje NG8001. Wymień dwie rzeczy, które sprawdzisz w pierwszej kolejności.

Dokumentacja: angular.dev — komponenty.