Conga Digital Commerce 202405.2.0 on Conga Revenue Lifecycle Platform
  1. Components
  2. BreadcrumbComponent

File

projects/congarevenuecloud/elements/src/lib/breadcrumb/breadcrumb.component.ts

Description

The Breadcrumb component generates links which allow users to navigate to different pages.

Preview

Usage

Example :
import { BreadcrumbModule } from '@congarevenuecloud/elements';

@NgModule({
imports: [BreadcrumbModule, ...]
})
export class AppModule {}
Example :
// Generate breadcrumb from AObject record
```typescript
<apt-breadcrumb [sobject]="product"></apt-breadcrumb>
Example :
// Pass in a defined array of breadcrumbs.
```typescript
<apt-breadcrumb
             [label]="myLabel"
             [breadcrumbs]="myBreadcrumbs"
             [autoGenerated]="false"
></apt-breadcrumb>

Implements

OnChanges OnDestroy

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector apt-breadcrumb
styleUrls ./breadcrumb.component.scss
template 
<nav aria-label="breadcrumb" class="container-fluid">
  <div class="row align-items-center justify-content-between">
    <ol class="col-lg-auto col-md-auto col-sm-9 col-9 breadcrumb m-0">
      <li class="breadcrumb-item">
        <a href="javascript:void(0)" [routerLink]="['/']">{{'BREADCRUMB.HOME' | translate}}</a>
      </li>
      <li class="breadcrumb-item" [class.active]="breadcrumb.active" *ngFor="let breadcrumb of (breadcrumbs$ | async) as breadcrumbsList; let i= index">
        <a href="javascript:void(0)" [routerLink]="breadcrumb.route" *ngIf="!breadcrumb.active; else inactive">
          <span *ngIf="(i!=breadcrumbsList.length-1 || label); else fullLength">{{breadcrumb.label | truncate: 7}}</span>
          <ng-template #fullLength>
            <span>{{breadcrumb.label}}</span>
          </ng-template>
        </a>
        <ng-template #inactive>{{breadcrumb.label}}</ng-template>
      </li>
      <li class="breadcrumb-item active" [attr.aria-current]="label" *ngIf="label">{{label}}</li>
    </ol>
    <ng-content class="col-auto"></ng-content>
  </div>
</nav>

Index

Inputs

Constructor

constructor(categoryService: CategoryService, aobjectService: AObjectService, translateService: TranslateService)
Parameters :
Name Type Optional
categoryService CategoryService No
aobjectService AObjectService No
translateService TranslateService No

Inputs

autoGenerated
Type : boolean
Default value : true

Flag to generate the breadcrumbs based on the given AObject record.
breadcrumbs
Type : Array<BreadcrumbLink>

Array of breadcrumb links to use to create the set of breadcrumbs. This will override the system from generating breadcrumbs based on any given AObject record.
label
Type : string

Label to use for current location.
route
Type : string

Route to use for breadcrumb navigation.
sobject
Type : AObject

AObject record to use for this component to generate breadcrumbs.

./breadcrumb.component.scss

Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""