Skip to content

Narmada
Compare
Choose a tag to compare
@udayvunnam udayvunnam released this 07 Nov 10:35
v5.0.0
e856a3b

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.

    image

.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
Assets 2
Loading