npm package: @ngserveio/navigation
Description: Find more at libraries and examples at [NgServe.io](https://ngserve.io).
Author: Paul Mead
Latest version: 10.0.0

# @ngserveio/navigation

Find more at libraries and examples at [NgServe.io](https://ngserve.io).

Read More At: [Angular Tutorial - Creating a Navigation Module and Breadcrumb](https://ngserve.io/angular-tutorial-creating-a-navigation-module-for-breadcrumb/)

## Running unit tests

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

[1]: https://www.youtube.com/watch?v=iPDJJpkZodA
[2]: https://img.youtube.com/vi/iPDJJpkZodA/mqdefault.jpg

### See the Video Tutorial on YouTube

[![Angular Breadcrumbs with @ngserveio/navigation][2]][1]

## Breadcrumb

### Import the Navigation Module and Configuration

#### Route Configuration

```ts
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](./src/lib/models/breadcrumb-route-config.interface.ts). 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.

#### Registering Services

```ts
const appConfig: ApplicationConfig = {
  providers: [
     // registering via providers
    provideBreadcrumb({
      [CART_LABEL_SERVICE]: CartBreadcrumbLabelService,
    });
  ]
}

// registering the service
factory.registerLabelService(
  CART_LABEL_SERVICE,
  CartBreadcrumbLabelService
);
```

#### Creating Breadcrumb Label Service

Specific breadcrumb labels services will need to implement the [IBreadCrumbLabelService](./src/lib/services/breadcrumb-label-service.interface.ts) to utilize the `getBreadcrumbPath` method from the `ActivatedRouteSnapshot`.

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

**IBreadcrumb Interface**

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

**Cart Label Service**

```ts
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-io/feature-breadcrumb-example/src/lib/components/bread-crumb-example/bread-crumb-example.component.ts).

```html
<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](./src/lib/components/breadcrumb/breadcrumb.component.html)

```html
<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 |