abp-breadcrumb-item in Angular UI

[jackcmac]

Hello. I noticed that the MVC UI allows breadcrumb segments to be manually defined with a abp-breadcrumb-item component, while in the Angular UI it seems that it determines these segments from searching the route against those defined in app-routing. I was wondering if there was a reason the manual option is not available in Angular or if this is something that could be added.

To give some more context as to why I need this, I have a menu item called Appointment. Within this page you can select from a table to view a details page on a specific appointment. I don't want to add the route to the details component appointments/:someId as a child of appointments in app-routing because it should not be accessible directly from the navigation menu (and marking it as invisible hides the parent as well), yet I still want to have a breadcrumb such as Home / Appointments / Details.

Please let me know if I'm missing something and if this is already possible in some other way or if something like abp-breadcrumb-item could be added for Angular UI, so segments could be manually passed in if needed.

Thanks Jack

[hikalkan]

As I know, Angular UI side has no such wrappers, you directly use the Bootsrap. But @mehmet-erim can answer this better.

[mehmet-erim]

Hi @jackcmac

The BreadcrumbComponent parses the route, gets the current route from RoutesService, and displays the route segments. For the present, there is no way to customize this component. We may add new inputs for customization.

BTW, you can create your breadcrumb component, use the breadcrumb template directly without creating a component, or install a package that covers a breadcrumb component.

An example template that you can add to your component:

<ol class="breadcrumb">
  <li class="breadcrumb-item">
    <a routerLink="/"><i class="fa fa-home"></i> </a>
  </li>
  <li
    class="breadcrumb-item"
    aria-current="page"
  >
   Appointments
  </li>
  <li
    class="breadcrumb-item"
    aria-current="page"
  >
   Details
  </li>
</ol>

I hope your question is answered.

[jackcmac]

Hey @mehmet-erim,

Your example was exactly what I needed. I appreciate the help.

Thanks!

[begandroide]

I also face this use case today in the abp page, I used routesService in the Init Hook of angular component, adding a new navigation item invisible with the exact path of current entity and all works like a charm 👌:

constructor(private routesService: RoutesService){}

ngOnInit() {
    // sure that we has a id (@Input)
    if (this.entityId)  {
        this.routesService.add([
            {
                path: '/appointment-management/appointment/preview/' + this.entityId,
                name: '::Menu:AppointmentPreview',
                iconClass: 'fas fa-cal',
                order: 1,
                layout: eLayoutType.application,
                parentName: '::Menu:Appointment',
                requiredPolicy: 'Appointment.Preview',
                invisible: true
              }
        ]);
    }
}

ngOnDestroy() {
    this.routesService.remove(['/appointment-management/appointment/preview/' + this.entityId]);
}

Also, @mehmet-erim i see the code of breadcrumb component and children routes doesn't have href or router link, is possible add it?

Regards

[muhammedaltug]

Hello @begandroide Adding a link to the breadcrumb component is not possible right now. You can use abp-breadcrumb-items component which available in 5.0.0-beta.1. The component has an items input which type is Array<{path?: string; name: string}>. If the item has a path, anchor tag generated with routerLink directive Look at the example usage following

<abp-page title="Title">
    <abp-page-breadcrumb-container>
      <abp-breadcrumb-items [items]="breadCrumbItems"></abp-breadcrumb-items>
    </abp-page-breadcrumb-container>
</abp-page>

import { Component } from '@angular/core';

@Component({
/* component metadata */
})
export class YourComponent {
  breadCrumbItems = [
    {
      name: 'Item 1'
    },
    {
      name: 'Item 2'
      path: '/path',
    }
  ]
}

[begandroide]

thanks you @muhammedaltug I will try with 5.0.0-beta.1. 👍

[piyushysoft]

Hello , I want to add breadcrumbs of child page but it should not be visible as menu item( submenu). Any one please guide us. Thanks,

[begandroide]

@piyushysoft did you try to use invisible property in route provider?

[piyushysoft]

Yes, I added invisible : true for child menu route but its invisible parent and child both menu from page. My sample code for route provider please review it and give me suggestion if you have.

{ path: '/test-processes', iconClass: 'fas fa-file-alt', name: '::Menu:TestProcesses', layout: eLayoutType.application, requiredPolicy: 'ABC.TestProcesses', }, { path: '/test-processes/testview', name: 'testview', layout: eLayoutType.application, parentName: '::Menu:TestProcesses', invisible:true, requiredPolicy: 'ABC.TestProcesses', }

[begandroide]

@piyushysoft these looks fine. Are you using abp-page component from ng.components?

[piyushysoft]

Yes, I am using abp-page component. I have attached the screenshot: