Added a store page

src/app/app.module.ts

@@ -15,21 +15,34 @@ import {ServiceWorkerModule} from '@angular/service-worker';
 import {FormulaManagerComponent} from './formulaManager/formulaManager.component';
 import {NgxElectronModule} from 'ngx-electron';
 import {AboutComponent} from './about/about.component';
+import {CategoriesComponent} from './store/categories.component';
+import {AngularFireStorageModule} from 'angularfire2/storage';
 
 @NgModule({
-  declarations: [AppComponent, ConvertFromGPipe, ConvertToGPipe, FormulaManagerComponent, HomeComponent, ScalePipe, AboutComponent],
+  declarations: [
+    AppComponent,
+    CategoriesComponent,
+    ConvertFromGPipe,
+    ConvertToGPipe,
+    FormulaManagerComponent,
+    HomeComponent,
+    ScalePipe,
+    AboutComponent
+  ],
   imports: [
     AngularMaterialModule,
     AngularFireModule.initializeApp(environment.firebase),
     AngularFirestoreModule,
+    AngularFireStorageModule,
     BrowserAnimationsModule,
     BrowserModule,
     FormsModule,
     NgxElectronModule,
     ReactiveFormsModule,
     RouterModule.forRoot([
-      {path: 'formulaManager', component: FormulaManagerComponent},
       {path: 'about', component: AboutComponent},
+      {path: 'formulaManager', component: FormulaManagerComponent},
+      {path: 'store', component: CategoriesComponent},
       {path: '**', component: HomeComponent}
     ]),
     ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})

src/app/store/categories.component.html

@@ -0,0 +1,11 @@
+<div class="container">
+    <div class="row py-5">
+        <mat-card *ngFor="let c of categories | async">
+            <img mat-card-image [src]="c.image | async" [alt]="c.name">
+            <mat-divider class="custom-line"></mat-divider>
+            <mat-card-content>
+                <h3>{{c.name}}</h3>
+            </mat-card-content>
+        </mat-card>
+    </div>
+</div>

src/app/store/categories.component.ts

@@ -0,0 +1,26 @@
+import {Component} from '@angular/core';
+import {AngularFirestore} from 'angularfire2/firestore';
+import {AngularFireStorage} from 'angularfire2/storage';
+import {map} from 'rxjs/operators';
+
+@Component({
+  selector: 'store',
+  templateUrl: 'categories.component.html'
+})
+export class CategoriesComponent {
+  categories;
+
+  constructor(private db: AngularFirestore, private storage: AngularFireStorage) {
+    this.categories = this.db
+      .collection('categories')
+      .valueChanges()
+      .pipe(
+        map(rows =>
+          rows.map((row: any) => {
+            row.image = this.storage.ref(`${row.name.toLowerCase()}.jpg`).getDownloadURL();
+            return row;
+          })
+        )
+      );
+  }
+}