Što je Angular komponenta?

Question

Accepted Answer

**Komponenta** je temeljni gradivni blok Angular UI-a — TypeScript **klasa** dekorirana sa `@Component` koja kontrolira dio ekrana (njegov "prikaz"). Svaka Angular aplikacija je stablo komponenti. ## Anatomija komponente ```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 } ``` `@Component` dekorator povezuje tri stvari: **selektor** (kako ga koristiš u HTML-u), **template** (označavanje), i **styles** (ograničeni na ovu komponentu). ## Klasa sadrži logiku i podatke ```html

``` Javna svojstva i metode klase izravno su dostupni u njenom template-u putem vezanja — ovo je srž kako Angular povezuje podatke i prikaz. ## Korištenje komponente ```html ``` ## Stilovi su standardno enkapsilirani ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` Angular automatski ograničava stilove komponenti (View Encapsulation), tako da CSS ne procuri između komponenti. ## Zašto je važno Komponente su kako strukturiraš svaku Angular aplikaciju — samosvojne jedinice template-a + logike + ograničenih stilova, sastavljene u stablo. Razumijevanje `@Component` dekoratora (selektor, template, stilovi) i kako se svojstva/metode klase vezuju na template je apsolutni temelj Angular razvoja; sve ostalo se gradi na modelu komponente.