{"id":13481271,"url":"https://github.com/mobxjs/mobx-angular","last_synced_at":"2025-05-14T11:08:44.334Z","repository":{"id":12337438,"uuid":"71633226","full_name":"mobxjs/mobx-angular","owner":"mobxjs","description":"The MobX connector for Angular.","archived":false,"fork":false,"pushed_at":"2024-12-09T22:51:49.000Z","size":4864,"stargazers_count":486,"open_issues_count":10,"forks_count":60,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-05-02T05:03:32.971Z","etag":null,"topics":["angular","angular-mobx","angular2","frontend","mobx","mobx-connector","ng2-mobx"],"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/mobxjs.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},"funding":{"open_collective":"mobx"}},"created_at":"2016-10-22T10:51:16.000Z","updated_at":"2025-03-16T07:38:56.000Z","dependencies_parsed_at":"2024-09-30T22:00:56.893Z","dependency_job_id":"36c19aaa-0d85-4b43-ae5e-432dcb1d1be3","html_url":"https://github.com/mobxjs/mobx-angular","commit_stats":{"total_commits":240,"total_committers":29,"mean_commits":8.275862068965518,"dds":"0.48750000000000004","last_synced_commit":"30a4b44bd153486f1ac25e4fd022db21cc2cd96e"},"previous_names":["500tech/ng2-mobx"],"tags_count":44,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mobxjs%2Fmobx-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mobxjs%2Fmobx-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mobxjs%2Fmobx-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mobxjs%2Fmobx-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mobxjs","download_url":"https://codeload.github.com/mobxjs/mobx-angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253863063,"owners_count":21975593,"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","angular-mobx","angular2","frontend","mobx","mobx-connector","ng2-mobx"],"created_at":"2024-07-31T17:00:50.341Z","updated_at":"2025-05-14T11:08:44.311Z","avatar_url":"https://github.com/mobxjs.png","language":"TypeScript","funding_links":["https://opencollective.com/mobx"],"categories":["angular","Uncategorized","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Uncategorized","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"readme":"[![Tests](https://github.com/mobxjs/mobx-angular/actions/workflows/main.yml/badge.svg)](https://github.com/mobxjs/mobx-angular/actions/workflows/main.yml)\n[![npm version](https://badge.fury.io/js/mobx-angular.svg)](https://badge.fury.io/js/mobx-angular)\n\n# MobX Angular\n\n## Why MobX?\n\nAngular's change detection is great, but it updates the entire UI on every change, and doesn't have any knowledge of how our components use our services.\n\nMobX automatically knows what properties your components use from the stores and listens to changes. It allows you to automatically react to changes and update only the parts of the UI that need to be updated, making your app performant.\n\nWith MobX you manage your app's state using mutable objects and classes. It also helps you create computed values and side-effects.\n\n[Learn more about MobX](https://mobx.js.org/README.html)!\n\n## This library\n\n1. Automatically observe all the observables that your component uses\n2. Automatically runs change detection - works great with OnPush strategy\n3. Disposes of all the observers when the component is destroyed\n\n## Usage\n\nInstall:\n\n```shell\nnpm install --save mobx-angular mobx\n```\n\nImport the MobxAngularModule:\n\n```ts\nimport { MobxAngularModule } from 'mobx-angular';\n\n@NgModule({\n  imports: [..., MobxAngularModule]\n})\nexport class MyModule {}\n```\n\n## Autorun\n\nUse `*mobxAutorun` directive in your template:\n\n```ts\nimport { Component, ChangeDetectionStrategy } from '@angular/core';\nimport { store } from './store/counter';\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    \u003cdiv *mobxAutorun\u003e\n      {{ store.value }} - {{ store.computedValue }}\n      \u003cbutton (click)=\"store.action\"\u003eAction\u003c/button\u003e\n    \u003c/div\u003e\n  `\n})\nexport class AppComponent {\n  store = store;\n}\n```\n\nThe directive will do the following:\n\n- Observe all the observables / computed values that your component uses\n- Automatically run the `detectChanges` method whenever there's a relevant change\n\nUnder the hood, this magic happens by running `autorun(() =\u003e view.detectChanges())`\n\n## Why directive and not decorator?\n\nIn order to inject the change detector, and implement lifecycle hooks like ngOnDestroy, this library uses a directive, which is the most elegant solution in Angular.\n\nIt also has the benefit of allowing you to easily have multiple observed sections of your component's template, in case it is required.\n\n## Detach\n\nYou can improve your component's performance by detaching it from CD (Change Detection), by supplying `*mobxAutorun=\"{ detach: true }\"`.\n\nThis might cause things to stop updating. You have 3 options to manage that:\n\n- Define local component properties as observables or computed values\n- Surround with \\*mobxAutorun only the parts that actually use observable / computed values from the store\n- Instead of detaching, use OnPush CD strategy on the component\n\n## Reaction\n\nAside from autorun, MobX allows you to react to specific data changes.\n\nUsage:\n\n```ts\nimport { Component, ChangeDetectionStrategy } from '@angular/core';\nimport { store } from './store/counter';\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    \u003cdiv *mobxReaction=\"getParity.bind(this)\"\u003e\n      {{ parity }}\n    \u003c/div\u003e\n  `\n})\nclass AppComponent {\n  getParity() {\n    return (this.parity = store.counter % 2 ? 'Odd' : 'Even');\n  }\n}\n```\n\nThe `callback` function will automatically re-run whenever any observable that it uses changes.\nChange Detection will run automatically whenever the return value of `callback` changes.\nIf you don't return anything, change detection will not run.\n\nIn this example, the `parity` property will be updated according to `counter`,\nand change detection will run only when the `parity` changes.\n\n## Options\n\nIt is possible to pass an options object to `*mobxAutorun` and `*mobxReaction` directives. For a list of possible options visit the official [docs](https://mobx.js.org/reactions.html).\n\nUsage:\n\n```ts\nimport { Component, ChangeDetectionStrategy } from '@angular/core';\nimport { store } from './store/counter';\nimport { comparer } from 'mobx';\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    \u003cdiv *mobxAutorun=\"{ detach: true, name: 'foo', delay: 3000 }\"\u003e\n      {{ store.value }} - {{ store.computedValue }}\n      \u003cbutton (click)=\"store.action\"\u003eAction\u003c/button\u003e\n    \u003c/div\u003e\n    \u003cdiv *mobxReaction=\"getParity.bind(this); options: { name: 'parity reaction', equals: comparer.shallow }\"\u003e\n      {{ parity }}\n    \u003c/div\u003e\n  `\n})\nexport class AppComponent {\n  store = store;\n  comparer = comparer;\n\n  getParity() {\n    return (this.parity = store.counter % 2 ? 'Odd' : 'Even');\n  }\n}\n```\n\n## Injectable stores\n\nYou can easily make your stores injectable:\n\n```ts\nimport { observable, action } from 'mobx-angular';\n\n@Injectable()\nclass Store {\n  @observable value;\n  @action doSomething() { ... }\n}\n```\n\n## Router store\n\nUsing the `RouterStore`, you can observe route changes.\nBy injecting this store to a component you will get access to the url as a MobX observable, and the entire activated route snapshot.\n\nUsage:\n\n```ts\nimport { Component, ChangeDetectionStrategy } from '@angular/core';\nimport { RouterStore } from 'mobx-angular';\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\u003cdiv\u003e\u003c/div\u003e`\n})\nexport class AppComponent {\n  constructor(public routerStore: RouterStore) {\n    // You get access to the url as a mobx observable through routerStore.url\n    // And to the activated route snapshot through routerStore.routeSnapshot\n  }\n}\n```\n\n## MobX v6\n\nIn order to become compatible with modern ES standards, decorators are not used by default in MobX v6. It still supports decorators, but they are not recommended for greenfield projects.\n[Read More](https://michel.codes/blogs/mobx6)\n\n- In order to use MobX 6 with decorators `makeObservable(this)` should be added to the constructor, and \"useDefineForClassFields\": true should be added to tsconfig.json.\n- For the full migration guide, click [here](https://mobx.js.org/migrating-from-4-or-5.html).\n\nCheck out `projects/todo-v6` for a working example.\n\n## Using with OnPush or ngZone: 'noop'\n\nTo achieve great performance, you can set `OnPush` change detection strategy on your components (this can be configured as default in `.angular-cli.json`).\nMobX will run change detection manually for you on the components that need to be updated.\n\n- In Angular 5 there's a new option, which is to disable Zone completely when bootstrapping the app (ngZone: 'noop').\n- Please note that this means that all 3rd-party components will stop working (because they rely on change detection to work via Zone).\n\n## AoT\n\nSome people complained about AoT when using mobx decorators inside components.\nIn case you do that - we export a proxy to the decorators from mobx-angular, which should be AoT compatible, e.g.:  \n`import { observable, computed } from 'mobx-angular'`\n\n## DevTools\n\nCheck out `projects/todo` for an example of how to use `mobx-remotedev` with Angular:\n\n```shell\nnpm install mobx-remotedev\n```\n\n```ts\n// app.module.ts\nimport remotedev from 'mobx-remotedev';\nimport { Todos } from './stores/todos.store';\n\n@NgModule({\n  ...\n  providers: [\n    { provide: Todos, useClass: remotedev(Todos, { global: true }), deps: [] }\n  ],\n})\n\n```\n\n## Examples\n\nSee the `projects` folder, specifically these files:  \n`/projects/todo/src/app/stores/todos.store.ts`  \n`/projects/todo/src/app/app.component.ts`\n\nTo run the examples, clone this repo and run:\n\n```shell\nnpm install -g @angular/cli\nnpm install\nnpm run build\nnpm run start \u003cexample\u003e # for example `npm run start todo`\n```\n\n## Debugging MobX (only for mobx-angular versions 2.X and below)\n\nmobx-angular comes with a handy debug tool.\nTo turn on / off the debug tool, open developer tools' console, and run:\n\n```ts\nmobxAngularDebug(true); // turn on\nmobxAngularDebug(false); // turn off\n```\n\nThen you can right-click on the components that use mobx directives, and you will see a console log of the components' dependencies.\nAlso, every action that happens in mobx will be console.logged in a nice way.\n\nTBD - support debugging for MobX 4\n\n## Legacy Versions\n\nIf you're looking for the Angular 1 version version, it's [here](https://github.com/mobxjs/ng1-mobx).\n\n## Contributing\n\nImportant things to always consider when changing code in this library:  \n\n- Make it readable, add comments when necessary.\n- Add unit tests for the new functionality. Think about edge cases. Make sure tests pass before merging.\n- Keep backwards compatibility. Don't force users to refactor their code, even if it means adding a new API instead of changing an existing one.\n- Keep SEMVER. If breaking changes is unavoidable - increase a major version. New features, however small should increase a minor version, and patch is for bugfixes/performance/refactoring.\n- Think about bundle size and speed.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmobxjs%2Fmobx-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmobxjs%2Fmobx-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmobxjs%2Fmobx-angular/lists"}