hide show subscribe buttons

app/shared/components/match.component.html

@@ -19,13 +19,16 @@
                 <span class="label label-success">{{match.Type}}</span>
             </td>
             <td>
-                <button type="button" class="btn btn-default btn-md" (click)="subscribe()">
+                <button type="button" class="btn btn-default btn-md" (click)="subscribe()" *ngIf="!subscribed">
                             Subscribe to feed
                         </button>
+                <button type="button" class="btn btn-danger btn-md" (click)="unsubscribe()" *ngIf="subscribed">
+                            Unubscribe
+                        </button>
             </td>
         </tr>
-        <tr>
+        <tr *ngIf="subscribed">
-            <td><button type="button" class="btn btn-default btn-xs">Send</button></td>
+            <td><button type="button" class="btn btn-default btn-md">Send</button></td>
             <td><input type="text" class="form-control" placeholder="Type message.." /></td>
         </tr>
         <tr>

app/shared/components/match.component.ts

@@ -10,6 +10,7 @@ import { FeedService } from '../services/feed.service';
 export class MatchComponent implements OnInit {
 
     @Input() match: Match;
+    subscribed: boolean;
 
     constructor(private feedService: FeedService) { }
 
@@ -17,6 +18,12 @@ export class MatchComponent implements OnInit {
 
     subscribe() {
         console.log(this.match.Id);
+        this.subscribed = true;
         this.feedService.subscribeToFeed(this.match.Id);
     }
+
+    unsubscribe() {
+        this.subscribed = false;
+        this.feedService.unsubscribeToFeed(this.match.Id);
+    }
 }

app/shared/interfaces.ts

@@ -11,14 +11,15 @@ export interface FeedProxy {
 export interface FeedClient {
     userConnected: (user: any) => void;
     userDisconnected: (id: string) => void;
-    
+
     updateMatch: (match: Match) => void;
     addFeed: (feed: Feed) => void;
     messageReceived: (message: string) => void;
 }
 
 export interface FeedServer {
-    subscribe(matchId: number) : void;
+    subscribe(matchId: number): void;
+    unsubscribe(matchId: number): void;
 }
 
 export enum ConnectionState {

app/shared/services/feed.service.ts

@@ -121,4 +121,8 @@ export class FeedService {
     public subscribeToFeed(matchId: number) {
         this.server.subscribe(matchId);
     }
+
+    public unsubscribeToFeed(matchId: number) {
+        this.server.unsubscribe(matchId);
+    }
 }