move match details to its own component

app/shared/components/match.component.html

@@ -0,0 +1,25 @@
+<table class="table table-bordered box">
+    <thead>
+        <tr>
+            <th>Team</th>
+            <th>Score</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td><span class="teamName">{{match.host}}</span></td>
+            <td><span class="teamScore"> {{match.hostScore}} </span></td>
+        </tr>
+        <tr>
+            <td><span class="teamName"> {{match.guest}} </span></td>
+            <td><span class="teamScore">{{match.guestScore}}</span></td>
+        </tr>
+        <tr>
+            <td colspan="2">
+                <button type="button" class="btn btn-default btn-lg btn-block">
+                            Subscribe to feed
+                        </button>
+            </td>
+        </tr>
+    </tbody>
+</table>

app/shared/components/match.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+import { Match } from '../interfaces';
+
+@Component({
+    selector: 'match',
+    templateUrl: 'app/shared/components/match.component.html'
+})
+export class MatchComponent implements OnInit {
+
+    @Input() match: Match;
+
+    constructor() { }
+
+    ngOnInit() { }
+}

app/shared/services/data.service.ts

@@ -6,7 +6,7 @@ import {Observer} from 'rxjs/Observer';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/catch';
 
-import { Match } from './interfaces';
+import { Match } from '../interfaces';
 import { ConfigService } from './config.service';
 
 @Injectable()

app/shared/services/feed.service.ts

@@ -5,7 +5,7 @@ import 'rxjs/add/operator/toPromise';
 import { Observable } from "rxjs/Observable";
 import { Subject } from "rxjs/Subject";
 
-import { FeedSignalR, FeedProxy, FeedClient, ConnectionState } from './interfaces';
+import { FeedSignalR, FeedProxy, FeedClient, ConnectionState } from '../interfaces';
 
 @Injectable()
 export class FeedService {