diff --git a/app/ng-framework-modules-category/connectivity/connectivity-examples.component.ts b/app/ng-framework-modules-category/connectivity/connectivity-examples.component.ts index a3ce3b8d..39079f91 100644 --- a/app/ng-framework-modules-category/connectivity/connectivity-examples.component.ts +++ b/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({ diff --git a/app/ng-framework-modules-category/connectivity/connectivity-examples.module.ts b/app/ng-framework-modules-category/connectivity/connectivity-examples.module.ts index ca1114c5..3703d689 100644 --- a/app/ng-framework-modules-category/connectivity/connectivity-examples.module.ts +++ b/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 { diff --git a/app/ng-framework-modules-category/connectivity/end.md b/app/ng-framework-modules-category/connectivity/end.md index 6982dbae..c05cc0de 100644 --- a/app/ng-framework-modules-category/connectivity/end.md +++ b/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) \ No newline at end of file +| 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) | diff --git a/app/ng-framework-modules-category/connectivity/overview.md b/app/ng-framework-modules-category/connectivity/overview.md index e69de29b..a3ec8f9c 100644 --- a/app/ng-framework-modules-category/connectivity/overview.md +++ b/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. \ No newline at end of file diff --git a/app/ng-framework-modules-category/connectivity/usage/article.md b/app/ng-framework-modules-category/connectivity/usage/article.md new file mode 100644 index 00000000..ff15e923 --- /dev/null +++ b/app/ng-framework-modules-category/connectivity/usage/article.md @@ -0,0 +1 @@ + diff --git a/app/ng-framework-modules-category/connectivity/using-connectivity/using-connectivity.component.html b/app/ng-framework-modules-category/connectivity/usage/usage.component.html similarity index 100% rename from app/ng-framework-modules-category/connectivity/using-connectivity/using-connectivity.component.html rename to app/ng-framework-modules-category/connectivity/usage/usage.component.html diff --git a/app/ng-framework-modules-category/connectivity/usage/usage.component.ts b/app/ng-framework-modules-category/connectivity/usage/usage.component.ts new file mode 100644 index 00000000..7b8456c4 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/app/ng-framework-modules-category/connectivity/using-connectivity/article.md b/app/ng-framework-modules-category/connectivity/using-connectivity/article.md deleted file mode 100644 index 3d1b709b..00000000 --- a/app/ng-framework-modules-category/connectivity/using-connectivity/article.md +++ /dev/null @@ -1,11 +0,0 @@ -### Import Connectivity Module - - -### Getting Connection Type - - -### Start Monitoring Connection Type. - - -### Stop Monitoring Connection Type. - \ No newline at end of file diff --git a/app/ng-framework-modules-category/connectivity/using-connectivity/using-connectivity.component.ts b/app/ng-framework-modules-category/connectivity/using-connectivity/using-connectivity.component.ts deleted file mode 100644 index 67ab54d8..00000000 --- a/app/ng-framework-modules-category/connectivity/using-connectivity/using-connectivity.component.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { Component, OnInit, OnDestroy } from "@angular/core"; -// >> connectivity-import-code -import * as connectivity from "tns-core-modules/connectivity"; -// << connectivity-import-code -@Component({ - moduleId: module.id, - templateUrl: "./using-connectivity.component.html" -}) - -export class UsingConnectivityExampleComponent implements OnInit, OnDestroy { - public connectionType: string; - - constructor() { - // >> connectivity-gettype-code - let connectionType = connectivity.getConnectionType(); - switch (connectionType) { - case connectivity.connectionType.none: - this.connectionType = "None"; - break; - case connectivity.connectionType.wifi: - this.connectionType = "Wi-Fi"; - break; - case connectivity.connectionType.mobile: - this.connectionType = "Mobile"; - break; - // case connectivity.connectionType.bluetooth: - // this.connectionType = "Bluetooth"; // Example comng with NativeScript 5.x.x - // break; - default: - break; - } - // << connectivity-gettype-code - } - - ngOnInit() { - // >> connectivity-start-code - connectivity.startMonitoring((newConnectionType: number) => { - switch (newConnectionType) { - case connectivity.connectionType.none: - this.connectionType = "None"; - console.log("Connection type changed to none."); - break; - case connectivity.connectionType.wifi: - this.connectionType = "Wi-Fi"; - console.log("Connection type changed to WiFi."); - break; - case connectivity.connectionType.mobile: - this.connectionType = "Mobile"; - console.log("Connection type changed to mobile."); - break; - default: - break; - } - }); - // << connectivity-start-code - } - - ngOnDestroy() { - // >> connectivity-stop-code - connectivity.stopMonitoring(); - // << connectivity-stop-code - } -}