Web Workers API for Angular

Install

npm i @ng-web-apis/common

npm i @ng-web-apis/workers

How it use

import{WebWorker}from'@ng-web-apis/workers';functioncompute(data:number):number{returndata**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>    `,})classSomeComponent{readonlyworker=WebWorker.fromFunction<number,number>(compute);}

import{toData,WebWorker}from'@ng-web-apis/workers';functioncompute(data:number):number{returndata**2;}@Component({template:`        Computed Result: {{ workerData$ | async }}        <form (ngSubmit)="worker.postMessage(input.value)">            <input #input />            <button type="submit">Send to worker</button>        </form>    `,})classSomeComponent{readonlyworker=WebWorker.fromFunction<number,number>(compute);readonlyworkerData$=this.worker.pipe(toData());}

import{WorkerModule}from'@ng-web-apis/workers';import{NgModule}from'@angular/core';@NgModule({imports:[WorkerModule],declarations:[SomeComponent],})classSomeModule{}

import{WorkerExecutor,WebWorker}from'@ng-web-apis/workers';import{FormControl}from'@angular/forms';@Component({template:`        Computed Result: {{ value | waWorker: changeData | async }}        <input [(ngModel)]="value" />    `,})classSomeComponent{value:string;changeData(data:string):string{return`${data} (changed)`;}}

See also

Open-source