expanded observable cancellation sample

components/http/http.html

@@ -1,12 +1,18 @@
 <h1>Making Http Requests</h1>
 
 <div class="alert alert-success" role="alert">
-    <button (click)="triggerSlowRequest()">Make Slow Request</button>
-    <button *ngIf="pendingRequest" (click)="cancelRequest()">Cancel Request</button>
-</div>
-<div>
-    {{pendingRequestResult}}
+    Click a country to display that country's capitol. Observables in flight will be cancelled prior to loading new data.
 </div>
+
+<table class="table">
+    <tr [ngClass]="{active: isActive('usa')}" (click)="getCapitol('usa')"><td>USA</td></tr>
+    <tr [ngClass]="{active: isActive('denmark')}" (click)="getCapitol('denmark')"><td>Denmark</td></tr>
+    <tr [ngClass]="{active: isActive('germany')}" (click)="getCapitol('germany')"><td>Germany</td></tr>
+    <tr [ngClass]="{active: isActive('argentina')}" (click)="getCapitol('argentina')"><td>Argentina</td></tr>
+</table>
+
+<div style="margin-left: 10px;">The capitol is <strong>{{capitol}}</strong></div>
+
 <br/>
 
 <div class="alert alert-success" role="alert">

components/http/http.js

@@ -20,17 +20,19 @@ var HttpSample = (function () {
         this.loadFriendsAndCustomers();
         this.loadFriendsAsPromise();
     }
-    HttpSample.prototype.triggerSlowRequest = function () {
+    HttpSample.prototype.getCapitol = function (country) {
         var _this = this;
-        this.pendingRequestResult = 'Slow Request Started';
-        this.pendingRequest = this.http.get('./customer.json')
+        if (this.pendingRequest) {
+            this.pendingRequest.unsubscribe();
+            console.log('cancelled observable');
+        }
+        this.activeCountry = country;
+        this.pendingRequest = this.http.get('./country-info/' + country + '.json')
             .map(function (res) { return res.json(); })
-            .delay(5000)
-            .subscribe(function (res) { return _this.pendingRequestResult = 'Slow Request Completed'; });
+            .subscribe(function (res) { return _this.capitol = res.capitol; });
     };
-    HttpSample.prototype.cancelRequest = function () {
-        this.pendingRequest.unsubscribe();
-        this.pendingRequestResult = 'Request Canceled';
+    HttpSample.prototype.isActive = function (country) {
+        return this.activeCountry === country;
     };
     HttpSample.prototype.loadFriendsAsPromise = function () {
         var _this = this;

components/http/http.ts

@@ -17,7 +17,8 @@ export class HttpSample {
     postResponse = new Person();
     friendsAsPromise: any;
     pendingRequest: any;
-    pendingRequestResult: any;
+    capitol: any;
+    activeCountry: string;
 
     constructor(http: Http) {
 
@@ -30,17 +31,22 @@ export class HttpSample {
 
     }
 
-    triggerSlowRequest(){
-        this.pendingRequestResult = 'Slow Request Started';
-        this.pendingRequest = this.http.get('./customer.json')
+    getCapitol(country){
+
+        if(this.pendingRequest){
+            this.pendingRequest.unsubscribe();
+            console.log('cancelled observable');
+        }
+
+        this.activeCountry = country;
+
+        this.pendingRequest = this.http.get('./country-info/' + country + '.json')
                               .map((res: Response) => res.json())
-                              .delay(5000)
-                              .subscribe(res => this.pendingRequestResult = 'Slow Request Completed');
+                              .subscribe(res => this.capitol = res.capitol);
     }
 
-    cancelRequest(){
-        this.pendingRequest.unsubscribe();
-        this.pendingRequestResult = 'Request Canceled';
+    isActive(country){
+        return this.activeCountry === country;
     }
 
     loadFriendsAsPromise(){

country-info/argentina.json

@@ -0,0 +1,3 @@
+{
+  "capitol":"Buenos Aires"
+}

country-info/denmark.json

@@ -0,0 +1,3 @@
+{
+  "capitol":"Copenhagen"
+}

country-info/germany.json

@@ -0,0 +1,3 @@
+{
+  "capitol":"Berlin"
+}

country-info/usa.json

@@ -0,0 +1,3 @@
+{
+  "capitol":"Washington DC"
+}