Een component is het fundamentele bouwsteen van een Angular UI — een TypeScript class versierd met @Component die een sectie van het scherm (zijn "view") bestuurt. Elke Angular-app is een boom van componenten.
{ } ;
({
: ,
: ,
: [],
})
{
name = ;
() { ; }
}
De @Component decorator verbindt drie dingen: een selector (hoe je het in HTML gebruikt), een template (de markup), en styles (begrensd tot dit component).
<!-- 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 -->
De openbare eigenschappen en methoden van de class zijn direct toegankelijk in de bijbehorende template via binding — dit is de kern van hoe Angular gegevens en weergave verbindt.
<!-- 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 begrenst component-stijlen automatisch (View Encapsulation), dus CSS lekt niet tussen componenten.
Componenten bepalen hoe je elke Angular-app structureert — zelfstandige eenheden van template + logica + afgebakende stijlen, samengesteld in een boom.
Het begrijpen van de @Component decorator (selector, template, styles) en hoe de eigenschappen/methoden van de class aan de template worden gebonden, is de absolute basis van Angular-ontwikkeling; alles anders bouwt voort op het componentmodel.