# ngx-breadcrumb-next

> | Angular | ngx-breadcrumb-next | |------------------|:---------:| | >=14.0.0 =16.0.0 | v1.x |

Latest version **1.0.2** (published 2023-06-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-breadcrumb-next
pnpm add ngx-breadcrumb-next
yarn add ngx-breadcrumb-next
bun add ngx-breadcrumb-next
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2023-06-19 |
| First published | 2023-06-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 58.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | David Segura Payá |
| Maintainers | davidsegura |
| Keywords | angular, breadcrumb |

## Links

- npm: https://www.npmjs.com/package/ngx-breadcrumb-next
- Repository: https://github.com/DavidSegura/ngx-breadcrumb-next
- Homepage: https://github.com/DavidSegura/ngx-breadcrumb-next#readme
- Issues: https://github.com/DavidSegura/ngx-breadcrumb-next/issues
- npm.io page: https://npm.io/package/ngx-breadcrumb-next

## Dependencies (1)

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

## Recent versions

- 1.0.2 (latest) — 2023-06-19
- 1.0.1 — 2023-06-19
- 1.0.0 — 2023-06-19

## README

## Versions

| Angular          | ngx-breadcrumb-next |
|------------------|:---------:|
| >=14.0.0 =16.0.0 |   v1.x    |

## Getting started
### Step 1: Install `ngx-breadcrumb-next`:

#### NPM
```shell
npm install --save ngx-breadcrumb-next
```

### Step 2: Import the NgxBreadcrumbNextModule and angular FormsModule module:
```js
import { NgxBreadcrumbNextModule } from 'ngx-breadcrumb-next';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  imports: [NgxBreadcrumbNextModule, FormsModule],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

### Usage
In template use `ngx-breadcrumb-next` component with your options

```html
<ngx-breadcrumb-next></ngx-breadcrumb-next>
```

In the routes file we add the breadcrumb callback function to the data:
```js
const routes: Routes = [
  {
    path: 'parent',
    children: [
      {
        path: 'children',
        data: {
          breadcrumb: `Label ngx-breadcrumb-next`,
        }
      }
    ],
  },
  {
    path: 'parent2',
    component: ParentComponent,
    data: {
      breadcrumb: null,
    },
  },
  {
    path: 'parent3/:id',
    component: Parent3Component,
    data: {
      breadcrumb: (data: any) => {
        /* data is number param id */
        return `Label ngx-breadcrumb-next #${data.id}`;
      },
    },
  }
];
```

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