Angular2: Recursivity exercice

December 09, 2015

I reproduced a feature I’ve coded in a previous job. I did it to experiment ng2 and I’m too lazy to explain what it is for. Just notice that there are 3 differents types (group, segment, criterion) and groups can contain all types. You can add, remove and drag & drop all types at any groups/positions.

When I coded it first time few years ago, it was with ES5 and Angular1.
And with this new version using Typescript and Angular2, I see the giant gap, benefits are amazing:

  • Debugging before runtime (TS compilation)
  • Readability (ES6 modules, events and properties bindings syntax)
  • Performance (change detection following a tree structure)
  • Compatibility (no more $apply, thanks zone)
  • Maintainability (types helps a lot for refactor)
  • ..

Try it

I didn’t use immutable/observable data here but I’m gonna try it in a future post.

Note:

I used this syntax:

<div *ng-for="#m of group.children; #i = index">
  <div *ng-if="m.type == 'criterion'">..</div>
  <div *ng-if="m.type == 'segment'">..</div>
</div>

Instead of this one which avoid an unnecessary div node:

<template ng-for #m [ng-for-of]="group.children" #i="index">
  <div *ng-if="m.type == 'criterion'">..</div>
  <div *ng-if="m.type == 'segment'">..</div>
</template>

Due to this bug which is gonna be solved in the beta normally.

Beta is coming!

Currently angular2 is in alpha 50 and beta is finished at 78% (47 issues left).

This year I asked father christmas an angular2 beta, hope magic will operate! :)