NgxSignalBreadcrumb

non-opinionated Angular breadcrumbs service

Installation

  npm i ngx-signal-breadcrumb
  # or
  yarn add ngx-signal-breadcrumb

Usage/Examples (Inside components)

(1) With third-party packages (e.g primeng)

TS

import { Component, effect, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BreadcrumbModule } from 'primeng/breadcrumb';
import { NgxSignalBreadcrumbService } from 'ngx-signal-breadcrumb';
import { MenuItem } from 'primeng/api';

@Component({
  selector: 'ng-breadcrumb',
  standalone: true,
  imports: [CommonModule, BreadcrumbModule],
  templateUrl: './breadcrumb.component.html',
  styleUrls: ['./breadcrumb.component.scss'],
})
export class BreadcrumbComponent implements OnInit {
  items: MenuItem[] = [];
  home: MenuItem | undefined;

  constructor( private ngxSignalBreadcrumbService: NgxSignalBreadcrumbService<MenuItem>) {
    effect(() => {
      this.items = [...ngxSignalBreadcrumbService.breadcrumbs()];
    });
  }

  ngOnInit(): void {
    this.home = { icon: 'pi pi-home', routerLink: '/dashboard' };
  }
}

HTML

<p-breadcrumb [model]="items" [home]="home"></p-breadcrumb>

(2) Custom (opinionated) component

TS

import { Component, effect } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgxSignalBreadcrumbService } from 'ngx-signal-breadcrumb';

type Breadcrumb = {
  label: string;
  ...
  ...
};

@Component({
  selector: 'ng-breadcrumb',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './breadcrumb.component.html',
  styleUrls: ['./breadcrumb.component.scss'],
})
export class BreadcrumbComponent {
  breadcrumbs: Breadcrumb[] = [];

  constructor(
    private ngxSignalBreadcrumbService: NgxSignalBreadcrumbService<Breadcrumb>
  ) {
    effect(() => {
      this.breadcrumbs = [...ngxSignalBreadcrumbService.breadcrumbs()];
    });
  }

}

HTML

<ng-container *ngIf="breadcrumbs.length">
  <div *ngFor="let item of breadcrumbs">{{ item.label }}</div>
</ng-container>

Usage/Examples (In Routes)

{
    path: 'whatever',
    component: WhateverComponent,
    data: {
      breadcrumbs: [
        {
          label: 'whatever',
          routerLink: '/whatever',
        },
        {
          label: 'New',
          routerLink: '/whatever/new',
        },
      ],
    },
  }

Methods

• updateAllBreadcrumbs(breadcrumbs: T[])
• updateBreadcrumbAtIndex(index: number, breadcrumb: T)
• pushBreadcrumb(breadcrumb: T)

Author

@AhmedHassan