Che cos'è un componente Angular?

Question

Accepted Answer

Un **componente** è il blocco costruttivo fondamentale di un'UI Angular — una **classe** TypeScript decorata con `@Component` che controlla una sezione dello schermo (la sua "view"). Ogni app Angular è un albero di componenti. ## Anatomia di un 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 } ``` Il decorator `@Component` collega insieme tre cose: un **selector** (come lo usi in HTML), un **template** (il markup) e **styles** (limitati a questo componente). ## La classe contiene la logica e i dati ```html

``` Le proprietà pubbliche e i metodi della classe sono direttamente accessibili nel suo template attraverso il binding — questo è il nucleo di come Angular connette i dati e la view. ## Usare un componente ```html ``` ## Gli stili sono incapsulati per impostazione predefinita ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` Angular limita automaticamente gli stili dei componenti (View Encapsulation), quindi il CSS non si riversa tra i componenti. ## Perché è importante I componenti sono il modo in cui strutturi ogni app Angular — unità autosufficienti di template + logica + stili limitati, composte in un albero. Comprendere il decorator `@Component` (selector, template, styles) e come le proprietà/metodi della classe si collegano al template è la base assoluta dello sviluppo Angular; tutto il resto si costruisce sul modello dei componenti.