Connect Start Button through Angular

lib/app_component.dart

@@ -5,11 +5,13 @@ import 'package:rules_of_living/src/App.dart';
 
 @Component(
   selector: 'my-app',
+  templateUrl: "app_component.html"
 )
 class AppComponent implements OnInit {
   var name = "World";
 
   App engine;
+  String buttonRunText = "Start";
 
   @ViewChild("caCanvas")
   html.CanvasElement canvas;
@@ -26,4 +28,14 @@ class AppComponent implements OnInit {
     engine.process(now);
     html.window.animationFrame.then(animFrame);
   }
+
+  void onStartClicked() {
+    bool isRunning = !engine.running;
+    engine.running = isRunning;
+
+    switch (isRunning) {
+      case true: buttonRunText = "Stop"; break;
+      case false: buttonRunText = "Start"; break;
+    }
+  }
 }

lib/app_component.html

@@ -6,7 +6,7 @@
     <canvas #caCanvas width="500" height="500"></canvas>
 </div>
 <div id="controls">
-    <button id="run" >Run</button>
+    <button id="run" (click)="onStartClicked()">{{buttonRunText}}</button>
     <button id="step">Step</button>
     <button id="reset">Reset</button>
     <button id="random">Random</button>

lib/src/App.dart

@@ -25,12 +25,6 @@ class App {
 
   App(this.canvas) {
     _elapsed.start();
-    var runBtn = html.querySelector("#run");
-    runBtn.onClick.forEach((html.MouseEvent mouse) {
-      running = !running;
-      if(running) runBtn.innerHtml = "Stop";
-      if(!running) runBtn.innerHtml = "Start";
-    });
   }
 
   void process(num now) {
@@ -56,7 +50,7 @@ class App {
 
   void update() {
 //    print("updating");
-    if (running) grid.update();
+    if (running == true) grid.update();
   }