- 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)
-
0
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 ], };
-
0
Great thanks for the clarification :)
-
0
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 ?
-
0
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'