Implement Canvas as Angular Component

lib/app_component.dart

@@ -1,11 +1,14 @@
 import 'package:angular/angular.dart';
 
+import 'dart:html' as html;
+import 'package:rules_of_living/src/App.dart';
+
 @Component(
   selector: 'my-app',
   template: '''
-  <h1>Hello {{name}}</h1>
+  <h1>Cellular Automata - The Rules of Life</h1>
   <div id="output">
-      <canvas id="canvas"></canvas>
+      <canvas #caCanvas width="500" height="500"></canvas>
   </div>
   <div id="controls">
       <button id="run">Run</button>
@@ -16,6 +19,24 @@ import 'package:angular/angular.dart';
   </div>
   ''',
 )
-class AppComponent {
+class AppComponent implements OnInit {
-  var name = 'Darth Marty';
+  var name = "World";
+
+  App engine;
+
+  @ViewChild("caCanvas")
+  html.CanvasElement canvas;
+
+  @override
+  void ngOnInit() {
+    canvas.context2D.setFillColorRgb(255, 0, 0);
+    canvas.context2D.fillRect(0, 0, 200, 150);
+    engine = new App(canvas);
+    html.window.animationFrame.then(animFrame);
+  }
+
+  void animFrame(num now) {
+    engine.process(now);
+    html.window.animationFrame.then(animFrame);
+  }
 }

web/main.dart

@@ -1,23 +1,7 @@
-import 'dart:html' as html;
-
-import 'package:rules_of_living/App.dart';
-
 import 'package:angular/angular.dart';
 import 'package:rules_of_living/app_component.template.dart' as ng;
 
-html.CanvasElement el;
-App engine;
 
 void main() {
   runApp(ng.AppComponentNgFactory);
-
-  el = new html.CanvasElement(width: 500, height: 500);
-  html.querySelector('#output').append(el);
-  engine = new App(el);
-  html.window.animationFrame.then(animFrame);
-}
-
-void animFrame(num now) {
-  engine.process(now);
-  html.window.animationFrame.then(animFrame);
 }