From 1eace95b5b9f4a294985dd45e4b26c452d1974d8 Mon Sep 17 00:00:00 2001
From: NickIliev <nikolay.iliev@telerik.com>
Date: Thu, 10 Oct 2019 14:19:13 +0300
Subject: [PATCH 1/4] docs: TextView revamp

---
 .../text-field/styling/styling.component.html |  2 +-
 .../text-view/basic-text-view/article.md      |  6 ---
 .../basic-text-view.component.html            | 13 ------
 .../text-view/basic-text-view/style.css       |  4 --
 app/ng-ui-widgets-category/text-view/end.md   | 45 ++++++++++++++++++-
 .../text-view/metadata.md                     |  1 +
 .../text-view/overview.md                     |  2 +-
 .../text-view/text-view-examples.component.ts |  2 +-
 .../text-view/text-view-examples.module.ts    | 10 ++---
 .../text-view/usage/article.md                |  1 +
 .../text-view/usage/usage.component.html      | 15 +++++++
 .../usage.component.ts}                       |  7 +--
 12 files changed, 70 insertions(+), 38 deletions(-)
 delete mode 100644 app/ng-ui-widgets-category/text-view/basic-text-view/article.md
 delete mode 100644 app/ng-ui-widgets-category/text-view/basic-text-view/basic-text-view.component.html
 delete mode 100644 app/ng-ui-widgets-category/text-view/basic-text-view/style.css
 create mode 100644 app/ng-ui-widgets-category/text-view/usage/article.md
 create mode 100644 app/ng-ui-widgets-category/text-view/usage/usage.component.html
 rename app/ng-ui-widgets-category/text-view/{basic-text-view/basic-text-view.component.ts => usage/usage.component.ts} (79%)

diff --git a/app/ng-ui-widgets-category/text-field/styling/styling.component.html b/app/ng-ui-widgets-category/text-field/styling/styling.component.html
index ef2a6eb4..ef5b564b 100644
--- a/app/ng-ui-widgets-category/text-field/styling/styling.component.html
+++ b/app/ng-ui-widgets-category/text-field/styling/styling.component.html
@@ -1,7 +1,7 @@
 <StackLayout class="form" sdkExampleTitle sdkToggleNavButton>
     <!-- >> textfield-styling-props -->
     <TextField hint="Enter text" 
-               color="whitesmoke" 
+               color="orangered" 
                backgroundColor="lightyellow">
     </TextField>
     <!-- << textfield-styling-props -->
diff --git a/app/ng-ui-widgets-category/text-view/basic-text-view/article.md b/app/ng-ui-widgets-category/text-view/basic-text-view/article.md
deleted file mode 100644
index 51509d0f..00000000
--- a/app/ng-ui-widgets-category/text-view/basic-text-view/article.md
+++ /dev/null
@@ -1,6 +0,0 @@
-
-HTML
-<snippet id='textview-html'/>
-
-Disable/Enable edit TextView
-<snippet id='textview-edit-disable-code'/>
\ No newline at end of file
diff --git a/app/ng-ui-widgets-category/text-view/basic-text-view/basic-text-view.component.html b/app/ng-ui-widgets-category/text-view/basic-text-view/basic-text-view.component.html
deleted file mode 100644
index d4fa607e..00000000
--- a/app/ng-ui-widgets-category/text-view/basic-text-view/basic-text-view.component.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<StackLayout sdkExampleTitle sdkToggleNavButton>
-	<StackLayout class="form">
-		<!-- >> textview-html -->
-		<Button [text]="buttonText" class="btn btn-primary btn-active" (tap)="disableTextView()"></Button>
-		<Button text="Show text" class="btn btn-outline btn-active" (tap)="showText()"></Button>
-		<StackLayout class="input-field">
-			<Label text="Enter text:" class="label"></Label>
-			<TextView [(ngModel)]="tvtext" hint="Enter some text" [editable]="editState"
-				class="input input-border"></TextView>
-		</StackLayout>
-		<!-- << textview-html -->
-	</StackLayout>
-</StackLayout>
\ No newline at end of file
diff --git a/app/ng-ui-widgets-category/text-view/basic-text-view/style.css b/app/ng-ui-widgets-category/text-view/basic-text-view/style.css
deleted file mode 100644
index 3d4fabc8..00000000
--- a/app/ng-ui-widgets-category/text-view/basic-text-view/style.css
+++ /dev/null
@@ -1,4 +0,0 @@
-Button, TextView {
-    margin-top: 20;    
-    padding: 8;
-}
\ No newline at end of file
diff --git a/app/ng-ui-widgets-category/text-view/end.md b/app/ng-ui-widgets-category/text-view/end.md
index fa165a9c..91f96587 100644
--- a/app/ng-ui-widgets-category/text-view/end.md
+++ b/app/ng-ui-widgets-category/text-view/end.md
@@ -1,8 +1,49 @@
+## Properties
 
-**API Reference for the** [TextView Class](http://docs.nativescript.org/api-reference/modules/_ui_text_view_.html)
+| Name     | Type     | Description    |
+|:---------|:---------|:---------------|
+| `autocapitalizationType` | [`AutocapitalizationType`](https://docs.nativescript.org/api-reference/modules/_ui_editor_text_base_#autocapitalizationtype) | Gets or sets the autocapitalization type. |
+| `autocorrect` | `boolean` | Enables or disables autocorrection. |
+| `keyboardType` | [`KeyboardType`](https://docs.nativescript.org/api-reference/modules/_ui_editor_text_base_#keyboardtype) | Gets or sets the soft keyboard type |
+| `letterSpacing` | `number` | Gets or sets letter space style property. |
+| `lineHiehgt` | `number` | Gets or sets line height style property. |
+| `maxLength` | `number` | Gets or sets the max number of symbols allowed as input. |
+| `returnKeyType` | [`ReturnKeyType`](https://docs.nativescript.org/api-reference/modules/_ui_editor_text_base_#returnkeytype) | Gets or sets the soft keyboard return key flavor. |
+| `secure` | `string` | Gets or sets if a text field is for password entry. |
+| `text` | `string` | Gets or sets the text. |
+| `textAlignment` | `TextAlignment` | Gets or sets the text alignment. |
+| `textDecoration` | `TextDecoration` | Gets or sets the text decoration. |
+| `textTransform` | `TextTransform` | Gets or sets the text transform. |
+| `whiteSpace` | `WhiteSpace` | Gets or sets white space style property. |
 
-**Native Component**
+## Methods
+
+| Name                   | Description                                           |
+|:-----------------------|:------------------------------------------------------|
+| `focus` | Tries to focus the view. Returns a value indicating whether this view or one of its descendants actually took focus. Returns `boolean`. |
+| `dismissSoftInput` | Hides the soft input method, ususally a soft keyboard. |
+
+## Events
+
+| Name                   | Description                                           |
+|:-----------------------|:------------------------------------------------------|
+| `blur` | Emitted when the text field is unfocused. |
+| `focus` | Emitted when the text field is focused. |
+| `returnPress` | Emitted when the return key is tapped. |
+| `textChange` | Emitted when there is a new text input. |
+
+## API References
+
+| Name     | Type    |
+|----------|---------|
+| [tns-core-modules/ui/text-view](http://docs.nativescript.org/api-reference/modules/_ui_text_view_.html) | `Module` | 
+| [TextView](https://docs.nativescript.org/api-reference/classes/_ui_text_view_.textview) | `Class` |
+
+
+## Native Component
 
 | Android               | iOS      |
 |:----------------------|:---------|
 | [android.widget.EditText](http://developer.android.com/reference/android/widget/EditText.html) | [UITextView](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextView_Class/) |
+
+
diff --git a/app/ng-ui-widgets-category/text-view/metadata.md b/app/ng-ui-widgets-category/text-view/metadata.md
index 8e0b4710..a07055ed 100644
--- a/app/ng-ui-widgets-category/text-view/metadata.md
+++ b/app/ng-ui-widgets-category/text-view/metadata.md
@@ -4,3 +4,4 @@ description: TextView component is an abstraction over iOS's UITextView and Andr
 position: 44
 slug: text-view-ng
 ---
+example-order: usage, styling
\ No newline at end of file
diff --git a/app/ng-ui-widgets-category/text-view/overview.md b/app/ng-ui-widgets-category/text-view/overview.md
index 7027eaa7..619c9367 100644
--- a/app/ng-ui-widgets-category/text-view/overview.md
+++ b/app/ng-ui-widgets-category/text-view/overview.md
@@ -1 +1 @@
-The TextView component can be used to type large text in your app. The component can also be used show any content by setting the `editable` property to `false`.
+The `TextView` component can be used to type larger text content in your app. The component can also be used show any content by setting the `editable` property to `false`.
diff --git a/app/ng-ui-widgets-category/text-view/text-view-examples.component.ts b/app/ng-ui-widgets-category/text-view/text-view-examples.component.ts
index bf2abb00..5fb4fbfb 100644
--- a/app/ng-ui-widgets-category/text-view/text-view-examples.component.ts
+++ b/app/ng-ui-widgets-category/text-view/text-view-examples.component.ts
@@ -2,7 +2,7 @@ import { Component, ChangeDetectionStrategy } from "@angular/core";
 import { Link } from "./../../link";
 
 let menuLinks = [
-    new Link("Basic TextView", "/text-view/basic")
+    new Link("Basic TextView", "/text-view/usage")
 ];
 
 @Component({
diff --git a/app/ng-ui-widgets-category/text-view/text-view-examples.module.ts b/app/ng-ui-widgets-category/text-view/text-view-examples.module.ts
index bad35ba0..53d8b34c 100644
--- a/app/ng-ui-widgets-category/text-view/text-view-examples.module.ts
+++ b/app/ng-ui-widgets-category/text-view/text-view-examples.module.ts
@@ -3,7 +3,7 @@ import { NativeScriptRouterModule } from "nativescript-angular/router";
 import { NativeScriptCommonModule } from "nativescript-angular/common";
 import { NativeScriptFormsModule } from "nativescript-angular/forms";
 import { TextViewExamplesComponent } from "./text-view-examples.component";
-import { BasicTextViewComponent } from "./basic-text-view/basic-text-view.component";
+import { UsageComponent } from "./usage/usage.component"
 import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module";
 
 export const routerConfig = [
@@ -12,9 +12,9 @@ export const routerConfig = [
         component: TextViewExamplesComponent
     },
     {
-        path: "basic",
-        component: BasicTextViewComponent,
-        data: { title: "Basic TextView" }
+        path: "usage",
+        component: UsageComponent,
+        data: { title: "Usage" }
     }
 ];
 
@@ -27,7 +27,7 @@ export const routerConfig = [
         NativeScriptRouterModule,
         NativeScriptRouterModule.forChild(routerConfig)
     ],
-    declarations: [TextViewExamplesComponent, BasicTextViewComponent]
+    declarations: [TextViewExamplesComponent, UsageComponent]
 })
 
 export class TextViewExamplesModule {
diff --git a/app/ng-ui-widgets-category/text-view/usage/article.md b/app/ng-ui-widgets-category/text-view/usage/article.md
new file mode 100644
index 00000000..1c01c05f
--- /dev/null
+++ b/app/ng-ui-widgets-category/text-view/usage/article.md
@@ -0,0 +1 @@
+<snippet id='textview-html'/>
diff --git a/app/ng-ui-widgets-category/text-view/usage/usage.component.html b/app/ng-ui-widgets-category/text-view/usage/usage.component.html
new file mode 100644
index 00000000..77a7f486
--- /dev/null
+++ b/app/ng-ui-widgets-category/text-view/usage/usage.component.html
@@ -0,0 +1,15 @@
+<GridLayout sdkExampleTitle sdkToggleNavButton>
+	<!-- >> textview-html -->
+	<TextView hint="Enter Date" 
+			  [text]='name' 
+			  secure="false"
+			  keyboardType="datetime"
+			  returnKeyType="done"
+			  (returnPress)="onReturnPress($event)"
+			  autocorrect="false"
+			  maxLength="10"
+			  (focus)="onFocus($event)"
+			  (blur)="onBlur($event)">
+	</TextView>
+	<!-- << textview-html -->
+</GridLayout>
\ No newline at end of file
diff --git a/app/ng-ui-widgets-category/text-view/basic-text-view/basic-text-view.component.ts b/app/ng-ui-widgets-category/text-view/usage/usage.component.ts
similarity index 79%
rename from app/ng-ui-widgets-category/text-view/basic-text-view/basic-text-view.component.ts
rename to app/ng-ui-widgets-category/text-view/usage/usage.component.ts
index 8fef3e85..f54edede 100644
--- a/app/ng-ui-widgets-category/text-view/basic-text-view/basic-text-view.component.ts
+++ b/app/ng-ui-widgets-category/text-view/usage/usage.component.ts
@@ -3,12 +3,9 @@ import { Component } from "@angular/core";
 
 @Component({
     moduleId: module.id,
-    // >> (hide)
-    styleUrls: ["./style.css"],
-    // << (hide)
-    templateUrl: "./basic-text-view.component.html"
+    templateUrl: "./usage.component.html"
 })
-export class BasicTextViewComponent {
+export class UsageComponent {
 
     public editState = true;
     public tvtext = "";

From f97e1cc882bfda680d69f41ae8a611a60df58874 Mon Sep 17 00:00:00 2001
From: NickIliev <nikolay.iliev@telerik.com>
Date: Thu, 10 Oct 2019 17:28:18 +0300
Subject: [PATCH 2/4] docs: TimePicker revamp

---
 .../text-view/text-view-examples.component.ts |  2 +-
 ...lders in docs contain category in the name |  7 ----
 .../configure-time-picker.component.html      |  5 ---
 .../configure-time-picker.component.ts        | 22 -----------
 app/ng-ui-widgets-category/time-picker/end.md | 38 +++++++++++++++++--
 .../time-picker/metadata.md                   |  1 +
 .../time-picker/overview.md                   |  2 +-
 .../time-picker-examples.component.ts         |  2 +-
 .../time-picker-examples.module.ts            | 10 ++---
 .../article.md                                |  0
 .../time-picker/usage/usage.component.html    | 13 +++++++
 .../time-picker/usage/usage.component.ts      | 19 ++++++++++
 12 files changed, 75 insertions(+), 46 deletions(-)
 delete mode 100644 app/ng-ui-widgets-category/time-picker/configure-time-picker/article.md~Subfolders that should be displayed as folders in docs contain category in the name
 delete mode 100644 app/ng-ui-widgets-category/time-picker/configure-time-picker/configure-time-picker.component.html
 delete mode 100644 app/ng-ui-widgets-category/time-picker/configure-time-picker/configure-time-picker.component.ts
 rename app/ng-ui-widgets-category/time-picker/{configure-time-picker => usage}/article.md (100%)
 create mode 100644 app/ng-ui-widgets-category/time-picker/usage/usage.component.html
 create mode 100644 app/ng-ui-widgets-category/time-picker/usage/usage.component.ts

diff --git a/app/ng-ui-widgets-category/text-view/text-view-examples.component.ts b/app/ng-ui-widgets-category/text-view/text-view-examples.component.ts
index 5fb4fbfb..c4553d93 100644
--- a/app/ng-ui-widgets-category/text-view/text-view-examples.component.ts
+++ b/app/ng-ui-widgets-category/text-view/text-view-examples.component.ts
@@ -2,7 +2,7 @@ import { Component, ChangeDetectionStrategy } from "@angular/core";
 import { Link } from "./../../link";
 
 let menuLinks = [
-    new Link("Basic TextView", "/text-view/usage")
+    new Link("Usage", "/text-view/usage")
 ];
 
 @Component({
diff --git a/app/ng-ui-widgets-category/time-picker/configure-time-picker/article.md~Subfolders that should be displayed as folders in docs contain category in the name b/app/ng-ui-widgets-category/time-picker/configure-time-picker/article.md~Subfolders that should be displayed as folders in docs contain category in the name
deleted file mode 100644
index 80f8a072..00000000
--- a/app/ng-ui-widgets-category/time-picker/configure-time-picker/article.md~Subfolders that should be displayed as folders in docs contain category in the name	
+++ /dev/null
@@ -1,7 +0,0 @@
-TimePicker can be easily configured by setting the required properties.
-
-HTML
-<snippet id='creating-timepicker-html'/>
-
-TypeScript
-<snippet id='time-picker-configure-code'/>
\ No newline at end of file
diff --git a/app/ng-ui-widgets-category/time-picker/configure-time-picker/configure-time-picker.component.html b/app/ng-ui-widgets-category/time-picker/configure-time-picker/configure-time-picker.component.html
deleted file mode 100644
index cde43e6e..00000000
--- a/app/ng-ui-widgets-category/time-picker/configure-time-picker/configure-time-picker.component.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<StackLayout sdkExampleTitle sdkToggleNavButton>
-	<!-- >> creating-timepicker-html -->
-	<TimePicker (loaded)="onPickerLoaded($event)" (timeChange)="onTimeChanged($event)" verticalAlignment="center" class="m-15"></TimePicker>
-	<!-- << creating-timepicker-html -->
-</StackLayout>
diff --git a/app/ng-ui-widgets-category/time-picker/configure-time-picker/configure-time-picker.component.ts b/app/ng-ui-widgets-category/time-picker/configure-time-picker/configure-time-picker.component.ts
deleted file mode 100644
index 066fd9f9..00000000
--- a/app/ng-ui-widgets-category/time-picker/configure-time-picker/configure-time-picker.component.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// >> time-picker-configure-code
-import { Component } from "@angular/core";
-import { TimePicker } from "tns-core-modules/ui/time-picker";
-
-@Component({
-    moduleId: module.id,
-    templateUrl: "./configure-time-picker.component.html"
-})
-export class ConfigureTimePickerComponent {
-
-    onPickerLoaded(args) {
-        let timePicker = <TimePicker>args.object;
-
-        timePicker.hour = 9;
-        timePicker.minute = 25;
-    }
-
-    onTimeChanged(args) {
-        console.log(args.value);
-    }
-}
-// << time-picker-configure-code
diff --git a/app/ng-ui-widgets-category/time-picker/end.md b/app/ng-ui-widgets-category/time-picker/end.md
index 82d9d7e6..7559a65e 100644
--- a/app/ng-ui-widgets-category/time-picker/end.md
+++ b/app/ng-ui-widgets-category/time-picker/end.md
@@ -1,8 +1,38 @@
+## Properties
 
-**API Reference for the** [TimePicker Class](http://docs.nativescript.org/api-reference/modules/_ui_time_picker_.html)
+| Name     | Type     | Description    |
+|:---------|:---------|:---------------|
+| `hour` | `number` | Gets or sets the time hour. |
+| `maxHour` | `number` | Gets or sets the max time hour. |
+| `maxMinute` | `number` | Gets or sets the max time minute. |
+| `minHour` | `number` | Gets or sets the min time hour. |
+| `minMinute` | `number` | Gets or sets the min time minute. |
+| `minute` | `number` | Gets or sets the time minute. |
+| `minuteInterval` | `number` | Gets or sets the time hour |
+| `time` | `Date` | Gets or sets the time while passing a `Date` object (use it instaed `hour` and `minute`). |
 
-**Native Component**
+## Events
 
-| Android                | iOS      |
-|:-----------------------|:---------|
+| Name                   | Description                                           |
+|:-----------------------|:------------------------------------------------------|
+| `hourChange` | Emitted when the `hour` property is changed. |
+| `minuteChange` | Emitted when the `minute` property is changed. |
+| `timeChange` | Emitted when the `hour`, `minute` or `time` property is changed. |
+
+
+## API References
+
+| Name     | Type    |
+|----------|---------|
+| [tns-core-modules/ui/time-picker](http://docs.nativescript.org/api-reference/modules/_ui_time_picker_.html)) | `Module` | 
+| [TimePicker](https://docs.nativescript.org/api-reference/classes/_ui_time_picker_.timepicker) | `Class` |
+
+
+## Native Component
+
+| Android               | iOS      |
+|:----------------------|:---------|
 | [android.widget.TimePicker](http://developer.android.com/reference/android/widget/TimePicker.html) | [UIDatePicker](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIDatePicker_Class/index.html) | 
+
+
+
diff --git a/app/ng-ui-widgets-category/time-picker/metadata.md b/app/ng-ui-widgets-category/time-picker/metadata.md
index e77d3556..74d065b4 100644
--- a/app/ng-ui-widgets-category/time-picker/metadata.md
+++ b/app/ng-ui-widgets-category/time-picker/metadata.md
@@ -4,3 +4,4 @@ description:  TimePicker is UI control, which allows choosing a time from a read
 position: 45
 slug: time-picker-ng
 ---
+example-order: usage, styling
\ No newline at end of file
diff --git a/app/ng-ui-widgets-category/time-picker/overview.md b/app/ng-ui-widgets-category/time-picker/overview.md
index 2dd8c3e5..1b5992fb 100644
--- a/app/ng-ui-widgets-category/time-picker/overview.md
+++ b/app/ng-ui-widgets-category/time-picker/overview.md
@@ -1 +1 @@
-NativeScript provides a TimePicker control that enables users to choose a time as a ready-to-use dialog. Every time part can be picked separately by its corresponding section of the control - for hour, minutes and AM/PM. 
+NativeScript provides a `TimePicker` control that enables users to choose a time as a ready-to-use dialog. Every time part can be picked separately by its corresponding section of the control - for hour, minutes and AM/PM. 
diff --git a/app/ng-ui-widgets-category/time-picker/time-picker-examples.component.ts b/app/ng-ui-widgets-category/time-picker/time-picker-examples.component.ts
index d1268840..0227286c 100644
--- a/app/ng-ui-widgets-category/time-picker/time-picker-examples.component.ts
+++ b/app/ng-ui-widgets-category/time-picker/time-picker-examples.component.ts
@@ -2,7 +2,7 @@ import { Component, ChangeDetectionStrategy } from "@angular/core";
 import { Link } from "./../../link";
 
 let menuLinks = [
-    new Link("Configure TimePicker", "/time-picker/configure")
+    new Link("Usage", "/time-picker/usage")
 ];
 
 @Component({
diff --git a/app/ng-ui-widgets-category/time-picker/time-picker-examples.module.ts b/app/ng-ui-widgets-category/time-picker/time-picker-examples.module.ts
index 8766c41c..d2812948 100644
--- a/app/ng-ui-widgets-category/time-picker/time-picker-examples.module.ts
+++ b/app/ng-ui-widgets-category/time-picker/time-picker-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 { TimePickerExamplesComponent } from "./time-picker-examples.component";
-import { ConfigureTimePickerComponent } from "./configure-time-picker/configure-time-picker.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: TimePickerExamplesComponent
     },
     {
-        path: "configure",
-        component: ConfigureTimePickerComponent,
-        data: { title: "Configure TimePicker" }
+        path: "usage",
+        component: UsageComponent,
+        data: { title: "Usage" }
     }
 ];
 
@@ -25,7 +25,7 @@ export const routerConfig = [
         NativeScriptRouterModule,
         NativeScriptRouterModule.forChild(routerConfig)
     ],
-    declarations: [TimePickerExamplesComponent, ConfigureTimePickerComponent]
+    declarations: [TimePickerExamplesComponent, UsageComponent]
 })
 
 export class TimePickerExamplesModule {
diff --git a/app/ng-ui-widgets-category/time-picker/configure-time-picker/article.md b/app/ng-ui-widgets-category/time-picker/usage/article.md
similarity index 100%
rename from app/ng-ui-widgets-category/time-picker/configure-time-picker/article.md
rename to app/ng-ui-widgets-category/time-picker/usage/article.md
diff --git a/app/ng-ui-widgets-category/time-picker/usage/usage.component.html b/app/ng-ui-widgets-category/time-picker/usage/usage.component.html
new file mode 100644
index 00000000..3a0f211a
--- /dev/null
+++ b/app/ng-ui-widgets-category/time-picker/usage/usage.component.html
@@ -0,0 +1,13 @@
+<GridLayout sdkExampleTitle sdkToggleNavButton>
+	<!-- >> creating-timepicker-html -->
+	<TimePicker hour="9"
+				minute="25"
+				maxHour="23"
+				maxMinute="59"
+				minuteInterval="5"
+				(timeChange)="onTimeChanged($event)">
+	</TimePicker>
+	<!-- Alternatively, you could use the time property with a Date object -->
+	<!-- <TimePicker [time]="todayObj" (timeChange)="onTimeChanged($event)"></TimePicker> -->
+	<!-- << creating-timepicker-html -->
+</GridLayout>
diff --git a/app/ng-ui-widgets-category/time-picker/usage/usage.component.ts b/app/ng-ui-widgets-category/time-picker/usage/usage.component.ts
new file mode 100644
index 00000000..10edd637
--- /dev/null
+++ b/app/ng-ui-widgets-category/time-picker/usage/usage.component.ts
@@ -0,0 +1,19 @@
+// >> time-picker-configure-code
+import { Component } from "@angular/core";
+import { TimePicker } from "tns-core-modules/ui/time-picker";
+
+@Component({
+    moduleId: module.id,
+    templateUrl: "./usage.component.html"
+})
+export class UsageComponent {
+    todayObj: Date = new Date();
+
+    onTimeChanged(args) {
+        const tp = args.object as TimePicker;
+
+        const time = args.value;
+        console.log(`Chosen time: ${time}`);
+    }
+}
+// << time-picker-configure-code

From 3204aad2c107bc0be6f358fe1f9fa94d3016d262 Mon Sep 17 00:00:00 2001
From: NickIliev <nikolay.iliev@telerik.com>
Date: Mon, 14 Oct 2019 10:02:01 +0300
Subject: [PATCH 3/4] tslint

---
 .../text-view/text-view-examples.module.ts                      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/ng-ui-widgets-category/text-view/text-view-examples.module.ts b/app/ng-ui-widgets-category/text-view/text-view-examples.module.ts
index 53d8b34c..e116a9af 100644
--- a/app/ng-ui-widgets-category/text-view/text-view-examples.module.ts
+++ b/app/ng-ui-widgets-category/text-view/text-view-examples.module.ts
@@ -3,7 +3,7 @@ import { NativeScriptRouterModule } from "nativescript-angular/router";
 import { NativeScriptCommonModule } from "nativescript-angular/common";
 import { NativeScriptFormsModule } from "nativescript-angular/forms";
 import { TextViewExamplesComponent } from "./text-view-examples.component";
-import { UsageComponent } from "./usage/usage.component"
+import { UsageComponent } from "./usage/usage.component";
 import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module";
 
 export const routerConfig = [

From 2ebd70455343bafacd90d24a8449b129eb9c11ca Mon Sep 17 00:00:00 2001
From: NickIliev <nikolay.iliev@telerik.com>
Date: Mon, 14 Oct 2019 13:03:59 +0300
Subject: [PATCH 4/4] docs: WebView revamp

---
 .../text-view/usage/article.md                |  1 +
 .../text-view/usage/usage.component.html      |  2 +-
 .../time-picker/usage/article.md              |  8 +-
 .../web-view/basic-web-view/article.md        |  8 --
 .../basic-web-view.component.html             | 12 ---
 .../basic-web-view.component.ts               | 63 -------------
 .../web-view/basic-web-view/style.css         | 18 ----
 app/ng-ui-widgets-category/web-view/end.md    | 38 +++++++-
 .../web-view/events/article.md                |  9 --
 .../web-view/events/style.css                 | 10 ---
 .../events/web-view-events.component.html     | 18 ----
 .../events/web-view-events.component.ts       | 88 -------------------
 .../web-view/gestures/article.md              |  9 --
 .../web-view/gestures/style.css               |  3 -
 .../gestures/web-view-gestures.component.html | 11 ---
 .../web-view/metadata.md                      |  1 +
 .../web-view/overview.md                      |  2 +-
 app/ng-ui-widgets-category/web-view/style.css |  0
 .../web-view/tips-and-tricks/article.md       | 11 +++
 .../tips-and-tricks.component.html            |  9 ++
 .../tips-and-tricks.component.ts}             | 22 +++--
 .../web-view/usage/article.md                 |  4 +
 .../web-view/usage/usage.component.html       |  8 ++
 .../web-view/usage/usage.component.ts         | 41 +++++++++
 .../web-view/web-view-examples.component.ts   |  7 +-
 .../web-view/web-view-examples.module.ts      | 30 +++----
 .../web-view/web-view-html/article.md         |  4 -
 .../web-view/web-view-html/style.css          |  0
 .../web-view-html/web-view-html.component.ts  |  7 +-
 29 files changed, 140 insertions(+), 304 deletions(-)
 delete mode 100644 app/ng-ui-widgets-category/web-view/basic-web-view/article.md
 delete mode 100644 app/ng-ui-widgets-category/web-view/basic-web-view/basic-web-view.component.html
 delete mode 100644 app/ng-ui-widgets-category/web-view/basic-web-view/basic-web-view.component.ts
 delete mode 100644 app/ng-ui-widgets-category/web-view/basic-web-view/style.css
 delete mode 100644 app/ng-ui-widgets-category/web-view/events/article.md
 delete mode 100644 app/ng-ui-widgets-category/web-view/events/style.css
 delete mode 100644 app/ng-ui-widgets-category/web-view/events/web-view-events.component.html
 delete mode 100644 app/ng-ui-widgets-category/web-view/events/web-view-events.component.ts
 delete mode 100644 app/ng-ui-widgets-category/web-view/gestures/article.md
 delete mode 100644 app/ng-ui-widgets-category/web-view/gestures/style.css
 delete mode 100644 app/ng-ui-widgets-category/web-view/gestures/web-view-gestures.component.html
 delete mode 100644 app/ng-ui-widgets-category/web-view/style.css
 create mode 100644 app/ng-ui-widgets-category/web-view/tips-and-tricks/article.md
 create mode 100644 app/ng-ui-widgets-category/web-view/tips-and-tricks/tips-and-tricks.component.html
 rename app/ng-ui-widgets-category/web-view/{gestures/web-view-gestures.component.ts => tips-and-tricks/tips-and-tricks.component.ts} (57%)
 create mode 100644 app/ng-ui-widgets-category/web-view/usage/article.md
 create mode 100644 app/ng-ui-widgets-category/web-view/usage/usage.component.html
 create mode 100644 app/ng-ui-widgets-category/web-view/usage/usage.component.ts
 delete mode 100644 app/ng-ui-widgets-category/web-view/web-view-html/style.css

diff --git a/app/ng-ui-widgets-category/text-view/usage/article.md b/app/ng-ui-widgets-category/text-view/usage/article.md
index 1c01c05f..94e7d7bf 100644
--- a/app/ng-ui-widgets-category/text-view/usage/article.md
+++ b/app/ng-ui-widgets-category/text-view/usage/article.md
@@ -1 +1,2 @@
 <snippet id='textview-html'/>
+<snippet id='textview-edit-disable-code'/>
diff --git a/app/ng-ui-widgets-category/text-view/usage/usage.component.html b/app/ng-ui-widgets-category/text-view/usage/usage.component.html
index 77a7f486..660610d5 100644
--- a/app/ng-ui-widgets-category/text-view/usage/usage.component.html
+++ b/app/ng-ui-widgets-category/text-view/usage/usage.component.html
@@ -1,7 +1,7 @@
 <GridLayout sdkExampleTitle sdkToggleNavButton>
 	<!-- >> textview-html -->
 	<TextView hint="Enter Date" 
-			  [text]='name' 
+			  [text]="name" 
 			  secure="false"
 			  keyboardType="datetime"
 			  returnKeyType="done"
diff --git a/app/ng-ui-widgets-category/time-picker/usage/article.md b/app/ng-ui-widgets-category/time-picker/usage/article.md
index bc29d090..2a0d3302 100644
--- a/app/ng-ui-widgets-category/time-picker/usage/article.md
+++ b/app/ng-ui-widgets-category/time-picker/usage/article.md
@@ -1,8 +1,4 @@
-TimePicker can be easily configured by setting the required properties.
-The example below demonstrates how to set up the initial `hour` and `minute` for the TimePicker component and how to handle selected time change via `timeChange` event.
-The `hour` and `minute` expects integer values and the `timeChange` will return a value of type Date.
-HTML
-<snippet id='creating-timepicker-html'/>
+The `TimePicker` component can be configured by  `hour` and `minute` (accepts `number` values) or alternatively by setting the `date` property (accepts a `Date` object).
 
-TypeScript
+<snippet id='creating-timepicker-html'/>
 <snippet id='time-picker-configure-code'/>
\ No newline at end of file
diff --git a/app/ng-ui-widgets-category/web-view/basic-web-view/article.md b/app/ng-ui-widgets-category/web-view/basic-web-view/article.md
deleted file mode 100644
index 32d0c26e..00000000
--- a/app/ng-ui-widgets-category/web-view/basic-web-view/article.md
+++ /dev/null
@@ -1,8 +0,0 @@
-HTML
-<snippet id='web-view-html'/>
-
-Add WebView `src` and handle `loadFinishedEvent` event
-<snippet id='setting-url-webview'/>
-
-CSS
-<snippet id='web-view-basic-css'/>
\ No newline at end of file
diff --git a/app/ng-ui-widgets-category/web-view/basic-web-view/basic-web-view.component.html b/app/ng-ui-widgets-category/web-view/basic-web-view/basic-web-view.component.html
deleted file mode 100644
index c8617240..00000000
--- a/app/ng-ui-widgets-category/web-view/basic-web-view/basic-web-view.component.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!-- >> web-view-html -->
-<GridLayout rows="75 * 50" sdkExampleTitle sdkToggleNavButton>
-    <GridLayout row="0" rows="*" columns="50 * 50" class="form">
-        <Button class="btn btn-primary btn-active icon" row="0" col="0" text="&#xea44;" (tap)="goBack()"></Button>
-        <TextField #urlField row="0" col="1" hint="Enter URL" [text]="webViewSrc" returnKeyType="done" (returnPress)="submit(urlField.text)"
-            autocorrect="false" verticalAlignment="center" class="input input-border m-t-0" autocapitalizationType="none"></TextField>
-        <Button class="btn btn-primary btn-active icon" [isEnabled]="enabled" row="0" col="2" text="&#xea42;" (tap)="goForward()"></Button>
-    </GridLayout>
-    <WebView row="1" #myWebView [src]="webViewSrc"></WebView>
-    <Label row="2" #labelResult></Label>
-</GridLayout>
-<!-- << web-view-html -->
\ No newline at end of file
diff --git a/app/ng-ui-widgets-category/web-view/basic-web-view/basic-web-view.component.ts b/app/ng-ui-widgets-category/web-view/basic-web-view/basic-web-view.component.ts
deleted file mode 100644
index 1d396a91..00000000
--- a/app/ng-ui-widgets-category/web-view/basic-web-view/basic-web-view.component.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-// >> setting-url-webview
-import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from "@angular/core";
-import { WebView, LoadEventData } from "tns-core-modules/ui/web-view";
-import { TextField } from "tns-core-modules/ui/text-field";
-import { Label } from "tns-core-modules/ui/label";
-
-@Component({
-    moduleId: module.id,
-    templateUrl: "./basic-web-view.component.html",
-    styleUrls: ["./style.css"]
-})
-export class BasicWebViewComponent implements AfterViewInit {
-    public webViewSrc: string = "https://docs.nativescript.org/";
-    public enabled: boolean = false;
-    @ViewChild("myWebView", { read: ElementRef, static: false }) webViewRef: ElementRef;
-    @ViewChild("urlField", { read: ElementRef, static: false }) urlFieldRef: ElementRef;
-    @ViewChild("labelResult", { read: ElementRef, static: false }) labelResultRef: ElementRef;
-
-    ngAfterViewInit() {
-        let webview: WebView = this.webViewRef.nativeElement;
-        let label: Label = this.labelResultRef.nativeElement;
-        label.text = "WebView is still loading...";
-
-        webview.on(WebView.loadFinishedEvent, function (args: LoadEventData) {
-            let message;
-            if (!args.error) {
-                message = "WebView finished loading of " + args.url;
-            } else {
-                message = "Error loading " + args.url + ": " + args.error;
-            }
-
-            label.text = message;
-            console.log("WebView message - " + message);
-        });
-    }
-
-    goBack() {
-        let webview: WebView = this.webViewRef.nativeElement;
-        if (webview.canGoBack) {
-            webview.goBack();
-            this.enabled = true;
-        }
-    }
-    goForward() {
-        let webview: WebView = this.webViewRef.nativeElement;
-        if (webview.canGoForward) {
-            webview.goForward();
-        } else {
-            this.enabled = false;
-        }
-    }
-    submit(args: string) {
-        let textField: TextField = this.urlFieldRef.nativeElement;
-        this.enabled = false;
-        if (args.substring(0, 4) === "http") {
-            this.webViewSrc = args;
-            textField.dismissSoftInput();
-        } else {
-            alert("Please, add `http://` or `https://` in front of the URL string");
-        }
-    }
-}
-// << setting-url-webview
diff --git a/app/ng-ui-widgets-category/web-view/basic-web-view/style.css b/app/ng-ui-widgets-category/web-view/basic-web-view/style.css
deleted file mode 100644
index 82df423f..00000000
--- a/app/ng-ui-widgets-category/web-view/basic-web-view/style.css
+++ /dev/null
@@ -1,18 +0,0 @@
-/* >> web-view-basic-css */
-.icon{
-    font-family: 'IcoMoon-Free';
-    vertical-align: center;
-    margin: 6;
-}
-
-/*WebView {
-    border-color: lightgray; 
-    border-width: 0.5;
-}*/
-/* << web-view-basic-css */
-
-/*.border-gridLayout {
-    border-color: lightgray; 
-    border-width: 0.5;
-    border-radius: 2;
-}*/
\ No newline at end of file
diff --git a/app/ng-ui-widgets-category/web-view/end.md b/app/ng-ui-widgets-category/web-view/end.md
index 6977516a..3509a753 100644
--- a/app/ng-ui-widgets-category/web-view/end.md
+++ b/app/ng-ui-widgets-category/web-view/end.md
@@ -1,8 +1,38 @@
+## Properties
 
-**API Reference for the** [WebView Class](http://docs.nativescript.org/api-reference/modules/_ui_web_view_.html)
+| Name     | Type     | Description    |
+|:---------|:---------|:---------------|
+| `src` | `string` | Gets or sets the url, local file path or HTML string. |
 
-**Native Component**
+## Methods
 
-| Android                | iOS      |
-|:-----------------------|:---------|
+| Name     | Returns     | Description    |
+|:---------|:---------|:---------------|
+| `reload` | `void` | Reloads the `WebView` forcing updating of the content. |
+
+## Events
+
+| Name                   | Description                                           |
+|:-----------------------|:------------------------------------------------------|
+| `loadStarted` | Emitted when the content is starting to load. |
+| `loadFinished` | Emitted when the content loading is over. |
+
+
+## API References
+
+| Name     | Type    |
+|----------|---------|
+| [tns-core-modules/ui/web-view](http://docs.nativescript.org/api-reference/modules/_ui_web_view_.html)) | `Module` | 
+| [WebView](https://docs.nativescript.org/api-reference/classes/_ui_web_view_.webview) | `Class` |
+| [LoadEventData](https://docs.nativescript.org/api-reference/interfaces/_ui_web_view_.loadeventdata) | `Interface` |
+| [NavigationType](https://docs.nativescript.org/api-reference/modules/_ui_web_view_#navigationtype) | type aliases |
+
+## Native Component
+
+| Android               | iOS      |
+|:----------------------|:---------|
 | [android.webkit.WebView](http://developer.android.com/reference/android/webkit/WebView.html) | [WKWebView](https://developer.apple.com/documentation/webkit/wkwebview) | 
+
+
+
+
diff --git a/app/ng-ui-widgets-category/web-view/events/article.md b/app/ng-ui-widgets-category/web-view/events/article.md
deleted file mode 100644
index 863737f6..00000000
--- a/app/ng-ui-widgets-category/web-view/events/article.md
+++ /dev/null
@@ -1,9 +0,0 @@
-The example shows the how to use the events supported by the WebView component and its `reload` method.
-
-<snippet id='web-events-html'/>
-
-<snippet id='webview-ts-events'/>
-
-In the sample code, we set up event `loadStarted` and `loadFinished` events. Both events will be fired when we change the source for the WebView component(change the URL or load local HTML file). The `loadStarted` event will be executed when the WebView source start loading and `loadFinished` will be fired when the source is already loaded. The events will return info about the `eventName`, `navigationType` and `url`, which we are trying to load. If an error appears on some of the steps of source load, we will receive the corresponding error with the `error` property in `loadStarted` or `loadFinished` events.
-
-In the provided sample, it is also demonstrated how to reload the currently loaded source via WebView's `reload` method.
\ No newline at end of file
diff --git a/app/ng-ui-widgets-category/web-view/events/style.css b/app/ng-ui-widgets-category/web-view/events/style.css
deleted file mode 100644
index 015385ac..00000000
--- a/app/ng-ui-widgets-category/web-view/events/style.css
+++ /dev/null
@@ -1,10 +0,0 @@
-Label{
-    background-color: lightblue;
-    text-align: center
-}
-.indicator{
-    background-color: rgba(176, 170, 170, 0.5);
-}
-.innerContainer{
-    vertical-align: middle;
-} 
\ No newline at end of file
diff --git a/app/ng-ui-widgets-category/web-view/events/web-view-events.component.html b/app/ng-ui-widgets-category/web-view/events/web-view-events.component.html
deleted file mode 100644
index 52b141ef..00000000
--- a/app/ng-ui-widgets-category/web-view/events/web-view-events.component.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<StackLayout sdkExampleTitle sdkToggleNavButton>
-    <StackLayout>
-    <!-- >> web-events-html -->
-        <GridLayout rows="50 50 50 *" columns="* *">
-            <Button row="0" col="0" text="Load first url" (tap)="loadFirst()" ></Button>
-            <Button row="0" col="1" text="Load second url" (tap)="loadSecond()" ></Button>
-            <Button row="1" col="0" colSpan="2" text="Reload page" (tap)="onReload()" ></Button>
-            <Label row="2" col="0" colSpan="2" [text]="'Url: ' + webViewSrc" textWrap="true" class="p-12" ></Label>
-            
-            <WebView #webview row="3" col="0" colSpan="2" (loadStarted)="onLoadStarted($event)" (loadFinished)="onLoadFinished($event)" [src]="webViewSrc" ></WebView>
-            <GridLayout class="indicator" visibility="{{ isItemVisible ? 'visible' : 'collapsed' }}" row="0" col="0" rowSpan="4" colSpan="2">
-                    <ActivityIndicator width="100" height="100" busy="true"></ActivityIndicator>
-            </GridLayout>
-        </GridLayout>
-        
-    <!-- << web-events-html -->
-    </StackLayout>
-</StackLayout>
\ No newline at end of file
diff --git a/app/ng-ui-widgets-category/web-view/events/web-view-events.component.ts b/app/ng-ui-widgets-category/web-view/events/web-view-events.component.ts
deleted file mode 100644
index ea71499f..00000000
--- a/app/ng-ui-widgets-category/web-view/events/web-view-events.component.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-// tslint:disable:max-line-length
-// >> webview-ts-events
-import { Component, ViewChild, ElementRef } from "@angular/core";
-import { WebView, LoadEventData } from "tns-core-modules/ui/web-view";
-
-@Component({
-    moduleId: module.id,
-    // >> (hide)
-    styleUrls: ["./style.css"],
-    // << (hide)
-    templateUrl: "./web-view-events.component.html"
-})
-export class WebViewEventsComponent {
-    public webViewSrc = "https://docs.nativescript.org/";
-    public isItemVisible = true;
-
-    @ViewChild("webview", { read: ElementRef, static: false }) webViewElement: ElementRef;
-    private firstUrl = "https://google.com/";
-    private secondUrl = "https://docs.nativescript.org/";
-
-    public onLoadStarted(args: LoadEventData) {
-        this.isItemVisible = true;
-        let message;
-        if (!args.error) {
-            // >> (hide)
-            console.log("--------------------------------------");
-            console.log("Load Start");
-            console.log(`EventName: ${args.eventName}`);
-            console.log(`NavigationType: ${args.navigationType}`);
-            console.log(`Url: ${args.url}`);
-            console.log("--------------------------------------");
-            // << (hide)
-            message = "WebView started loading of " + args.url;
-        } else {
-            // >> (hide)
-            console.log("--------------------------------------");
-            console.log(`EventName: ${args.eventName}`);
-            console.log(`Error: ${args.error}`);
-            console.log("--------------------------------------");
-            // << (hide)
-            message = "Error loading " + args.url + ": " + args.error;
-        }
-        console.log(message);
-        // >> (hide)
-        setTimeout(() => {
-            this.isItemVisible = false;
-        }, 1000);
-        // << (hide)
-    }
-    public onLoadFinished(args: LoadEventData) {
-        let message;
-        if (!args.error) {
-            // >> (hide)
-            console.log("--------------------------------------");
-            console.log("Load Finished");
-            console.log(`EventName: ${args.eventName}`);
-            console.log(`NavigationType: ${args.navigationType}`);
-            console.log(`Url: ${args.url}`);
-            console.log("--------------------------------------");
-            // << (hide)
-            message = "WebView finished loading of " + args.url;
-        } else {
-            // >> (hide)
-            console.log("--------------------------------------");
-            console.log(`EventName: ${args.eventName}`);
-            console.log(`Error: ${args.error}`);
-            console.log("--------------------------------------");
-            // << (hide)
-            message = "Error loading " + args.url + ": " + args.error;
-        }
-        console.log(message);
-    }
-
-    public loadFirst() {
-        this.webViewSrc = this.firstUrl;
-    }
-
-    public loadSecond() {
-        this.webViewSrc = this.secondUrl;
-    }
-
-    public onReload() {
-        const webview: WebView = <WebView> this.webViewElement.nativeElement;
-        webview.reload();
-    }
-
-}
-// << webview-ts-events
diff --git a/app/ng-ui-widgets-category/web-view/gestures/article.md b/app/ng-ui-widgets-category/web-view/gestures/article.md
deleted file mode 100644
index 140a326d..00000000
--- a/app/ng-ui-widgets-category/web-view/gestures/article.md
+++ /dev/null
@@ -1,9 +0,0 @@
-The code samples show, how we could use gestures in WebView for both platforms iOS and Android.
-
-XML
-<snippet id='web-gestures-html'/>
-
-JavaScript
-<snippet id='webview-ts-gestures'/>
-
->Note: to be able to use gestures in `WebView` component on Android, we should first disabled the zoom control. To do that we could access the `android` property and with the help of  `setDisplayZoomControls` to set this control to `false`.
\ No newline at end of file
diff --git a/app/ng-ui-widgets-category/web-view/gestures/style.css b/app/ng-ui-widgets-category/web-view/gestures/style.css
deleted file mode 100644
index e782d6d5..00000000
--- a/app/ng-ui-widgets-category/web-view/gestures/style.css
+++ /dev/null
@@ -1,3 +0,0 @@
-Label{
-    background-color: lightblue;
-}
\ No newline at end of file
diff --git a/app/ng-ui-widgets-category/web-view/gestures/web-view-gestures.component.html b/app/ng-ui-widgets-category/web-view/gestures/web-view-gestures.component.html
deleted file mode 100644
index 1e088e0a..00000000
--- a/app/ng-ui-widgets-category/web-view/gestures/web-view-gestures.component.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<StackLayout sdkExampleTitle sdkToggleNavButton>
-    <StackLayout>
-    <!-- >> web-gestures-html -->
-        <GridLayout rows="50 50 *">
-            <Label row="0" #touchlabel [text]="touchResult" textWrap="true" ></Label>
-            <Label row="1" #panlabel [text]="panResult" textWrap="true" ></Label>
-            <WebView row="2" (loaded)="onWebViewLoaded($event)"  (touch)="webViewTouch($event)" (pan)="webViewPan($event)" [src]="webViewSrc" ></WebView>
-        </GridLayout>
-    <!-- << web-gestures-html -->
-    </StackLayout>
-</StackLayout>
\ No newline at end of file
diff --git a/app/ng-ui-widgets-category/web-view/metadata.md b/app/ng-ui-widgets-category/web-view/metadata.md
index e9cfe9e8..b87c05dd 100644
--- a/app/ng-ui-widgets-category/web-view/metadata.md
+++ b/app/ng-ui-widgets-category/web-view/metadata.md
@@ -4,3 +4,4 @@ description: The WebView module allows loading Web page inside a NativeScript An
 position: 46
 slug: web-view-ng
 ---
+example-order: usage, tips-and-tricks
\ No newline at end of file
diff --git a/app/ng-ui-widgets-category/web-view/overview.md b/app/ng-ui-widgets-category/web-view/overview.md
index a93d8be7..178773fe 100644
--- a/app/ng-ui-widgets-category/web-view/overview.md
+++ b/app/ng-ui-widgets-category/web-view/overview.md
@@ -1 +1 @@
-The WebView component is used to display web content within your application. You use the control by providing a `src` attribute that points at a URL or a local HTML file.
+The `WebView` component is used to display web content within your application. You use the control by providing a `src` attribute that accepts a URL,a path to a local HTML file or directly HTML string.
diff --git a/app/ng-ui-widgets-category/web-view/style.css b/app/ng-ui-widgets-category/web-view/style.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/ng-ui-widgets-category/web-view/tips-and-tricks/article.md b/app/ng-ui-widgets-category/web-view/tips-and-tricks/article.md
new file mode 100644
index 00000000..afe5380a
--- /dev/null
+++ b/app/ng-ui-widgets-category/web-view/tips-and-tricks/article.md
@@ -0,0 +1,11 @@
+### Gestures in WebView
+
+<snippet id='web-gestures-html'/>
+<snippet id='webview-ts-gestures'/>
+
+> **Note:** To be able to use gestures in `WebView` component on Android, we should first disabled the zoom control. To do that we could access the `android` property and with the help of  `setDisplayZoomControls` to set this control to `false`.
+
+### Using HTML file & strings
+
+<snippet id='web-view-xml-local-file'/>
+<snippet id='web-view-src-local-file'/>
\ No newline at end of file
diff --git a/app/ng-ui-widgets-category/web-view/tips-and-tricks/tips-and-tricks.component.html b/app/ng-ui-widgets-category/web-view/tips-and-tricks/tips-and-tricks.component.html
new file mode 100644
index 00000000..e4aabe15
--- /dev/null
+++ b/app/ng-ui-widgets-category/web-view/tips-and-tricks/tips-and-tricks.component.html
@@ -0,0 +1,9 @@
+<StackLayout sdkExampleTitle sdkToggleNavButton>
+    <!-- >> web-gestures-html -->
+    <GridLayout rows="50 50 *">
+        <Label row="0" #touchlabel [text]="touchResult" textWrap="true" ></Label>
+        <Label row="1" #panlabel [text]="panResult" textWrap="true" ></Label>
+        <WebView row="2" (loaded)="onWebViewLoaded($event)"  (touch)="webViewTouch($event)" (pan)="webViewPan($event)" [src]="webViewSrc" ></WebView>
+    </GridLayout>
+    <!-- << web-gestures-html -->
+</StackLayout>
\ No newline at end of file
diff --git a/app/ng-ui-widgets-category/web-view/gestures/web-view-gestures.component.ts b/app/ng-ui-widgets-category/web-view/tips-and-tricks/tips-and-tricks.component.ts
similarity index 57%
rename from app/ng-ui-widgets-category/web-view/gestures/web-view-gestures.component.ts
rename to app/ng-ui-widgets-category/web-view/tips-and-tricks/tips-and-tricks.component.ts
index 27963d69..ff8fe41a 100644
--- a/app/ng-ui-widgets-category/web-view/gestures/web-view-gestures.component.ts
+++ b/app/ng-ui-widgets-category/web-view/tips-and-tricks/tips-and-tricks.component.ts
@@ -1,33 +1,31 @@
 // tslint:disable:max-line-length
 // >> webview-ts-gestures
-import { Component, ViewChild, ElementRef } from "@angular/core";
+import { Component } from "@angular/core";
 import { isAndroid } from "tns-core-modules/platform";
 
 @Component({
     moduleId: module.id,
-    // >> (hide)
-    styleUrls: ["./style.css"],
-    // << (hide)
-    templateUrl: "./web-view-gestures.component.html"
+    templateUrl: "./tips-and-tricks.component.html"
 })
-export class WebViewGesturesComponent {
-    public webViewSrc = "<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>";
-    public touchResult = "Touch: x: _ y: _";
-    public panResult = "Pan: deltaX: _ deltaY: _";
+export class TipsAndTricksComponent {
+    webViewSrc = "<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>";
+    touchResult = "Touch: x: _ y: _";
+    panResult = "Pan: deltaX: _ deltaY: _";
 
-    public onWebViewLoaded(webargs) {
+    onWebViewLoaded(webargs) {
         const webview = webargs.object;
         if (isAndroid) {
+            // Disabled the native zoom control (to enable gestures on Android)
             webview.android.getSettings().setDisplayZoomControls(false);
         }
     }
 
-    public webViewTouch(args) {
+    webViewTouch(args) {
         this.touchResult = `Touch: x: ${args.getX().toFixed(3)} y: ${args.getY().toFixed(3)}`;
         console.log(`Touch: x: ${args.getX().toFixed(3)} y: ${args.getY().toFixed(3)}`);
     }
 
-    public webViewPan(args) {
+    webViewPan(args) {
         this.panResult = `Pan: deltaX: ${args.deltaX.toFixed(3)} deltaY: ${args.deltaY.toFixed(3)}`;
         console.log(`Pan: deltaX: ${args.deltaX.toFixed(3)} deltaY: ${args.deltaY.toFixed(3)}`);
     }
diff --git a/app/ng-ui-widgets-category/web-view/usage/article.md b/app/ng-ui-widgets-category/web-view/usage/article.md
new file mode 100644
index 00000000..a1a71345
--- /dev/null
+++ b/app/ng-ui-widgets-category/web-view/usage/article.md
@@ -0,0 +1,4 @@
+<snippet id='web-events-html'/>
+<snippet id='webview-ts-events'/>
+
+In the above samples, we are setting up `loadStarted` and `loadFinished` events. Both events will be emitted when there is a change the source for the `WebView` component (change the URL or load local HTML file). The `loadStarted` event will be executed when the WebView source start loading and `loadFinished` will be fired when the source is already loaded. The events will return info of type `LoadEventData`.
\ No newline at end of file
diff --git a/app/ng-ui-widgets-category/web-view/usage/usage.component.html b/app/ng-ui-widgets-category/web-view/usage/usage.component.html
new file mode 100644
index 00000000..8c9fad18
--- /dev/null
+++ b/app/ng-ui-widgets-category/web-view/usage/usage.component.html
@@ -0,0 +1,8 @@
+<GridLayout rows="*" columns="*" sdkExampleTitle sdkToggleNavButton>
+    <!-- >> web-events-html -->
+    <WebView [src]="webViewSrc" 
+             (loadStarted)="onLoadStarted($event)" 
+             (loadFinished)="onLoadFinished($event)">
+    </WebView>
+    <!-- << web-events-html -->
+</GridLayout>
diff --git a/app/ng-ui-widgets-category/web-view/usage/usage.component.ts b/app/ng-ui-widgets-category/web-view/usage/usage.component.ts
new file mode 100644
index 00000000..dc4df168
--- /dev/null
+++ b/app/ng-ui-widgets-category/web-view/usage/usage.component.ts
@@ -0,0 +1,41 @@
+// tslint:disable:max-line-length
+// >> webview-ts-events
+import { Component } from "@angular/core";
+import { WebView, LoadEventData } from "tns-core-modules/ui/web-view";
+
+@Component({
+    moduleId: module.id,
+    templateUrl: "./usage.component.html"
+})
+export class UsageComponent {
+    webViewSrc = "https://docs.nativescript.org/";
+
+    onLoadStarted(args: LoadEventData) {
+        const webView = args.object as WebView;
+
+        if (!args.error) {
+            console.log("Load Start");
+            console.log(`EventName: ${args.eventName}`);
+            console.log(`NavigationType: ${args.navigationType}`);
+            console.log(`Url: ${args.url}`);
+        } else {
+            console.log(`EventName: ${args.eventName}`);
+            console.log(`Error: ${args.error}`);
+        }
+    }
+
+    onLoadFinished(args: LoadEventData) {
+        const webView = args.object as WebView;
+
+        if (!args.error) {
+            console.log("Load Finished");
+            console.log(`EventName: ${args.eventName}`);
+            console.log(`NavigationType: ${args.navigationType}`);
+            console.log(`Url: ${args.url}`);
+        } else {
+            console.log(`EventName: ${args.eventName}`);
+            console.log(`Error: ${args.error}`);
+        }
+    }
+}
+// << webview-ts-events
diff --git a/app/ng-ui-widgets-category/web-view/web-view-examples.component.ts b/app/ng-ui-widgets-category/web-view/web-view-examples.component.ts
index fbc04fed..4ee3befe 100644
--- a/app/ng-ui-widgets-category/web-view/web-view-examples.component.ts
+++ b/app/ng-ui-widgets-category/web-view/web-view-examples.component.ts
@@ -2,10 +2,9 @@ import { Component, ChangeDetectionStrategy } from "@angular/core";
 import { Link } from "./../../link";
 
 let menuLinks = [
-    new Link("Basic WebView", "/web-view/basic"),
-    new Link("HTML as source of WebView", "/web-view/html"),
-    new Link("WebView - Gestures", "/web-view/gestures"),
-    new Link("WebView - Events", "/web-view/events")
+    new Link("Usage", "/web-view/usage"),
+    new Link("Tips & Tricks", "/web-view/tips-and-tricks"),
+    new Link("WebVIew with HTML File", "/web-view/html-file"),
 ];
 
 @Component({
diff --git a/app/ng-ui-widgets-category/web-view/web-view-examples.module.ts b/app/ng-ui-widgets-category/web-view/web-view-examples.module.ts
index 29214149..e82a9408 100644
--- a/app/ng-ui-widgets-category/web-view/web-view-examples.module.ts
+++ b/app/ng-ui-widgets-category/web-view/web-view-examples.module.ts
@@ -3,10 +3,9 @@ import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
 import { NativeScriptCommonModule } from "nativescript-angular/common";
 import { WebViewExamplesComponent } from "./web-view-examples.component";
-import { BasicWebViewComponent } from "./basic-web-view/basic-web-view.component";
+import { UsageComponent } from "./usage/usage.component";
+import { TipsAndTricksComponent } from "./tips-and-tricks/tips-and-tricks.component";
 import { WebViewHtmlComponent } from "./web-view-html/web-view-html.component";
-import { WebViewGesturesComponent } from "./gestures/web-view-gestures.component";
-import { WebViewEventsComponent } from "./events/web-view-events.component";
 import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module";
 
 export const routerConfig = [
@@ -15,24 +14,19 @@ export const routerConfig = [
         component: WebViewExamplesComponent
     },
     {
-        path: "basic",
-        component: BasicWebViewComponent,
-        data: { title: "Basic WebView" }
+        path: "usage",
+        component: UsageComponent,
+        data: { title: "Usage" }
     },
     {
-        path: "html",
-        component: WebViewHtmlComponent,
-        data: { title: "HTML as source of WebView" }
-    },
-    {
-        path: "gestures",
-        component: WebViewGesturesComponent,
-        data: { title: "WebView - Gestures" }
+        path: "tips-and-tricks",
+        component: TipsAndTricksComponent,
+        data: { title: "Tips and Tricks" }
     },
     {
-        path: "events",
-        component: WebViewEventsComponent,
-        data: { title: "WebView - Events" }
+        path: "html-file",
+        component: WebViewHtmlComponent,
+        data: { title: "Using HTML file" }
     }
 ];
 
@@ -44,7 +38,7 @@ export const routerConfig = [
         NativeScriptRouterModule,
         NativeScriptRouterModule.forChild(routerConfig)
     ],
-    declarations: [WebViewExamplesComponent, BasicWebViewComponent, WebViewHtmlComponent, WebViewGesturesComponent, WebViewEventsComponent]
+    declarations: [WebViewExamplesComponent, UsageComponent, TipsAndTricksComponent, WebViewHtmlComponent]
 })
 
 export class WebViewExamplesModule { }
diff --git a/app/ng-ui-widgets-category/web-view/web-view-html/article.md b/app/ng-ui-widgets-category/web-view/web-view-html/article.md
index 321455d3..8b137891 100644
--- a/app/ng-ui-widgets-category/web-view/web-view-html/article.md
+++ b/app/ng-ui-widgets-category/web-view/web-view-html/article.md
@@ -1,5 +1 @@
-HTML
-<snippet id='web-view-xml-local-file'/>
 
-Add WebView `src` from local file
-<snippet id='web-view-src-local-file'/>
\ No newline at end of file
diff --git a/app/ng-ui-widgets-category/web-view/web-view-html/style.css b/app/ng-ui-widgets-category/web-view/web-view-html/style.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/ng-ui-widgets-category/web-view/web-view-html/web-view-html.component.ts b/app/ng-ui-widgets-category/web-view/web-view-html/web-view-html.component.ts
index 53f3b85d..6d388ac9 100644
--- a/app/ng-ui-widgets-category/web-view/web-view-html/web-view-html.component.ts
+++ b/app/ng-ui-widgets-category/web-view/web-view-html/web-view-html.component.ts
@@ -4,13 +4,10 @@ import { Component } from "@angular/core";
 
 @Component({
     moduleId: module.id,
-    // >> (hide)
-    styleUrls: ["./style.css"],
-    // << (hide)
     templateUrl: "./web-view-html.component.html",
 })
 export class WebViewHtmlComponent {
-    public firstWebViewSRC = '<!DOCTYPE html><html><head><title>MyTitle</title><meta charset="utf-8" /></head><body><span style="color:#0099CC; text-align: center;">First WebView</span></body></html>';
-    public secondWebViewSRC = "~/ng-ui-widgets-category/web-view/web-view-html/test.html";
+    firstWebViewSRC = '<!DOCTYPE html><html><head><title>MyTitle</title><meta charset="utf-8" /></head><body><span style="color:#0099CC; text-align: center;">First WebView</span></body></html>';
+    secondWebViewSRC = "~/ng-ui-widgets-category/web-view/web-view-html/test.html";
 }
 // << web-view-src-local-file