Open Closed

Page Toolbar Extensions for Angular UI #2850


User avatar
0
chris.tune@gmail.com created
  • ABP Framework version: v5.1.3
  • UI type: Angular
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): yes / no
  • Exception message and stack trace:
  • Steps to reproduce the issue:"

Hi, I'm trying to follow the article for extending the Angular UI but I can't get it working at all. https://docs.abp.io/en/abp/latest/UI/Angular/Page-Toolbar-Extensions

It cant find the right imports and I'm wondering if the article is out of date?

Is there a current sample that shows adding a toolbar component?

Cheers Chris

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

4 Answer(s)
  • User Avatar
    0
    mahmut.gundogdu created

    Hi Chris.

    The article works, but some references of objects are different for the Abp Commercial project.

    import { ToolbarAction, ToolbarActionList } from '@abp/ng.theme.shared/extensions'; import { eIdentityComponents, IdentityToolbarActionContributors } from '@volo/abp.ng.identity'; import { IdentityUserDto } from '@volo/abp.ng.identity/proxy'; I have tested, and the references work.

    import { eIdentityComponents, IdentityToolbarActionContributors } from '@abp/ng.identity';
    import { IdentityUserDto } from '@abp/ng.identity/proxy';
    import { ToolbarActionList, ToolbarComponent } from '@abp/ng.theme.shared/extensions';
    import { ClickMeButtonComponent } from './click-me-button.component';
    
    const logUserNames = new ToolbarComponent<IdentityUserDto[]>({
      component: ClickMeButtonComponent,
      // See ToolbarActionOptions in API section for all options
    });
    
    export function logUserNamesContributor(actionList: ToolbarActionList<IdentityUserDto[]>) {
      actionList.addHead(logUserNames);
    }
    
    export const identityToolbarActionContributors: IdentityToolbarActionContributors = {
      // enum indicates the page to add contributors to
      [eIdentityComponents.Users]: [
        logUserNamesContributor,
        // You can add more contributors here
      ],
    };
    
    
    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    chris.tune@gmail.com created

    Great thanks for the clarification :)

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    chris.tune@gmail.com created

    Can I double-check the route as well. At the moment the commercial template uses the following in the route module:

    { path: 'identity', loadChildren: () => import('@volo/abp.ng.identity').then(m => m.IdentityModule.forLazy()), },

    Does this need to be changed to @abp/ng.identity ?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    mahmut.gundogdu created

    es this need to be changed to

    No. it should be

      {
        path: 'identity',
        loadChildren: () => import('@volo/abp.ng.identity').then(m => m.IdentityModule.forLazy()),
      },
    

    You should import only ToolbarAction, ToolbarActionList from @abp. anothers should import from @volo

    'import { ToolbarAction, ToolbarActionList } from '@abp/ng.theme.shared/extensions'

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.8.0-preview. Updated on September 16, 2026, 14:50
1
ABP Assistant
🔐 You need to be logged in to use the chatbot. Please log in first.