https://github.com/netanelbasal/ngx-mobx

Mobx decorators for Angular Applications
https://github.com/netanelbasal/ngx-mobx

angular mobx rxjs state-management

Last synced: over 1 year ago
JSON representation

Mobx decorators for Angular Applications

• Host: GitHub
• URL: https://github.com/netanelbasal/ngx-mobx
• Owner: NetanelBasal
• License: mit
• Created: 2017-10-21T21:15:55.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-11-20T06:56:06.000Z (over 8 years ago)
• Last Synced: 2024-10-21T10:27:32.509Z (over 1 year ago)
• Topics: angular, mobx, rxjs, state-management
• Language: TypeScript
• Homepage: https://netbasal.com/managing-state-in-angular-with-mobx-51191803e14f
• Size: 74.2 KB
• Stars: 13
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![Build Status](https://travis-ci.org/NetanelBasal/ngx-mobx.svg?branch=master)](https://travis-ci.org/NetanelBasal/ngx-mobx)

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)

[![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)

# Mobx decorators for Angular Applications ([live example](https://stackblitz.com/edit/angular-mobx-netanel))

## Installation

```js

npm install ngx-mobx

yarn add ngx-mobx

```

## Usage

- `fromMobx` - RxJS bridge from Mobx `computed` function

```ts

class TodosStore {

  @observable todos: Todo[] = [new Todo('One')];

  

  @action addTodo(todo: Todo) {

    this.todos = [...this.todos, todo];

  }

}

@Component({

  selector: 'app-todos-page',

  template: `

   Add todo 

   

    

  `

})

export class TodosPageComponent {

  todos : Observable;

  constructor( private _todosStore: TodosStore ) {}

  

  ngOnInit() {

                                                        // true by default

    this.todos = fromMobx(() => this._todosStore.todos, invokeImmediately);

  }

  addTodo() {

    this._todosStore.addTodo({ title: `Todo ${makeid()}` });

  }

}

```

- `CleanAutorun with autorun` - autorun decorator which cleans itself as soon as the component is destroyed

```ts

import { CleanAutorun, autorun } from 'ngx-mobx';

@CleanAutorun

@Component({

  selector: 'todos',

  template: `...`

})

export class TodosPageComponent {

  @autorun

  ngOnInit() {

    this.todos = this.todosStore.todos;

  }

  ngOnDestroy() {}

}

```

License

----

MIT