Merge pull request #5949 from abpframework/docs/5332

Created features document for the Angular UI

docs/en/UI/Angular/Config-State.md

@@ -93,17 +93,6 @@ const searchUrl = this.config.getApiUrl("search");
 
 This method returns the `url` of a specific API based on the key given as its only parameter. If there is no key, `'default'` is used.
 
-### How to Get a Specific Feature From the Store
-
-You can use the `getFeature` method of `ConfigStateService` to get a specific feature from the configuration state. Here is an example:
-
-```js
-// this.config is instance of ConfigStateService
-
-const isChatEnabled = this.config.getFeature("Chat.Enable");
-// 'en'
-```
-
 ### How to Get a Specific Permission From the Store
 
 You can use the `getGrantedPolicy` method of `ConfigStateService` to get a specific permission from the configuration state. For that, you should pass a policy key as parameter to the method.
@@ -200,6 +189,7 @@ Please refer to `Config.Environment` type for all the properties you can pass to
 ## See Also
 
 - [Settings](./Settings.md)
+- [Features](./Features.md)
 
 ## What's Next?
 

docs/en/UI/Angular/Features.md

@@ -1,3 +1,37 @@
-# Angular UI: Features
+# Features
 
-> This document explains how to get feature values in an Angular application. See the [Features document](../../Features.md) to learn the feature system.
+You can get the value of a feature on the client-side using the [config state service](./Config-State.md) if it is allowed by the feature definition on the server-side.
+
+> This document explains how to get feature values in an Angular application. See the [Features document](../../Features.md) to learn the feature system.
+
+## Before Use
+
+To use the `ConfigStateService`, you must inject it in your class as a dependency. You do not have to provide the service explicitly, because it is already **provided in root**.
+
+```js
+import { ConfigStateService } from '@abp/ng.core';
+
+@Component({
+  /* class metadata here */
+})
+class DemoComponent {
+  constructor(private config: ConfigStateService) {}
+}
+```
+
+## How to Get a Specific Feature
+
+You can use the `getFeature` method of `ConfigStateService` to get a specific feature from the configuration state. Here is an example:
+
+```js
+// this.config is instance of ConfigStateService
+
+const defaultLang = this.config.getFeature("Identity.TwoFactor");
+// 'Optional'
+```
+
+You can then check the value of the feature to perform your logic. Please note that **feature keys are case-sensitive**.
+
+## What's Next?
+
+- [Permission Management](./Permission-Management.md)

docs/en/UI/Angular/Settings.md

@@ -56,4 +56,4 @@ Beware though, **settings search is case-sensitive**.
 
 ## What's Next?
 
-- [Permission Management](./Permission-Management.md)
+- [Features](./Features.md)

docs/en/docs-nav.json

@@ -588,6 +588,10 @@
                   "text": "Settings",
                   "path": "UI/Angular/Settings.md"
                 },
+                {
+                  "text": "Features",
+                  "path": "UI/Angular/Features.md"
+                },
                 {
                   "text": "Permission Management",
                   "path": "UI/Angular/Permission-Management.md"