Attention! This repository is archived and the library has been moved to tinkoff/ng-web-apis monorepository
Part of
Web APIs for Angular
This is a library for comfortable use of Web Workers API with Angular.
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 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 SomeComponent { 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 SomeComponent { 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: [SomeComponent], }) 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 SomeComponent { value: string; changeData(data: string): string { return `${data} (changed)`; } }Other Web APIs for Angular by @ng-web-apis
Do you also want to open-source something, but hate the collateral work? Check out this Angular Open-source Library Starter we’ve created for our projects. It got you covered on continuous integration, pre-commit checks, linting, versioning + changelog, code coverage and all that jazz.
