alex-craiu/angular-nav-title

Page navigation titles (breadcrumbs)

Simple straightforward page navigation titles.

This module requires Angular router.

Demo

https://alex-craiu.github.io/angular-demo/

Installation

$ npm install --save angular-nav-title

Usage

1. Import the module

import { NavTitleModule } from 'angular-nav-title';

@NgModule({
    ...
    imports: [NavTitleModule]
    ...
});

2. Add the navTitle param to your route's data:

...
const routes: Routes = [
    {
        path: '',
        component: ArticlesComponent,
        data: { navTitle: 'Articles' },
        children: [
            { path: '', component: ArticleListComponent, data: { navTitle: 'List' } }
        ]
    }
];
...

3. Insert the NavTitleComponent selector into app.component.html:

<nav-title></nav-title>

If navTitle isn't specified it won't render on screen. On title click, it navigates to the corresponding route.

Additional properties

Change the title separator (default: '–'):

<nav-title separator=">"></nav-title>

Change the param name (default: 'navTitle'):

<nav-title dataParam="breadcrumb"></nav-title>