test of angular 2 change detection

grid.dart

import 'dart:html';

import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart'
show ReflectionCapabilities;

void main() {
  reflector.reflectionCapabilities = new ReflectionCapabilities();
  bootstrap(Grid);
}

@Component(
    selector: 'grid'
)
@View(
    template: '''
<div>
  <button (click)="play(up)">Up</button>
  <button (click)="play(down)">Down</button>
  <button (click)="play(left)">Left</button>
  <button (click)="play(right)">Right</button>
  <button (click)="play(stop)">Stop</button>
</div>
<table>
  <tr *ng-for="#row of rows">
    <td *ng-for="#cell of row">{{ cell }}</td>
  </tr>
</table>
''', directives: const [NgFor]
)
class Grid {
  List rows = makeGrid(100, 20);
  Function step;
  bool willRender = false;

  Grid() {
    play(left);
  }

  void play(Function newStep) {
    step = newStep;
    requestRender();
  }

  void requestRender() {
    if (!willRender) {
      window.animationFrame.then((_) => render());
      willRender = true;
    }
  }

  void render() {
    willRender = false;
    if (step != null) {
      step();
      requestRender();
    }
  }

  void up() => rotateUp(rows);
  void down() => rotateDown(rows);
  void left() => rotateLeft(rows);
  void right() => rotateRight(rows);
  final Function stop = null;
}

List<List<int>> makeGrid(int width, int height) {
  var rows = [];
  for (int y = 0; y < height; y++) {
    var row = [];
    for (int x = 0; x < width; x++) {
      row.add(((x~/10)+(y~/10)) % 10);
    }
    rows.add(row);
  }
  return rows;
}

void rotateUp(List<List<int>> rows) {
  var row = rows.removeAt(0);
  rows.add(row);
}

void rotateDown(List<List<int>> rows) {
  var row = rows.removeLast();
  rows.insert(0, row);
}

void rotateLeft(List<List<int>> rows) {
  for (var row in rows) {
    var item = row.removeAt(0);
    row.add(item);
  }
}

void rotateRight(List<List<int>> rows) {
  for (var row in rows) {
    var item = row.removeLast();
    row.insert(0, item);
  }
}