Added product page (Fixes #4)

src/app/store/categories/categories.component.ts

@@ -1,14 +1,13 @@
 import {Component} from '@angular/core';
 import {AngularFirestore} from 'angularfire2/firestore';
-import {AngularFireStorage} from 'angularfire2/storage';
 import {map} from 'rxjs/operators';
 import {ActivatedRoute, Router} from '@angular/router';
 import {MatDialog} from '@angular/material';
-import {NewCategoryComponent} from './newCategory/newCategory.component';
-import {AppComponent} from '../app.component';
+import {NewCategoryComponent} from '../newCategory/newCategory.component';
+import {AppComponent} from '../../app.component';
 import {DomSanitizer} from '@angular/platform-browser';
-import {NewProductComponent} from './newProduct/newProduct.component';
-import {DeleteComponent} from './delete/delete.component';
+import {NewProductComponent} from '../newProduct/newProduct.component';
+import {DeleteComponent} from '../delete/delete.component';
 
 @Component({
   selector: 'store',

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);
+        });
+    });
+  }
+}