I’ve been working with the Angular2 alpha ever since ng-conf 2015, and it has been pretty awesome to see how the framework is shaping up. I’ll be the first to admit that the bleeding edge tax is high, but it has been worth it to see just how powerful the next version of Angular is going to be.

The databinding system in Angular2 is so much better than the previous version that it is hard to talk about it in the abstract. I could go into a bunch of boring technical details, but I think seeing is believing.

The Setup

I wanted to see just how fast the new data binding system was, so I thought… why not animate a bunch of elements using nothing but databinding.

<table class="table table-striped table-condensed table-floating">
    <tbody>
        <tr *ng-for="#row of statusBoard">
            <td *ng-for="#col of row" [style.top]="col.top" [style.left]="col.left">&nbsp;</td>
        </tr>
    </tbody>
</table>

If you aren’t familiar with the syntax, don’t worry, basically I am using a nested repeater to create a bunch of rows and columns, and then data binding their position on the page.

The Code

GitHub Repo

Under the hood, I am using requestAnimationFrame to modify their positions as quickly as I possibly can. The code is long and boring, but the relevant bits are here:

updateBoard(elapsedMilliseconds) {
    var elapsedSeconds = new TimeSpan(elapsedMilliseconds - this._lastStep).totalSeconds;
    this._lastStep = elapsedMilliseconds;

    for (var row = 0; row < dimensions.rows; row++) {
        for (var col = 0; col < dimensions.cols; col++) {
            this.statusBoard[row][col].move(elapsedSeconds, this._config.bounds);
        }
    }

    requestAnimationFrame(this.updateBoard.bind(this));
}

The Result?

Well… see for yourself.

  • Lars Jeppesen

    Awesome.. A2 is shaping up to be amazing

  • Lars Jeppesen

    Awesome.. A2 is shaping up to be amazing

    • @larsjeppesen:disqus – I am enjoying working with it so far. It certainly has some rough points, but that is to be expected in early alpha. The team seems to be working hard to take into account usability and is making efforts to smooth over those rough spots.

      The bones are good though.