qbit kit ng: QBreadcrums

QBreadcrumsService

Service in charge of managing Breadcrumbs component.

QBreadcrumbsComponent

The component in charge of rendering breadcrumbs.

Usage

Importing:

import { QBreadcrumbsModule } from '@qbitartifacts/qbit-kit-ng';

Add the module to your app.module.ts

{
  imports: [QBreadcrumbsModule]
}

If you are developing for QBitArtifacts, using the BaseNgPanel template, you must add this to shared.module.ts

Setting up breadcrumbs in routes

Now we must tell breadcrumbs what title each page has. For this we should update our routes, breadcrumbs service will use data.breadcrumb from the route, as the label for that specific route.

Add data.breadcrumb to each route that you want to have breadcrumbs:

{
    path: ':id',
    component: InstanceComponent,
    canActivate: InstanceComponent.guards,
+    data: {
+        breadcrumb: 'Instance',
+    },
},

Add QBreadcrumbsComponent wherever you want it to be

Now just add the following to any place you want the breadcrumbs to be.

app.component.html

<qbit-breadcrumbs></qbit-breadcrumbs>

Updating current breadcrumb?

Yup, we can alter the current breadcrumb and any other we like. We will use QBreadcrumsService to do that:

import { QBreadcrumbsService } from '@qbitartifacts/qbit-kit-ng';

class AppComponent {
  constructor(public breadcrumbs$: QBreadcrumbsService) {}

  ngOnInit() {
    this.breadcrumbs$.editCurrent(
      'New Crumb Title'
    );
  }
}