Added cart

src/app/app.component.html

@@ -29,7 +29,7 @@
                         <span class="text-muted mr-3">{{user.email}}</span>
                         <button mat-stroked-button color="accent" (click)="afAuth.auth.signOut()">Logout</button>
                     </div>
-                    <mat-icon *ngIf="cart.length" class="ml-3" style="transform: translateY(6px)" [matBadge]="cartItemCount()" matBadgeColor="warn">shopping_cart</mat-icon>
+                    <mat-icon *ngIf="cart.length" class="ml-3" style="transform: translateY(6px)" [matBadge]="cartItemCount()" matBadgeColor="warn" [routerLink]="['/cart']">shopping_cart</mat-icon>
                 </div>
             </div>
         </div>

src/app/app.module.ts

@@ -23,11 +23,13 @@ import {NewCategoryComponent} from './store/newCategory/newCategory.component';
 import {NewProductComponent} from './store/newProduct/newProduct.component';
 import {DeleteComponent} from './delete/delete.component';
 import {ProductsComponent} from './store/products/products.component';
+import {CartComponent} from './store/cart/cart.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     CategoriesComponent,
+    CartComponent,
     ConvertFromGPipe,
     ConvertToGPipe,
     DeleteComponent,
@@ -53,6 +55,7 @@ import {ProductsComponent} from './store/products/products.component';
     ReactiveFormsModule,
     RouterModule.forRoot([
       {path: 'about', component: AboutComponent},
+      {path: 'cart', component: CartComponent},
       {path: 'formulaManager', component: FormulaManagerComponent},
       {path: 'products/:product', component: ProductsComponent},
       {path: 'store/:category', component: CategoriesComponent},

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

@@ -0,0 +1,36 @@
+<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>
+                      </table>
+        </mat-card>
+        <mat-card class="col-4">
+            Test
+        </mat-card>
+    </div>
+</div>

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

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {LocalStorage} from 'webstorage-decorators';
+
+@Component({
+    selector: 'cart',
+    templateUrl: 'cart.component.html'
+})
+export class CartComponent {
+    @LocalStorage({defaultValue: []}) cart: {id: string, name: string, cost: number, quantity: number}[]; 
+
+    constructor() {
+
+    }
+}