DEV Community

GaurangDhorda
GaurangDhorda

Posted on

Generate breadcrums for your Angular-Router and set page title dynamically.

In this example I am going to explain you that You can use library to generate breadcrumbs, and also set each page title dynamically.

first you need to install this library to your angular project.

npm install set-title-with-breadcrumbs

This will install library called set-title-with-breadcrumbs, this library is used to generate breadcrumbs component and also you can set page title using angular router. After installing this library..

Go to your app.module.ts file and add below code

import { SetTitleWithBreadcrumbsModule} from 'set-title-with-breadcrumbs';
    @NgModule({
        imports : [SetTitleWithBreadcrumbsModule]
    })
Enter fullscreen mode Exit fullscreen mode

in side your app-routing.module.ts file you have to add new data:{} object with breadcrumbs and title object property.

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    data: { title: 'Home Page', breadcrums: 'Home' },
    children: [
      {
        path: 'records',
        component: RecordsComponent,
        data: { title: 'Find Records Page', breadcrums: 'Find-Records' },
        children: [
          {
            path: 'child',
            component: ChildComponent,
            data: { title: 'Child Record Page', breadcrums: 'Child-Record' }
          }
        ]
      }
    ]
  }
]
Enter fullscreen mode Exit fullscreen mode

as you can see above, each router-path has data object with two property - breadcrumbs and title.

Now inside your app.component.html file you need to add component of library.

<lib-set-title-with-breadcrumbs></lib-set-title-with-breadcrumbs>
<router-outlet></router-outlet>
Enter fullscreen mode Exit fullscreen mode

You can support me here.

Alt Text

Connect with me by email : grdtechlab@gmail.com

Working demo in this stackblitz link

Discussion (0)