docs: Components module revamp

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

@@ -2,7 +2,7 @@ import { Component, ChangeDetectionStrategy } from "@angular/core";
 import { Link } from "./../../link";
 
 let menuLinks = [
-    new Link("Using Connectivity", "/connectivity/using-connectivity"),
+    new Link("Usage", "/connectivity/usage"),
 ];
 
 @Component({

app/ng-framework-modules-category/connectivity/connectivity-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 { ConnectivityExamplesComponent } from "./connectivity-examples.component";
-import { UsingConnectivityExampleComponent } from "./using-connectivity/using-connectivity.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: ConnectivityExamplesComponent
     },
     {
-        path: "using-connectivity",
-        component: UsingConnectivityExampleComponent,
-        data: { title: "Using connectivity" }
+        path: "usage",
+        component: UsageComponent,
+        data: { title: "Usage" }
     }
 ];
 
@@ -25,7 +25,7 @@ export const routerConfig = [
         NativeScriptRouterModule,
         NativeScriptRouterModule.forChild(routerConfig)
     ],
-    declarations: [ConnectivityExamplesComponent, UsingConnectivityExampleComponent]
+    declarations: [ConnectivityExamplesComponent, UsageComponent]
 })
 
 export class ConnectivityExamplesModule {

app/ng-framework-modules-category/connectivity/end.md

@@ -1,2 +1,20 @@
+## Methods
 
-**API Reference for the** [Connectivity Class](https://docs.nativescript.org/api-reference/modules/_connectivity_.html)
+| Name     | Type    | Description    |
+|----------|---------|----------------|
+| `getConnectionType`   | `number` | Gets the type of connection. Returns a value from the `connectivityModule.connectionType` enumeration. To use this method on Android you need to have the **android.permission.ACCESS_NETWORK_STATE** permission added to the **AndroidManifest.xml** file. |
+| `startMonitoring(connectionTypeChangedCallback: function)`   | `void` | Starts monitoring the connection type. |
+| `stopMonitoring`   | `void` | Stops monitoring the connection type. |
+
+## API References
+
+| Name     | Type    | 
+|----------|---------|
+| [tns-core-modules/connectivity](https://docs.nativescript.org/api-reference/modules/_connectivity_.html) | `Module` | 
+| [connectionTypoe](https://docs.nativescript.org/api-reference/enums/_connectivity_.connectiontype) | `Enum` | 
+
+## Native Component
+
+| Android               | iOS      |
+|:----------------------|:---------|
+| [CONNECTIVITY_SERVICE (android.content.Context)](https://developer.android.com/reference/android/content/Context) | [SCNetworkReachability](https://developer.apple.com/documentation/systemconfiguration/scnetworkreachability-g7d) | 

app/ng-framework-modules-category/connectivity/overview.md

@@ -0,0 +1 @@
+The connectivity module provides a common abstraction of the functionality responsible for receiving information about the connection type and availability of the network.

app/ng-framework-modules-category/connectivity/usage/article.md

@@ -0,0 +1 @@
+<snippet id='connectivity-start-code'/>

app/ng-framework-modules-category/connectivity/usage/usage.component.ts

@@ -0,0 +1,69 @@
+// >> connectivity-start-code
+import { Component, OnInit, OnDestroy } from "@angular/core";
+import { 
+    getConnectionType, 
+    startMonitoring, 
+    stopMonitoring 
+} from "tns-core-modules/connectivity";
+import * as connectivityModule from "tns-core-modules/connectivity";
+
+@Component({
+    moduleId: module.id,
+    templateUrl: "./usage.component.html"
+})
+
+export class UsageComponent implements OnInit, OnDestroy {
+    connectionType: string;
+
+    constructor() {
+        let type = getConnectionType();
+
+        switch (type) {
+            case connectivityModule.connectionType.none:
+                this.connectionType = "None";
+                break;
+            case connectivityModule.connectionType.wifi:
+                this.connectionType = "Wi-Fi";
+                break;
+            case connectivityModule.connectionType.mobile:
+                this.connectionType = "Mobile";
+                break;
+            case connectivityModule.connectionType.bluetooth:
+                this.connectionType = "Bluetooth";
+                break;
+            default:
+                break;
+        }
+    }
+
+    ngOnInit() {
+        startMonitoring((type) => {
+            switch (type) {
+                case connectivityModule.connectionType.none:
+                    this.connectionType = "None";
+                    console.log("Connection type changed to none.");
+                    break;
+                case connectivityModule.connectionType.wifi:
+                    this.connectionType = "Wi-Fi";
+                    console.log("Connection type changed to WiFi.");
+                    break;
+                case connectivityModule.connectionType.mobile:
+                    this.connectionType = "Mobile";
+                    console.log("Connection type changed to mobile.");
+                    break;
+                case connectivityModule.connectionType.bluetooth:
+                    this.connectionType = "Bluetooth";
+                    console.log("Connection type changed to Bluetooth.");
+                    break;
+                default:
+                    break;
+            }
+        });
+    }
+
+    ngOnDestroy() {
+        // Stoping the connection monitoring
+        stopMonitoring();
+    }
+}
+// << connectivity-start-code