Web workers for heavy computation in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a heavy computation runs inside an Angular web worker?

Consider an Angular app using a web worker to perform a heavy calculation. What is the main benefit of running this computation inside a web worker?

A The computation can directly update Angular component variables without messaging.

B The computation runs faster because web workers use GPU acceleration.

C The web worker automatically caches results to speed up future computations.

D The UI remains responsive because the computation runs on a separate thread.

💡 Hint

Think about how web workers affect the main UI thread.

Web workers run code on a separate thread, so the UI thread is free to stay responsive. They do not speed up computation by GPU or share variables directly.

📝 Syntax

intermediate

Which Angular syntax correctly creates a web worker?

You want to create a web worker in Angular using the CLI. Which command is correct?

A ng generate web-worker my-worker

B ng add web-worker my-worker

C ng create worker my-worker

D ng generate worker my-worker

💡 Hint

The Angular CLI uses 'generate' for scaffolding code.

The correct command to generate a web worker is ng generate web-worker <name>.

🔧 Debug

advanced

Why does this Angular web worker code fail to update the UI?

Given this Angular component code snippet:

worker.onmessage = ({ data }) => {
  this.result = data;
};

Why might the UI not show the updated result value?

A Because web workers cannot send messages back to the main thread.

B Because the assignment happens outside Angular's zone, change detection is not triggered.

C Because <code>this</code> inside the callback does not refer to the component instance.

D Because <code>result</code> must be updated inside <code>ngOnInit</code> only.

💡 Hint

Angular needs to know when to update the UI after async events.

Web worker callbacks run outside Angular's zone, so Angular does not detect changes automatically. You must run the update inside NgZone.run() or trigger change detection manually.

❓ state_output

advanced

What is the value of result after this Angular web worker message?

In an Angular component, you have:

worker.postMessage(5);
worker.onmessage = ({ data }) => {
  this.result = data * 2;
};

The web worker code is:

addEventListener('message', ({ data }) => {
  postMessage(data + 3);
});

What is the value of result after the message is received?

A 16

B 10

C 8

D 5

💡 Hint

Calculate step-by-step: worker adds 3, then component doubles.

The worker receives 5, adds 3 to get 8, sends 8 back. The component doubles 8 to get 16.

🧠 Conceptual

expert

Why should Angular web workers avoid accessing DOM or Angular services?

Which is the main reason Angular web workers should not access the DOM or Angular services directly?

A Web workers automatically synchronize DOM changes, so manual access is redundant.

B Accessing DOM in web workers causes Angular to crash immediately.

C Web workers run in a separate thread without access to the DOM or Angular's dependency injection.

D Angular services are only available inside web workers, not in the main thread.

💡 Hint

Think about what web workers can and cannot do compared to the main thread.

Web workers run in a separate thread and have no access to the DOM or Angular services. They communicate only via messages.