# angular2-breadcrumb

> breadcrumbs for angular2

Latest version **0.0.2** (published 2016-06-28) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2016-06-28 |
| First published | 2016-06-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Pradeepraj Chandrasekaran |
| Maintainers | prashanth_cvvp |
| Keywords | angular2 |

## Links

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

## Recent versions

- 0.0.2 (latest) — 2016-06-28
- 0.0.1 — 2016-06-28

## README

# ng2-breadcrumb
This component generates a breadcrumb trail as you navigate to child paths using the @angular/router. Each new route & router-outlet is treated as an endpoint, 
that shows up as a new level in the breadcrumb trail. Its also possible to create a conceptual parent child hierarchy with just sibling routes, using the '%' char when defining a route path. 
For example the below Routes uses a single router-outlet, but will be 3 levels deep in the breadcrumb trail:

	@Routes([
		{ path: '/comp1', component: Component1},
		{ path: '/comp1%comp2', component: Component2},
		{ path: '/comp1%comp2%comp3', component: Component3}
	])

Theres a breadcrumbService that allows you to add friendly names for each of your apps route paths (the friendly name will ultimately show up in the breadcrumb trail):

	constructor(private breadcrumbService: BreadcrumbService) {
		breadcrumbService.addFriendlyNameForRoute('/comp1', 'Comp 1');
		breadcrumbService.addFriendlyNameForRoute('/comp1%comp2', 'Comp 2');
		breadcrumbService.addFriendlyNameForRoute('/comp1%comp2%comp3', 'Comp 3');
	}

For a live example see: https://embed.plnkr.co/H0C1rL2oEM2Bu4XYJNEO/

## Dependencies
Requires bootstrap.css (v 3.x.x) for styling of some elements (although the component is fully functional without it).

## Install
Install the module via npm:

    npm install ng2-breadcrumb --save

## Usage
Import the BreadcrumbService and make it available as a global provider when you bootstrap your app:

	import {BreadcrumbService} from 'ng2-breadcrumb/ng2-breadcrumb';

	bootstrap(App, [
		BreadcrumbService
	])

Import both the BreadcrumbComponent & BreadcrumbService into your component and update its list of directives:

	import {BreadcrumbComponent, BreadcrumbService} from 'ng2-breadcrumb/ng2-breadcrumb';

	@Component({
		directives: [BreadcrumbComponent]
	})
	class Component {
		...
	}
	
Inject the BreadcrumbService via the components constructor so you can add friendly names for each of your apps routes:

	constructor(private breadcrumbService: BreadcrumbService) {
		breadcrumbService.addFriendlyNameForRoute('/home', 'Home Sweet Home');
	}

Place the breadcrumb selector in your components html where you added your router-outlet:

	<breadcrumb></breadcrumb>
	<router-outlet></router-outlet>
    
## Build
To compile the project locally just run the default gulp task (ensure you have gulp install globally to do this):

    gulp

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