Removed breadcrumb service and did some styling

src/app/store/breadcrumb.service.ts

@@ -1,22 +0,0 @@
-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

@@ -12,16 +12,17 @@
 
             <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>
+                    <li class="breadcrumb-item curs-pointer" [ngClass]="{active: !category}" [routerLink]="['/store']">Store</li>
+                    <li class="breadcrumb-item curs-pointer active">{{category}}</li>
                 </ol>
             </nav>
+
             <ng-container *ngFor="let c of categories | async">
                 <mat-card class="m-3">
-                    <div (click)="navigate(c.name)">
+                    <div [routerLink]="['/store', c.name]">
                         <img *ngIf="c.image" mat-card-image [src]="c.image" [alt]="c.name" style="width: 200px; height: 200px;">
                         <mat-divider *ngIf="c.image" class="custom-line"></mat-divider>
-                        <mat-card-content>
+                        <mat-card-content class="text-center">
                             <h5>{{c.name}}</h5>
                         </mat-card-content>
                     </div>

src/app/store/categories.component.ts

@@ -3,7 +3,6 @@ import {AngularFirestore} from 'angularfire2/firestore';
 import {AngularFireStorage} from 'angularfire2/storage';
 import {map} from 'rxjs/operators';
 import {ActivatedRoute, Router} from '../../../node_modules/@angular/router';
-import {BreadcrumbService} from './breadcrumb.service';
 import {MatDialog} from '../../../node_modules/@angular/material';
 import {NewCategoryComponent} from './newCategory/newCategory.component';
 import {AppComponent} from '../app.component';
@@ -24,17 +23,13 @@ export class CategoriesComponent {
     private route: ActivatedRoute,
     private dialog: MatDialog,
     private domSanitizer: DomSanitizer,
-    public app: AppComponent,
-    public breadcrumb: BreadcrumbService
+    public app: AppComponent
   ) {}
 
   ngOnInit() {
     this.route.params.subscribe(params => {
       this.category = params['category'];
 
-      if (!this.category) this.breadcrumb.clear();
-      if (this.category && this.breadcrumb.breadcrumb.length == 0) this.breadcrumb.add(this.category);
-
       this.categories = this.db
         .collection('categories', ref => ref.orderBy('name'))
         .snapshotChanges()
@@ -54,11 +49,6 @@ export class CategoriesComponent {
     });
   }
 
-  navigate(category: string) {
-    this.breadcrumb.add(category);
-    this.router.navigate(['/store', category]);
-  }
-
   create(category) {
     this.dialog.open(NewCategoryComponent, {data: {category: category, currentCategory: this.category}});
   }