v6.6.1

Bug Fixes

• change breadcrumb array to observable with pipe async (#75) (fb05322)

v6.6.0

6.6.0 (2021-02-02)

Features

• nx migrate and codeowners (#71) (a7c0377)
• nx upgrade (ebf2044)
• revert nx migrated version (3f7d0b8)
• update nx version (#73) (3c058e6)

6.5.0 (2020-12-09)

Features

• angular material upgrade (0fd151d)
• angular version upgrade (f9388b5)
• nx version upgrade (#63) (50dbf89)

Bug Fixes

• use tabindex and listen to keyboard enter since routerLink is no longer used (#67) (de6d7fa)

6.4.0 (2020-11-26)

Features

• index and count (#62) (ecd6ff8)

6.3.4 (2020-11-17)

Bug Fixes

• empty breadcrumb at start (#58) (8f08cf3)

6.3.3 (2020-11-16)

Bug Fixes

• avoid empty breadcrumb at start when the for autogenerated case (#56) (b82ab8b)

6.3.2 (2020-11-16)

Bug Fixes

• avoid empty breadcrumb at start when the for autogenerated case (#56) (b82ab8b)

v6.3.1

Changes

• fix: use tabindex and listen to keyboard enter since routerLink is no longer used (#67) @udayvunnam
• feat: nx version upgrade (#63) @udayvunnam
• feat: index and count (#62) @dedrazer
• fix: empty breadcrumb at start (#58) @udayvunnam
• fix: avoid empty breadcrumb at start when the for autogenerated case (#56) @udayvunnam
• fix: lint and material theme (#53) @udayvunnam
• fix: bug fix that handles the root breadcrumb same as remaining items, version upgrades (#52) @udayvunnam

v6.3.0

Changes

• feat: provide breadcrumb route interceptor for conditional routing and access to routing (#51) @udayvunnam

v6.2.0

Changes

• feat: breadcrumb as a function - fixes #43
• fix: merge with child breadcrumbs properly (#45) @udayvunnam

v6.1.0

Changes

• feat: provide ability to disable fragment, angular version 10 (#42) @udayvunnam
• build: husky & probot apps (#41) @udayvunnam
• docs: fix link to the demo page (#40) @DannyFeliz

property	Description	Type	Default
preserveQueryParams	preserve query params while navigating via breadcrumbs	boolean	true
preserveFragment	preserve fragment while navigating via breadcrumbs	boolean	true

Tapi

Uses Nx mono repo for the app and lib management

• fixes #34
• fixes #36

Krishna

• Preserve Query Params and Fragment while navigating back via breadcrumbs
• Disabled state for breadcrumb to block navigation to intermediate routes that have no meaning.
• Bugfix: Label doesn't update properly while using route path

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)