How to add new menu item to the right-side menu #6739

5 Answer(s)

• 

  0

  Anjali_Musmade created about a year ago

  Support Team Member

  Hello,

  could you please check https://docs.abp.io/en/commercial/latest/themes/lepton-x/angular-customization#toolbar-component

  thanks.

  Save Cancel
• 

  0

  dzungle created about a year ago

  Hello Anjali,

  I have checked the document, but it is about replacing a whole built-in component with a new component. I don’t want to replace the whole toolbar component. I just want to add a new item to the current built-in toolbar.
  Please advise me how to do this with best practices as abp patterns.
  Best Regards

  Save Cancel
• 

  0

  Anjali_Musmade created about a year ago

  Support Team Member

  Hello ,

  Please add below code in app.component.ts file.

  import {ToolbarService} from '@volosoft/ngx-lepton-x/layouts';
  
  export class AppComponent {
    constructor(  private toolbarservice: ToolbarService) 
    {   
     this.toolbarservice.setItems([
      {
        id: 'id1',
        icon: 'action-icon fas fa-comments'
      },
      {
        id: 'id2',
        icon: 'action-icon bi bi-bell-fill'
      }
     ]);
    }
  }
  

  it will result like

  

  In this way you can add any icon as per your requirement.

  Thank you.

  Save Cancel
• 

  0

  dzungle created about a year ago

  Hi Anjali,

  Thank you very much for your support.
  By the way, could you please show me how to programatically select the menu item on the left-side menu?

  Best Regards

  Save Cancel
• 

  0

  Anjali_Musmade created about a year ago

  Support Team Member

  Hello,
  Please add below code router.provider.ts file

  {
  path: '/book-store',
  name: 'Demo',
  iconClass: 'fa fa-bell',
  order: 101,
  layout: eLayoutType.application,
  },

  it will result like
  

  Thanks.

  Save Cancel