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() { }
+}