Components — Angular's Building Block

Angular apps are trees of components. Each component is a class with a decorator that tells Angular how to render and use it.

The Minimal Component

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  standalone: true,
  template: `<h1>Hello {{ name }}</h1>`,
  styles: `h1 { color: tomato; }`,
})
export class HelloComponent {
  name = 'Angular';
}

Three required ingredients in the decorator:

• selector — the custom tag you write in HTML
• template (or templateUrl) — the markup
• styles (or styleUrls) — the CSS, scoped to this component

The class body holds state and methods the template can use.

Rendering It

Once another component imports HelloComponent, render it like an HTML element:

<app-hello />
<!-- or with closing tag -->
<app-hello></app-hello>

External Template & Styles

For anything more than a few lines, point at separate files instead:

@Component({
  selector: 'app-card',
  standalone: true,
  templateUrl: './card.component.html',
  styleUrl: './card.component.css',
})
export class CardComponent {
  title = 'Welcome';
}

The CLI generates exactly this shape when you run ng g c card.

Scoped Styles

Styles inside a component apply only to its template. Angular adds a unique attribute to every element and rewrites your CSS to match it. That means you can safely write h1 { color: red } without worrying about other components’ <h1> tags.