how to implement breadcrumb using angular2's router

angular breadcrumbs
laifjei picture laifjei · Feb 23, 2016 · Viewed 10.2k times · Source

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>

Answer

G&#252;nter Z&#246;chbauer picture Günter Zöchbauer · Feb 23, 2016

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

Related questions

Create breadcrumb when navigating nested components (Angular 2)

I am struggling with this :) The idea is to have a component and when navigate trough sub-views update the breadcrumb for example: <breadcrumb> Products / Category-C / My-Product </breadcrumb> Products -> Category-A -> Category-B -> …

Read More
Angular 2 Dynamic Breadcrumbs

I need some help with breadcrumbs Here example routes config Routes = [ {path: '', redirectTo: 'home', pathMatch: 'full'}, {path: 'home', ..., data: { breadcrumb: 'Home'}}, {path: 'about', ..., data: { breadcrumb: 'About'}}, {path: 'github', ..., data: { breadcrumb: 'GitHub'}, { path: 'category/:id', component: CategoryComponent }, ] In bread crumbs …

Read More
Can't bind to 'ngModel' since it isn't a known property of 'input'

I've got the following error when launching my Angular app, even if the component is not displayed. I have to comment out the <input> so that my app works. zone.js:461 Unhandled Promise rejection: Template parse errors: Can't …

Read More