added search input fields

src/app/app.component.css

@@ -4,14 +4,35 @@ header{
     font-size: 15pt;
     color:white;
     font-weight: bold;
-    text-align: center;
+
 }
 
 header p{
-    padding-top: 10px;
+    margin-top: 12px;
+    padding-right: 10px;
+    display:block;
+    float:right;
+}
+
+.searchField{
+    display:block;
+    float:left;
+    margin-top: 10px;
+}
+
+.searchField input{
+    margin-left: 25px;
+    border: 1px solid white;
+    border-radius: 3px;
+    background-color: rgb(253, 253, 253);
+    height: 20px;
+    font-size: 13pt;
+    font-weight: bold;
+    font-family: 'Roboto';
+    padding: 5px;
 }
 
 #map{
     width: 100%;
     height: 1000px;
-}
+}

src/app/app.component.html

@@ -1,4 +1,9 @@
 <header>
+  <div class="searchField">
+    <input #inputFrom (keyup)="getValue(inputFrom.value, inputTo.value)" type="text" name="inputFrom" id="inputFrom" placeholder="From">
+    <input #inputTo (keyup)="getValue(inputFrom.value, inputTo.value)"type="text" name="inputTo" id="inputTo" placeholder="To">
+  </div>
   <p>{{title}}</p>
 </header>
+
 <div id="map" class="map"></div>

src/app/app.component.ts

@@ -6,9 +6,6 @@ import View from 'ol/View';
 import TileLayer from 'ol/layer/Tile';
 import XYZ from 'ol/source/XYZ';
 import ZoomToExtent from 'ol/control/ZoomToExtent';
-import Feature from 'ol/Feature';
-import Polygon from 'ol/geom/Polygon';
-import Point from 'ol/geom/Point';
 
 
 @Component({
@@ -21,8 +18,11 @@ export class AppComponent implements AfterViewInit {
   title = "Street Map";
   map: Map;
 
-  ngAfterViewInit() {
+  getValue(valueFrom:string, valueTo:string){
+    console.log("From " + valueFrom + " to " + valueTo);
+  }
 
+  ngAfterViewInit() {
     this.map = new Map({
       target: 'map',
       layers: [