![Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack](https://cdn.sanity.io/images/cgdhsj6q/production/6af25114feaaac7179b18127c83327568ff592d1-1024x1024.webp?w=800&fit=max&auto=format)
Security News
Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
mobx-angular
Advanced tools
Changelog
1.9.0 (2017-10-05)
<a name="1.8.1"></a>
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 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() { ... }
}
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
FAQs
Angular connector to MobX (2 and above)
The npm package mobx-angular receives a total of 11,158 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
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.