docs(angular): add new angular documentation

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<string>; // 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)

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
+<h1>{{ '::Key' | abpLocalization }}</h1>
+
+<h1>{{ 'MyProjectName::Key' | abpLocalization }}</h1>
+```
+
+### Using the Localization Pipe
+
+You can use the `abpLocalization` pipe to get localized text as in this example:
+
+```html
+<h1>{{ 'Resource::Key' | abpLocalization }}</h1>
+```
+
+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
+<h1>{{ { key: 'Resource::Key', defaultValue: 'Default Value' } | abpLocalization }}</h1>
+```
+
+To use interpolation, you must give the values for interpolation as pipe parameters:
+
+```html
+<h1>{{ 'Resource::Key' | abpLocalization:'Parameter 1':'Parameter 2' }}</h1>
+```
+
+### 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`.

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
+<div *abpPermission="Policy Key">
+  This content is only visible if the user has 'Policy Key' permission.
+</div>
+```
+
+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`.