Component lifecycle overview in Angular - Mini Project: Build & Apply

Component lifecycle overview

📖 Scenario: You are building a simple Angular component that shows a message and logs lifecycle events. This helps understand how Angular components start, update, and stop.

🎯 Goal: Create an Angular standalone component that uses lifecycle signals to show when it is created, updated, and destroyed.

📋 What You'll Learn

Create a standalone Angular component named LifecycleDemoComponent

Use Angular signals to track lifecycle events: creation, update, and destruction

Display messages in the template showing the current lifecycle state

Use lifecycle hooks ngOnInit, ngOnChanges, and ngOnDestroy

Keep the component simple and accessible

💡 Why This Matters

🌍 Real World

Understanding component lifecycle helps developers manage resources, update UI correctly, and avoid bugs in Angular apps.

💼 Career

Knowing Angular lifecycle hooks and signals is essential for frontend developers building interactive and maintainable web applications.

1

Create the component skeleton

Create a standalone Angular component named LifecycleDemoComponent with a selector app-lifecycle-demo. Add a template that contains a <div> with the text Component is initializing.... Use the @Component decorator and the standalone: true option.

Angular

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

@Component({
  selector: 'app-lifecycle-demo',
  standalone: true,
  template: `Component is initializing...`
})
export class LifecycleDemoComponent {
  // Your code here
}

Hint

Use @Component with standalone: true and define the selector and template as described.

2

Add a signal to track lifecycle state

Inside the LifecycleDemoComponent class, import signal from @angular/core and create a signal named lifecycleState initialized with the string 'Initializing'. Update the template to display the value of lifecycleState() inside the <div> instead of the fixed text.

Angular

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

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

Hint

Use signal('Initializing') to create lifecycleState. Update the template to show {{ lifecycleState() }}.

3

Use lifecycle hooks to update the signal

Import OnInit, OnChanges, OnDestroy, and SimpleChanges from @angular/core. Implement the interfaces OnInit, OnChanges, and OnDestroy in the LifecycleDemoComponent class. Inside the lifecycle methods ngOnInit(), ngOnChanges(), and ngOnDestroy(), update the lifecycleState signal to the strings 'Initialized', 'Changed', and 'Destroyed' respectively.

Angular

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

@Component({
  selector: 'app-lifecycle-demo',
  standalone: true,
  template: `{{ lifecycleState() }}`
})
export class LifecycleDemoComponent implements OnInit, OnChanges, OnDestroy {
  lifecycleState = signal('Initializing');

  ngOnInit() {
    // Your code here
  }

  ngOnChanges(changes: SimpleChanges) {
    // Your code here
  }

  ngOnDestroy() {
    // Your code here
  }
}

Hint

Implement the lifecycle interfaces and update lifecycleState inside each lifecycle method using this.lifecycleState.set(...).

4

Add accessibility and finalize component

Add an aria-live="polite" attribute to the <div> in the template to announce lifecycle state changes to screen readers. Ensure the component is fully standalone and ready to use in an Angular app.

Angular

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

@Component({
  selector: 'app-lifecycle-demo',
  standalone: true,
  template: `{{ lifecycleState() }}`
})
export class LifecycleDemoComponent implements OnInit, OnChanges, OnDestroy {
  lifecycleState = signal('Initializing');

  ngOnInit() {
    this.lifecycleState.set('Initialized');
  }

  ngOnChanges(changes: SimpleChanges) {
    this.lifecycleState.set('Changed');
  }

  ngOnDestroy() {
    this.lifecycleState.set('Destroyed');
  }
  // Your code here if needed
}

Hint

Add aria-live="polite" to the <div> to improve accessibility for screen readers.

Practice

1. Which Angular lifecycle hook is called once after the component's data-bound properties have been initialized?

easy

A. ngOnInit()

B. ngOnDestroy()

C. ngAfterViewInit()

D. ngDoCheck()

Solution

1. Step 1: Understand lifecycle hook purpose

   ngOnInit() runs once after Angular sets component input properties.

2. Step 2: Compare other hooks

   ngOnDestroy() runs before component removal, ngAfterViewInit() after view initialization, ngDoCheck() on every change detection.

3. Final Answer:

   ngOnInit() -> Option A

4. Quick Check:

   Initialization hook = ngOnInit() [OK]

Hint: Initialization after inputs = ngOnInit() [OK]

Common Mistakes:

• Confusing ngOnInit with ngAfterViewInit
• Thinking ngOnDestroy runs on init
• Mixing ngDoCheck with ngOnInit

2. Which of the following is the correct syntax to implement the OnDestroy lifecycle hook in an Angular component?

easy

A. class MyComponent implements OnDestroy { ngDestroy() { } }

B. class MyComponent implements OnDestroy { ngOnDestroy() { } }

C. class MyComponent { onDestroy() { } }

D. class MyComponent implements OnDestroy { destroy() { } }

Solution

1. Step 1: Recall correct method name

   The lifecycle hook method for destruction is ngOnDestroy().

2. Step 2: Check interface implementation

   Implementing OnDestroy requires defining ngOnDestroy() exactly.

3. Final Answer:

   class MyComponent implements OnDestroy { ngOnDestroy() { } } -> Option B

4. Quick Check:

   OnDestroy method = ngOnDestroy() [OK]

Hint: Method name must be ngOnDestroy() exactly [OK]

Common Mistakes:

• Using wrong method name like ngDestroy or destroy
• Not implementing the interface
• Omitting parentheses in method

3. Given this Angular component code snippet, what will be logged to the console when the component is initialized and then destroyed?

export class SampleComponent implements OnInit, OnDestroy {
  ngOnInit() {
    console.log('Init');
  }
  ngOnDestroy() {
    console.log('Destroy');
  }
}

medium

A. Only Destroy

B. Only Init

C. Init followed by Destroy

D. No output

Solution

1. Step 1: Understand ngOnInit behavior

   ngOnInit() runs once when component initializes, logging 'Init'.

2. Step 2: Understand ngOnDestroy behavior

   ngOnDestroy() runs once before component is removed, logging 'Destroy'.

3. Final Answer:

   Init followed by Destroy -> Option C

4. Quick Check:

   Init then Destroy logs = Init followed by Destroy [OK]

Hint: Init logs on start, Destroy logs on removal [OK]

Common Mistakes:

• Assuming ngOnDestroy runs on init
• Expecting logs in reverse order
• Thinking no logs appear

4. Identify the error in this Angular component lifecycle hook implementation:

export class TestComponent implements OnInit {
  ngOnInit() {
    console.log('Component initialized');
  }
  ngOnDestroy() {
    console.log('Component destroyed');
  }
}

medium

A. Missing OnDestroy interface in implements clause

B. ngOnInit method name is incorrect

C. ngOnDestroy should not be used here

D. Console.log statements are invalid

Solution

1. Step 1: Check implemented interfaces

   The class implements OnInit but defines ngOnDestroy() without implementing OnDestroy.

2. Step 2: Understand interface contract

   To use ngOnDestroy(), the class should implement OnDestroy interface for clarity and correctness.

3. Final Answer:

   Missing OnDestroy interface in implements clause -> Option A

4. Quick Check:

   Implement interface for each lifecycle hook used [OK]

Hint: Implement interfaces for all lifecycle hooks used [OK]

Common Mistakes:

• Ignoring interface implementation for ngOnDestroy
• Thinking method names are wrong
• Believing console.log is invalid

5. You want to run code after Angular fully initializes the component's view and its child views. Which lifecycle hook should you use, and why? Choose the correct hook and reason.

hard

A. ngAfterContentInit() because it runs after projected content is initialized.

B. ngOnInit() because it runs after input properties are set.

C. ngDoCheck() because it runs on every change detection cycle.

D. ngAfterViewInit() because it runs after the component's view and child views are initialized.

Solution

1. Step 1: Identify hook for view initialization

   ngAfterViewInit() runs after Angular initializes the component's view and child views.

2. Step 2: Compare other hooks

   ngOnInit() runs earlier, ngAfterContentInit() runs after projected content, and ngDoCheck() runs repeatedly.

3. Final Answer:

   ngAfterViewInit() because it runs after the component's view and child views are initialized. -> Option D

4. Quick Check:

   View init completion = ngAfterViewInit() [OK]

Hint: Use ngAfterViewInit() for post-view initialization code [OK]

Common Mistakes:

• Confusing ngAfterContentInit with ngAfterViewInit
• Using ngOnInit for view-dependent code
• Expecting ngDoCheck to run once