ng-dynamic-breadcrumb
Version:
Angular 14 Dynamic Breadcrumb
172 lines (165 loc) • 9.73 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, Input, NgModule } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import * as i1 from '@angular/router';
import { NavigationEnd, PRIMARY_OUTLET, RouterModule } from '@angular/router';
import { filter, map } from 'rxjs/operators';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
class NgDynamicBreadcrumbService {
constructor() {
this.breadcrumbLabels = new BehaviorSubject([]);
this.newBreadcrumb = new BehaviorSubject([]);
}
updateBreadcrumbLabels(labels) {
this.breadcrumbLabels.next(labels);
}
updateBreadcrumb(newBreadcrumb) {
this.newBreadcrumb.next(newBreadcrumb);
}
}
NgDynamicBreadcrumbService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.1", ngImport: i0, type: NgDynamicBreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
NgDynamicBreadcrumbService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.1", ngImport: i0, type: NgDynamicBreadcrumbService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.1", ngImport: i0, type: NgDynamicBreadcrumbService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return []; } });
class NgDynamicBreadcrumbComponent {
constructor(activatedRoute, router, ngDynamicBreadcrumbService) {
this.activatedRoute = activatedRoute;
this.router = router;
this.ngDynamicBreadcrumbService = ngDynamicBreadcrumbService;
this.breadcrumb = [];
this.bgColor = '#eee';
this.fontSize = '18px';
this.fontColor = '#0275d8';
this.lastLinkColor = '#000';
this.symbol = ' / ';
this.breadCrumbData();
}
ngOnInit() {
this.ngDynamicBreadcrumbService.breadcrumbLabels.subscribe((labelData) => {
for (const label in labelData) {
if (labelData.hasOwnProperty(label)) {
this.breadcrumb.map((crumb) => {
const labelParams = crumb.label.match(/[^{{]+(?=\}})/g);
if (labelParams) {
for (const labelParam of labelParams) {
const dynamicData = labelData[label];
if (labelParam === label) {
crumb.label = crumb.label.replace('{{' + labelParam + '}}', dynamicData);
}
}
}
});
}
}
});
this.ngDynamicBreadcrumbService.newBreadcrumb.subscribe((breadcrumb) => {
if (breadcrumb.length > 0) {
this.updateData(this.activatedRoute, breadcrumb);
}
});
}
breadCrumbData() {
this.router.events
.pipe(filter(event => event instanceof NavigationEnd))
.pipe(map(() => this.activatedRoute))
.pipe(map((route) => {
while (route.firstChild) {
route = route.firstChild;
}
return route;
}))
.pipe(filter(route => route.outlet === PRIMARY_OUTLET))
.subscribe(route => {
this.params = route.snapshot.params;
this.updateData(route, null);
});
}
updateData(route, newBreadcrumb) {
if (route.snapshot.data.breadcrumb || newBreadcrumb) {
const data = route.snapshot.data.breadcrumb ? route.snapshot.data.breadcrumb : newBreadcrumb;
const breadcrumb = (JSON.parse(JSON.stringify(data)));
breadcrumb.map((crumb) => {
const urlChunks = crumb.url.split('/');
for (const chunk of urlChunks) {
if (chunk.includes(':')) {
const paramID = chunk.replace(':', '');
// const routerParamID = route.snapshot.params[paramID];
const routerParamID = this.params[paramID];
crumb.url = crumb.url.replace(`:${paramID}`, routerParamID);
}
}
const labelParams = crumb.label.match(/[^{{]+(?=\}})/g);
if (labelParams) {
for (const labelParam of labelParams) {
// const routerParamID = route.snapshot.params[labelParam.trim()];
const routerParamID = this.params[labelParam.trim()];
if (routerParamID) {
crumb.label = crumb.label.replace('{{' + labelParam + '}}', routerParamID);
}
else {
// crumb.label = crumb.label.replace('{{' + labelParam + '}}', '');
}
}
}
});
this.breadcrumb = breadcrumb;
}
else {
this.breadcrumb = [];
}
}
}
NgDynamicBreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.1", ngImport: i0, type: NgDynamicBreadcrumbComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: NgDynamicBreadcrumbService }], target: i0.ɵɵFactoryTarget.Component });
NgDynamicBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.1", type: NgDynamicBreadcrumbComponent, selector: "app-ng-dynamic-breadcrumb", inputs: { bgColor: "bgColor", fontSize: "fontSize", fontColor: "fontColor", lastLinkColor: "lastLinkColor", symbol: "symbol" }, ngImport: i0, template: "<ul class=\"custom-bread-crumb\" [ngStyle]=\"{'background-color': bgColor}\">\r\n <span *ngFor=\"let item of breadcrumb; let i = index\">\r\n <li [ngStyle]=\"{'font-size': fontSize}\">\r\n <a *ngIf=\"item?.url\" [routerLink]=\"item?.url\" [queryParams]=\"item?.queryParams\" [ngStyle]=\"{'color': fontColor}\">{{ item.label }}</a>\r\n <span *ngIf=\"!item?.url\" [ngStyle]=\"{'color': lastLinkColor}\">{{ item.label }}</span>\r\n <span class=\"line\" *ngIf=\"breadcrumb.length !== i+1\">{{symbol}}</span>\r\n </li>\r\n </span>\r\n</ul>\r\n", styles: [".custom-bread-crumb{padding:10px 16px;list-style:none}.custom-bread-crumb li{display:inline}.custom-bread-crumb .line{padding-right:3px}.custom-bread-crumb li a{text-decoration:none}.custom-bread-crumb li a:hover{color:#01447e;text-decoration:underline}"], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.1", ngImport: i0, type: NgDynamicBreadcrumbComponent, decorators: [{
type: Component,
args: [{
// tslint:disable-next-line: component-selector
selector: 'app-ng-dynamic-breadcrumb',
templateUrl: './ng-dynamic-breadcrumb.component.html',
styleUrls: ['./ng-dynamic-breadcrumb.component.css']
}]
}], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: NgDynamicBreadcrumbService }]; }, propDecorators: { bgColor: [{
type: Input
}], fontSize: [{
type: Input
}], fontColor: [{
type: Input
}], lastLinkColor: [{
type: Input
}], symbol: [{
type: Input
}] } });
class NgDynamicBreadcrumbModule {
}
NgDynamicBreadcrumbModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.1", ngImport: i0, type: NgDynamicBreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgDynamicBreadcrumbModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.1", ngImport: i0, type: NgDynamicBreadcrumbModule, declarations: [NgDynamicBreadcrumbComponent], imports: [RouterModule,
CommonModule], exports: [NgDynamicBreadcrumbComponent] });
NgDynamicBreadcrumbModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.1", ngImport: i0, type: NgDynamicBreadcrumbModule, imports: [[
RouterModule,
CommonModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.1", ngImport: i0, type: NgDynamicBreadcrumbModule, decorators: [{
type: NgModule,
args: [{
declarations: [NgDynamicBreadcrumbComponent],
imports: [
RouterModule,
CommonModule
],
exports: [NgDynamicBreadcrumbComponent]
}]
}] });
/*
* Public API Surface of ng-dynamic-breadcrumb
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgDynamicBreadcrumbComponent, NgDynamicBreadcrumbModule, NgDynamicBreadcrumbService };
//# sourceMappingURL=ng-dynamic-breadcrumb.js.map