diff --git a/docs/en/Angular/AddingASettingsTab/images/custom-settings.png b/docs/en/Angular/AddingASettingsTab/images/custom-settings.png new file mode 100644 index 0000000000..32d7516849 Binary files /dev/null and b/docs/en/Angular/AddingASettingsTab/images/custom-settings.png differ diff --git a/docs/en/Angular/AddingASettingsTab/index.md b/docs/en/Angular/AddingASettingsTab/index.md new file mode 100644 index 0000000000..f402d6ec50 --- /dev/null +++ b/docs/en/Angular/AddingASettingsTab/index.md @@ -0,0 +1,43 @@ +## Creating a Settings Tab + +There are several settings tabs from different modules. You can add custom settings tabs to your project in 3 steps. + +1. Create a Component + +```ts +import { Select } from '@ngxs/store'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-your-custom-settings', + template: ` + your-custom-settings works! mySetting: {{ mySetting$ | async }} + `, +}) +export class YourCustomSettingsComponent { + @Select(ConfigState.getSetting('MyProjectName.MySetting1')) // Gets a setting. MyProjectName.MySetting1 is a setting key. + mySetting$: Observable; // The selected setting is set to the mySetting variable as Observable. +} +``` + +2. Add the `YourCustomSettingsComponent` to `declarations` and the `entryComponents` arrays in the `AppModule`. + +3. Open the `app.component.ts` and add the below content to the `ngOnInit` + +```ts +import { addSettingTab } from '@abp/ng.theme.shared'; +// ... + +ngOnInit() { + addSettingTab({ + component: YourCustomSettingsComponent, + name: 'Type here the setting tab title (you can type a localization key, e.g: AbpAccount::Login', + order: 4, + requiredPolicy: 'type here a policy key' + }); +} +``` + +Open the `setting-management` page to see the changes: + +![Custom Settings Tab](./images/custom-settings.png) diff --git a/docs/en/Angular/Localization/Index.md b/docs/en/Angular/Localization/Index.md new file mode 100644 index 0000000000..f78899ca53 --- /dev/null +++ b/docs/en/Angular/Localization/Index.md @@ -0,0 +1,111 @@ +## Localization in Angular Projects + +There are three ways to use localization in your project: + +- Via [localization pipe](#using-the-localization-pipe) in your component's template +- Via [localization service](#using-the-localization-service) in your TypeScript files. +- Via [the Config State](#using-the-config-state) + +Before you read about _the Localization Pipe_ and _the Localization Service_, you should know about localization keys. + +The Localization key format consists of 2 sections which are **Resource Name** and **Key**. +`{{ ResourceName::Key }}` + +> If you do not specify the resource name, it will be `defaultResourceName` which declared in _environment.ts_ + +```ts +const environment = { + localization: { + defaultResourceName: 'MyProjectName', + }, +}; +``` + +So this two are the same: + +```html +

{{ '::Key' | abpLocalization }}

+ +

{{ 'MyProjectName::Key' | abpLocalization }}

+``` + +### Using the Localization Pipe + +You can use the `abpLocalization` pipe to get localized text as in this example: + +```html +

{{ 'Resource::Key' | abpLocalization }}

+``` + +The pipe will replace the key with the localized text. + +You can also specify a default value using [`LocalizationWithDefault`](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/config.ts#L34) interface as followed: + +```html +

{{ { key: 'Resource::Key', defaultValue: 'Default Value' } | abpLocalization }}

+``` + +To use interpolation, you must give the values for interpolation as pipe parameters: + +```html +

{{ 'Resource::Key' | abpLocalization:'Parameter 1':'Parameter 2' }}

+``` + +### Using the Localization Service + +First of all you should import the `LocalizationService` from **@abp/ng.core** + +```ts +import { LocalizationService } from '@abp/ng.core'; + +class MyClass { + constructor(private localizationService: LocalizationService) {} +} +``` + +After that, you are able to use localization service. + +```ts +this.localizationService.instant('Resource::Key'); + +// with fallback value +this.localizationService.instant({ key: 'Resource::Key', defaultValue: 'Default Value' }); +``` + +To get a localized text as [_Observable_](https://rxjs.dev/guide/observable) use `get` method instead of `instant`: + +```ts +this.localizationService.get('Resource::Key'); + +// with fallback value +this.localizationService.get({ key: 'Resource::Key', defaultValue: 'Default Value' }); +``` + +### Using the Config State + +In order to you `getLocalization` method you should import ConfigState. + +```ts +import { ConfigState } from '@abp/ng.core'; +``` + +Then you can use it as followed: + +```ts +this.store.selectSnapshot(ConfigState.getLocalization('ResourceName::Key')); +``` + +`getLocalization` method can be used with both `localization key` and [`LocalizationWithDefault`](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/config.ts#L34) interface. + +```ts +this.store.selectSnapshot( + ConfigState.getLocalization({ + key: 'ResourceName::Key', + defaultValue: 'Default Value', + }), +); +``` + +--- + +Localization resources are stored in the `localization` property of `ConfigState`. diff --git a/docs/en/Angular/PermissionManagement/index.md b/docs/en/Angular/PermissionManagement/index.md new file mode 100644 index 0000000000..f1c3fdc816 --- /dev/null +++ b/docs/en/Angular/PermissionManagement/index.md @@ -0,0 +1,52 @@ +## Permission Management in Angular Projects + +To get permission of authenticated user you can use `getGrantedPolicy` method of `ConfigState`. + +You can use it as store selector: + +```ts +this.store.selectSnapshot(ConfigState.getGrantedPolicy('AbpIdentity.Roles.Create')); +``` + +Or you can use it via `ConfigStateService`: + +```ts +this.configStateService.getGrantedPolicy('AbpIdentity.Roles.Create'); +``` + +### Permission Directive + +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. +
+``` + +As shown above you can remove elements from DOM with structural abpPermission 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. + +Add `requiredPolicy` to the data of the route in your routing module. + +```ts +const routes: Routes = [ + { + path: 'path', + component: YourComponent, + canActivate: [PermissionGuard], + data: { + requiredPolicy: 'AbpIdentity.Roles.Create', + }, + }, +]; +``` + +--- + +Policies and Granted Policies are stored in the `auth` property of `ConfigState`.