Adding Breadcrumbs

client/package-lock.json

@@ -22,6 +22,7 @@
         "ngx-toastr": "^14.3.0",
         "rxjs": "~7.5.0",
         "tslib": "^2.3.0",
+        "xng-breadcrumb": "^7.2.0",
         "zone.js": "~0.11.4"
       },
       "devDependencies": {
@@ -11661,6 +11662,21 @@
         }
       }
     },
+    "node_modules/xng-breadcrumb": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/xng-breadcrumb/-/xng-breadcrumb-7.2.0.tgz",
+      "integrity": "sha512-dgqAVjrAyD0fDRxcUbVSHWs1SCriWSCqIGfpaW+MAh87LbkBbQRFIyAqNjV534C6CeZxqE+9L357OVmVAw0I5w==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=13.0.0",
+        "@angular/core": ">=13.0.0",
+        "@angular/platform-browser-dynamic": ">=13.0.0",
+        "@angular/router": ">=13.0.0",
+        "rxjs": ">=6.0.0"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -20228,6 +20244,14 @@
       "dev": true,
       "requires": {}
     },
+    "xng-breadcrumb": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/xng-breadcrumb/-/xng-breadcrumb-7.2.0.tgz",
+      "integrity": "sha512-dgqAVjrAyD0fDRxcUbVSHWs1SCriWSCqIGfpaW+MAh87LbkBbQRFIyAqNjV534C6CeZxqE+9L357OVmVAw0I5w==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",

client/package.json

@@ -24,6 +24,7 @@
     "ngx-toastr": "^14.3.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
+    "xng-breadcrumb": "^7.2.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {

client/src/app/app-routing.module.ts

@@ -4,16 +4,14 @@ import { NotFoundComponent } from './core/not-found/not-found.component';
 import { ServerErrorComponent } from './core/server-error/server-error.component';
 import { TestErrorComponent } from './core/test-error/test-error.component';
 import { HomeComponent } from './home/home.component';
-import { ProductDetailsComponent } from './shop/product-details/product-details.component';
-import { ShopComponent } from './shop/shop.component';
 
 const routes: Routes = [
-  {path: '', component: HomeComponent},
-  {path: 'test-error', component: TestErrorComponent},
-  {path: 'server-error', component: ServerErrorComponent},
-  {path: 'not-found', component: NotFoundComponent},
-  {path: 'shop', loadChildren: ()=> import('./shop/shop.module').then(mod => mod.ShopModule)},
-  {path: '**', redirectTo: '', pathMatch: 'full'}
+  {path: '', component: HomeComponent, data: {breadcrumb: 'Home'}},
+  {path: 'test-error', component: TestErrorComponent, data: {breadcrumb: 'Test Errors'}},
+  {path: 'server-error', component: ServerErrorComponent, data: {breadcrumb: 'Server Error'}},
+  {path: 'not-found', component: NotFoundComponent, data: {breadcrumb: 'Not Found'}},
+  {path: 'shop', loadChildren: ()=> import('./shop/shop.module').then(mod => mod.ShopModule), data: {breadcrumb: 'Shop'}},
+  {path: '**', redirectTo: 'not-found', pathMatch: 'full'}
 ];
 
 

client/src/app/app.component.html

@@ -1,4 +1,5 @@
 <app-nav-bar></app-nav-bar>
-<div class="container" style="margin-top: 140px;">
+<app-section-header></app-section-header>
+<div class="container">
   <router-outlet></router-outlet>
 </div>

client/src/app/core/core.module.ts

@@ -6,19 +6,25 @@ import { TestErrorComponent } from './test-error/test-error.component';
 import { NotFoundComponent } from './not-found/not-found.component';
 import { ServerErrorComponent } from './server-error/server-error.component';
 import { ToastrModule } from 'ngx-toastr';
+import { SectionHeaderComponent } from './section-header/section-header.component';
+import { BreadcrumbModule } from 'xng-breadcrumb';
 
 
 
 @NgModule({
-  declarations: [NavBarComponent, TestErrorComponent, NotFoundComponent, ServerErrorComponent],
+  declarations: [NavBarComponent, TestErrorComponent, NotFoundComponent, ServerErrorComponent, SectionHeaderComponent],
   imports: [
     CommonModule,
     RouterModule,
+    BreadcrumbModule,
     ToastrModule.forRoot({
       positionClass: 'toast-bottom-right',
       preventDuplicates: true
     })
   ],
-  exports: [NavBarComponent]
+  exports: [
+    NavBarComponent,
+    SectionHeaderComponent
+  ]
 })
 export class CoreModule { }

client/src/app/core/section-header/section-header.component.html

@@ -0,0 +1,12 @@
+<section class="py-5" style="margin-top: 105px; background-color:#f5f5f5;">
+  <div class="container">
+    <div class="row d-flex align-item-center">
+      <div class="col-9">
+        <h1>Title Goes Here</h1>
+      </div>
+      <div class="col-3">
+          <xng-breadcrumb></xng-breadcrumb>
+      </div>
+    </div>
+  </div>
+</section>

client/src/app/core/section-header/section-header.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { BreadcrumbService } from 'xng-breadcrumb';
+
+@Component({
+  selector: 'app-section-header',
+  templateUrl: './section-header.component.html',
+  styleUrls: ['./section-header.component.scss']
+})
+export class SectionHeaderComponent implements OnInit {
+
+  constructor(private bcService: BreadcrumbService) { }
+
+  ngOnInit(): void {
+    //this.bcService.breadcrumbs$.
+  }
+
+}

client/src/app/shop/product-details/product-details.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { IProduct } from 'src/app/shared/models/product';
+import { BreadcrumbService } from 'xng-breadcrumb';
 import { ShopService } from '../shop.service';
 
 @Component({
@@ -11,7 +12,7 @@ import { ShopService } from '../shop.service';
 export class ProductDetailsComponent implements OnInit {
   product: IProduct;
 
-  constructor(private shopService: ShopService, private activatedRoute: ActivatedRoute) { }
+  constructor(private shopService: ShopService, private activatedRoute: ActivatedRoute, private bcService: BreadcrumbService) { }
 
   ngOnInit(): void {
     this.loadProduct();
@@ -20,7 +21,10 @@ export class ProductDetailsComponent implements OnInit {
   loadProduct(){
     this.shopService.getProduct(+this.activatedRoute.snapshot.paramMap.get('id')).subscribe(
       {
-        next: (product) => { this.product = product; },
+        next: (product) => {
+          this.product = product;
+          this.bcService.set('@productDetails', product.name)
+        },
         error: (e: any) => { console.log(e); },
         complete: () => { console.log('complete'); }
       }

client/src/app/shop/shop-routing.module.ts

@@ -1,12 +1,11 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { RouterModule, Routes } from '@angular/router';
 import { ShopComponent } from './shop.component';
 import { ProductDetailsComponent } from './product-details/product-details.component';
 
 const routes: Routes = [
   {path: '', component: ShopComponent},
-  {path: ':id', component: ProductDetailsComponent},
+  {path: ':id', component: ProductDetailsComponent, data: {breadcrumb: {alias: 'productDetails'}}},
 ]
 
 @NgModule({

client/src/app/shop/shop.component.html

@@ -1,5 +1,5 @@
 <div class="container">
-  <div class="row">
+  <div class="row mt-5">
     <section class="col-3">
       <h5 class="text-warning ml-3">Sort</h5>
       <select class="form-select mb-3" style="width: 100%;" (change)="onSortSelected($event.target.value)">

client/src/styles.scss

@@ -5,3 +5,18 @@
 
 /* Importing Datepicker SCSS file. */
 @import "node_modules/ngx-bootstrap/datepicker/bs-datepicker";
+
+.xng-breadcrumb-root {
+  padding: 8px 16px;
+  display: inline;
+  border-radius: 0;
+}
+
+label.xng-breadcrumb-trail {
+  margin-bottom: 0;
+  color: orange;
+}
+
+xng-breadcrumb-separator {
+  padding: 0 0;
+}