Zone.js and automatic detection in Angular - Mini Project: Build & Apply

Zone.js and Automatic Change Detection in Angular

📖 Scenario: You are building a simple Angular component that shows a counter. The counter increases every second automatically. You want Angular to update the displayed number without manually triggering change detection.

🎯 Goal: Create an Angular standalone component that uses Zone.js automatic detection to update the counter every second and display the current count.

📋 What You'll Learn

Create a standalone Angular component named CounterComponent.

Initialize a count variable starting at 0.

Use setInterval inside ngOnInit to increase count by 1 every 1000 milliseconds.

Display the current count value in the template.

Do not manually trigger change detection; rely on Zone.js automatic detection.

💡 Why This Matters

🌍 Real World

Many Angular apps need to update the UI automatically when data changes, such as clocks, timers, or live data feeds. Zone.js helps Angular detect these changes without extra code.

💼 Career

Understanding Zone.js and Angular's automatic change detection is essential for building efficient and responsive Angular applications in professional development.

1

Create the initial component with count variable

Create a standalone Angular component named CounterComponent. Inside the component class, create a public variable called count and set it to 0. The component should have a template that displays the text Count: {{ count }}.

Angular

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `Count: {{ count }}`
})
export class CounterComponent {
  // Your code here
}

Need a hint?

Remember to add standalone: true in the component decorator and create a count variable initialized to 0.

2

Add ngOnInit lifecycle hook

Import OnInit from @angular/core and implement it in the CounterComponent class. Add the ngOnInit() method with an empty body.

Angular

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `Count: {{ count }}`
})
export class CounterComponent implements OnInit {
  count = 0;

  ngOnInit() {
    // Your code here
  }
}

Need a hint?

Use implements OnInit and add an empty ngOnInit() method.

3

Increase count every second using setInterval

Inside the ngOnInit() method, use setInterval to increase the count variable by 1 every 1000 milliseconds (1 second).

Angular

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `Count: {{ count }}`
})
export class CounterComponent implements OnInit {
  count = 0;

  ngOnInit() {
    // Your code here
  }
}

Need a hint?

Use setInterval with an arrow function to increase count every second.

4

Complete component with automatic change detection

Ensure the component is standalone with standalone: true in the decorator, and the template displays Count: {{ count }}. The counter should update automatically every second without manual change detection calls.

Angular

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `Count: {{ count }}`
})
export class CounterComponent implements OnInit {
  count = 0;

  ngOnInit() {
    setInterval(() => {
      this.count++;
    }, 1000);
  }
  // Your code here
}

Need a hint?

Check that the component is standalone and the template shows the count. The counter should update automatically every second.