Mobx decorators for Angular Applications (live example)

Installation

npm install ngx-mobx
yarn add ngx-mobx

Usage

• fromMobx - RxJS bridge from Mobx computed function

class TodosStore {
  @observable todos: Todo[] = [new Todo('One')];
  
  @action addTodo(todo: Todo) {
    this.todos = [...this.todos, todo];
  }
}

@Component({
  selector: 'app-todos-page',
  template: `
   <button (click)="addTodo()">Add todo</button> 
   <app-todos [todos]="todos | async"   
              (complete)="complete($event)">
    </app-todos>
  `
})
export class TodosPageComponent {
  todos : Observable<Todo[]>;

  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

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

@CleanAutorun
@Component({
  selector: 'todos',
  template: `...`
})
export class TodosPageComponent {

  @autorun
  ngOnInit() {
    this.todos = this.todosStore.todos;
  }

  ngOnDestroy() {}
}

License

MIT