Added product page (Fixes #4)

src/app/store/products/products.component.html

@@ -0,0 +1,13 @@
+<div *ngIf="product">
+    <div class="container">
+        <div class="row">
+            <div class="col-12 py-4">
+                <img [src]="product.image" class="float-left img-fluid mb-4 mr-4">
+                <h2 class="roboto">{{product.name}}</h2>
+                <h5 *ngIf="product.price" class="text-muted">{{product.price | currency}}</h5>
+                <h5 *ngIf="!product.price" class="text-muted">Contact For Price</h5>
+                <hr class="ml-4" /> {{product.description}}
+            </div>
+        </div>
+    </div>
+</div>

src/app/store/products/products.component.ts

@@ -0,0 +1,26 @@
+import {Component} from '@angular/core';
+import {AngularFirestore} from '../../../../node_modules/angularfire2/firestore';
+import {ActivatedRoute} from '../../../../node_modules/@angular/router';
+import {DomSanitizer} from '../../../../node_modules/@angular/platform-browser';
+
+@Component({
+  selector: 'products',
+  templateUrl: 'products.component.html'
+})
+export class ProductsComponent {
+  product;
+
+  constructor(private route: ActivatedRoute, private db: AngularFirestore, private domSanitizer: DomSanitizer) {}
+
+  ngOnInit() {
+    this.route.params.subscribe(params => {
+      this.db
+        .collection('products', ref => ref.where('name', '==', params['product']))
+        .valueChanges()
+        .subscribe(data => {
+          this.product = data[0];
+          this.product.image = this.domSanitizer.bypassSecurityTrustUrl(this.product.image);
+        });
+    });
+  }
+}