If you're looking for the Angular 1 version version, it's here
- The library allows you to automatically observe all the observables that your component uses
- Automatically runs change detection - works great with OnPush strategy
- Disposes of all the observers when the component is destroyed
- Debugging tools
Install:
$ npm install --save mobx-angular mobx
Import the MobxAngularModule:
import { MobxAngularModule } from 'mobx-angular';
@NgModule({
imports: [..., MobxAngularModule]
})
export class MyModule {}
Use *mobxAutorun
directive in your template:
import { Component, ChangeDetectionStrategy } from '@angular/core';
import {store} from './store/counter';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div *mobxAutorun>
{{ store.value }} - {{ store.computedValue }}
<button (click)="store.action">Action</button>
</div>
`
})
export class AppComponent {
store = store;
}
The directive will observe all the observables that your component uses, and will automatically run the change detection whenever there's a change.
Use it together with onPush to gain maximum performance.
The same as autorun, except it runs synchronously.
Aside from autorun, MobX allows you to react to specific data changes.
Usage:
import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
template: `<div *mobxReaction="getParity.bind(this)">
{{ parity }}
</div>`
})
class AppComponent {
getParity() {
return this.parity = store.counter % 2 ? 'Odd' : 'Even';
}
}
The callback
function will automatically re-run whenever any observable that it uses changes.
Change Detection will run automatically whenever the return value of callback
changes.
If you don't return anything, change detection will not run.
In this example, the parity
property will be updated according to counter
,
and change detection will run only when the parity
changes.
You can easily make your stores injectable:
import { observable, action } from 'mobx-angular';
@Injectable()
class Store {
@observable value;
@action doSomething() { ... }
}
To achieve great performance, you can set OnPush
change detection strategy on your components (this can be configured as default in .angular-cli.json
).
MobX will run change detection manually for you on the components that need to be updated.
- In Angular 5 there's a new option, which is to disable Zone completely when bootstrapping the app (ngZone: 'noop'). Please note that this means that all 3rd-party components will stop working (because they rely on change detection to work via Zone).
mobx-angular comes with a handy debug tool. To turn on / off the debug tool, open developer tools' console, and run:
mobxAngularDebug(true) // turn on
mobxAngularDebug(false) // turn off
Then you can right-click on the components that use mobx directives, and you will see a console log of the components' dependencies. Also, every action that happens in mobx will be console.logged in a nice way.
See the example
folder, specifically these files:
/example/todos/src/app/stores/todos.ts
/example/todos/src/app/app.component.ts
To run the examples, clone this repo and run:
$ npm install -g @angular/cli
$ cd example/<example-folder>
$ npm install
$ ng serve