Skip to content

Enhance your application services with Rx Service. This is simple and powerful library adds reactivity and consistency to your services while streamlining component communication. Based on the reliable RxJS BehaviorSubject, it's the perfect solution for powering up your application 🐱🦸‍♂️

License

Notifications You must be signed in to change notification settings

angularconsulting/rx-service

Repository files navigation

🔥 Rx Service

Enhance your application services with Rx Service. This is a simple yet powerful library that adds reactivity and consistency to your services while streamlining component communication within your application using the reliable RxJS BehaviorSubject 🐱🦸‍♂️

👨‍💻 Example

service

import { Injectable } from '@angular/core';
import { Rx } from 'rx-service';

interface Counter {
  value: number;
}

const initialState: Counter = { value: 0 };

@Injectable({
  providedIn: 'root',
})
export class CounterService extends Rx<Counter> {
  constructor() {
    super(initialState);
  }
}

component class

import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { CounterService } from './counter.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent implements OnInit {
  counter$!: Observable<number>;
  constructor(private service: CounterService) {}

   ngOnInit(): void {
    this.counter$ = this.service.state$.pipe(map((x) => x.value));
  }

  update(value: number): void {
    this.service.setState((state) => ({ value: state.value + value }));
  }
}

component template

<button (click)="update(-1)">-1</button>
<span class="value"> {{ counter$ | async }}</span>
<button (click)="update(1)">+1</button>

💡 Also you can just use primitives

import { Rx } from "rx-service";

const initialState = 0;

export class CounterService extends Rx<number> {
  constructor() {
    super(initialState);
  }
}

🧹 Clean up subscriptions for edge cases

import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { RxCleanup } from 'rx-service';
import { takeUntil } from 'rxjs';
import { CounterService } from './counter.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent implements OnInit {
  constructor(
    private service: CounterService,
    private readonly cleanup$: RxCleanup
  ) {}

  ngOnInit(): void {
    this.service.state$
      .pipe(
        // more operators here
        takeUntil(this.cleanup$)
      )
      .subscribe((result) => {
        // more magic here
      });
  }
}

🧞‍♂️ Install

yarn add rx-service

or

npm i rx-service

created by angularconsulting.au

About

Enhance your application services with Rx Service. This is simple and powerful library adds reactivity and consistency to your services while streamlining component communication. Based on the reliable RxJS BehaviorSubject, it's the perfect solution for powering up your application 🐱🦸‍♂️

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published