Web Worker Example in Angular

angular_webworker.md

Web Worker in Angular

Example 1: Fibonacci Function in Angular

Create a web worker
ng generate web-worker webWorker

and move the fibonacci function into the file:

// webWorker-demo/src/app/webWorker.ts
function fibonacci(num) {
    if (num == 1 || num == 2) {
        return 1
    }
    return fibonacci(num - 1) + fibonacci(num - 2)
}self.addEventListener('message', (evt) => {
    const num = evt.data
    postMessage(fibonacci(num))
})

Example 2: Get Prime Numbers in Angular

Create a web worker
ng generate web-worker primesWorker

and move the get prime number function into the file:

// primes-demo/src/app/primesWorker.tsfunction getPrimes(number) {
    if (typeof number == "number") {
        if(number<0){
            return "negative integers can not be prime";
        }
        if(number==0){
            return "zero is not a prime number";
        }
        if(number==1){
            return "1 is not a prime number";
        }
        var nonprimes = [],  // Array of non prime numbers
        var i,j,primes = []; // Array of prime numbers        for (i = 2; i <= number; ++i) {
            if (!nonprimes[i]) {
                // i has not been marked -- it is prime
                primes.push(i);
                for (j = i << 1; j <= number; j += i) {
                    nonprimes[j] = true;
                }
            }
        }
        return primes;  // Array of prime numbers
    }
    else{
        return "invalid input";
    }
}self.addEventListener('message', (evt) => {
    const num = evt.data
    postMessage(getPrimes(num))
})

Now we will edit the app.component.ts to add Web Worker

// primes-demo/src/app/app.component.ts@Component({
    selector: 'app',
    template: `
        <div>
            <input type="number" [(ngModel)]="number" placeholder="Enter any number" />
            <button (click)="calcPrimes">Calc. Prime Numbers</button>
        </div>
        <div>{{output}}</div>
    `
})
export class App implements OnInit {
    private number
    private output
    private primesWorker: Worker    ngOnInit() {
        if(typeof Worker !== 'undefined') {
            this.primesWorker = new Worker('./primesWorker')
            this.primesWorker.onmessage = function(data) {
                this.output = data
            }
        }
    }    calcPrimes() {
        this.primesWorker.postMessage(this.number)
    }
}

Terminate Web Worker

ngOnDestroy() {
        his.primesWorker.terminate()
}