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


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
      ],
    };
    
    
  • User Avatar
    0
    chris.tune@gmail.com created

    Great thanks for the clarification :)

  • 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 ?

  • 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'

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11