{"id":16428843,"url":"https://github.com/netanelbasal/ngx-mobx","last_synced_at":"2025-03-23T07:33:30.519Z","repository":{"id":79938506,"uuid":"107816475","full_name":"NetanelBasal/ngx-mobx","owner":"NetanelBasal","description":"Mobx decorators for Angular Applications","archived":false,"fork":false,"pushed_at":"2017-11-20T06:56:06.000Z","size":76,"stargazers_count":13,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-21T10:27:32.509Z","etag":null,"topics":["angular","mobx","rxjs","state-management"],"latest_commit_sha":null,"homepage":"https://netbasal.com/managing-state-in-angular-with-mobx-51191803e14f","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/NetanelBasal.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":"2017-10-21T21:15:55.000Z","updated_at":"2023-02-19T02:55:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"13d0a159-b213-4684-9d68-b4748d3c665b","html_url":"https://github.com/NetanelBasal/ngx-mobx","commit_stats":{"total_commits":18,"total_committers":2,"mean_commits":9.0,"dds":"0.11111111111111116","last_synced_commit":"15a9c7b0e4b326be072e670e5eede5a54ad4161c"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NetanelBasal%2Fngx-mobx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NetanelBasal%2Fngx-mobx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NetanelBasal%2Fngx-mobx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NetanelBasal%2Fngx-mobx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NetanelBasal","download_url":"https://codeload.github.com/NetanelBasal/ngx-mobx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221847101,"owners_count":16890966,"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","mobx","rxjs","state-management"],"created_at":"2024-10-11T08:19:28.609Z","updated_at":"2024-10-28T15:13:36.640Z","avatar_url":"https://github.com/NetanelBasal.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/NetanelBasal/ngx-mobx.svg?branch=master)](https://travis-ci.org/NetanelBasal/ngx-mobx)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)\n[![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)\n\n# Mobx decorators for Angular Applications ([live example](https://stackblitz.com/edit/angular-mobx-netanel))\n\n## Installation\n```js\nnpm install ngx-mobx\nyarn add ngx-mobx\n```\n\n## Usage\n\n- `fromMobx` - RxJS bridge from Mobx `computed` function\n```ts\nclass TodosStore {\n  @observable todos: Todo[] = [new Todo('One')];\n  \n  @action addTodo(todo: Todo) {\n    this.todos = [...this.todos, todo];\n  }\n}\n\n@Component({\n  selector: 'app-todos-page',\n  template: `\n   \u003cbutton (click)=\"addTodo()\"\u003eAdd todo\u003c/button\u003e \n   \u003capp-todos [todos]=\"todos | async\"   \n              (complete)=\"complete($event)\"\u003e\n    \u003c/app-todos\u003e\n  `\n})\nexport class TodosPageComponent {\n  todos : Observable\u003cTodo[]\u003e;\n\n  constructor( private _todosStore: TodosStore ) {}\n  \n  ngOnInit() {\n                                                        // true by default\n    this.todos = fromMobx(() =\u003e this._todosStore.todos, invokeImmediately);\n  }\n\n  addTodo() {\n    this._todosStore.addTodo({ title: `Todo ${makeid()}` });\n  }\n}\n```\n\n- `CleanAutorun with autorun` - autorun decorator which cleans itself as soon as the component is destroyed\n\n```ts\nimport { CleanAutorun, autorun } from 'ngx-mobx';\n\n@CleanAutorun\n@Component({\n  selector: 'todos',\n  template: `...`\n})\nexport class TodosPageComponent {\n\n  @autorun\n  ngOnInit() {\n    this.todos = this.todosStore.todos;\n  }\n\n  ngOnDestroy() {}\n}\n```\n\nLicense\n----\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetanelbasal%2Fngx-mobx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnetanelbasal%2Fngx-mobx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetanelbasal%2Fngx-mobx/lists"}