ngx-thread

The ngx-thread package implements multi-threading in Angular using Web Worker.

You can find full example in the sample directory of the source, but we want to teach you how to use ngx-thread step by step.

Installation

npm i ngx-thread

Requirements

package	version
@angular/common	^7.1.0
@angular/core	^7.1.0

How to use

to use ngx-thread you should import ThreadModule in to the your module.

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {ThreadModule} from "ngx-thread";

@NgModule({
	declarations: [
		AppComponent
	],
	imports:      [
		BrowserModule,
		AppRoutingModule,
		ThreadModule
	],
	providers:    [],
	bootstrap:    [AppComponent]
})
export class AppModule
{
}

Now you can inject ThreadService in the component that you want to use package:

constructor(protected _threadService: ThreadService)
{

}

After injecting ThreadService, you need a function to run it in the another thread. for example we write following heavy function:

sumInOtherThread(input:number)
{
    console.log(`The input is ${input}`);
    
    let result = 0;

    for (let i = 1; i <= input; i++)
    {
        result += i;
    }

    return result;
}

To run above function in another thread we should create a Thread object:

let thread:Thread = this._threadService.createByFunction(this.sumInAnotherThread, 1000000000)

createByFunction() accepts two argument. The first argument is the function you want to run in another thread. The second argument is the argument that you want to pass to the given function. You can`t pass multiple argument, but you can pass an object as argument:

let thread:Thread = this._threadService.createByFunction(this.sumInAnotherThread, {arg1: val1, arg2: val2})

Now you have a Thread object. You can run it by calling run(). run() returns an Observable so you should subscribe() to it.

thread.run().subscribe(
    result => {

        if (result.type === 'success')
        {
            console.log("The final result is", result.data)
        }
        else
        {
            console.log(`${result.data}% is done`)
        }
    },
    () => {
        console.log("Error");
    },
    () => {
        console.log("Complete");
    }
);

If you want to send progress, you can use postMessage() function. But before use it, you should declare it above of your component declaration:

declare function postMessage(message: ThreadMessageContract): void;

Now you can use it:

sumInOtherThread(input:number)
{
    console.log(`The input is ${input}`)

    let result = 0;

    for (let i = 1; i <= input; i++)
    {
        result += i;

        if (i % (input / 100) === 0)
        {
            postMessage(
                {
                    type: 'progress',
                    data: Math.round((i / input) * 100)
                }
            );
        }
    }

    return result;
}

Limitations

1- You can`t access DOM

2- You can`t access other variables and functions