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
}

Need a 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
}

Need a 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
  }
}

Need a 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
}

Need a hint?

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