You will have access to the current entity in your code and display its value, make the column sortable, perform visibility checks, and more. You can also render custom HTML in table cells.
@@ -18,10 +18,14 @@ In this example, we will add a "Name" column and display the value of the `name`
The following code prepares a constant named `identityEntityPropContributors`, ready to be imported and used in your root module:
```js
-// entity-prop-contributors.ts
+// src/app/entity-prop-contributors.ts
+import {
+ eIdentityComponents,
+ IdentityEntityPropContributors,
+ IdentityUserDto,
+} from '@abp/ng.identity';
import { EntityProp, EntityPropList, ePropType } from '@abp/ng.theme.shared/extensions';
-import { IdentityEntityPropContributors, IdentityUserDto } from '@volo/abp.ng.identity';
const nameProp = new EntityProp
+
```js
-// entity-prop-contributors.ts
+// src/app/entity-prop-contributors.ts
-import { EntityProp, EntityPropList, ePropType } from '@abp/ng.theme.shared/extensions';
-import { IdentityUserDto } from '@volo/abp.ng.identity';
-import { IdentityEntityPropContributors } from '@volo/abp.ng.identity/config';
+import {
+ eIdentityComponents,
+ IdentityEntityPropContributors,
+ IdentityUserDto,
+} from '@abp/ng.identity';
+import { EntityProp, EntityPropList } from '@abp/ng.theme.shared/extensions';
+import { of } from 'rxjs';
export function emailPropContributor(propList: EntityPropList
You can validate the field, perform visibility checks, and do more. You will also have access to the current entity when creating a contibutor for an edit form.
@@ -18,16 +18,20 @@ In this example, we will add a "Date of Birth" field in the user management page
The following code prepares two constants named `identityCreateFormPropContributors` and `identityEditFormPropContributors`, ready to be imported and used in your root module:
```js
-// form-prop-contributors.ts
+// src/app/form-prop-contributors.ts
-import { Validators } from '@angular/forms';
+import {
+ eIdentityComponents,
+ IdentityCreateFormPropContributors,
+ IdentityUserDto,
+} from '@abp/ng.identity';
import { ePropType, FormProp, FormPropList } from '@abp/ng.theme.shared/extensions';
-import { IdentityCreateFormPropContributors, IdentityEditFormPropContributors, IdentityUserDto } from '@volo/abp.ng.identity';
+import { Validators } from '@angular/forms';
const birthdayProp = new FormProp
-You can take any action (open a modal, make an HTTP API call, redirect to another page... etc) by writing your custom code. You can access to the current entity in your code.
+You can take any action (open a modal, make an HTTP API call, redirect to another page... etc) by writing your custom code. You can also access the current entity in your code.
## How to Set Up
@@ -17,10 +17,14 @@ In this example, we will add a "Click Me!" action and alert the current row's `u
The following code prepares a constant named `identityEntityActionContributors`, ready to be imported and used in your root module:
```js
-// entity-action-contributors.ts
+// src/app/entity-action-contributors.ts
+import {
+ eIdentityComponents,
+ IdentityEntityActionContributors,
+ IdentityUserDto,
+} from '@abp/ng.identity';
import { EntityAction, EntityActionList } from '@abp/ng.theme.shared/extensions';
-import { IdentityEntityActionContributors, IdentityUserDto } from '@volo/abp.ng.identity';
const alertUserName = new EntityAction
-1. Place your custom modal inside `AppComponent` template.
- ```html
- {%{{{ user.userName }}}%}
+| {%{{{ 'AbpIdentity::DisplayName:Name' | abpLocalization }}}%} | +{%{{{ user.name }}}%} | +
|---|---|
| {%{{{ 'AbpIdentity::DisplayName:Surname' | abpLocalization }}}%} | +{%{{{ user.surname }}}%} | +
| {%{{{ 'AbpIdentity::EmailAddress' | abpLocalization }}}%} | +{%{{{ user.email }}}%} | +
| {%{{{ 'AbpIdentity::PhoneNumber' | abpLocalization }}}%} | +{%{{{ user.phoneNumber }}}%} | +
You can take any action (open a modal, make an HTTP API call, redirect to another page... etc) by writing your custom code. You can also access to page data (the main record, usually an entity list) in your code. Additionally, you can pass in custom components instead of using the default button.
@@ -17,10 +17,14 @@ In this example, we will add a "Click Me!" action and log `userName` of all user
The following code prepares a constant named `identityToolbarActionContributors`, ready to be imported and used in your root module:
```js
-// toolbar-action-contributors.ts
+// src/app/toolbar-action-contributors.ts
-import { ToolbarActionList, ToolbarAction } from '@abp/ng.theme.shared/extensions';
-import { IdentityToolbarActionContributors, IdentityUserDto } from '@volo/abp.ng.identity';
+import {
+ eIdentityComponents,
+ IdentityToolbarActionContributors,
+ IdentityUserDto,
+} from '@abp/ng.identity';
+import { ToolbarAction, ToolbarActionList } from '@abp/ng.theme.shared/extensions';
const logUserNames = new ToolbarAction
+
### Step 1. Create A Custom Component
We need to have a component before we can pass it to the toolbar action contributors:
```js
-// click-me-button.component.ts
+// src/app/click-me-button.component.ts
-import { Component, Inject } from '@angular/core';
+import { IdentityUserDto } from '@abp/ng.identity';
import { ActionData, EXTENSIONS_ACTION_DATA } from '@abp/ng.theme.shared/extensions';
-import { IdentityUserDto } from '@volo/abp.ng.identity';
+import { Component, Inject } from '@angular/core';
@Component({
selector: 'app-click-me-button',
- template: `
-
- `,
+ template: ``,
})
export class ClickMeButtonComponent {
constructor(
@@ -112,6 +111,7 @@ export class ClickMeButtonComponent {
this.data.record.forEach(user => console.log(user.userName));
}
}
+
```
Here, `EXTENSIONS_ACTION_DATA` token provides us the context from the page toolbar. Therefore, we are able to reach the page data via `record`, which is an array of users, i.e. `IdentityUserDto[]`.
@@ -123,11 +123,14 @@ Here, `EXTENSIONS_ACTION_DATA` token provides us the context from the page toolb
The following code prepares a constant named `identityToolbarActionContributors`, ready to be imported and used in your root module. When `ToolbarComponent` is used instead of `ToolbarAction`, we can pass a component in:
```js
-// toolbar-action-contributors.ts
+// src/app/toolbar-action-contributors.ts
+import {
+ eIdentityComponents,
+ IdentityToolbarActionContributors,
+ IdentityUserDto,
+} from '@abp/ng.identity';
import { ToolbarActionList, ToolbarComponent } from '@abp/ng.theme.shared/extensions';
-import { IdentityUserDto } from '@volo/abp.ng.identity';
-import { IdentityToolbarActionContributors } from '@volo/abp.ng.identity/config';
import { ClickMeButtonComponent } from './click-me-button.component';
const logUserNames = new ToolbarComponent