I’m trying to add the bootstrap 5 breadcrumbs in angular project each page but I tried it’s working while put the in app.component.html but it’s showing bottom of the page but i want to showcase the breadcrumbs beside my page title
for example I am in available trades page I want to showcase my breadcrumbs like Home / available trades I need like that apart from that I have added in my particular page then it’s coming only Home not getting respective page name after the home link where I did wrong please help anybody I am very new to angular
breadcrumbs.component.ts:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { filter, map, mergeMap } from 'rxjs/operators';
interface Breadcrumb {
label: string;
url: string;
}
@Component({
selector: 'app-breadcrumbs',
templateUrl: './breadcrumbs.component.html',
styleUrls: ['./breadcrumbs.component.css']
})
export class BreadcrumbsComponent implements OnInit {
breadcrumbs: Breadcrumb[] = [];
constructor(private router: Router, private activatedRoute: ActivatedRoute) {}
ngOnInit(): void {
this.router.events.pipe(
filter(event => event instanceof NavigationEnd),
map(() => this.activatedRoute),
map(route => {
while (route.firstChild) route = route.firstChild;
return route;
}),
filter(route => route.outlet === 'primary'),
mergeMap(route => route.data)
).subscribe((event) => {
const breadcrumbs: Breadcrumb[] = [];
let currentRoute = this.activatedRoute.root;
let url = '';
while (currentRoute.children.length > 0) {
const childRoute = currentRoute.children[0];
const routeURL: string = childRoute.snapshot.url.map(segment => segment.path).join('/');
if (routeURL !== '') {
url += `/${routeURL}`;
}
const label = childRoute.snapshot.data['breadcrumb'];
if (label) {
breadcrumbs.push({ label, url });
}
currentRoute = childRoute;
}
this.breadcrumbs = breadcrumbs;
console.log('Breadcrumbs:', this.breadcrumbs); // Debug log
});
}
}/* Example styles */
.breadcrumb {
background-color: transparent;
}
.breadcrumb-item a {
color: #007bff;
text-decoration: none;
}
.breadcrumb-item a:hover {
text-decoration: underline;
}
breadcrumbs.component.html
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a routerLink="/dashboard">Home</a>
</li>
<ng-container *ngFor="let breadcrumb of breadcrumbs; let last = last">
<li class="breadcrumb-item" *ngIf="!last">
<a [routerLink]="breadcrumb.url">{{ breadcrumb.label }}</a>
</li>
<li class="breadcrumb-item active" aria-current="page" *ngIf="last">
{{ breadcrumb.label }}
</li>
</ng-container>
</ol>
</nav>