ngx-rxjs-zone-scheduler

ngx-rxjs-zone-scheduler

A library for Angular providing rxjs schedulers to run some kind of work inside or outside of NgZone.

Purpose

Sometimes in Angular you need to decide if a task should run inside or outside of NgZone. Usually this is possible by injecting NgZone:

import { Component, inject, NgZone, OnInit } from '@angular/core';

@Component({
  // ...
})
export class AppComponent implements OnInit {
  private ngZone = inject(NgZone);

  ngOnInit() {
    this.ngZone.run(() => {
      /* run inside NgZone */
    });
    this.ngZone.runOutsideAngular(() => {
      /* run outside NgZone */
    });
    // ...
  }
}

This is a simple library to wrap this functionality into a rxjs scheduler in order to use it directly with rxjs Observable.

Installation

npm install ngx-rxjs-zone-scheduler --save or yarn add ngx-rxjs-zone-scheduler

Usage

Provide RxNgZoneScheduler via provideRxNgZoneScheduler() in your applicationConfig or main.ts:

import { ApplicationConfig } from '@angular/core';
import { provideRxNgZoneScheduler } from 'ngx-rxjs-zone-scheduler';
// ...
providers: [
  // ...
  provideRxNgZoneScheduler(),
];
// ...

Now you can inject RxNgZoneScheduler in your services or components:

import { Component, inject, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';

import { RxNgZoneScheduler } from 'ngx-rxjs-zone-scheduler';

@Component({
  // ...
})
export class AppComponent implements OnInit {
  public demotext1$: Observable<string>;
  public demotext2$: Observable<string>;
  public demotext3$: Observable<string>;
  public demotext4$: Observable<string>;

  private zoneScheduler = inject(RxNgZoneScheduler);

  ngOnInit() {
    // Usage of pipeable operators as wrappers for observeOn and subscribeOn:

    this.demotext1$ = of('This is the initial text').pipe(
      this.zoneScheduler.observeOutOfNgZone() // To observe outside of NgZone - like runOutsideAngular()
    );

    this.demotext2$ = of('This is the initial text').pipe(
      this.zoneScheduler.observeOnNgZone() // To observe inside of NgZone - like run()
    );

    // Direct usage of the scheduler:
    this.demotext3$ = of('This is the initial text').pipe(
      delay(100, this.zoneScheduler.leaveNgZone()) // To produce outside of NgZone - like runOutsideAngular()
    );

    this.demotext4$ = of('This is the initial text').pipe(
      delay(100, this.zoneScheduler.enterNgZone()) // To produce inside of NgZone - like run()
    );
  }

  // ...
}

It is also possible to use the schedulers without importing RxNgZoneSchedulerModule:

import { Component, OnInit, NgZone, inject } from '@angular/core';
import { Observable, of } from 'rxjs';
import { delay, observeOn } from 'rxjs/operators';

import { enterNgZone, leaveNgZone } from 'ngx-rxjs-zone-scheduler';

@Component({
  // ...
})
export class AppComponent implements OnInit {
  public demotext1$: Observable<string>;
  public demotext2$: Observable<string>;

  private ngZone = inject(NgZone);

  ngOnInit() {
    this.demotext1$ = of('This is the initial text').pipe(
      observeOn(enterNgZone(this.ngZone))
    );

    this.demotext2$ = of('This is the initial text').pipe(
      observeOn(leaveNgZone(this.ngZone))
    );
  }

  // ...
}