@@ -26,9 +26,67 @@ Now install the package:
2626npm i @ng-web-apis/workers
2727```
2828
29- ## Usage
29+ ## How it use
3030
31- TBD
31+ You can create worker with service and use it in a template with ` AsyncPipe ` :
32+
33+ ``` typescript
34+ import {WorkerExecutor , WebWorker } from ' @ng-web-apis/workers' ;
35+
36+ @Component ({
37+ template: `
38+ Computed Result: {{ worker | async }}
39+ <form (ngSubmit)="worker.next(input.value)">
40+ <input #input />
41+ <button type="submit">Send to worker</button>
42+ </form>
43+ ` ,
44+ })
45+ class SomeComponent {
46+ worker: WebWorker <number , number >;
47+
48+ construcor(workerExecutor : WorkerExecutor ) {
49+ this .worker = workerExecutor .createWorker (this .compute );
50+ }
51+
52+ compute(data : number ): number {
53+ return data ** 2 ;
54+ }
55+ }
56+ ```
57+
58+ It's the same with ` WorkerPipe ` only:
59+
60+ ``` typescript
61+ import {WorkerModule } from ' @ng-web-apis/workers' ;
62+ import {NgModule } from ' @angular/core' ;
63+
64+ @NgModule ({
65+ imports: [WorkerModule ],
66+ declarations: [SomeComponent ],
67+ })
68+ class SomeModule {}
69+ ```
70+
71+ ``` typescript
72+ import {WorkerExecutor , WebWorker } from ' @ng-web-apis/workers' ;
73+ import {FormControl } from ' @angular/forms' ;
74+
75+ @Component ({
76+ template: `
77+ Computed Result: {{ control.value | waWorker: changeData | async }}
78+
79+ <input [formControl]="control" />
80+ ` ,
81+ })
82+ class SomeComponent {
83+ control = new FormControl (' ' );
84+
85+ changeData(data : number ): number {
86+ return ` ${data } (changed) ` ;
87+ }
88+ }
89+ ```
3290
3391## See also
3492
0 commit comments