Co je komponenta v Angular?

Question

Accepted Answer

**Komponenta** je základním stavebním blokem uživatelského rozhraní Angular — třída TypeScript dekorovaná `@Component`, která ovládá část obrazovky (její "view"). Každá Angular aplikace je stromem komponent. ## Anatomie komponenty ```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 } ``` Dekorátor `@Component` spojuje tři věci: **selector** (jak jej používáte v HTML), **template** (značení) a **styles** (vymezené na tuto komponentu). ## Třída obsahuje logiku a data ```html

``` Verejné vlastnosti a metody třídy jsou přímo přístupné v jejím template prostřednictvím bindingu — to je jádro toho, jak Angular propojuje data a view. ## Používání komponenty ```html ``` ## Styly jsou ve výchozím nastavení zapouzdřeny ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` Angular automaticky vymezuje styly komponent (View Encapsulation), takže CSS neuniká mezi komponentami. ## Proč je to důležité Komponenty jsou způsob, jakým strukturujete každou Angular aplikaci — samostatné jednotky template + logika + vymezené styly, složené do stromu. Porozumění dekoratoru `@Component` (selector, template, styles) a tomu, jak se vlastnosti/metody třídy vážou na template, je naprostým základem vývoje Angular; všechno ostatní se staví na modelu komponent.