https://github.com/henczi/ngx-crumbs
An ultimate breadcrumbs service for Angular.
https://github.com/henczi/ngx-crumbs
angular breadcrumb breadcrumbs ng ngx-crumbs
Last synced: about 2 months ago
JSON representation
An ultimate breadcrumbs service for Angular.
- Host: GitHub
- URL: https://github.com/henczi/ngx-crumbs
- Owner: henczi
- License: mit
- Created: 2021-04-06T06:22:43.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-02-25T11:51:08.000Z (about 2 years ago)
- Last Synced: 2025-02-15T17:41:20.195Z (2 months ago)
- Topics: angular, breadcrumb, breadcrumbs, ng, ngx-crumbs
- Language: TypeScript
- Homepage: https://stackblitz.com/edit/ngx-crumbs-demo
- Size: 299 KB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ngx-crumbs - An ultimate breadcrumbs service for Angular. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-crumbs - An ultimate breadcrumbs service for Angular. (Table of contents / Third Party Components)
README
# NgxCrumbs
An ultimate breadcrumbs service for Angular.
Demo on [StackBlitz](https://stackblitz.com/edit/ngx-crumbs-demo)
## Getting started
### Install via NPM
```
npm i ngx-crumbs
```
### Import the `NgxCrumbsModule`
```ts
@NgModule({
/* ... */
imports: [
/* ... */
NgxCrumbsModule,
],
})
export class AppModule { }
```
## Usage
Use the `ngx-crumbs` component to display the breadcrumbs
```html
```
> You can create a full custom look by using the `NgxCrumbsService.crumbs$` observable
### Defining crumbs in Routes
```ts
// app-routing.module.ts
const routes: Routes = [
{
path: '',
data: { crumb: 'Home' }
/* component: ... */
},
{
path: 'profile',
data: { crumb: 'Profile' },
/* component: ... */
children: [
path: 'settings',
data: { crumb: 'Settings' },
/* component: ... */
]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
```
### Defining crumbs in a component
```html
```
## Configuring
|parameter|default|description|
|--|--|--|
|noLink|false|true, if the crumb should not point to a path|
|link|undefined||
### Dynamic crumb text
If your breadcrumb depends on dynamic data, you can also pass a function to the `crumb` (or `crumb.text`). This function receives an object containing three fields - `data`, `params` and `queryParams`.
```ts
const routes: Routes = [
{ path: '...', data: { crumb: ({ data, params, queryParams }) => `...` } },
/* OR */
{
path: '...',
data: {
crumb: {
text: ({ data, params, queryParams }) => `...` }
}
},
}
];
```
In a component you can data-bind all available variables.
```html
```
### Override default link
```ts
const routes: Routes = [
{
path: 'post/:id',
resolve: { post: PostResolver },
data: {
crumb: [
{ text: 'Posts', link: '/posts' },
{ text: ({ data }) => `${data.post.name}` },
]
},
component: PostComponent
}
];
```
```html
```
### Multiple crumbs per component
```ts
const routes: Routes = [
{ path: 'posts', data: { crumb: 'Posts' } },
{
path: 'post/:id',
data: {
crumb: [
{ text: 'Posts', link: '/posts' },
{ text: ({ params }) => `Post: ${params.id}` },
]
},
/* component: ... */
}
];
```
```html
```
## Document title
```ts
export class AppComponent {
constructor(public crumbsService: NgxCrumbsService) {
crumbsService.crumbs$.subscribe(x => document.title = x.length
? `${x[x.length-1].text} | Demo`
: 'Demo'
)
}
}
```