ArtemRomanovsky

import { MobxAngularModule } from 'mobx-angular';

 @NgModule({
    declarations: [...COMPONENTS],
    imports: [MobxAngularModule ...],
    bootstrap: [AppComponent]
 })
 export class AppModule { }

ArtemRomanovsky

npm install mobx  
npm install mobx-angular

ArtemRomanovsky

@Component({
  selector: 'parent',
  template: `
    <span>{{ name }}</span>
    <child [text]="text"></child>
  `
})
export class ParentComponent {  
  ...
}

ArtemRomanovsky

@Component({
  selector: 'parent',
  template: `
    <span>{{ name }}</span>
    <child></child>
  `
})
export class ParentComponent {  
  ...
}

ArtemRomanovsky

function checkAndUpdateText(view: ViewData, nodeIndex: number, ...): boolean {  
  if (checkAndUpdateBinding(view, nodeDef, ...)) {
    // update DOM here
  }
}

ArtemRomanovsky

function checkAndUpdate(view: ViewData, nodeIndex: number, ...): boolean {  
  switch (view.def.nodes[nodeIndex].flags & NodeFlags.Types) {
    case NodeFlags.TypeElement:
      return checkAndUpdateElement(view, nodeDef, ...);
    case NodeFlags.TypeText:
      return checkAndUpdateText(view, nodeDef, ...);
    case NodeFlags.TypeDirective:
      return checkAndUpdateDirective(view, nodeDef, ...);
  }
}

ArtemRomanovsky

function (checkAndUpdate, viewData) {  
  var component = viewData.component;
  // here node index is 1 and property is `name`
  var currentValue_0 = component.name;
  checkAndUpdate(viewData, 1, 0, currentValue_0);

  // here node index is 4 and bound property is `age`
  var currentValue_1 = component.age;
  checkAndUpdate(viewData, 4, 0, currentValue_1);
});

ArtemRomanovsky

<h1>Hello {{name}}</h1>  
<h1>Hello {{age}}</h1>  

ArtemRomanovsky

function (checkAndUpdate, viewData) {  
  var component = viewData.component;
  var currentValue = component.name;
  checkAndUpdate(viewData, 1, 0, currentValue);
});

ArtemRomanovsky

// component factory
function View_AComponent_0(l) {  
  return jit_viewDef1(
    ...
    // update renderer
    function (_ck, _v) {
      var _co = _v.component;
      var currVal_0 = _co.name;
      _ck(_v, 1, 0, currVal_0);
    }