Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Breadcrumb does not work inside child components #8

Open
Bidthedog opened this issue Oct 23, 2017 · 2 comments
Open

Breadcrumb does not work inside child components #8

Bidthedog opened this issue Oct 23, 2017 · 2 comments

Comments

@Bidthedog
Copy link

Angular 4.4.5, angular CLI 1.4.7.

I've just tried to install this component - it seems to work fine when I put it inside app.component.html, but as soon as I try to insert it into any child component, it doesn't show. Routing as follows:

export const APP_ROUTES: Routes = [
  {
    path: '', data: { friendlyName: 'Home', breadcrumb: 'Home' },
    children: [
      { path: '', component: HomeComponent },
      { path: 'about', component: AboutComponent, data: { friendlyName: 'About Us', breadcrumb: 'About' } }
    ]
  }
];

(Using children of the root path may look a bit weird, but I need my routing this way as I query it for my site-map.)

AboutComponent markup as follows:

<div class="container">

  <div class="row">
    <div class="col-lg-12">
      <h1 class="page-header">About Us
        <small class="hidden-xs">Who you're dealing with</small>
      </h1>
      <breadcrumb [allowBootstrap]="true"></breadcrumb>

    </div>
  </div>
</div>

Nothing displays, though the component seems to render (the markup shows when I inspect in the browser, but has no content).

Interestingly, if I put <breadcrumb [allowBootstrap]="true"></breadcrumb> inside app.component.html, but ALSO insert it into a child component, it shows twice (as I would expect). The interesting thing here is that the app.component.html component markup seems to be required before you can use it inside child components:

ng4-bootstrap

app.component.html looks like this:

<breadcrumb [allowBootstrap]="true"></breadcrumb>

<router-outlet></router-outlet>

The use-case for this is that I don't want to show the breadcrumbs on every page - in fact, I want to show them on all pagers except the home page due to the layout I'm using for that page.

@Bidthedog
Copy link
Author

FYI I'm working around this by using the following code in app.component.html:

<breadcrumb [allowBootstrap]="true" [hidden]="true"></breadcrumb>

@anuragpareek
Copy link

I'm facing the same issue facing Bidthedog. I try to insert it into a child component, But no success, it doesn't work. As I route to any other page; Breadcrumb starts working, showing all paths perfectly.
But again when I refresh page breadcrumbs gone. On first they don't get initialize automatically.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants