SmartComponent Library NG
  1. Components
  2. SmartBreadCrumbNavigationComponent

File

src/ui/breadcrumbs/smart-breadcrumb-navigation.component.ts

Description

A component used for displaying a breadcrumb trail of the current smart route.

Implements

OnInit OnDestroy IBreadCrumbComponent

Example

Metadata

encapsulation ViewEncapsulation.None
selector smart-breadcrumb-navigation
styleUrls ./smart-breadcrumb-navigation.component.css
templateUrl ./smart-breadcrumb-navigation.component.html

Index

Properties
Methods
Inputs
Accessors

Constructor

constructor(router: Router, viewManager: SmartViewManagerService, smartConfig: SmartConfig, breadcrumbRegistry: SmartBreadcrumbRegistryService, serviceAdapter: SmartServiceAdapter, elementRef: ElementRef, breadcrumbHelper: SmartBreadcrumbHelperService)
Parameters :
Name Type Optional
router Router No
viewManager SmartViewManagerService No
smartConfig SmartConfig No
breadcrumbRegistry SmartBreadcrumbRegistryService No
serviceAdapter SmartServiceAdapter No
elementRef ElementRef No
breadcrumbHelper SmartBreadcrumbHelperService No

Inputs

disabled
Default value : false
routerOutlet
Type : string

Methods

navigate
navigate(breadcrumb: IBreadCrumb)

Navigates to the view associated with the given breadcrumb

param breadcrumb

Parameters :
Name Type Optional
breadcrumb IBreadCrumb No
Returns : void

Properties

customHomeBreadcrumb
Type : IBreadCrumb
Public elementRef
Type : ElementRef
Public smartConfig
Type : SmartConfig

Accessors

breadcrumbs
getbreadcrumbs()

The breadcrumbs that are currently displayed

Returns : IBreadCrumb[] 
<ol [ngClass]="{ breadcrumb: true, 'smart-breadcrumb-navigation': true, disabled: disabled }" *ngIf="smartConfig.showSingleBreadcrumb !== false || (!routerOutlet && breadcrumbs.length > 0) || breadcrumbs.length > 1 ">
    <li class="smart-breadcrumb breadcrumb-item" *ngIf="!customHomeBreadcrumb && !routerOutlet">
        <a [ngClass]="{ 'smart-breadcrumb-label': true, disabled: disabled }" [routerLink]="['/', { outlets: { view: null } }]">Home</a>
    </li>
    <li class="smart-breadcrumb breadcrumb-item" *ngIf="!!customHomeBreadcrumb && !routerOutlet">
        <a [ngClass]="{ 'smart-breadcrumb-label': true, disabled: disabled }" [routerLink]="['/', { outlets: { view: customHomeBreadcrumb.url } }]">{{customHomeBreadcrumb.label}}</a>
    </li>
    <li class="smart-breadcrumb breadcrumb-item" *ngFor="let item of breadcrumbs let i=index">
        <a [ngClass]="{ 'smart-breadcrumb-label': true, disabled: disabled }" (click)="navigate(item)">{{item.label}}</a>
    </li>
</ol>
Copy

./smart-breadcrumb-navigation.component.css 

.smart-breadcrumb { 
    cursor: pointer; 
}
a.disabled { 
    pointer-events: none !important; 
    color: lightblue !important; 
    cursor: default !important; 
}
a.disabled:hover { 
    text-decoration: none !important; 
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""