diff --git a/docs/en/Angular/PermissionManagement/index.md b/docs/en/Angular/PermissionManagement/index.md index f1c3fdc816..bf46635be9 100644 --- a/docs/en/Angular/PermissionManagement/index.md +++ b/docs/en/Angular/PermissionManagement/index.md @@ -1,17 +1,38 @@ ## Permission Management in Angular Projects -To get permission of authenticated user you can use `getGrantedPolicy` method of `ConfigState`. +You can get permission of authenticated user using `getGrantedPolicy` selector of `ConfigState`. -You can use it as store selector: +You can get permission as boolean value from store: ```ts -this.store.selectSnapshot(ConfigState.getGrantedPolicy('AbpIdentity.Roles.Create')); +import { Store } from '@ngxs/store'; +import { ConfigState } from '../states'; + +export class YourComponent { + constructor(private store: Store) {} + + ngOnInit(): void { + const canCreate = this.store.selectSnapshot(ConfigState.getGrantedPolicy('AbpIdentity.Roles.Create')); + } + + // ... +} ``` -Or you can use it via `ConfigStateService`: +Or you can get it via `ConfigStateService`: ```ts -this.configStateService.getGrantedPolicy('AbpIdentity.Roles.Create'); +import { ConfigStateService } from '../services/config-state.service'; + +export class YourComponent { + constructor(private configStateService: ConfigStateService) {} + + ngOnInit(): void { + const canCreate = this.configStateService.getGrantedPolicy('AbpIdentity.Roles.Create'); + } + + // ... +} ``` ### Permission Directive @@ -19,20 +40,20 @@ this.configStateService.getGrantedPolicy('AbpIdentity.Roles.Create'); You can use the `PermissionDirective` to manage visibility of a DOM Element accordingly to user's permission. ```html -
- This content is only visible if the user has 'Policy Key' permission. +
+ This content is only visible if the user has 'AbpIdentity.Roles' permission.
``` -As shown above you can remove elements from DOM with structural abpPermission directive. +As shown above you can remove elements from DOM with `abpPermission` structural directive. The directive can also be used as an attribute directive but we recommend to you to use it as a structural directive. ### Permission Guard -Use can use `PermissionGuard` if you want to control authenticated user's permission before navigating to the route. +You can use `PermissionGuard` if you want to control authenticated user's permission to access to the route during navigation. -Add `requiredPolicy` to the data of the route in your routing module. +Add `requiredPolicy` to the `routes` property in your routing module. ```ts const routes: Routes = [ @@ -41,7 +62,9 @@ const routes: Routes = [ component: YourComponent, canActivate: [PermissionGuard], data: { - requiredPolicy: 'AbpIdentity.Roles.Create', + routes: { + requiredPolicy: 'AbpIdentity.Roles.Create', + }, }, }, ]; @@ -49,4 +72,4 @@ const routes: Routes = [ --- -Policies and Granted Policies are stored in the `auth` property of `ConfigState`. +Granted Policies are stored in the `auth` property of `ConfigState`. diff --git a/docs/en/Angular/ReplaceableComponents/index.md b/docs/en/Angular/ReplaceableComponents/index.md index 38cd634170..f0c99d44d2 100644 --- a/docs/en/Angular/ReplaceableComponents/index.md +++ b/docs/en/Angular/ReplaceableComponents/index.md @@ -1,14 +1,18 @@ -## Replaceable Components +# Component Replacement in Angular -There is a list of components that you can replace at runtime. +You can replace some ABP components with your custom components. -Create a new component that you want to use instead of the ABP component. Add that component to `declarations` and `entryComponents` in the `AppModule`. +The reason that you **can replace** but **cannot customize** default ABP components is disabling or changing a part of that component can cause problems. So we named those components as _Replaceable Components_. + +## How to Use Replaceable Components + +Create a new component that you want to use instead of an ABP component. Add that component to `declarations` and `entryComponents` in the `AppModule`. Then, open the `app.component.ts` and dispatch the `AddReplaceableComponent` action to replace your component with an ABP component as shown below: ```ts import { ..., AddReplaceableComponent } from '@abp/ng.core'; -export class AppComponent implements OnInit { +export class AppComponent { constructor(..., private store: Store) {} ngOnInit() { @@ -23,35 +27,32 @@ export class AppComponent implements OnInit { } ``` -An example: ![Example Usage](./images/inaction.gif) -> You can use `getAll` and `getComponent('Component Key')` selectors to get all replaceable components or just one of them by key. - -### Available Replaceable Components - -| Component key | Description | -| -------------------------------------------------- | -------------------------------- | -| Account.LoginComponent | Login page | -| Account.RegisterComponent | Register page | -| Account.ManageProfileComponent | Manage Profile page | -| Account.ForgotPasswordComponent | Forgot password page | -| Account.ResetPasswordComponent | Reset password page | -| Account.AccountComponent | The component that wraps register, login, forgot password, and reset password pages. Contains `` | -| Account.ChangePasswordComponent | Change password form in manage profile page | -| Account.PersonalSettingsComponent | Personal settings form in manage profile page | -| Account.TenantBoxComponent | Tenant changing box in account component | -| AuditLogging.AuditLogsComponent | Audit logs page | -| Identity.UsersComponent | Users page | -| Identity.RolesComponent | Roles page | -| Identity.ClaimsComponent | Claim types page | -| IdentityServer.IdentityResource | Identity resources page | -| IdentityServer.Client | Clients page | -| IdentityServer.ApiResource | Api resources page | -| LanguageManagement.Languages | Languages page | -| LanguageManagement.LanguageTexts | Language texts page | -| Saas.TenantsComponent | Tenants page | -| Saas.EditionsComponent | Editions page | -| FeatureManagement.FeatureManagementComponent | Features modal | -| PermissionManagement.PermissionManagementComponent | Permissions modal | -| SettingManagement.SettingManagementComponent | Setting Management page | +## Available Replaceable Components + +| Component key | Description | +| -------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | +| Account.LoginComponent | Login page | +| Account.RegisterComponent | Register page | +| Account.ManageProfileComponent | Manage Profile page | +| Account.ForgotPasswordComponent | Forgot password page | +| Account.ResetPasswordComponent | Reset password page | +| Account.AccountComponent | The component that wraps register, login, forgot password, and reset password pages. Contains `` | +| Account.ChangePasswordComponent | Change password form in manage profile page | +| Account.PersonalSettingsComponent | Personal settings form in manage profile page | +| Account.TenantBoxComponent | Tenant changing box in account component | +| AuditLogging.AuditLogsComponent | Audit logs page | +| Identity.UsersComponent | Users page | +| Identity.RolesComponent | Roles page | +| Identity.ClaimsComponent | Claim types page | +| IdentityServer.IdentityResource | Identity resources page | +| IdentityServer.Client | Clients page | +| IdentityServer.ApiResource | Api resources page | +| LanguageManagement.Languages | Languages page | +| LanguageManagement.LanguageTexts | Language texts page | +| Saas.TenantsComponent | Tenants page | +| Saas.EditionsComponent | Editions page | +| FeatureManagement.FeatureManagementComponent | Features modal | +| PermissionManagement.PermissionManagementComponent | Permissions modal | +| SettingManagement.SettingManagementComponent | Setting Management page |