mediumFrontend

What are Angular lifecycle hooks?

Q: What are Angular lifecycle hooks?

**Core concept.** Lifecycle hooks are methods Angular calls at defined moments in a component/directive's life — from input changes and initialization through view/content checks to destruction. The most-used are ngOnInit (init), ngOnChanges (input changes), ngAfterViewInit (view ready), and ngOnDestroy (cleanup). ngOnChanges inputs set <rect class='d-box' x='130' y='5

935 views

Understand the problem

Name the key lifecycle hooks and when they run.

lifecycle

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Common hooks

import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';

@Component({ selector: 'app-user', standalone: true, template: '{{ id }}' })
export class UserComponent implements OnInit, OnChanges, OnDestroy {
  @Input() id!: number;
  private timer?: any;

  ngOnChanges(c: SimpleChanges) { /* runs when 'id' changes */ }
  ngOnInit() { this.timer = setInterval(() => {}, 1000); }   // setup
  ngOnDestroy() { clearInterval(this.timer); }               // cleanup → no leak
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How does catchError work in RxJS, and how do you return a fallback value?

What is the role of NG_VALUE_ACCESSOR in a custom component?