Um componente é o bloco de construção fundamental de uma interface Angular — uma classe TypeScript decorada com @Component que controla uma seção da tela (sua "view"). Cada aplicativo Angular é uma árvore de componentes.
{ } ;
({
: ,
: ,
: [],
})
{
name = ;
() { ; }
}
O decorador @Component conecta três coisas: um selector (como você o usa em HTML), um template (a marcação) e styles (limitados a este componente).
<!-- user-card.html — the template binds to the class -->
<h2>{{ name }}</h2> <!-- interpolate a property -->
<button (click)="greet()">Greet</button> <!-- call a method on click -->
As propriedades e métodos públicos da classe são diretamente acessíveis em seu template via binding — este é o núcleo de como Angular conecta dados e view.
<!-- in another component's template, use the selector -->
<app-user-card></app-user-card>
/* user-card.css — these styles ONLY affect this component */
h2 { color: blue; } /* won't leak to other components' <h2>s */
Angular escopa os estilos de componentes automaticamente (View Encapsulation), então CSS não vaza entre componentes.
Componentes são como você estrutura cada aplicativo Angular — unidades autossuficientes de template + lógica + estilos escopados, compostos em uma árvore.
Compreender o decorador @Component (selector, template, styles) e como as propriedades/métodos da classe se vinculam ao template é a base absoluta do desenvolvimento Angular; todo o resto é construído sobre o modelo de componente.