Added store breadcrumb

src/app/store/breadcrumb.service.ts

@@ -0,0 +1,22 @@
+import {Injectable} from '@angular/core';
+import {Router} from '../../../node_modules/@angular/router';
+
+@Injectable()
+export class BreadcrumbService {
+  breadcrumb: string[] = [];
+
+  constructor(private router: Router) {}
+
+  add(crumb: string) {
+    this.breadcrumb.push(crumb);
+  }
+
+  clear() {
+    this.breadcrumb = [];
+  }
+
+  navigate(i: number) {
+    this.breadcrumb.splice(i + 1, 9e9);
+    this.router.navigate(['/store', this.breadcrumb[i]]);
+  }
+}

src/app/store/categories.component.html

@@ -1,8 +1,14 @@
 <div class="container-fluid" style="background-color: #53709f;">
     <div class="container">
         <div class="row py-5">
+            <nav class="w-100 mx-3" aria-label="breadcrumb">
+                <ol class="breadcrumb">
+                    <li class="breadcrumb-item curs-pointer" [routerLink]="['/store']" (click)="breadcrumb.clear()">Store</li>
+                    <li *ngFor="let crumb of breadcrumb.breadcrumb; let i = index" class="breadcrumb-item curs-pointer" (click)="breadcrumb.navigate(i)">{{crumb}}</li>
+                </ol>
+            </nav>
             <ng-container *ngFor="let c of categories | async">
-                <mat-card class="m-3" [routerLink]="['/store', c.name]">
+                <mat-card class="m-3" (click)="navigate(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>

src/app/store/categories.component.ts

@@ -2,7 +2,8 @@ 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';
+import {ActivatedRoute, Router} from '../../../node_modules/@angular/router';
+import {BreadcrumbService} from './breadcrumb.service';
 
 @Component({
   selector: 'store',
@@ -12,24 +13,39 @@ export class CategoriesComponent {
   category: string;
   categories;
 
-  constructor(private db: AngularFirestore, private storage: AngularFireStorage, private route: ActivatedRoute) {}
+  constructor(
+    private db: AngularFirestore,
+    private storage: AngularFireStorage,
+    private router: Router,
+    private route: ActivatedRoute,
+    private breadcrumb: BreadcrumbService
+  ) {}
 
   ngOnInit() {
     this.route.params.subscribe(params => {
       this.category = params['category'];
-    });
 
-    this.categories = this.db
-      .collection('categories')
-      .valueChanges()
-      .pipe(
-        map(rows =>
-          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;
-          })
-        )
-      );
+      if (!this.category) this.breadcrumb.clear();
+
+      this.categories = this.db
+        .collection('categories')
+        .valueChanges()
+        .pipe(
+          map(rows =>
+            rows
+              .filter((row: any) => (!this.category && !row.parent) || (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;
+              })
+          )
+        );
+    });
+  }
+
+  navigate(category: string) {
+    this.breadcrumb.add(category);
+    this.router.navigate(['/store', category]);
   }
 }