# plus-breadcrumb

> An Angular module generating breadcrumbs based on the routing state with support for all angular versions from angular 5+.

Latest version **0.0.2** (published 2021-01-07) · 0 weekly downloads

## Install

```sh
npm install plus-breadcrumb
pnpm add plus-breadcrumb
yarn add plus-breadcrumb
bun add plus-breadcrumb
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2021-01-07 |
| First published | 2021-01-07 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 89.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | oluwatobi_plus |

## Links

- npm: https://www.npmjs.com/package/plus-breadcrumb
- npm.io page: https://npm.io/package/plus-breadcrumb

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Recent versions

- 0.0.2 (latest) — 2021-01-07
- 0.0.1 — 2021-01-07

## README

# NgxBreadcrumb

An Angular module generating breadcrumbs based on the routing state with support for all angular versions from angular 5+.

This package is a modified version of the ng5-breadcrumb package by AkioCloud(AissamJ)


## Installation

Run `ng serve plus-breadcrumb`


## Usage
Import the PlusBreadcrumbModule module into your target module using forRoot()

import {PlusBreadcrumbModule} from 'plus-breadcrumb';
git remote add origin https://github.com/oluwatobi47/plus-breadcrumb.git

	@NgModule({
        imports: [PlusBreadcrumbModule.forRoot()]
    })
    export class AppModule {
        ...
    }

Alternatively you can import the module into your module and manually provide its service


	@NgModule({
        imports: [PlusBreadcrumbModule],
        providers: [BreadcrumbService]
    })
    export class AppModule {
        ...
    }

Inject the BreadcrumbService into your component to map your routes

    export class AppComponent {
        constructor(private breadcrumbService: BreadcrumbService) {
        }
    }

Place the breadcrumb selector in your component's html where you added your router-outlet:

	<ngx-plus-breadcrumb></ngx-plus-breadcrumb>
	<router-outlet></router-outlet>

## Inputs
`useBootstrap: boolean` to apply the bootstrap breadcrumb style. Defaulted to true.

	<breadcrumb [useBootstrap]="false"></breadcrumb>

`prefix: string` to have a static prefix as the first breadcrumb which routes to the base root when clicked.

	<breadcrumb prefix="App Title"></breadcrumb>

## BreadcrumbService
Add friendly names for each of your app's routes (paths). Can also specify regular expressions to match routes and assign a friendly name.

    breadcrumbService.addFriendlyNameForRoute('/home', 'Home Sweet Home');
    breadcrumbService.addFriendlyNameForRoute('/home/users', 'All users');
    breadcrumbService.addFriendlyNameForRouteRegex('/home/users/[0-9]/info', 'Information');

Specify a callback function that will supply a name for a specific route or regex.
This is intended to be used when a route contains path params. It allows you display a specific name for the given id contained in the route url.

    breadcrumbService.addCallbackForRoute('/home/users/1', this.getNameForUser);
    breadcrumbService.addCallbackForRouteRegex('^/home/users/[0-9]$', this.getNameForUser);
    
    getNameForUser(id:string):string {
        return 'specific name for user with id';
    }

Hide certain routes (paths) from the breadcrumb trail using an exact url or regex.

    breadcrumbService.hideRoute('/home/secret');
    breadcrumbService.hideRouteRegex('^/home/secret/[a-zA-Z]');


More Updates coming soon

---
_Source: https://npm.io/package/plus-breadcrumb · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._