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]
    })

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' }
          }
        ]
      }
    ]
  }
]

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>

You can support me here.

Connect with me by email : grdtechlab@gmail.com

Working demo in this stackblitz link