ArtemRomanovsky

interface ViewData {  
  viewContainerParent: ViewData|null;
  component: any;
  // child nodes
  nodes: {[key: number]: NodeData};
  state: ViewState;
  oldValues: any[];
  ...
}

ArtemRomanovsky

Zone.current  
  .fork({
    afterTask() {
      // do something after leaving zone
    }
  })
  .run(() => {
    // do something async
    setTimeout(() => ...) 
  });

ArtemRomanovsky

ZoneEventsStream.subscribe(() => {  
  this.changeDetectorRefs.detectChanges();
});

ArtemRomanovsky

export class AppComponent {  
  constructor(private zone: NgZone) {
    this.zone.runOutsideAngular(() => {
      // run code outside angular change detection

      setInterval(() => this.sendStatistics(), 1000);
    });
  }
}

ArtemRomanovsky

export class ChildComponent implements OnChanges {  
  constructor(public cd: ChangeDetectorRef) {
    this.cd.detach();
  }
  ngOnChanges(values) {
    this.cd.reattach();
    setTimeout(() => {
      this.cd.detach();
    })
  }

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);
    }

ArtemRomanovsky

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

ArtemRomanovsky

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

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

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, ...);
  }
}