projects/rebirth-ng/src/lib/breadcrumbs/breadcrumbs.component.ts
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | re-breadcrumbs |
| styleUrls | breadcrumbs.component.scss |
| templateUrl | ./breadcrumbs.component.html |
Methods |
Inputs |
cssClass
|
Type: |
items
|
Type:
Default value: |
| itemClick | ||||||
itemClick(item: Breadcrumb)
|
||||||
|
Parameters :
Returns :
void
|
import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
import { Breadcrumb } from './breadcrumbs.model';
@Component({
selector: 're-breadcrumbs',
templateUrl: './breadcrumbs.component.html',
styleUrls: ['./breadcrumbs.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class BreadcrumbsComponent {
@Input() items: Breadcrumb[] = [];
@Input() cssClass: string;
itemClick(item: Breadcrumb) {
if (item.handle) {
item.handle(item);
}
}
}
<ol class="breadcrumb {{cssClass}}">
<li *ngFor="let item of items;let $last=last" [ngClass]="{'active': $last}">
<a *ngIf="!$last && item.handle" (click)="itemClick(item)">
<i *ngIf="item.icon" class="breadcrumb-icon {{item.icon}}"></i>{{item.text}}
</a>
<a *ngIf="!$last && item.router" [routerLink]="item.router" [queryParams]="item.queryParams">
<i *ngIf="item.icon" class="breadcrumb-icon {{item.icon}}"></i>{{item.text}}
</a>
<a *ngIf="!$last && !item.handle && !item.router" [href]="item.url" [target]="item.target || '_self'">
<i *ngIf="item.icon" class="breadcrumb-icon {{item.icon}}"></i>{{item.text}}
</a>
<ng-container *ngIf="$last">
<i *ngIf="item.icon" class="breadcrumb-icon {{item.icon}}"></i>{{item.text}}
</ng-container>
</li>
</ol>