How can I add a menu item to the User Menu (in Angular)? #6345

3 Answer(s)

• 

  0

  sinan created 2 years ago

  Angular Developer

  can you check the documentation below

  https://docs.abp.io/en/commercial/latest/themes/lepton-x/angular#toolbar-component

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  1

  sinan created 2 years ago

  Angular Developer

  hey! I am sorry for my previous unsatisfactory answer. I think the code below will help you.

  import { UserMenuService } from '@abp/ng.theme.shared';
  import { APP_INITIALIZER, Injector, inject } from '@angular/core';
  import { Router } from '@angular/router';
  
  export const CUSTOM_MENU_ITEM = [
      {
          provide: APP_INITIALIZER,
          useFactory: addSomethingToUserMenu,
          multi: true,
      },
  ];
  
  export function addSomethingToUserMenu() {
      const userMenu = inject(UserMenuService);
      const router = inject(Router);
  
      return () => {
          userMenu.addItems([
              {
                  id: 'customRoute',
                  order: 100,
                  textTemplate: {
                      icon: 'bi bi-link',
                      text: 'CustomRoute',
                  },
                  action: () => {
                      router.navigate(['/custom-route']);
                  },
                  visible: () => true,
              },
          ]);
      };
  }
  
  

  and put this to app.module providers.

  @NgModule({
    ...
    providers: [APP_ROUTE_PROVIDER, CUSTOM_MENU_ITEM],
    ...
  })
  export class AppModule { }
  

  

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel

  1
• 

  0

  mattw@agilenova.com created 2 years ago

  This is exactly what I needed. Thank you!

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel

  1