A component is the fundamental building block of an Angular UI — a TypeScript class decorated with @Component that controls a section of the screen (its "view"). Every Angular app is a tree of components.
{ } ;
({
: ,
: ,
: [],
})
{
name = ;
() { ; }
}
The @Component decorator wires three things together: a selector (how you use it in HTML), a template (the markup), and styles (scoped to this 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 -->
The class's public properties and methods are directly accessible in its template via binding — this is the core of how Angular connects data and 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 scopes component styles automatically (View Encapsulation), so CSS doesn't leak between components.
Components are how you structure every Angular app — self-contained units of template + logic + scoped styles, composed into a tree.
Understanding the @Component decorator (selector, template, styles) and how the class's properties/methods bind to the template is the absolute foundation of Angular development; everything else builds on the component model.