Ce este o componentă Angular?

Question

Accepted Answer

O **componentă** este blocul de construire fundamental al unei interfețe Angular — o **clasă** TypeScript decorată cu `@Component` care controlează o secțiune a ecranului („view"-ul acesteia). Fiecare aplicație Angular este un copac de componente. ## Anatomia unei componente ```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 } ``` Deecoratorul `@Component` conectează trei lucruri: un **selector** (cum o folosești în HTML), un **template** (marcajul) și **styles** (limitate la această componentă). ## Clasa conține logica și datele ```html

``` Proprietățile și metodele publice ale clasei sunt direct accesibile în template-ul acesteia prin binding — acesta este esența modului în care Angular conectează datele și view-ul. ## Utilizarea unei componente ```html ``` ## Stilurile sunt încapsulate implicit ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` Angular limitează automat stilurile componentelor (View Encapsulation), deci CSS-ul nu scapă între componente. ## De ce este important Componentele sunt modul în care structurezi fiecare aplicație Angular — unități independente de template + logică + stiluri limitate, compuse într-un copac. Înțelegerea decoratorului `@Component` (selector, template, styles) și modul în care proprietățile/metodele clasei se leagă la template este fundația absolută a dezvoltării Angular; totul altceva se bazează pe modelul de componentă.