New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

ngx-rxjs-zone-scheduler

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-rxjs-zone-scheduler

https://github.com/ftischler/ngx-rxjs-zone-scheduler/blob/main/libs/ngx-rxjs-zone-scheduler/README.md


Version published
Weekly downloads
2.5K
decreased by-18.73%
Maintainers
0
Weekly downloads
 
Created

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))
    );
  }

  // ...
}

FAQs

Package last updated on 15 Jan 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts