hggeorgiev / ng2-breadcrumbs Goto Github PK

Hello Developers,

This feature is required as we are having long breadcrumb names and we want to show all the breadcrumb in one line for mobile devices. I am able to achieve it using some CSS as below:
breadcrumb1 > breadcrumb2 > breadcr...

The last breadcrumb is shorten ( breadcr...) due to space constraint on mobile devices. I want to show the breadcrumb name on hover/touch as tooltip, so that user can read it. This can be achieved by adding "title" attribute for breadcrumb a/span tag as below:

below code is from file "breadcrumbs.component.ts".
<a *ngIf="!last" [routerLink]="hasParams(breadcrumb)"> {{breadcrumb.label}}</a> <span *ngIf="last">{{ breadcrumb.label }}</span>

Updating it to below code will achieve it:
<a *ngIf="!last" title="{{breadcrumb.label}}" [routerLink]="hasParams(breadcrumb)"> {{breadcrumb.label}}</a> <span *ngIf="last" title="{{breadcrumb.label}}">{{ breadcrumb.label }}</span>

Hi, I have structured routing in my app, like:

    {
        path: '', component: AppPublicComponent, children: [
            { path: '', redirectTo: 'login', pathMatch: 'full' },
            { path: 'login', component: LoginComponent },
            { path: 'forgot-password', component: ForgetPasswordComponent }
        ]
    },
    {
        path: 'pulpit', component: AppPrivateComponent, canActivate: [AuthGuardService],
        children: [
            { path: '', component: DashboardComponent, data: { breadcrumb: 'Home page' } },
            { path: 'child1', component: Child1Component, data: { breadcrumb: 'Child1' } },
            { path: 'child2', component: Child2Component, data: { breadcrumb: 'Child2' } },
            { path: 'child3', component: Child3Component, children: [
                { path: '', component: Child3Child1Component, data: { breadcrumb: 'Child3Child1' } },
                { path: 'child1/:id', component: Child3Child2Component, data: { breadcrumb: 'Child3Child2' } },
                { path: 'child2/:id', component: Child3Child3Component, data: { breadcrumb: 'Child3Child3' } }
            ] }
        ]
    },

    { path: 'error/:errorInfo', component: ErrorPageComponent },
    { path: '**', redirectTo: 'error/not-found' }

I dont want to place breadcrumb name in every route, but if I wont, there will be 'empty_breadcrumb_name' displayed. I can make fork and pull request i you dont mind to that.

How should styling be done?

Hi, I noticed that after window is refreshed breadcrumbs just dissapear. I havent debug that matter, but in the nearest future I guess I will, so then I will pull some request.

hi is ti possible to use use font awesome and chose separator between link?
Thanks

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:

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.

I try to include the breadcrumb in a feature module. not in the root/app module.

if i import BreadcrumbsModule and use it as discribed
<breadcrumb [allowBootstrap]="true"></breadcrumb> in my headerModule
i get the Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.

But BrowserModule is only imported in my Root/App module. the feature module - headerModule- imports Common Module

app.module.ts
`import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import {AppRoutingModule} from "./app-routing.module";
import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
import 'bootstrap/dist/css/bootstrap.min.css';

@NgModule({
imports: [
AppRoutingModule,
BrowserModule,
NgbModule.forRoot(),
],

declarations: [
    AppComponent,
],
providers: [],
bootstrap: [
    AppComponent,
],

})
export class AppModule {
}
`

header.module.ts
`import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {HeaderRoutingModule} from "./header-routing.module";
import {HeaderComponent} from "./header.component";
import {BreadcrumbsModule} from "ng2-breadcrumbs";

@NgModule({
imports: [
CommonModule,
HeaderRoutingModule,
BreadcrumbsModule
],
declarations: [
HeaderComponent,
],
exports: [
HeaderComponent,
],

})
export class HeaderModule {
}
header.component.tsimport {Component} from '@angular/core';
@component({
selector: 'pp-header',
template: <div class="header-container"> <div class="breadCrumb"> <breadcrumb [allowBootstrap]="true"></breadcrumb> </div> </div>,
styleUrls: [String('../../styles.css'), String('./header.css')]
})

export class HeaderComponent {}
`

the link given in README does not work. Please fix the same so that we can view a demo.

The default styles defined here currently override the bootstrap defaults, therefore the allowBootstrap directive doesn't work consistently - i.e. <breadcrumb [allowBootstrap]="true"></breadcrumb> results in this:

Instead of this (the bootstrap default):

i.e. an enforced white background (regardless of the allowBootstrap directive) and overridden padding / margins.

Suggest removing all bootstrap overrides when allowBootstrap is true and let the implementer override bootstrap styles if they wish.

When you attempt to lazy-load the routes, it gives out multiple breadcrumbs.

For example:

const routes: Routes = [
  {path: 'users', loadChildren: './user/user.module#UserModule'}
]

I can try helping out in this scenario. I believe that the ActivatedRoute doesn't get activated quite yet, and outputs out an empty route.

I have the following route:

/foo/:id

When I add this route manually as a breadcrumb then the route parameter doesn't get resolved.

I've tried it as follows:

this.breadcrumbs.store([{ label: 'foo', url: '/foo', params: ['123456'] }])
this.breadcrumbs.store([{ label: 'foo', url: '/foo', params: [{ id: '123456' }] }])
this.breadcrumbs.store([{ label: 'foo', url: '/foo', params: { id: '123456' } }])
this.breadcrumbs.store([{ label: 'foo', url: '/foo/', params: ['123456'] }])
this.breadcrumbs.store([{ label: 'foo', url: '/foo/', params: [{ id: '123456' }] }])
this.breadcrumbs.store([{ label: 'foo', url: '/foo/', params: { id: '123456' } }])
this.breadcrumbs.store([{ label: 'foo', url: '/foo/:id', params: ['123456'] }])
this.breadcrumbs.store([{ label: 'foo', url: '/foo/:id', params: [{ id: '123456' }] }])
this.breadcrumbs.store([{ label: 'foo', url: '/foo/:id', params: { id: '123456' } }])

It only works when I add the route parameter directly to the url:

this.breadcrumbs.store([{ label: 'foo', url: '/foo/123456', params: [] }])

But why do I need params then?

Got this up and running, but wanted to add a prefixed Home breadcrumb. After I added it and all looked good but then I realized the path was still just '/'. I went back in and changed it to what is below. Then I had 2 Home breadcrumbs. I tried clearing cache, removing all references in the project and re-adding them, uninstalling and reinstalling the npm package and there were STILL 2 Home breadcrumbs. For "testing", I tried changing the path a couple more times and now I have 5 Home breadcrumbs.

this.breadcrumbsService.storePrefixed({label: 'Home' , url: '/dashboard', params: []});

@Centroida
hi
when I use ng serve command, there is an error:
ERROR in BreadcrumbsModule is not an NgModule

but after i save the document it compiles and serves the app eithout any problem. and the module works correctly.
now the problem is that when i use ng build command , the error appears and there is no way to get rid of this and compile the app. i also tried reinstalling the module using npm install --save .. but it doesn't work.
how can i handle it?
is it related to the version on angular cli i am using or what? (currently
"@angular/cli": "1.2.0",
"@angular/compiler-cli" : "^4.0.0", )

thanks

I am getting an ExpressionChangedAfterItHasBeenCheckedError in my component when using the BreadCrumbService store(); I tried running this on several different lifecycle hooks but all threw the same error.

here is the relevant part of the component.

constructor(
    public contactsrv: ContactsService,
    private router: ActivatedRoute,
    private breadcrumb: BreadcrumbsService
) {
    this.router.params.subscribe(
        params => {
            this.mediaListId = +params['ml'];
            this.contactId = +params['id'];
        }
    );
}

ngOnInit() {

    this.breadcrumb.store([
        {
            label: 'Media Lists',
            url: '/app-media-lists',
            params: []
        },
        {
            label: 'Media List' ,
            url: `/app-media-lists/media-list/list/${this.mediaListId}`,
            params: []
        },
        {
            label: 'Contact Profile',
            url: '',
            params: []
        }
    ]);

    this.getContact();
    this.getTimeline();
    this.getNotes();
    this.getFunnel();
    this.getFunnelCodeTable();

}

the breadcrumb itself is called in the app.component.html:

<ng-progress></ng-progress>
<app-navbar *ngIf="ui" (showEvent)="getToggle($event)"></app-navbar>
<app-sidebar *ngIf="ui" class="main" [ngClass]="{show: show}"></app-sidebar>
<breadcrumb *ngIf="ui" [allowBootstrap]="true"></breadcrumb>
<app-pitching-modal></app-pitching-modal>
<router-outlet></router-outlet>

and in the app.component.ts I have:

ngOnInit() {

    this.breadcrumbs.storePrefixed({label: 'Home' , url: '/', params: []});

    if (screen.width >= 768) {
        this.show = true;
        return this.show;
    } else {
        this.show = false;
        return this.show;
    }

}

Hi Developers,

I have added prefix route using below code:
this.breadcrumbsService.storePrefixed({ label: 'Home', url: '/', params: [] });
I have refer documentation for added prefixing routes. It work and added "Home" route. Now, I wanted to remove "Home" route, however, I have didn't found any solution.
I tried uninstalling "ng2-breadcrumbs" package and reinstalling it. This is also not working.
This is cache somewhere. Does anyone has idea how can i remove the "Home" route from breadcrumb.

Best Regards,
Swapnil

Hello Developers,

First up all thanks for developing this package for added breadcrumb inside Angular application.

Me and my team is working with hybrid application (we have hosted our home/landing page and angular application on different domains).
For ex:
Home( link: abc.com ) > angular app( link: 123.com ) > step1

I have tried adding the prefix link using prefixing routes mention inside documentation. However, it is not possible inside current version.

So, I am requesting to add this feature.