Responding to connectivity changes

src/app/model/connection.service.ts

@@ -0,0 +1,29 @@
+import { Injectable } from "@angular/core";
+import { Observable, Subject } from "rxjs";
+
+@Injectable()
+export class ConnectionService {
+
+    private connEvents: Subject<boolean>;
+
+    constructor() {
+        this.connEvents = new Subject<boolean>();
+        window.addEventListener("online",
+            (e) => this.handleConnectionChange(e));
+        window.addEventListener("offline",
+            (e) => this.handleConnectionChange(e));
+    }
+
+    private handleConnectionChange(event:any) {
+        this.connEvents.next(this.connected);
+    }
+
+    get connected(): boolean {
+        return window.navigator.onLine;
+    }
+
+    get Changes(): Observable<boolean> {
+        return this.connEvents;
+    }
+
+}

src/app/model/model.module.ts

@@ -7,11 +7,12 @@ import { OrderRepository } from "./order.repository";
 import { RestDataSource } from "./rest.datasource";
 import { HttpClientModule } from "@angular/common/http";
 import { AuthService } from "./auth.service";
+import { ConnectionService } from "./connection.service";
 
 @NgModule({
     imports: [HttpClientModule],
     providers: [ProductRepository, Cart, Order, OrderRepository, 
-        { provide: StaticDataSource, useClass: RestDataSource }, RestDataSource, AuthService]
+        { provide: StaticDataSource, useClass: RestDataSource }, RestDataSource, AuthService, ConnectionService]
 })
 
 export class ModelModule {}

src/app/store/cartDetail.component.html

@@ -61,8 +61,8 @@ <h2 class="text-center">Your Cart</h2>
                 <button class="btn btn-primary m-1" routerLink="/store">
                     Continue Shopping
                 </button>
-                <button class="btn btn-secondary m-1" routerLink="/checkout" [disabled]="cart.lines.length == 0">
-                    Checkout
+                <button class="btn btn-secondary m-1" routerLink="/checkout" [disabled]="cart.lines.length == 0 && connected">
+                    {{ connected ? 'Checkout' : 'Offline' }}
                 </button>
             </div>
         </div>

src/app/store/cartDetail.component.ts

@@ -1,12 +1,18 @@
 import { Component } from "@angular/core";
 import { Cart } from "../model/cart.model";
+import { ConnectionService } from "../model/connection.service";
 
 @Component({
     templateUrl: "cartDetail.component.html"
 })
 
 export class CartDetailComponent {
 
-    constructor(public cart: Cart) {}
+    public connected: boolean = true;
+
+    constructor(public cart: Cart, private connection: ConnectionService) {
+        this.connected = this.connection.connected;
+        connection.Changes.subscribe((state) => this.connected = state);
+    }
 
 }