Narmada

Features

Custom Breadcrumb template (add icons, change text, add i18n ability, etc)

You can display whatever you want in the place of breadcrumb text by providing a custom template.

• Use *xngBreadcrumbItem directive to provide a custom template
• breadcrumb label is available implicitly in the template context

Change text case

  {
    path: '',
    pathMatch: 'full',
    component: HomeComponent,
    data: {
      breadcrumb: 'app home'
    }
  }

<xng-breadcrumb>
  <ng-container *xngBreadcrumbItem="let breadcrumb">
    <ng-container>{{ breadcrumb | titlecase }}</ng-container>
  </ng-container>
</xng-breadcrumb>

Add icons in front of label

• define 'info' associated with breadcrumb in route config. 'info' has type . you can pass string or object as you need.
• 'info' is available in the context of *xngBreadcrumbItem.
• Additionally 'first' and 'last' are passed to identify 'first' and 'last' items respectively.

  {
    path: '',
    pathMatch: 'full',
    component: HomeComponent,
    data: {
      breadcrumb: {
        label: 'app home',
        info: 'home'
      }
    }
  }

<xng-breadcrumb>
  <ng-container *xngBreadcrumbItem="let breadcrumb; let info = info; let first = first">
    <mat-icon *ngIf="info">{{ info }}</mat-icon>
    <ng-container *ngIf="!first">{{ breadcrumb }}</ng-container>
  </ng-container>
</xng-breadcrumb>

i18n ability

• Usually, internationalization is achieved in Angular using libraries like ngx-translate or transloco.
• These libraries provide a pipe to change text while language is changed.
• With ngx-translate you can change the language for breadcrumb text as shown below.

<xng-breadcrumb>
  <ng-container *xngBreadcrumbItem="let breadcrumb">
    <ng-container>{{ breadcrumb | translate }}</ng-container>
  </ng-container>
</xng-breadcrumb>

Custom separator

• Breadcrumb uses '/' as the separator by default.
• To use custom separator pass separator as an input to <xng-breadcrumb>.
• You can either use a simple string(>>, -, -->) or a component (mat-icon, fa-icon) as a separator.

string as separator

<xng-breadcrumb separator=">"></xng-breadcrumb>

icon or component as separator

<xng-breadcrumb [separator]="iconTemplate"></xng-breadcrumb>

<ng-template #iconTemplate>
  <mat-icon>arrow_right</mat-icon>
</ng-template>

Custom Breadcrumb Styles

• <xng-breadcrumb> defines the least possible specificity for selectors, to make it easy to override them.

• override styles by changing the CSS for corresponding classes. (Keep this styles in app root styles file if you don't want to use ::ng-deep)

• Below are classes visualization to help which class maps to which box

• (Optional)xng-breadcrumb takes 'class' as input. This class will be applied to the root of the breadcrumb. This can be used to increase specificity when there are conflicting styles.

  

.xng-breadcrumb-root {
  padding: 8px 16px;
  display: inline-block;
  border-radius: 4px;
  background-color: #e7f1f1;
}

.xng-breadcrumb-separator {
  padding: 0 4px;
}

BREAKING CHANGES

• BreadcrumbService's setForAlias(), skip(), skipForAlias() have been deprecated earlier and removed in this release. set() method alone powers all of this features now.
• class names have been updated. clear names are used for each block xng-breadcrumb-root, xng-breadcrumb-list, xng-breadcrumb-item, xng-breadcrumb-link, xng-breadcrumb-trail. Also ViewEncapsulation.None is used to make it easier to override them by clients

Kaveri

• Angular8.x version upgrade. Angular 6.x and Angular 7.x are no longer supported. If you are using these versions, please, stick with version xng-beadcrumb@2.x.x ([4f73ec3](https://github.com/udayvunnam/xng-breadcrumb/commit/
• build scripts update (8923e2e)

Tapti

• Compiling with v7 to support Angular 6 and 7. Closes #12 (89bf7d7)

Yamuna

Base route Breadcrumb
Added the ability to add breadcrumb for a base route such as 'Home'. closes #6

 { path: '', pathMatch: 'full',  data: { breadcrumb: 'Home' } },

Custom separator: closes #5
Breadcrumb by default uses '/' as the separator. To use custom separator pass it as input to the component like below.

<xng-breadcrumb seperator=">"></xng-breadcrumb>

Styling breadcrumbs: closes #5
The library uses the least specific selectors possible in order to make it easy to override them.
you can override by changing the CSS for classes .breadcrumb, .current-path, .separator etc with ::ng-deep

::ng-deep .breadcrumb {
  background-color: bisque;
  border: 1px solid;
}

Optional - default mapping of the route to breadcrumb label closes #2
To avoid breadcrumb labels showing by default even for routes that don't have breadcrumb configuration, set defaultMapping=false as input

<xng-breadcrumb [defaultMapping]="false"></xng-breadcrumb>

Ganges

• Quickstart with default mapping: Just by adding <breadcrumb></breadcrumb> show breadcrumbs anywhere in the App. Breadcrumbs defaults to route segments even without any configuration.
• Declarative mapping: Map breadcrumb label for each route, while declaring App routes.
• Dynamic mapping: Resolve a breadcrumb label dynamically, by using BreadcrumbService.
• Skip Breadcrumb: Skip specific routes from displaying in breadcrumbs, conditionally.