Styled cart page

src/app/store/cart/cart.component.html

@@ -1,36 +1,37 @@
 <div class="container">
-    <div class="row">
-        <mat-card class="col-8">
-                <table mat-table [dataSource]="cart" class="mat-elevation-z8">
-                        <ng-container matColumnDef="position">
-                          <th mat-header-cell *matHeaderCellDef> No. </th>
-                          <td mat-cell *matCellDef="let i = index"> {{i}} </td>
-                        </ng-container>
-                      
-                        <!-- Name Column -->
-                        <ng-container matColumnDef="name">
-                          <th mat-header-cell *matHeaderCellDef> Name </th>
-                          <td mat-cell *matCellDef="let element"> {{element.name}} </td>
-                        </ng-container>
-                      
-                        <!-- Weight Column -->
-                        <ng-container matColumnDef="weight">
-                          <th mat-header-cell *matHeaderCellDef> Weight </th>
-                          <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
-                        </ng-container>
-                      
-                        <!-- Symbol Column -->
-                        <ng-container matColumnDef="symbol">
-                          <th mat-header-cell *matHeaderCellDef> Symbol </th>
-                          <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
-                        </ng-container>
-                      
-                        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  <mat-card class="w-100 my-5" style="overflow: hidden">
+    <table class="table">
+      <thead>
+        <tr>
+          <th>No.</th>
+          <th>Item</th>
+          <th>Quantity</th>
+          <th>Cost</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let item of cart; let i = index">
+          <td>{{i + 1}}</td>
+          <td>{{item.item}}</td>
+          <td>{{item.quantity}}</td>
+          <td>{{item.price | currency}}</td>
+          <td>
+            <mat-icon class="curs-pointer" (click)="remove(i)">delete</mat-icon>
+          </td>
+        </tr>
+      </tbody>
     </table>
-        </mat-card>
-        <mat-card class="col-4">
-            Test
+    <div class="float-right">
+      <table>
+        <tr>
+          <td>
+            <strong>Sub Total:</strong>
+          </td>
+          <td class="pl-3">{{total() | currency}}</td>
+        </tr>
+      </table>
+      <button mat-raised-button class="float-right mt-3" color="primary">Checkout</button>
+    </div>
   </mat-card>
 </div>
-</div>

src/app/store/cart/cart.component.ts

@@ -1,14 +1,30 @@
 import {Component} from '@angular/core';
 import {LocalStorage} from 'webstorage-decorators';
+import {access} from 'fs';
 
 @Component({
   selector: 'cart',
   templateUrl: 'cart.component.html'
 })
 export class CartComponent {
-    @LocalStorage({defaultValue: []}) cart: {id: string, name: string, cost: number, quantity: number}[]; 
+  @LocalStorage({defaultValue: []})
+  cart: {id: string; item: string; price: number; quantity: number}[];
 
-    constructor() {
+  address1: string;
+  address2: string;
+  city: string;
+  province: string;
+  postal: string;
 
+  constructor() {}
+
+  remove(i: number) {
+    let c = this.cart;
+    c.splice(i, 1);
+    this.cart = c;
+  }
+
+  total() {
+    return this.cart.reduce((acc, row) => acc + row.price * row.quantity, 0);
   }
 }