npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ngx-breadcrumpy

v1.9.0

Published

Awesome breadcrumbs for Angular

Downloads

96

Readme

Breadcrumpy 🍞

Awesome breadcrumbs for Angular!

NPM version NPM downloads Build status All Contributors

Overview

What? 🤔

An awesome library to easily add breadcrumbs to your Angular application.

  • Simply add breadcrumb labels to your Angular routing
  • It supports asynchronous (reactive) breadcrumbs
  • Flexible configuration. However you like to roll!
  • ~~Angular Material and PrimeNG examples included~~ (on roadmap)

Why? 🤷‍♂️

Existing breadcrumb libraries do not seem to support async (reactive) breadcrumbs. Also, this library provides many different configuration options.

Installation 🌩

npm
npm install ngx-breadcrumpy
yarn
yarn add ngx-breadcrumpy

Usage 🕹

Basic example

Just add a breadcrumb data property to your routes.

export const ROUTES: Routes = [
  {
    path: 'about',
    component: AboutComponent,
    data: { breadcrumb: 'About' }
  },
  {
    path: 'products',
    data: { breadcrumb: 'Products' }
  }
];

a) Use the default breadcrumb component:

Now, import the BreadcrumbsModule and add the included breadcrumb component to your template:

<bcy-breadcrumbs></bcy-breadcrumbs>
<router-outlet></router-outlet>

b) Or implement your own:

Alternatively, implement your own breadcrumb component using the BREADCRUMBS injection token:

import { Component, Inject } from '@angular/core';
import { Observable } from 'rxjs';
import { Breadcrumb, BREADCRUMBS } from 'ngx-breadcrumpy';

@Component({
  selector: 'app-breadcrumb',
  template: `
    <ng-container *ngFor="let b of breadcrumbs$ | async; last as last">
      <a [routerLink]="b.urlSegments">{{ b.label }}</a> <span *ngIf="!last"> / </span>
    </ng-container>
  `
})
export class BreadcrumbComponent {
  constructor(@Inject(BREADCRUMBS) public breadcrumbs$: Observable<Breadcrumb[]>) {}
}

A breadcrumb contains the following properties:

export interface Breadcrumb {
  /**
   * Label of the breadcrumb.
   */
  label: string;

  /**
   * Icon of the breadcrumb.
   */
  icon?: string;

  /**
   * Url to the breadcrumb (if not loading), if not using RouterLink.
   */
  url?: string;

  /**
   * Url segments to the breadcrumb (if not loading), useful for RouterLink.
   */
  urlSegments?: any[];

  /**
   * True if the breadcrumb is being loaded.
   */
  loading?: boolean;
}

Advanced configuration

Instead of static breadcrumbs, you may want to make your breadcrumb labels more dynamic. There are several ways to do this!

The breadcrumb configuration can be of many types:

  • string (label)
  • BreadcrumbLiteral (object with label and optionally an icon)
  • Observable<string | BreadcrumbLiteral>
  • (route: ActivatedRouteSnapshot) => string
  • (route: ActivatedRouteSnapshot) => BreadcrumbLiteral
  • (route: ActivatedRouteSnapshot) => Observable<string | BreadcrumbLiteral>
  • Type<BreadcrumbResolver>

Of course you can also make combinations. Please find some examples below.

1. Using functions

A function which returns a string, BreadcrumbLiteral or Observable<string | BreadcrumbLiteral>.

export const ROUTES: Routes = [
  {
    path: 'product/:id',
    data: {
      breadcrumb: (route: ActivatedRouteSnapshot) => `Product ${route.paramMap.get('id')}` 
    }
  }
];

2. Using a BreadcrumbResolver

You can also use a special BreadcrumbResolver service to benefit from dependency injection. The resolve method should return either a string, BreadcrumbLiteral or Observable<string | BreadcrumbLiteral>.

Asynchronous observables will not block the routing process, but make the breadcrumb appear when resolved.

export const ROUTES: Routes = [
  {
    path: 'product/:id',
    data: { breadcrumb: YourBreadcrumbResolver }
  }
];

@Injectable({ providedIn: 'root' })
class YourBreadcrumbResolver implements BreadcrumbResolver {
  public resolve(route: ActivatedRouteSnapshot): Observable<string> {
    // just some example of an async breadcrumb label...
    return of(`Product ${route.paramMap.get('id')}`).pipe(delay(300));
  }
}

3. Using Resolve guards

If you want to stick with resolve guards from @angular/router, you can. They will will dynamically add the breadcrumb property to your route.

export const ROUTES: Routes = [
  {
    path: 'product/:id',
    resolve: { breadcrumb: YourResolveGuard }
  }
];

@Injectable({ providedIn: 'root' })
class YourResolveGuard implements Resolve<string | BreadcrumbLiteral> {
  /* ... */
}

NOTE: keep in mind that the resolve guards from Angular Router are blocking! To get around this, use the previously mentioned BreadcrumbResolver. You can also make your guard return an Observable<Observable<string | BreadcrumbLiteral>>. Breadcrumpy will automatically support this.

Using a different route property

Just provide a BREADCRUMB_KEY token in your root module to change the default breadcrumb property name.

import { BREADCRUMB_KEY } from 'ngx-breadcrumpy';

@NgModule({
  providers: [
    {
      provide: BREADCRUMB_KEY,
      useValue: 'yourBreadcrumb'
    }
  ]
})
class AppModule {}

Using translations (i18n)

Just implement your own breadcrumb component and use translation pipes for your breadcrumb labels.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!