docs: components revamp

app/ng-framework-modules-category/application-settings/application-settings-examples.component.ts

@@ -2,7 +2,7 @@ import { Component, ChangeDetectionStrategy } from "@angular/core";
 import { Link } from "./../../link";
 
 let menuLinks = [
-    new Link("Working with values", "/application-settings/values"),
+    new Link("Usage", "/application-settings/usage"),
 ];
 
 @Component({

app/ng-framework-modules-category/application-settings/application-settings-examples.module.ts

@@ -2,7 +2,7 @@ import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
 import { NativeScriptCommonModule } from "nativescript-angular/common";
 import { ApplicationSettingsExamplesComponent } from "./application-settings-examples.component";
-import { ValuesExampleComponent } from "./values/values.component";
+import { UsageComponent } from "./usage/usage.component";
 import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module";
 
 export const routerConfig = [
@@ -11,9 +11,9 @@ export const routerConfig = [
         component: ApplicationSettingsExamplesComponent
     },
     {
-        path: "values",
-        component: ValuesExampleComponent,
-        data: { title: "Check The Target Platform" }
+        path: "usage",
+        component: UsageComponent,
+        data: { title: "Usage" }
     }
 ];
 
@@ -25,7 +25,7 @@ export const routerConfig = [
         NativeScriptRouterModule,
         NativeScriptRouterModule.forChild(routerConfig)
 ],
-    declarations: [ApplicationSettingsExamplesComponent, ValuesExampleComponent]
+    declarations: [ApplicationSettingsExamplesComponent, UsageComponent]
 })
 
 export class ApplicationSettingsExamplesModule {

app/ng-framework-modules-category/application-settings/end.md

@@ -1,2 +1,28 @@
+## Methods
 
-**API Reference for** [Application Settings](https://docs.nativescript.org/api-reference/modules/_application_settings_.html)
+| Name     | Type    | Description    |
+|----------|---------|----------------|
+| `clear`   | `void` | Removes all stored values. |
+| `flush`   | `boolean` | Flush all changes to disk synchronously. The return flag indicates if changes were saved successfully to disk. |
+| `getAllKeys`   | `Array<string>` | Array containing all stored keys |
+| `getBoolean(key: string, deafaultValue?: boolean)`   | `boolean` | Gets a value (if existing) for a key as a Boolean Object. A default value can be provided in case there is no existing value. |
+| `getNumber(key: string, deafaultValue?: number)`   | `number` | Gets a value (if existing) for a key as a Number Object. A default value can be provided in case there is no existing value |
+| `getString(key: string, deafaultValue?: string)`   | `string` | Gets a value (if existing) for a key as a String Object. A default value can be provided in case there is no existing value. |
+| `hasKey(key: string)`   | `boolean` | Checks whether such a key exists. |
+| `remove`   | `void` | Removes an entry by its key name. |
+| `setBoolean(key: string, value: boolean)`   | `void` | Sets a Boolean Object for a key. |
+| `setNumber(key: string, value: number)`   | `void` | Sets a Number Object for a key. |
+| `setString(key: string, value: string)`   | `void` | Sets a String Object for a key. |
+
+
+## API References
+
+| Name     | Type    | 
+|----------|---------|
+| [tns-core-modules/application-settings](https://docs.nativescript.org/api-reference/modules/_application_settings_.html) | `Module` | 
+
+## Native Component
+
+| Android               | iOS      |
+|:----------------------|:---------|
+| [android.content.SharedPreferences](https://developer.android.com/reference/android/content/SharedPreferences.html) | [NSUserDefaults](https://developer.apple.com/documentation/foundation/nsuserdefaults) | 

app/ng-framework-modules-category/application-settings/overview.md

@@ -1,2 +1 @@
-The Application settings allows you to save and restore any kind of information related to your application.
-Using application settings methods requires to load "Application Settings" module.
+The `application-settings` module allows you to save and restore information related to your application.

app/ng-framework-modules-category/application-settings/usage/article.md

@@ -0,0 +1,3 @@
+Basic usage of the `application-settings` module in a component:
+
+<snippet id='app-settings-code'/>

app/ng-framework-modules-category/application-settings/usage/usage.component.html

@@ -0,0 +1,3 @@
+<StackLayout sdkExampleTitle sdkToggleNavButton>
+    <Label text="Refer to the code-behind for details" textWrap="true"></Label>
+</StackLayout>

app/ng-framework-modules-category/application-settings/usage/usage.component.ts

@@ -0,0 +1,45 @@
+// >> app-settings-code
+import { Component } from "@angular/core";
+import {
+    getBoolean,
+    setBoolean,
+    getNumber,
+    setNumber,
+    getString,
+    setString,
+    hasKey,
+    remove,
+    clear
+} from "tns-core-modules/application-settings";
+
+@Component({
+    moduleId: module.id,
+    templateUrl: "./usage.component.html"
+})
+export class UsageComponent {
+
+    constructor() {
+        setBoolean("isTurnedOn", true);
+        setString("username", "Wolfgang");
+        setNumber("locationX", 54.321);
+
+        const isTurnedOn: boolean = getBoolean("isTurnedOn");
+        const username: string = getString("username");
+        const locationX: number = getNumber("locationX");
+
+        // Will return "No string value" if there is no value for "noSuchKey"
+        const someKey: string = getString("noSuchKey", "No string value");
+
+        // Will return false if there is no key with name "noSuchKey"
+        let isKeExisting: boolean = hasKey("noSuchKey");
+    }
+
+    onClearß() {
+        // Removing a single entry via its key name
+        remove("isTurnedOn");
+
+        // Clearing the whole application-settings for this app
+        clear();
+    }
+}
+// << app-settings-code

app/ng-framework-modules-category/color/color-examples.component.ts

@@ -2,7 +2,7 @@ import { Component, ChangeDetectionStrategy } from "@angular/core";
 import { Link } from "./../../link";
 
 let menuLinks = [
-    new Link("Creating Colors", "/color/creating-colors"),
+    new Link("Usage", "/color/usage"),
 ];
 
 @Component({

app/ng-framework-modules-category/color/color-examples.module.ts

@@ -3,8 +3,7 @@ import { NativeScriptRouterModule } from "nativescript-angular/router";
 import { NativeScriptCommonModule } from "nativescript-angular/common";
 import { NativeScriptFormsModule } from "nativescript-angular/forms";
 import { ColorExamplesComponent } from "./color-examples.component";
-import { CreatingColorsExampleComponent } from "./creating-colors/creating-colors.component";
-import { HexPipe } from "./creating-colors/creating-colors.component";
+import { UsageComponent } from "./usage/usage.component";
 import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module";
 
 export const routerConfig = [
@@ -13,9 +12,9 @@ export const routerConfig = [
         component: ColorExamplesComponent
     },
     {
-        path: "creating-colors",
-        component: CreatingColorsExampleComponent,
-        data: { title: "Creating colors" }
+        path: "usage",
+        component: UsageComponent,
+        data: { title: "Usage" }
     }
 ];
 
@@ -28,7 +27,7 @@ export const routerConfig = [
         NativeScriptFormsModule,
         NativeScriptRouterModule.forChild(routerConfig)
     ],
-    declarations: [HexPipe, ColorExamplesComponent, CreatingColorsExampleComponent]
+    declarations: [ColorExamplesComponent, UsageComponent]
 })
 
 export class ColorExamplesModule {