Split App Header into Component

lib/app_component.dart

@@ -1,5 +1,6 @@
 import 'package:angular/angular.dart';
 import 'package:angular_components/angular_components.dart';
+import 'package:rules_of_living/components/header_component.dart';
 
 import 'dart:html' as html;
 import 'package:rules_of_living/src/Engine.dart';
@@ -7,7 +8,8 @@ import 'package:rules_of_living/src/Engine.dart';
 @Component(
     selector: 'my-app',
     templateUrl: "app_component.html",
-    directives: [coreDirectives, materialDirectives],
+    directives: [coreDirectives, MaterialButtonComponent, MaterialIconComponent, MaterialSliderComponent, HeaderComponent],
+    providers: [materialProviders],
     styleUrls: const ['package:angular_components/app_layout/layout.scss.css'],
 )
 class AppComponent implements OnInit {

lib/app_component.html

@@ -1,15 +1,4 @@
-<header class="material-header">
-    <div class="material-header-row">
-        <material-button icon class="material-drawer-button">
-            <material-icon icon="menu"></material-icon>
-        </material-button>
-        <span class="material-header-title">Cellular Automata</span>
-        <div class="material-spacer"></div>
-        <nav class="material-navigation">
-            <a>Link 1</a>
-        </nav>
-    </div>
-</header>
+<app_header></app_header>
 <div id="rules-input">
     Ruleset: <input type="text" title="ruleset" content="S23/B3">
     <i class="fas fa-paint-brush"></i>
@@ -28,6 +17,6 @@
     <button id="random" (click)="onRandomClicked()"><i class="fas fa-random"></i></button>
     <button id="reset" (click)="onResetClicked()"><i class="fas fa-undo"></i></button>
     <button id="clear" (click)="onClearClicked()"><i class="fas fa-trash-alt"></i></button>
-    <i class="fas fa-clock"> Speed:</i><input type="text" title="speed" value="1">
+    <i class="fas fa-clock"> Speed:</i><material-slider [max]="10" [min]="1" [value]="1"></material-slider>
     <button id="edges" (click)="onEdgesClicked()"><i class="fas fa-chess-board"></i> </button>
 </div>

lib/components/header_component.dart

@@ -0,0 +1,13 @@
+import 'package:angular/angular.dart';
+import 'package:angular_components/angular_components.dart';
+
+@Component(
+  selector: 'app_header',
+  templateUrl: "header_component.html",
+  directives: [coreDirectives, MaterialButtonComponent, MaterialIconComponent, MaterialSliderComponent],
+  providers: [],
+  styleUrls: const ['package:angular_components/app_layout/layout.scss.css'],
+)
+class HeaderComponent {
+
+}

lib/components/header_component.html

@@ -0,0 +1,12 @@
+<header class="material-header">
+    <div class="material-header-row">
+        <material-button icon class="material-drawer-button">
+            <material-icon icon="menu"></material-icon>
+        </material-button>
+        <span class="material-header-title">Cellular Automata</span>
+        <div class="material-spacer"></div>
+        <nav class="material-navigation">
+            <a>Link 1</a>
+        </nav>
+    </div>
+</header>