Suggest an edit

Improve this article

Refine the answer for “What hooks exist and in what order are they called?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

In Angular, lifecycle hooks are called in a strictly defined order. The full sequence for a **component** looks like this:

## Full sequence

1. `ngOnChanges(changes)` - called for the **first time** when Angular sets the values of input properties (`@Input`). Called **every time** the input properties change.
2. `ngOnInit()` - once, after the input properties are first initialized.
3. `ngDoCheck()` - after `ngOnInit` and on every change detection cycle.
4. `ngAfterContentInit()` - after the parent's content is inserted via `<ng-content>`.
5. `ngAfterContentChecked()` - after every check of the inserted content.
6. `ngAfterViewInit()` - after the component's template and all child components are initialized.
7. `ngAfterViewChecked()` - after every check of the component's view.
8. `ngOnDestroy()` - before the component is destroyed, for cleaning up resources.

> Schematically:

```javascript
ngOnChanges → ngOnInit → ngDoCheck → ngAfterContentInit → ngAfterContentChecked → ngAfterViewInit → ngAfterViewChecked → (ngDoCheck/ngAfterContentChecked/ngAfterViewChecked repeat on updates) → ngOnDestroy
```

> Conclusion: the sequence reflects the component's lifecycle from creation to destruction, including the handling of input data, content, and the view.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts171 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.