Lifecycle execution order mental model in Angular - Mini Project: Build & Apply

Lifecycle Execution Order Mental Model

📖 Scenario: You are building a simple Angular component to understand the order in which Angular lifecycle hooks run. This helps you see how Angular initializes, updates, and destroys components step-by-step.

🎯 Goal: Create an Angular standalone component that logs messages in each lifecycle hook to show their execution order clearly.

📋 What You'll Learn

Create a standalone Angular component named LifecycleDemoComponent

Use Angular lifecycle hooks: ngOnInit, ngOnChanges, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked, and ngOnDestroy

Log a unique message in each lifecycle hook method

Add an input property named inputValue to trigger ngOnChanges

Use the @Component decorator with standalone: true

Include a simple template that displays inputValue

💡 Why This Matters

🌍 Real World

Understanding Angular lifecycle hooks helps developers debug component behavior and optimize performance in real applications.

💼 Career

Knowing lifecycle execution order is essential for Angular developers to manage component initialization, updates, and cleanup correctly.

1

Create the Angular standalone component with input property

Create a standalone Angular component named LifecycleDemoComponent with an input property called inputValue of type string. Use the @Component decorator with standalone: true and a template that displays inputValue inside a <p> tag.

Angular

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-lifecycle-demo',
  standalone: true,
  template: `{{ inputValue }}`
})
export class LifecycleDemoComponent {
  @Input() inputValue: string = '';
  // Your code here
}

Need a hint?

Remember to import Component and Input from @angular/core. Use @Input() to declare the input property.

2

Add ngOnInit and ngOnChanges lifecycle hooks with console logs

Add the lifecycle hook methods ngOnInit and ngOnChanges inside LifecycleDemoComponent. In each method, add a console.log statement with the messages 'ngOnInit called' and 'ngOnChanges called' respectively.

Angular

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

@Component({
  selector: 'app-lifecycle-demo',
  standalone: true,
  template: `{{ inputValue }}`
})
export class LifecycleDemoComponent implements OnInit, OnChanges {
  @Input() inputValue: string = '';

  ngOnInit() {
    console.log('ngOnInit called');
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log('ngOnChanges called');
  }
  // Your code here
}

Need a hint?

Import OnInit, OnChanges, and SimpleChanges from @angular/core. Implement the interfaces and add the methods with console logs.

3

Add remaining lifecycle hooks with console logs

Add the lifecycle hook methods ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked, and ngOnDestroy to LifecycleDemoComponent. In each method, add a console.log statement with messages like 'ngDoCheck called', 'ngAfterContentInit called', etc.

Angular

import { Component, Input, OnInit, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-lifecycle-demo',
  standalone: true,
  template: `{{ inputValue }}`
})
export class LifecycleDemoComponent implements OnInit, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {
  @Input() inputValue: string = '';

  ngOnInit() {
    console.log('ngOnInit called');
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log('ngOnChanges called');
  }

  ngDoCheck() {
    console.log('ngDoCheck called');
  }

  ngAfterContentInit() {
    console.log('ngAfterContentInit called');
  }

  ngAfterContentChecked() {
    console.log('ngAfterContentChecked called');
  }

  ngAfterViewInit() {
    console.log('ngAfterViewInit called');
  }

  ngAfterViewChecked() {
    console.log('ngAfterViewChecked called');
  }

  ngOnDestroy() {
    console.log('ngOnDestroy called');
  }
  // Your code here
}

Need a hint?

Import all lifecycle interfaces from @angular/core. Implement them and add each method with a console log message.

4

Add a button to change inputValue and trigger lifecycle hooks

Add a button to the component template that changes the inputValue property when clicked. This will trigger ngOnChanges and other lifecycle hooks. Update the template to include a <button> with a click event that sets inputValue to 'Updated!'.

Angular

import { Component, Input, OnInit, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-lifecycle-demo',
  standalone: true,
  template: `
    {{ inputValue }}
    Update Input
  `
})
export class LifecycleDemoComponent implements OnInit, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {
  @Input() inputValue: string = '';

  ngOnInit() {
    console.log('ngOnInit called');
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log('ngOnChanges called');
  }

  ngDoCheck() {
    console.log('ngDoCheck called');
  }

  ngAfterContentInit() {
    console.log('ngAfterContentInit called');
  }

  ngAfterContentChecked() {
    console.log('ngAfterContentChecked called');
  }

  ngAfterViewInit() {
    console.log('ngAfterViewInit called');
  }

  ngAfterViewChecked() {
    console.log('ngAfterViewChecked called');
  }

  ngOnDestroy() {
    console.log('ngOnDestroy called');
  }
  // Your code here
}

Need a hint?

Add a button inside the template with a click event that sets inputValue to 'Updated!'. This triggers Angular lifecycle hooks.