Back to results for “Components & Templates”
Angular › Components & Templates

What is a component in Angular and what are its main parts?

Beginner

Answer

A component is a reusable piece of the user interface, combining a TypeScript class that holds data and logic, an HTML template that describes what appears on screen, and optionally its own CSS styles. Together these three pieces define one self contained building block of your app.
@Component({
  selector: 'app-greeting',
  template: `<h1>Hello, {{ name }}</h1>`,
  styles: [`h1 { color: blue; }`]
})
export class GreetingComponent {
  name = 'Sarah';
}
Real-world example A shopping site builds a single ProductCard component and reuses it dozens of times across the homepage, each time simply passing in different product details.

Common follow-ups: What is the difference between an inline template and a separate template file?;Why must a component's selector be unique across the whole app?