Why lifecycle hooks matter in Angular - See It in Action

Why lifecycle hooks matter

📖 Scenario: You are building a simple Angular component that shows a message and tracks how many times it has been initialized. This helps understand how Angular lifecycle hooks work in real apps.

🎯 Goal: Create an Angular standalone component that uses the OnInit lifecycle hook to count how many times the component has been initialized and display this count in the template.

📋 What You'll Learn

Create a standalone Angular component named InitCounterComponent

Add a property initCount initialized to 0

Implement the OnInit interface and its ngOnInit() method

Increment initCount inside ngOnInit()

Display the text Component initialized X times in the template, where X is initCount

💡 Why This Matters

🌍 Real World

Understanding lifecycle hooks helps developers manage component setup and cleanup in real Angular apps, improving performance and user experience.

💼 Career

Knowing lifecycle hooks is essential for Angular developers to write maintainable, efficient components that behave correctly during their lifecycle.

1

Create the component with initial count

Create a standalone Angular component named InitCounterComponent with a property initCount set to 0. Use the @Component decorator with selector set to 'app-init-counter' and a simple template showing initCount inside a <p> tag.

Angular

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

@Component({
  selector: 'app-init-counter',
  standalone: true,
  template: `Initialized 0 times`
})
export class InitCounterComponent {
  // Your code here
}

Need a hint?

Use @Component with standalone: true and define initCount as a number property set to 0.

2

Add OnInit interface and import

Import OnInit from @angular/core and make InitCounterComponent implement OnInit. Add the ngOnInit() method with an empty body.

Angular

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

@Component({
  selector: 'app-init-counter',
  standalone: true,
  template: `Initialized {{ initCount }} times`
})
export class InitCounterComponent implements OnInit {
  initCount = 0;

  // Your code here
}

Need a hint?

Remember to import OnInit and add implements OnInit after the class name.

3

Increment count inside ngOnInit

Inside the ngOnInit() method, increment the initCount property by 1 using this.initCount++.

Angular

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

@Component({
  selector: 'app-init-counter',
  standalone: true,
  template: `Initialized {{ initCount }} times`
})
export class InitCounterComponent implements OnInit {
  initCount = 0;

  ngOnInit() {
    // Your code here
  }
}

Need a hint?

Use this.initCount++ inside ngOnInit() to increase the count.

4

Complete template to show initialization count

Ensure the component template displays the text Component initialized X times where X is the value of initCount. Update the template property in the @Component decorator accordingly.

Angular

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

@Component({
  selector: 'app-init-counter',
  standalone: true,
  // Your code here
})
export class InitCounterComponent implements OnInit {
  initCount = 0;

  ngOnInit() {
    this.initCount++;
  }
}

Need a hint?

Update the template string to exactly show Component initialized {{ initCount }} times.