Anatomy of a Component

The three parts

@Component configures it, the template defines the HTML, and the class holds data and logic.

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

@Component({
  selector: 'app-greeting',
  standalone: true,
  template: `<h1>Hello, {{ name }}!</h1>`,
})
export class GreetingComponent {
  name = 'Angular';
}

Selector & template

The selector is the custom HTML tag other templates use, like <app-greeting>. template (or templateUrl) defines what renders.

styleUrl too

A component usually also has styleUrl: './greeting.component.css' for scoped CSS that applies only to that component's template.