Что такое компонент в Angular?

Базовая идея

Компонент — основной UI‑строительный блок: TypeScript‑класс с декоратором @Component, шаблон (HTML) и стили. У него есть selector, через который он встраивается в дерево представлений.

Современный стиль — standalone: true и явный список imports. Классический — объявление в NgModule.declarations. Оба подхода валидны; в новых приложениях standalone предпочтительнее.

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <button (click)="inc()">+</button>
    <span>{{ count() }}</span>
  `,
})
export class CounterComponent {
  count = signal(0);
  inc() { this.count.update(v => v + 1); }
}

<app-counter />

Ввод/вывод и жизненный цикл

• @Input() / input() — данные сверху вниз.
• @Output() / output() — события вверх к родителю.
• Хуки ngOnInit, ngOnDestroy — побочные эффекты и очистка ресурсов.

Компонент не должен тянуть всё приложение: HTTP, кэш и бизнес‑правила выносите в сервисы. Держите шаблон читаемым: сложную логику — в класс или computed.

Итог

Компонент = класс + шаблон + метаданные. В новых проектах предпочитайте standalone и Signals; понимание входов/выходов и lifecycle обязательно.