Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ng2-mobx

Package Overview
Dependencies
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ng2-mobx

Angular 2 connector to MobX

  • 1.2.9
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
159
increased by50%
Maintainers
1
Weekly downloads
 
Created
Source

Build Status npm version

ng2-mobx

MobX connector for Angular 2

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.

Why use MobX

The advantages of MobX are:

  • Normalized - MobX lets you define computed values that are based on the minimal state
  • Reactivity - MobX Automatically figures out when to re-invoke subscribers according to which observables they use. This allows for extremely performant applications
  • Plain objects - Use plain objects and classes with MobX decorators, or even observe existing objects (from external sources for example)
  • MobX is being used heavily in the community (mainly with React)

Read more about MobX

Why use this library

  1. The library allows you to automatically observe all the observables that your component uses
  2. You can also use it together with OnPush strategy, to incredibly high performance
  3. It disposes of all the observers when the component is destroyed
  4. It gives you powerful debugging tools

Usage

Install:

$ npm install --save ng2-mobx

Import the Ng2MobxModule:

import { Ng2MobxModule } from 'ng2-mobx';

@NgModule({
    imports: [..., Ng2MobxModule]
})
export class MyModule {}

autorun

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.

autorunSync

The same as autorun, except it runs synchronously.

reaction

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.

Injectable stores

You can easily make your stores injectable:

@Injectable()
class Store {
  @observable value;
  @action doSomething() { ... }
}

Debugging MobX

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.

Examples

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

Keywords

FAQs

Package last updated on 25 Feb 2017

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc