Create the Cart component

src/app/model/cart.model.ts

@@ -0,0 +1,58 @@
+import { Injectable } from "@angular/core";
+import { Product } from "./product.model";
+
+@Injectable()
+export class Cart {
+
+    public lines: CartLine[] = [];
+    public itemCount: number = 0;
+    public cartPrice: number = 0;
+
+    addLine(product: Product, quantity: number) {
+        let line = this.lines.find(line => line.product.id == product.id);
+        if (line != undefined) {
+            line.quantity += quantity;
+        } else {
+            this.lines.push(new CartLine(product, quantity));
+        }
+        this.recalculate();
+    }
+
+    updateQuantity(product: Product, quantity: number) {
+        let line = this.lines.find(line => line.product.id == product.id);
+        if (line != undefined) {
+            line.quantity = quantity;
+        }
+        this.recalculate();
+    }
+
+    removeLine(id: number) {
+        let index = this.lines.findIndex(line => line.product.id == id);
+        this.lines.slice(index, 1);
+        this.recalculate();
+    }
+
+    clear() {
+        this.lines = [];
+        this.itemCount = 0;
+        this.cartPrice = 0;
+    }
+
+    private recalculate() {
+        this.itemCount = 0;
+        this.cartPrice = 0;
+        this.lines.forEach(line => {
+            this.itemCount += line.quantity;
+            this.cartPrice += (line.quantity * line.product.price)
+        })
+    }
+
+}
+
+export class CartLine {
+    constructor(public product: Product, public quantity: number) {}
+
+    get lineTotal() {
+        return this.quantity * this.product.price;
+    }
+}

src/app/model/model.module.ts

@@ -1,9 +1,10 @@
 import { NgModule } from "@angular/core";
 import { ProductRepository } from "./product.repository";
 import { StaticDataSource } from "./static.datasource";
+import { Cart } from "./cart.model";
 
 @NgModule({
-    providers: [ProductRepository, StaticDataSource]
+    providers: [ProductRepository, StaticDataSource, Cart]
 })
 
 export class ModelModule {}

src/app/store/cartSummary.component.html

@@ -0,0 +1,15 @@
+<div class="float-end">
+    <small>
+        Your cart:
+        <span *ngIf="cart.itemCount > 0">
+            {{ cart.itemCount }} item(s)
+            {{ cart.cartPrice | currency: "USD":"symbol":"2.2-2"}}
+        </span>
+        <span *ngIf="cart.itemCount == 0">
+            (empty)
+        </span>
+    </small>
+    <button class="btn btn-sm bg-dark text-white" [disabled]="cart.itemCount == 0">
+        <i class="fa fa-shopping-cart"></i>
+    </button>
+</div>

src/app/store/cartSummary.component.ts

@@ -0,0 +1,11 @@
+import { Component } from "@angular/core";
+import { Cart } from "../model/cart.model";
+
+@Component({
+    selector: "cart-summary",
+    templateUrl: "cartSummary.component.html"
+})
+
+export class CartSummaryComponent {
+    constructor(public cart: Cart) {}
+}

src/app/store/store.component.html

@@ -2,6 +2,7 @@
     <div class="row">
         <div class="col bg-dark text-white">
             <a class="navbar-brand">SPORTS STORE</a>
+            <cart-summary></cart-summary>
         </div>
     </div>
     <div class="row">
@@ -23,7 +24,12 @@ <h4>
                         {{ product.price | currency: "USD":"symbol":"2.2-2"}}
                     </span>
                 </h4>
-                <div class="card-text bg-white p-1">{{product.description}}</div>
+                <div class="card-text bg-white p-1">
+                    {{product.description}}
+                    <button class="btn btn-success btn-sm float-end" (click)="addProductToCart(product)">
+                        Add to cart
+                    </button>
+                </div>
             </div>
             <div class="form-inline float-start mr-1">
                 <select class="form-control" [value]="productsPerPage" (change)="changePageSize($event.target.value)">

src/app/store/store.component.ts

@@ -1,6 +1,7 @@
 import { Component } from "@angular/core";
 import { Product } from "../model/product.model";
 import { ProductRepository } from "../model/product.repository";
+import { Cart } from "../model/cart.model";
 
 @Component({
     selector: "store",
@@ -13,7 +14,7 @@ export class StoreComponent {
     public productsPerPage = 4;
     public selectedPage = 1;
 
-    constructor(private repository: ProductRepository) {}
+    constructor(private repository: ProductRepository, private cart: Cart) {}
 
     get products(): Product[] {
         let pageIndex = (this.selectedPage - 1) * this.productsPerPage;
@@ -41,4 +42,8 @@ export class StoreComponent {
         return Array(Math.ceil(this.repository.getProducts(this.selectedCategory).length / this.productsPerPage)).fill(0).map((x,i) => i+1);
     }
 
+    addProductToCart(product: Product) {
+        this.cart.addLine(product, 1);
+    }
+
 }

src/app/store/store.module.ts

@@ -3,11 +3,12 @@ import { BrowserModule } from "@angular/platform-browser";
 import { FormsModule } from "@angular/forms";
 import { ModelModule } from "../model/model.module";
 import { StoreComponent } from "./store.component";
+import { CartSummaryComponent } from "./cartSummary.component";
 
 @NgModule({
     imports: [ModelModule, BrowserModule, FormsModule],
-    declarations: [StoreComponent],
-    exports: [StoreComponent]
+    declarations: [StoreComponent, CartSummaryComponent],
+    exports: [StoreComponent, CartSummaryComponent]
 })
 
 export class StoreModule {}