Added sub categories

src/app/app.module.ts

@@ -42,6 +42,7 @@ import {AngularFireStorageModule} from 'angularfire2/storage';
     RouterModule.forRoot([
       {path: 'about', component: AboutComponent},
       {path: 'formulaManager', component: FormulaManagerComponent},
+      {path: 'store/:category', component: CategoriesComponent},
       {path: 'store', component: CategoriesComponent},
       {path: '**', component: HomeComponent}
     ]),

src/app/store/categories.component.html

@@ -2,8 +2,8 @@
     <div class="container">
         <div class="row py-5">
             <ng-container *ngFor="let c of categories | async">
-                <mat-card *ngIf="c.ready" class="m-3">
-                    <img mat-card-image [src]="c.image | async" [alt]="c.name" style="width: 200px; height: 200px;">
+                <mat-card class="m-3" [routerLink]="['/store', c.name]">
+                    <img *ngIf="c.ready" mat-card-image [src]="c.image | async" [alt]="c.name" style="width: 200px; height: 200px;">
                     <mat-divider class="custom-line"></mat-divider>
                     <mat-card-content>
                         <h5>{{c.name}}</h5>

src/app/store/categories.component.ts

@@ -2,21 +2,29 @@ import {Component} from '@angular/core';
 import {AngularFirestore} from 'angularfire2/firestore';
 import {AngularFireStorage} from 'angularfire2/storage';
 import {map} from 'rxjs/operators';
+import {ActivatedRoute} from '../../../node_modules/@angular/router';
 
 @Component({
   selector: 'store',
   templateUrl: 'categories.component.html'
 })
 export class CategoriesComponent {
+  category: string;
   categories;
 
-  constructor(private db: AngularFirestore, private storage: AngularFireStorage) {
+  constructor(private db: AngularFirestore, private storage: AngularFireStorage, private route: ActivatedRoute) {}
+
+  ngOnInit() {
+    this.route.params.subscribe(params => {
+      this.category = params['category'];
+    });
+
     this.categories = this.db
       .collection('categories')
       .valueChanges()
       .pipe(
         map(rows =>
-          rows.map((row: any) => {
+          rows.filter((row: any) => !this.category || row.parent == this.category).map((row: any) => {
             row.image = this.storage.ref(`${row.name.toLowerCase()}.jpg`).getDownloadURL();
             row.image.subscribe(() => (row.ready = true));
             return row;