https://github.com/angularconsulting/rx-service

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 🐱🦸‍♂️
https://github.com/angularconsulting/rx-service

angular component-communication reactive reactive-services reactive-streams rxjs state-management

Last synced: about 1 month ago
JSON representation

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 🐱🦸‍♂️

• Host: GitHub
• URL: https://github.com/angularconsulting/rx-service
• Owner: angularconsulting
• License: mit
• Created: 2020-07-14T11:42:55.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-02-24T01:22:07.000Z (almost 2 years ago)
• Last Synced: 2024-10-29T00:59:02.384Z (about 2 months ago)
• Topics: angular, component-communication, reactive, reactive-services, reactive-streams, rxjs, state-management
• Language: TypeScript
• Homepage:
• Size: 690 KB
• Stars: 12
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🔥 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

```  typescript

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 {

  constructor() {

    super(initialState);

  }

}

```

### component class

```  typescript

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;

  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

``` html

-1

 {{ counter$ | async }}

+1

```

## 💡 Also you can just use primitives 

```  typescript

import { Rx } from "rx-service";

const initialState = 0;

export class CounterService extends Rx {

  constructor() {

    super(initialState);

  }

}

```

## 🧹 Clean up subscriptions for edge cases 

```  typescript

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](https://angularconsulting.au)