Merge pull request #3094 from abpframework/docs/custom-setting-page

docs(angular): custom setting page document

docs/en/UI/Angular/Component-Replacement.md

@@ -31,18 +31,22 @@ export class AppComponent {
 
 ## Available Replaceable Components
 
-| Component key                                      | Description             |
-|----------------------------------------------------|-------------------------|
-| Account.LoginComponent                             | Login page              |
-| Account.RegisterComponent                          | Register page           |
-| Account.ManageProfileComponent                     | Manage Profile page     |
-| Account.AuthWrapperComponent                             | This component wraps register and login pages |
-| Account.ChangePasswordComponent                             | Change password form |
-| Account.PersonalSettingsComponent                             | Personal settings form |
-| Account.TenantBoxComponentInputs                             | Tenant changing box |
-| FeatureManagement.FeatureManagementComponent       | Features modal          |
-| Identity.UsersComponent                            | Users page              |
-| Identity.RolesComponent                            | Roles page              |
-| PermissionManagement.PermissionManagementComponent | Permissions modal       |
-| SettingManagement.SettingManagementComponent       | Setting Management page |
-| TenantManagement.TenantsComponent                  | Tenants page            |
+| Component key                                      | Description                                   |
+| -------------------------------------------------- | --------------------------------------------- |
+| Account.LoginComponent                             | Login page                                    |
+| Account.RegisterComponent                          | Register page                                 |
+| Account.ManageProfileComponent                     | Manage Profile page                           |
+| Account.AuthWrapperComponent                       | This component wraps register and login pages |
+| Account.ChangePasswordComponent                    | Change password form                          |
+| Account.PersonalSettingsComponent                  | Personal settings form                        |
+| Account.TenantBoxComponentInputs                   | Tenant changing box                           |
+| FeatureManagement.FeatureManagementComponent       | Features modal                                |
+| Identity.UsersComponent                            | Users page                                    |
+| Identity.RolesComponent                            | Roles page                                    |
+| PermissionManagement.PermissionManagementComponent | Permissions modal                             |
+| SettingManagement.SettingManagementComponent       | Setting Management page                       |
+| TenantManagement.TenantsComponent                  | Tenants page                                  |
+
+## What's Next?
+
+- [Custom Setting Page](./Custom-Setting-Page.md)

docs/en/UI/Angular/AddingSettingTab.md → docs/en/UI/Angular/Custom-Setting-Page.md

@@ -1,4 +1,4 @@
-## Creating a Settings Tab
+# Custom Setting Page
 
 There are several settings tabs from different modules. You can add custom settings tabs to your project in 3 steps.
 
@@ -11,12 +11,11 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-your-custom-settings',
   template: `
-    your-custom-settings works! mySetting: {%{{{ mySetting$ | async }}}%}
+    custom-settings works! 
   `,
 })
 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.
+  // Your component logic
 }
 ```
 

docs/en/docs-nav.json

@@ -328,6 +328,10 @@
             {
               "text": "Component Replacement",
               "path": "UI/Angular/Component-Replacement.md"
+            },
+            {
+              "text": "Custom Setting Page",
+              "path": "UI/Angular/Custom-Setting-Page.md"
             }
           ]
         }