docs: refactor angular docs

docs/en/Authorization.md

@@ -367,4 +367,4 @@ This is already done for the startup template integration tests.
 
 * [Permission Management Module](Modules/Permission-Management.md)
 * [ASP.NET Core MVC / Razor Pages JavaScript Auth API](API/JavaScript-API/Auth.md)
-* [Permissions in Angular Projects](UI/Angular/PermissionManagement/index)
+* [Permissions in Angular Projects](UI/Angular/PermissionManagement.md)

docs/en/Localization.md

@@ -190,4 +190,8 @@ Localize a string:
 
 ````js
 var str = testResource('HelloWorld');
-````
+````
+
+## See Also
+
+* [Localization in Angular UI](UI/Angular/Localization.md)

docs/en/UI/Angular/AddingSettingTab.md

@@ -11,7 +11,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-your-custom-settings',
   template: `
-    your-custom-settings works! mySetting: {%{{ mySetting$ | async }}%}
+    your-custom-settings works! mySetting: {%{{{ mySetting$ | async }}}%}
   `,
 })
 export class YourCustomSettingsComponent {

docs/en/UI/Angular/ComponentReplacement.md

@@ -27,7 +27,7 @@ export class AppComponent {
 }
 ```
 
-![Example Usage](./images/inaction.gif)
+![Example Usage](./images/component-replacement.gif)
 
 ## Available Replaceable Components
 

docs/en/UI/Angular/Localization.md

@@ -1,17 +1,11 @@
 ## Localization in Angular Projects
 
-There are three ways to use localization in your project:
-
-- [Localization pipe](#using-the-localization-pipe) in your component's template
-- [Localization service](#using-the-localization-service) in your TypeScript files.
-- [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 is declared in _environment.ts_
+> If you do not specify the resource name, it will be `defaultResourceName` which is declared in `environment.ts`
 
 ```js
 const environment = {
@@ -25,9 +19,9 @@ const environment = {
 So these two are the same:
 
 ```html
-<h1>{%{{ '::Key' | abpLocalization }}%}</h1>
+<h1>{%{{{ '::Key' | abpLocalization }}}%}</h1>
 
-<h1>{%{{ 'MyProjectName::Key' | abpLocalization }}%}</h1>
+<h1>{%{{{ 'MyProjectName::Key' | abpLocalization }}}%}</h1>
 ```
 
 ### Using the Localization Pipe
@@ -35,7 +29,7 @@ So these two are the same:
 You can use the `abpLocalization` pipe to get localized text as in this example:
 
 ```html
-<h1>{%{{ 'Resource::Key' | abpLocalization }}%}</h1>
+<h1>{%{{{ 'Resource::Key' | abpLocalization }}}%}</h1>
 ```
 
 The pipe will replace the key with the localized text.
@@ -43,7 +37,7 @@ The pipe will replace the key with the localized text.
 You can also specify a default value as shown below:
 
 ```html
-<h1>{%{{ { key: 'Resource::Key', defaultValue: 'Default Value' } | abpLocalization }}%}</h1>
+<h1>{%{{{ { key: 'Resource::Key', defaultValue: 'Default Value' } | abpLocalization }}}%}</h1>
 ```
 
 To use interpolation, you must give the values for interpolation as pipe parameters, for example:
@@ -53,7 +47,7 @@ Localization data is stored in key-value pairs:
 ```js
 {
   //...
-  AbpAccount: { // This is the resource name
+  AbpAccount: { // AbpAccount is the resource name
     Key: "Value",
     PagerInfo: "Showing {0} to {1} of {2} entries"
   }
@@ -63,7 +57,7 @@ Localization data is stored in key-value pairs:
 So we can use this key like this:
 
 ```html
-<h1>{%{{ 'AbpAccount::PagerInfo' | abpLocalization:'20':'30':'50' }}%}</h1>
+<h1>{%{{{ 'AbpAccount::PagerInfo' | abpLocalization:'20':'30':'50' }}}%}</h1>
 
 <!-- Output: Showing 20 to 30 of 50 entries -->
 ```
@@ -134,6 +128,9 @@ this.store.selectSnapshot(
 );
 ```
 
----
-
 Localization resources are stored in the `localization` property of `ConfigState`.
+
+
+## See Also
+
+* [Localization in ASP.NET Core](../../Localization.md)

docs/en/UI/Angular/PermissionManagement.md

@@ -72,6 +72,8 @@ const routes: Routes = [
 ];
 ```
 
----
-
 Granted Policies are stored in the `auth` property of `ConfigState`.
+
+## See Also
+
+* [Authorization](../../Authorization.md)

docs/en/docs-nav.json

@@ -300,32 +300,6 @@
         }
       ]
     },
-    {
-      "text": "User Interface",
-      "items": [
-        {
-          "text": "Angular",
-          "items": [
-            {
-              "text": "Localization",
-              "path": "Angular/Localization/Index.md"
-            },
-            {
-              "text": "Adding a Settings Tab",
-              "path": "Angular/AddingASettingsTab/index.md"
-            },
-            {
-              "text": "Permission",
-              "path": "Angular/PermissionManagement/index.md"
-            },
-            {
-              "text": "Component Replacement",
-              "path": "Angular/ReplaceableComponents/index.md"
-            }
-          ]
-        }
-      ]
-    },
     {
       "text": "Data Access",
       "path": "Data-Access.md",