Performance and responsiveness are important aspects of the user experience in contemporary single-page applications (SPAs). Although Angular is a strong framework for creating dynamic apps, the user interface (UI) may become sluggish or unresponsive when your application must manage sophisticated mathematical operations, data processing, or significant computations. This occurs because Angular's programming language, JavaScript, operates in a single thread, which means that data processing, user interactions, and UI updates all vie for the same execution line.

 In order to address this issue, browsers offer a robust feature called Web Workers, which enables you to execute background operations concurrently without interfering with the main thread.

In this article, we’ll explore how to use Web Workers in Angular, understand when to use them, and walk through a step-by-step implementation for improving app performance with real-world examples.

What Are Web Workers?
Web Workers are background scripts that run independently from the main JavaScript thread.
They allow you to perform CPU-intensive tasks — like image processing, data encryption, or large JSON transformations — without freezing your UI.

Key characteristics

• Run in a separate thread (parallel to the main UI).
• Communicate via message passing (using postMessage() and onmessage).
• Have no direct access to DOM or global variables.
• Can perform complex logic or data manipulation safely.

Example scenario
Imagine processing a large dataset of 100,000 records in an Angular app. Doing this directly in a component method can cause UI lag.
With a Web Worker, the processing happens in the background, and once completed, the result is sent back — keeping your UI smooth and responsive.

When Should You Use Web Workers?
Use Web Workers when:
You’re performing CPU-heavy or long-running tasks:

• Mathematical computations
• Image or video encoding
• Parsing large JSON or XML files
• Cryptographic or hashing operations

Your Angular app experiences frame drops or freezing during data operations.
You want to keep animations and interactions smooth while processing data in the background.

Avoid Web Workers when:

• The task is lightweight or runs instantly.
• You need direct DOM access.
• The overhead of message passing outweighs benefits.

Step-by-Step Implementation in Angular
Let’s implement a practical example to understand Web Workers in Angular.

We’ll create a Prime Number Calculator — a CPU-heavy task that can easily freeze the UI if executed in the main thread.

Step 1: Create a New Angular Project
If you don’t already have one:
ng new web-worker-demo
cd web-worker-demo

Step 2: Generate a Web Worker
Angular CLI provides built-in support for workers:
ng generate web-worker app

You’ll be asked:
? Would you like to add Angular CLI support for Web Workers? Yes

Once done, Angular automatically:
Updates tsconfig.json with "webWorker": true

Creates a new file: src/app/app.worker.ts

Step 3: Write Logic in the Worker File
Open src/app/app.worker.ts and add the heavy computation logic.
/// <reference lib="webworker" />

// Function to find prime numbers up to a given limitfunction generatePrimes(limit: number): number[] {
  const primes: number[] = [];
  for (let i = 2; i <= limit; i++) {
    let isPrime = true;
    for (let j = 2; j * j <= i; j++) {
      if (i % j === 0) {
        isPrime = false;
        break;
      }
    }
    if (isPrime) primes.push(i);
  }
  return primes;
}

// Listen for messages from main threadaddEventListener('message', ({ data }) => {
  const primes = generatePrimes(data);
  postMessage(primes);
});

This worker listens for a message containing a number limit, computes prime numbers up to that limit, and sends them back to the main Angular thread.

Step 4: Modify the Component
Open src/app/app.component.ts:
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div style="text-align:center; padding:20px;">
      <h2>Angular Web Worker Demo</h2>
      <input type="number" [(ngModel)]="limit" placeholder="Enter number" />
      <button (click)="calculate()">Generate Primes</button>
      <p *ngIf="loading">Calculating, please wait...</p>
      <div *ngIf="!loading && result.length">
        <h3>Prime Numbers:</h3>
        <p>{{ result.join(', ') }}</p>
      </div>
    </div>
  `,
})
export class AppComponent implements OnInit {
  limit = 100000;
  result: number[] = [];
  loading = false;
  worker!: Worker;

  ngOnInit(): void {
    if (typeof Worker !== 'undefined') {
      this.worker = new Worker(new URL('./app.worker', import.meta.url));
      this.worker.onmessage = ({ data }) => {
        this.result = data;
        this.loading = false;
      };
    } else {
      alert('Web Workers are not supported in this browser!');
    }
  }

  calculate() {
    this.loading = true;
    this.worker.postMessage(this.limit);
  }
}

Step 5: Enable FormsModule for ngModel
In app.module.ts, import the FormsModule:
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

Step 6: Run the Application
Run the Angular app:
ng serve

Open the browser at http://localhost:4200 and enter a large number like 100000.
Without Web Workers, the UI would freeze; now it remains smooth while computation happens in the background.

How It Works?

• When the user clicks Generate Primes, the component sends a message to the Web Worker using postMessage().
• The worker executes generatePrimes() in a separate thread.
• Once computation finishes, the worker sends results back using postMessage().
• The Angular component receives the result via onmessage and updates the UI.