kagklis

{
   "extends": "./tsconfig.json",
   "compilerOptions": {
      "outDir": "./out-tsc/worker",
      "lib": [
         "es2018",
         "webworker"
      ],
      "types": []
   },

kagklis

/// <reference lib="webworker" />

addEventListener('message', ({ data }) => {
   const response = `worker response to ${data}`;
   postMessage(response);
});

kagklis

@Component({
   // ...
})
export class CalculationComponent implements OnDestroy {
   // ...

   ngOnDestroy(): void {
      this.terminateRunningWorker();
   }

kagklis

@Component({
   // ...
})
export class CalculationComponent {
   // ...
   private currentWorker: Worker;
   
   public modelChange(newValue: number): void {
      const start = performance.now();
      this.value = newValue;

kagklis

@Component({
   // ...
})
export class CalculationComponent {
   public value: number;
   public result: string | null;
   public isCalculating: boolean = false;

   public modelChange(newValue: number): void {
      const start = performance.now();

kagklis

<div>
   <input
      placeholder="Type a number"
      type="number"
      [ngModel]="value"
      (ngModelChange)="modelChange($event)"
   />
   <small *ngIf="isCalculating">Calculating...</small>
   <div *ngIf="result != null">
      {{ result }}...

kagklis

/// <reference lib="webworker" />

import { calculate } from "./calculation";

addEventListener('message', ({ data }) => {
   const response = { result: calculate(data.value) };
   postMessage(response);
});

kagklis

export function calculate(value: number): string | null {
   const start = Date.now();
   // Loop until the required amount of time has passed.
   // Imagine this is the computation causing a major latency.
   while ((Date.now() - start) / 1000 < value);
   return value !== null ? `Some result for value ${value}` : null;
}

kagklis

export declare class ElementRef<T = any> {
   nativeElement: T;
   constructor(nativeElement: T);
}

kagklis

<ng-container *ngTemplateOutlet="myTemplate"></ng-container>

<ng-template #myTemplate>
   <p>I'm an embedded view! Yay!</p>
</ng-template>