File
Metadata
selector |
app-breadcrumb |
templateUrl |
./breadcrumb.component.html |
Public description
|
description:
|
|
Public display
|
display:
|
Default value : false
|
|
Public levels
|
levels: Array<any>
|
Type : Array<any>
|
|
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { BreadcrumbService } from '../../services/breadcrumb.service';
@Component({
selector: 'app-breadcrumb',
templateUrl: './breadcrumb.component.html'
})
export class BreadcrumbComponent {
public display = false;
public header = '';
public description = '';
public levels: Array<any> = [];
constructor(private breadServ: BreadcrumbService) {
// getting the data from the services
this.breadServ.getCurrent().subscribe((data) => {
this.display = data.display;
this.header = data.header;
this.description = data.description;
this.levels = data.levels;
});
}
}
<section class="content-header" *ngIf="display">
<h1>
{{ header }}
<small>{{ description }}</small>
</h1>
<ol class="breadcrumb">
<ng-container *ngFor="let item of levels">
<li [class.active]="item.active">
<a [routerLink]="item.link">
<i *ngIf="item.icon !=null" class="fa fa-{{item.icon}}"></i> {{ item.title }}
</a>
</li>
</ng-container>
</ol>
</section>
Legend
Html element with directive