{"id":20272245,"url":"https://github.com/angularconsulting/rx-service","last_synced_at":"2025-07-24T12:40:16.700Z","repository":{"id":42748665,"uuid":"279569361","full_name":"angularconsulting/rx-service","owner":"angularconsulting","description":"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 🐱🦸‍♂️","archived":false,"fork":false,"pushed_at":"2023-02-24T01:22:07.000Z","size":707,"stargazers_count":12,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-25T02:51:13.452Z","etag":null,"topics":["angular","component-communication","reactive","reactive-services","reactive-streams","rxjs","state-management"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/angularconsulting.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-14T11:42:55.000Z","updated_at":"2023-05-16T16:16:56.000Z","dependencies_parsed_at":"2024-11-14T12:48:01.529Z","dependency_job_id":"5edcc355-f4b4-4122-9bd4-213e198815d1","html_url":"https://github.com/angularconsulting/rx-service","commit_stats":{"total_commits":51,"total_committers":2,"mean_commits":25.5,"dds":0.05882352941176472,"last_synced_commit":"8e70ad48ed3341e1c056715d7f4f351225295806"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angularconsulting%2Frx-service","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angularconsulting%2Frx-service/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angularconsulting%2Frx-service/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angularconsulting%2Frx-service/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/angularconsulting","download_url":"https://codeload.github.com/angularconsulting/rx-service/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248312197,"owners_count":21082637,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","component-communication","reactive","reactive-services","reactive-streams","rxjs","state-management"],"created_at":"2024-11-14T12:42:38.865Z","updated_at":"2025-04-11T04:41:55.659Z","avatar_url":"https://github.com/angularconsulting.png","language":"TypeScript","readme":"# 🔥 Rx Service\n\nEnhance 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 🐱🦸‍♂️\n\n## 👨‍💻 Example\n\n### service\n```  typescript\nimport { Injectable } from '@angular/core';\nimport { Rx } from 'rx-service';\n\ninterface Counter {\n  value: number;\n}\n\nconst initialState: Counter = { value: 0 };\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class CounterService extends Rx\u003cCounter\u003e {\n  constructor() {\n    super(initialState);\n  }\n}\n```\n### component class\n```  typescript\nimport { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';\nimport { Observable } from 'rxjs';\nimport { map } from 'rxjs/operators';\nimport { CounterService } from './counter.service';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AppComponent implements OnInit {\n  counter$!: Observable\u003cnumber\u003e;\n  constructor(private service: CounterService) {}\n\n   ngOnInit(): void {\n    this.counter$ = this.service.state$.pipe(map((x) =\u003e x.value));\n  }\n\n  update(value: number): void {\n    this.service.setState((state) =\u003e ({ value: state.value + value }));\n  }\n}\n```\n### component template\n``` html\n\u003cbutton (click)=\"update(-1)\"\u003e-1\u003c/button\u003e\n\u003cspan class=\"value\"\u003e {{ counter$ | async }}\u003c/span\u003e\n\u003cbutton (click)=\"update(1)\"\u003e+1\u003c/button\u003e\n```\n\n## 💡 Also you can just use primitives \n```  typescript\nimport { Rx } from \"rx-service\";\n\nconst initialState = 0;\n\nexport class CounterService extends Rx\u003cnumber\u003e {\n  constructor() {\n    super(initialState);\n  }\n}\n```\n\n## 🧹 Clean up subscriptions for edge cases \n```  typescript\n\nimport { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';\nimport { RxCleanup } from 'rx-service';\nimport { takeUntil } from 'rxjs';\nimport { CounterService } from './counter.service';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AppComponent implements OnInit {\n  constructor(\n    private service: CounterService,\n    private readonly cleanup$: RxCleanup\n  ) {}\n\n  ngOnInit(): void {\n    this.service.state$\n      .pipe(\n        // more operators here\n        takeUntil(this.cleanup$)\n      )\n      .subscribe((result) =\u003e {\n        // more magic here\n      });\n  }\n}\n```\n\n## 🧞‍♂️ Install  \n```\nyarn add rx-service\n```\nor\n```\nnpm i rx-service\n```\ncreated by [angularconsulting.au](https://angularconsulting.au)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangularconsulting%2Frx-service","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangularconsulting%2Frx-service","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangularconsulting%2Frx-service/lists"}