Какие знаешь жизненные циклы компонента в Angular

«Какие знаешь жизненные циклы компонента в Angular» — вопрос из категории Angular, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Angular компоненты имеют следующие основные жизненные циклы:

  1. ngOnChanges - вызывается при изменении входных свойств (@Input())
  2. ngOnInit - инициализация компонента (вызывается один раз после первого ngOnChanges)
  3. ngDoCheck - обнаружение изменений (может вызываться часто)
  4. ngAfterContentInit - после инициализации контента (вставленного через <ng-content>)
  5. ngAfterContentChecked - после проверки контента
  6. ngAfterViewInit - после инициализации дочерних компонентов/директив
  7. ngAfterViewChecked - после проверки дочерних компонентов
  8. ngOnDestroy - очистка перед удалением компонента

Пример:

export class MyComponent implements OnInit, OnDestroy {
  ngOnInit() {
    console.log('Component initialized');
  }

  ngOnDestroy() {
    console.log('Component destroyed');
  }
}