Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
mobx-angular
Advanced tools
Readme
If you're looking for the Angular 1 version version, it's here
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 do the following:
detectChanges
method whenever there's a relevant changeUnder the hood, this magic happens by running autorun(() => view.detectChanges())
You can improve your component's performance by detaching it from CD (Change Detection), by supplying *mobxAutorun="{ detach: true }"
.
This might cause things to stop updating. You have 3 options to manage that:
This method is deprecated - do not use it.
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.
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.
Some people complained about AoT when using mobx decorators inside components.
In case you do that - we export a proxy to the decorators from mobx-angular, which should be AoT compatible, e.g.:
import { observable, computed } from 'mobx-angular'
The only thing you can't do when importing from mobx-angular is using the modifiers, such as @observable.ref
.
See the example
folder, specifically these files:
/example/todos/src/app/stores/todos.store.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
$ npm start
FAQs
Angular connector to MobX (2 and above)
The npm package mobx-angular receives a total of 10,012 weekly downloads. As such, mobx-angular popularity was classified as popular.
We found that mobx-angular demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).