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

5 Answer(s)

• 

  0

  Anjali_Musmade created 9 months ago

  Support Team 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 9 months 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 9 months ago

  Support Team 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 9 months 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 9 months ago

  Support Team 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