move match details to its own component

app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 
-import { FeedService } from './shared/feed.service';
+import { FeedService } from './shared/services/feed.service';
 import { ConnectionState } from './shared/interfaces';
 
 @Component({

app/app.module.ts

@@ -4,9 +4,10 @@ import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
-import { ConfigService } from './shared/config.service';
-import { DataService } from './shared/data.service';
+import { ConfigService } from './shared/services/config.service';
+import { DataService } from './shared/services/data.service';
 import { HomeComponent } from './home/home.component';
+import { MatchComponent } from './shared/components/match.component';
 import { routing } from './app.routes';
 
 @NgModule({
@@ -18,7 +19,8 @@ import { routing } from './app.routes';
     ],
     declarations: [
         AppComponent,
-        HomeComponent
+        HomeComponent,
+        MatchComponent
     ],
     bootstrap: [AppComponent],
     providers: [ 

app/home/home.component.html

@@ -1,29 +1,5 @@
 <div class="row">
     <div class="col-xs-6 col-md-4" *ngFor="let match of matches">
-        <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>
+        <match [match]="match"></match>
     </div>
 </div>

app/home/home.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 
-import { FeedService } from '../shared/feed.service';
+import { FeedService } from '../shared/services/feed.service';
 import { Match } from '../shared/interfaces';
-import { DataService } from '../shared/data.service';
+import { DataService } from '../shared/services/data.service';
 import { ConnectionState } from '../shared/interfaces';
 
 @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 {