how to implement breadcrumb using angular2's router

Question

I use angular2 recently, but don't know how to implement breadcrumb component, any one can help?

<div class="row" style="padding-top:15px;">
   <ol class="breadcrumb">
      <li><a [how to?]>home</a></li>
      <li class="active">detail</li>
   </ol>
 </div>

score 0 · Answer 1 · answered Feb 23 '16 at 06:47

0

Doesn't seem to be too easy currently.
There is an open issue to support this use-case https://github.com/angular/angular/issues/5318

answered Feb 23 '16 at 06:47

Günter Zöchbauer

623,577
216
2,003
1,567

yep, I read this issues. I think, using a static router config is not a nice way, but a solution – laifjei Feb 23 '16 at 06:58

score 0 · Answer 2 · answered Feb 23 '16 at 07:48

well me too want to use Breadcrumb for my project and after searching alot found Nothing about Breadcrumb , so have decided to create my own. so by using bootflat styling (http://bootflat.github.io/documentation.html) i have created my own Breadcrumb for angular2 project. This Breadcrumb also support Routing in angular2. you just have to use these predefined components given here in the repo.

https://github.com/MrPardeep/Angular2-DatePicker

here is the code for using Breadcrum in HTML file:

<breadcrumb>
    <tab name="Home" icon="glyphicon glyphicon-home"></tab>
    <a [routerLink]="['/Components']">
        <tab name="Cutom Angular 2 Components" icon="glyphicon glyphicon-home"></tab>
    </a>
    <tab action="active" name="Datepicker" icon="glyphicon glyphicon-list-alt"></tab>
</breadcrumb>

hope this may help you and will useful for others too.

here is Demo for the Breadcrumb.

how to implement breadcrumb using angular2's router

2 Answers2

Linked