docs: offBackgroundColor new property of Switch

app/ng-framework-modules-category/application/application-events/application-events.component.ts

@@ -1,5 +1,4 @@
 import { Component } from "@angular/core";
-
 import {
     on,
     ApplicationEventData,
@@ -24,7 +23,7 @@ let launchListener,
 
 @Component({
     moduleId: module.id,
-    templateUrl: "../app-checking-target/app-checking-target.component.html"
+    templateUrl: "./application-events.component.html"
 })
 export class ApplicationEventsComponent {
     public isItemVisible: boolean;

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

@@ -8,6 +8,7 @@ import { AppUsingIosExampleComponent } from "./app-using-ios-specifics/app-using
 import { ApplicationEventsComponent } from "./application-events/application-events.component";
 import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module";
 
+
 export const routerConfig = [
     {
         path: "",
@@ -48,7 +49,8 @@ export const routerConfig = [
         ApplicationExamplesComponent,
         AppCheckingTargetExampleComponent,
         AppUsingAndroidExampleComponent,
-        AppUsingIosExampleComponent
+        AppUsingIosExampleComponent,
+        ApplicationEventsComponent
     ]
 })
 

app/ng-ui-widgets-category/switch/basic-switch/basic-switch.component.html

@@ -1,12 +1,10 @@
-<StackLayout sdkExampleTitle sdkToggleNavButton>
-    <StackLayout class="example-container">
+<StackLayout sdkExampleTitle sdkToggleNavButton class="example-container">
+    <GridLayout rows="auto auto" columns="* *" class="m-5">
+        <Label class="h3 m-15" [text]="firstSwitchState" textWrap="true" row="0" col="0"></Label>
+        <Switch class="m-15" checked="false" (checkedChange)="onFirstChecked($event)" row="0" col="1"></Switch>
+        <Label class="h3 m-15" [text]="secondSwitchState" textWrap="true" row="1" col="0"></Label>
         <!-- >> switch-binding-html -->
-        <GridLayout rows="auto auto" columns="* *" class="m-5">
-            <Label class="h3 m-15" [text]="firstSwitchState" textWrap="true" row="0" col="0"></Label>
-            <Switch class="m-15" checked="false" (checkedChange)="onFirstChecked($event)" row="0" col="1"></Switch>
-            <Label class="h3 m-15" [text]="secondSwitchState" textWrap="true" row="1" col="0"></Label>
-            <Switch class="m-15" checked="true" (checkedChange)="onSecondChecked($event)" row="1" col="1"></Switch>
-        </GridLayout>
+        <Switch checked="true" (checkedChange)="onCheckedChange($event)" class="m-15" row="1" col="1"></Switch>
         <!-- << switch-binding-html -->
-    </StackLayout>
+    </GridLayout>
 </StackLayout>

app/ng-ui-widgets-category/switch/basic-switch/basic-switch.component.ts

@@ -1,32 +1,40 @@
-// >> switch-event-handle-code
 import { Component } from "@angular/core";
 import { Switch } from "tns-core-modules/ui/switch";
+import { EventData } from "tns-core-modules/data/observable";
 
 @Component({
     moduleId: module.id,
     templateUrl: "./basic-switch.component.html",
     styleUrls: ["./../switch.style.css"],
 })
 export class BasicSwitchComponent {
-    public firstSwitchState = "OFF";
-    public secondSwitchState = "ON";
+    firstSwitchState = "OFF";
+    secondSwitchState = "ON";
 
-    public onFirstChecked(args) {
-        let firstSwitch = <Switch>args.object;
+    onFirstChecked(args) {
+        let firstSwitch = args.object as Switch;
         if (firstSwitch.checked) {
             this.firstSwitchState = "ON";
         } else {
             this.firstSwitchState = "OFF";
         }
     }
 
-    public onSecondChecked(args) {
-        let secondSwitch = <Switch>args.object;
-        if (secondSwitch.checked) {
+    // >> switch-event-handle-code
+    // import { Switch } from "tns-core-modules/ui/switch";
+    // import { EventData } from "tns-core-modules/data/observable";
+
+    onCheckedChange(args: EventData) {
+        let mySwitch = args.object as Switch;
+        let isChecked = mySwitch.checked; // boolean
+        // >> (hide)
+        if (isChecked) {
             this.secondSwitchState = "ON";
         } else {
             this.secondSwitchState = "OFF";
         }
+        // << (hide)
     }
+    // << switch-event-handle-code
 }
-// << switch-event-handle-code
+

app/ng-ui-widgets-category/switch/disable-switch/article.md

@@ -1,3 +1,2 @@
-Set `Switch` in `HTML` code.
-Disable `Switch` control via setting `isEnabled` property to false.
+Disabling the `Switch` control via setting its `isEnabled` boolean property to `false`.
 <snippet id='disable-switch'/>

app/ng-ui-widgets-category/switch/disable-switch/disable-switch.component.html

@@ -1,17 +1,9 @@
-<StackLayout sdkExampleTitle sdkToggleNavButton>
-    <StackLayout class="example-container">
-        <!-- >> disable-switch -->
-        <GridLayout rows="auto auto" columns="* *" class="m-5">
-            <Label row="0" col="0" 
-                [text]="switch.isEnabled ? 'enabled' : 'disabled'"
-                textWrap="true" class="h3 m-15"></Label>
-            <Switch #switch class="m-15" row="0" col="1"></Switch>
+<StackLayout sdkExampleTitle sdkToggleNavButton class="example-container">
+    <Label [text]="switch.isEnabled ? 'enabled' : 'disabled'" textWrap="true" class="h3 m-15"></Label>
+    <!-- >> disable-switch -->
+    <Switch #switch isEnabled="true" class="m-15"></Switch>
 
-            <Button row="3" col="0" colSpan="2" 
-                [text]="switch.isEnabled ? 'Disable switch' : 'Enable switch'"
-                (tap)="switch.isEnabled = !switch.isEnabled"
-                horizontalAlignment="stretch" class="btn btn-primary btn-active"></Button>
-        </GridLayout>
-        <!-- << disable-switch -->
-    </StackLayout>
+    <Button [text]="switch.isEnabled ? 'Disable switch' : 'Enable switch'" (tap)="switch.isEnabled = !switch.isEnabled"
+        horizontalAlignment="stretch" class="btn btn-primary btn-active"></Button>
+    <!-- << disable-switch -->
 </StackLayout>

app/ng-ui-widgets-category/switch/styling-switch/article.md

@@ -1,5 +1,6 @@
-HTML
+The styling properties for the `Swtich` control are as follows:
+- `color`- Controls the handle color
+- `bacxgroundColor`(`background-color` in CSS) - Controls the background color while the switch is in **ON** state.
+ - `offBackgroundColor` (`off-background-color` in CSS) - Controls the background color while the switch is in **OFF** state.
 <snippet id='switch-styling-html'/>
-
-CSS
 <snippet id='switch-style-css'/>

app/ng-ui-widgets-category/switch/styling-switch/style.css

@@ -1,14 +1,14 @@
 /* >> switch-style-css */
-.firstSwitchStyle{
-    background-color: #FFFF66;
-}
-
 .secondSwitchStyle{
-    background-color: #CCFFFF;
+    color: yellow;
+    background-color: green;
+    off-background-color: red;
 }
 
 .thirdSwitchStyle{
-    opacity: 0.5;
-    background-color: #8C489F;
+    opacity: 0.8;
+    color: darkblue;
+    background-color: lightseagreen;
+    off-background-color: orangered;
 }
 /* << switch-style-css */

app/ng-ui-widgets-category/switch/styling-switch/styling-switch.component.html

@@ -1,22 +1,13 @@
-<StackLayout sdkExampleTitle sdkToggleNavButton>
-	<StackLayout class="example-container">
-		<!-- >> switch-styling-html -->
-		<GridLayout rows="auto auto auto" columns="* auto" class="m-5">
-			<Label class="h3 m-15" [text]="switch1.checked" textWrap="true" row="0" col="0"></Label>
-			<Switch #switch1 class="m-15 firstSwitchStyle" checked="true"
-				(checkedChange)="switch1.checked"
-				row="0" col="1"></Switch>
-
-			<Label class="h3 m-15" [text]="switch2.checked" textWrap="true" row="1" col="0"></Label>
-			<Switch #switch2 class="m-15 secondSwitchStyle" checked="false"
-				(checkedChange)="switch2.checked"
-				row="1" col="1"></Switch>
-
-			<Label class="h3 m-15" [text]="switch3.checked" textWrap="true" row="2" col="0"></Label>
-			<Switch #switch3 class="m-15 thirdSwitchStyle" checked="true"
-				(checkedChange)="switch3.checked"
-				row="2" col="1"></Switch>
-		</GridLayout>
-		<!-- << switch-styling-html -->
-	</StackLayout>
+<StackLayout sdkExampleTitle sdkToggleNavButton class="example-container">
+	<!-- >> switch-styling-html -->
+	<!-- Styling via inline properties ---->
+	<Switch color="yellow" backgroundColor="green" offBackgroundColor="red">
+	</Switch>
+	<!-- Styling via CSS class (see CSS file) ---->
+	<Switch class="m-15 secondSwitchStyle" checked="true">
+	</Switch>
+	<!-- Applying style & opacity via CSS class ---->
+	<Switch class="m-15 thirdSwitchStyle" checked="true">
+	</Switch>
+	<!-- << switch-styling-html -->
 </StackLayout>

nsconfig.json

@@ -0,0 +1,3 @@
+{
+	"useLegacyWorkflow": false
+}