@ngserveio/navigation

Find more at libraries and examples at NgServe.io.

Read More At: Angular Tutorial - Creating a Navigation Module and Breadcrumb

Running unit tests

Run nx test shared-ui-navigation to execute the unit tests.

See the Video Tutorial on YouTube

Breadcrumb

Import the Navigation Module and Configuration

Route Configuration

const CART_LABEL_SERVICE = 'CART_LABEL_SERVICE';

export const ngServeIoFeatureBreadcrumbExampleRoutes: Route[] = [
  {
    path: 'cart',
    component: CrumbSampleComponent,
    data: {
      crumb: {
        providerKey: CART_LABEL_SERVICE,
      } as IBreadcrumbRouteConfig,
    },
  },
  {
    path: '',
    redirectTo: 'cart',
    pathMatch: 'full',
  },
];

Each route which requires a breadcrumb, add to the data property of route crumb which implements the IBreadcrumbRouteConfig. The providerKey shown here maps to the service that will help display the label in the breadcrumb. If the crumb is static, e.g. Home, the default crumb service will display the static label given.

Route Configuration & Registering Services

@NgModule({
  imports: [
    CommonModule,
    NgServeNavigationModule,
    RouterModule.forChild(ngServeIoFeatureBreadcrumbExampleRoutes),
  ],
  providers: [],
  declarations: [CrumbSampleComponent, BreadCrumbExampleComponent],
})
export class NgServeIoFeatureBreadcrumbExampleModule {
  constructor(factory: BreadcrumbFactoryService) {
    factory.registerLabelService(
      CART_LABEL_SERVICE,
      CartBreadcrumbLabelService
    );
  }
}

Import the NgServeNavigationModule. This exposes to the BreadcrumbComponent to the NgServeIoFeatureBreadcrumbExampleModule for consumption.

In the constructor of the NgServeIoFeatureBreadcrumbExampleModule, the BreadcrumbFactoryService registers services to specific to displaying a label for the breadcrumb.

Creating Breadcrumb Label Service

Specific breadcrumb labels services will need to implement the IBreadCrumbLabelService to utilize the getBreadcrumbPath method from the ActivatedRouteSnapshot.

export interface IBreadCrumbLabelService {
  getCrumb(route: ActivatedRouteSnapshot): IBreadCrumb;
}

IBreadcrumb Interface

export interface IBreadcrumb {
  path: string;
  label: Observable<string>;
  icon?: Observable<string>;
}

Cart Label Service

import { getBreadcrumbPath } from '@ngserveio/navigation';

@Injectable({ providedIn: 'root' })
export class CartBreadcrumbLabelService implements IBreadCrumbLabelService {
  constructor(private cartService: CartService) {
    super();
  }

  public getCrumb(route: ActivatedRouteSnapshot): IBreadcrumb {
    return {
      label: this.cartService.cartCount$.pipe(
        map((value) => `Cart (${value})`)
      ),
      path: getBreadcrumbPath(route),
    } as IBreadCrumb;
  }
}

Breadcrumb Component

The responsibility falls upon the consumer of the breadcrumb how each crumb will display. The ng-serve-breadcrumb component allows consumers to define display through a template. Find an example at Breadcrumb Example.

<ng-serve-breadcrumb [itemTemplate]="crumbTemplate">
  <ng-template
    #crumbTemplate
    let-crumb
    let-index="index"
    let-crumbLength="crumbLength"
    let-last="last"
  >
    <a [routerLink]="crumb.path"> {{ crumb.label | async }} </a>
  </ng-template>
</ng-serve-breadcrumb>

Breadcrumb Template Template Source

<div
  *ngLet="{ breadcrumbs: (breadcrumbs$| async) } as data"
  [ngClass]="breadCrumbClass"
>
  <div
    [ngClass]="crumbCssClass"
    *ngFor="let crumb of data.breadcrumbs; let i = index; let isLast = last"
  >
    <ng-container
      [ngTemplateOutlet]="itemTemplate"
      [ngTemplateOutletContext]="{ $implicit: crumb, index: i, last: isLast, crumbLength: data.breadcrumbs.length }"
    >
    </ng-container>
  </div>
</div>

Inputs

Name	Required	Description
itemTemplate	Yes	The template required to render the crumb template
breadCrumbClass	No	The wrapping element css class
crumbCssClass	No	Each crumb's cssClass