Security News
GitHub Removes Malicious Pull Requests Targeting Open Source Repositories
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
If you're looking for the Angular 1 version version, it's here
MobX is a modern reactive state management library.
This simple library connects MobX to Angular 2 components.
The advantages of MobX are:
Install:
$ npm install --save ng2-mobx
Import the Ng2MobxModule:
import { Ng2MobxModule } from 'ng2-mobx';
@NgModule({
imports: [..., Ng2MobxModule]
})
export class MyModule {}
Use *mobxAutorun
directive in your template:
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:
@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:
@Injectable()
class Store {
@observable value;
@action doSomething() { ... }
}
ng2-mobx comes with a handy debug tool. to turn on / off the debug tool, open developer tools' console, and run:
ng2MobxDebug(true) // turn on
ng2MobxDebug(false) // turn off
Then you can hover over the components that use mobx directives, and you will have a small box to click on to console.log the dependencies of that component. 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/*
$ npm install
$ ng serve
FAQs
Angular 2 connector to MobX
The npm package ng2-mobx receives a total of 129 weekly downloads. As such, ng2-mobx popularity was classified as not popular.
We found that ng2-mobx demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.