Components: one class, one template, scoped styles

Components are the unit of thought and test

A component is a class plus its template plus its scoped CSS. The class holds state and behavior; the template is a projection of that state; the CSS is scoped to this component by default. Inputs (@Input() or the new input()) are the component's public API; outputs (@Output() emitters) are how it talks back.

@Component({
  standalone: true,
  selector: 'app-invoice-card',
  template: `
    <article class="card">
      <h3>{{ invoice.title }}</h3>
      <button (click)="pay.emit(invoice.id)">Pay</button>
    </article>
  `,
})
export class InvoiceCardComponent {
  @Input({ required: true }) invoice!: Invoice;
  @Output() pay = new EventEmitter<number>();
}