{"id":19195062,"url":"https://github.com/ksachdeva/rxjs-zone-operators","last_synced_at":"2025-08-02T02:12:09.147Z","repository":{"id":136497900,"uuid":"68485004","full_name":"ksachdeva/rxjs-zone-operators","owner":"ksachdeva","description":"Reactive extensions for Zones","archived":false,"fork":false,"pushed_at":"2016-09-18T01:17:42.000Z","size":9,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-01T03:06:43.160Z","etag":null,"topics":[],"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/ksachdeva.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2016-09-18T00:19:09.000Z","updated_at":"2023-03-17T10:58:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"6d28a81f-1605-4a14-adab-f88ac2b38d17","html_url":"https://github.com/ksachdeva/rxjs-zone-operators","commit_stats":{"total_commits":7,"total_committers":1,"mean_commits":7.0,"dds":0.0,"last_synced_commit":"965419456cc971fb8821a85565054a3474cb006a"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ksachdeva/rxjs-zone-operators","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ksachdeva%2Frxjs-zone-operators","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ksachdeva%2Frxjs-zone-operators/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ksachdeva%2Frxjs-zone-operators/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ksachdeva%2Frxjs-zone-operators/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ksachdeva","download_url":"https://codeload.github.com/ksachdeva/rxjs-zone-operators/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ksachdeva%2Frxjs-zone-operators/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268326739,"owners_count":24232496,"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","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-09T12:08:12.469Z","updated_at":"2025-08-02T02:12:09.111Z","avatar_url":"https://github.com/ksachdeva.png","language":"TypeScript","readme":"# rxjs-zone-operators\n\nNote - The code for enterZone \u0026 leaveZone operators has been copied from \n[https://github.com/ngrx/core](@ngrx/core) project\n\n```bash\nnpm install rxjs-zone-operators --save\n```\n\n## Reactive extensions for Zones\n\nLearn what are zones - \u003chttps://github.com/angular/zone.js\u003e\n\nLearn about usage of zones in Angular 2 - \u003chttp://blog.thoughtram.io/angular/2016/02/01/zones-in-angular-2.html\u003e\n\nSo what is the problem you may ask -\n\nIf you are here it means that you have adopted the Reactive Extensions for JavaScript in your \nAngular 2 project and are puzzled that some times change detection is not happening.\n\nLet me give you a real example where there is a problem -\n\n- You are building an ionic 2 application\n- Since it is a mobile application you most likely are going to use cordova plugins\n- Since Ionic 2 \u0026 Angular 2 makes use of Typescript you would want to have typescript apis for the various cordova plugins\n- [ionic-native](https://github.com/driftyco/ionic-native) is the project that addresses this problem\n- ionic-native not only provides the binding but it also does smart wrapping of apis exposed by cordova plugins\n- Essentially the callback functions of plugin apis are either wrapped into Promises or Observables\n\nThe problem is that when the callbacks are fired by the cordova plugin they does not execute in the Angular 2 excution context (i.e. zone).\n\nMost of the time you would not notice the problem (but it is there !!) because your user may interact with the user interface and by doing may get back into the angular zone.\n\nHere is how you would solve this for apis that return Promise (when ionic-native wraps the callback into Promise)\n\n```typescript\nmycordovaAPI().then(() =\u003e {\n  // here you are outside angular zone\n  this.ngZone.run(() =\u003e {\n    // you now entered into angular zone\n  });\n})\n```\n\nNow lot of cordova plugin apis are wrapped into Observables as well. The ones that are to be fired multiple times should be wrapped as Observables.\n\nand here comes the challenge - if we do something similar to what we have done with our Promise example then we would end up breaking the operator chain (or as some one proficient in reactive extensions would say ... you are now leaving the monad !)\n\nThis is where enterZone shines as all you need to do is following \n\n```typescript\nmyCordovaAAPI().enterZone(this.ngZone).\u003coperator_of_your_choice\u003e().\n```\n\nHope this makes sense.\n\nSee the real world usage of these operators in an ionic-native application [https://github.com/ksachdeva/ble-inspector/blob/master/app/services/ble-central.ts](https://github.com/ksachdeva/ble-inspector/blob/master/app/services/ble-central.ts)\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fksachdeva%2Frxjs-zone-operators","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fksachdeva%2Frxjs-zone-operators","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fksachdeva%2Frxjs-zone-operators/lists"}