Co to jest komponent Angular?

Question

Accepted Answer

**Komponent** to fundamentalny element składowy interfejsu Angular — klasa TypeScript **class** dekorowana `@Component`, która steruje sekcją ekranu (jej "view"). Każda aplikacja Angular to drzewo komponentów. ## Anatomia komponentu ```ts import { Component } from "@angular/core"; @Component({ selector: "app-user-card", // the custom HTML tag: templateUrl: "./user-card.html", // the view (or inline `template: '...'`) styleUrls: ["./user-card.css"], // scoped styles for this component }) export class UserCardComponent { name = "Ann"; // properties → available in the template greet() { return `Hi ${this.name}`; } // methods → callable from the template } ``` Dekorator `@Component` łączy trzy rzeczy: **selektor** (sposób użycia w HTML), **szablon** (markup) oraz **style** (ograniczone do tego komponentu). ## Klasa zawiera logikę i dane ```html

``` Publiczne właściwości i metody klasy są bezpośrednio dostępne w szablonie poprzez wiązanie — to jest sedno tego, jak Angular łączy dane z widokiem. ## Używanie komponentu ```html ``` ## Style są domyślnie enkapsulowane ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` Angular automatycznie ogranicza zakreس stylów komponentu (View Encapsulation), dzięki czemu CSS nie wycieka między komponenty. ## Dlaczego to ważne Komponenty to sposób, w jaki strukturyzujesz każdą aplikację Angular — samodzielne jednostki szablonu + logika + ograniczone style, złożone w drzewo. Zrozumienie dekoratora `@Component` (selektor, szablon, style) oraz sposobu wiązania właściwości/metod klasy do szablonu jest absolutną podstawą rozwoju Angular; wszystko inne opiera się na modelu komponentu.