@ng-web-apis/workers

Web Workers API for Angular

This is a library for comfortable use of Web Workers API with Angular.

Install

If you do not have @ng-web-apis/common:

npm i @ng-web-apis/common

Now install the package:

npm i @ng-web-apis/workers

How it use

Create a worker and use it in a template with AsyncPipe:

import {WebWorker} from '@ng-web-apis/workers';

function compute(data: number): number {
  return data ** 2;
}

@Component({
  template: `
    Computed Result:
    <ng-container *ngIf="worker | async as event">{{ event.data }}</ng-container>
    <form (ngSubmit)="worker.postMessage(input.value)">
      <input #input />
      <button type="submit">Send to worker</button>
    </form>
  `,
})
class My {
  readonly worker = WebWorker.fromFunction<number, number>(compute);
}

To get data from the worker event, use the toData operator

import {toData, WebWorker} from '@ng-web-apis/workers';

function compute(data: number): number {
  return data ** 2;
}

@Component({
  template: `
    Computed Result: {{ workerData$ | async }}
    <form (ngSubmit)="worker.postMessage(input.value)">
      <input #input />
      <button type="submit">Send to worker</button>
    </form>
  `,
})
class My {
  readonly worker = WebWorker.fromFunction<number, number>(compute);
  readonly workerData$ = this.worker.pipe(toData());
}

It's the same with WorkerPipe only:

import {WorkerModule} from '@ng-web-apis/workers';
import {NgModule} from '@angular/core';

@NgModule({
  imports: [WorkerModule],
  declarations: [My],
})
class SomeModule {}

import {WorkerExecutor, WebWorker} from '@ng-web-apis/workers';
import {FormControl} from '@angular/forms';

@Component({
  template: `
    Computed Result: {{ value | waWorker: changeData | async }}

    <input [(ngModel)]="value" />
  `,
})
class My {
  value: string;

  changeData(data: string): string {
    return `${data} (changed)`;
  }
}

See also

Other Web APIs for Angular by @ng-web-apis