adding extended example, which shows how to use ActivityIndicator dur…

app/App_Resources/iOS/Info.plist

@@ -48,5 +48,20 @@
 		<key>NSAllowsArbitraryLoads</key>
 		<true/>
 	</dict>
+	<key>NSAppTransportSecurity</key>
+	<dict>
+		<key>NSExceptionDomains</key>
+		<dict>
+			<key>fakeresponse.com</key>
+			<dict>
+				<key>NSIncludesSubdomains</key>
+				<true/>
+				<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+				<true/>
+				<key>NSTemporaryExceptionMinimumTLSVersion</key>
+				<string>TLSv1.1</string>
+			</dict>
+		</dict>
+	</dict>
 </dict>
 </plist>

app/ui-category/activity-indicator/activity-indicator-examples.component.ts

@@ -2,7 +2,8 @@ import { Component, ChangeDetectionStrategy } from "@angular/core";
 import { Link } from "./../../link";
 
 let menuLinks = [
-    new Link("Set busy property", "/activity-indicator/setting-busy")
+    new Link("Set busy property", "/activity-indicator/setting-busy"),
+    new Link("Set busy property(during HTTP Request)", "/activity-indicator/setting-busy-http-request")
 ];
 
 @Component({

app/ui-category/activity-indicator/activity-indicator-examples.module.ts

@@ -1,8 +1,10 @@
 import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
 import { NativeScriptCommonModule } from "nativescript-angular/common";
+import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";
 import { ActivityIndicatorExamplesComponent } from "./activity-indicator-examples.component";
 import { SettingBusyComponent } from "./setting-busy/setting-busy.component";
+import { SettingBusyHttpRequestComponent } from "./setting-busy-http-request/setting-busy-http-request.component";
 import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module";
 
 export const routerConfig = [
@@ -14,6 +16,11 @@ export const routerConfig = [
         path: "setting-busy",
         component: SettingBusyComponent,
         data: { title: "Set busy property" }
+    },
+    {
+        path: "setting-busy-http-request",
+        component: SettingBusyHttpRequestComponent,
+        data: { title: "Set busy property(during HTTP Request)" }
     }
 ];
 
@@ -23,11 +30,13 @@ export const routerConfig = [
         TitleAndNavButtonModule,
         NativeScriptCommonModule,
         NativeScriptRouterModule,
+        NativeScriptHttpClientModule,
         NativeScriptRouterModule.forChild(routerConfig)
     ],
     declarations: [
         ActivityIndicatorExamplesComponent,
-        SettingBusyComponent
+        SettingBusyComponent,
+        SettingBusyHttpRequestComponent
     ]
 })
 

app/ui-category/activity-indicator/setting-busy-http-request/article.md

@@ -0,0 +1,7 @@
+Extended example, desmostrating how to use ActivityIndicator during HTTP request
+
+Setting an activity indicator in the HTML:
+<snippet id='activity-indicator-setting-busy-html'/>
+
+Setting an activity indicator’s `busy` property value:
+<snippet id='activity-indicator-setting-busy-code'/>

app/ui-category/activity-indicator/setting-busy-http-request/setting-busy-http-request.component.html

@@ -0,0 +1,17 @@
+<GridLayout sdkExampleTitle sdkToggleNavButton rows=" auto auto, auto, auto, auto" columns="*, 2*">
+    <!-- >> activity-indicator-setting-busy-html -->
+    <Label class="p-15" row="0" col="0" colSpan="2" textAlignment="center" text="The response of the HTTP request will be returned with 5 sec. delay." textWrap="true"></Label>
+
+    <Label class="p-15" row="1" col="0" text="IP" textWrap="true"></Label>
+    <Label class="p-15" row="2" col="0" text="Status" textWrap="true"></Label>
+    <Label class="p-15" row="3" col="0" text="Slept" textWrap="true"></Label>
+    <Label class="p-15" row="4" col="0" text="Response" textWrap="true"></Label>
+
+    <Label class="p-15" row="1" col="1" [text]="originatingIp" textWrap="true"></Label>
+    <Label class="p-15" row="2" col="1" [text]="status" textWrap="true"></Label>
+    <Label class="p-15" row="3" col="1" text="{{ slept + ' seconds'}}" textWrap="true"></Label>
+    <Label class="p-15" row="4" col="1" [text]="response" textWrap="true"></Label>
+
+    <ActivityIndicator row="0" rowSpan="5" colSpan="2" #activityIndicator [busy]="isBusy" class="activity-indicator"></ActivityIndicator>
+    <!-- << activity-indicator-setting-busy-html -->
+</GridLayout>

app/ui-category/activity-indicator/setting-busy-http-request/setting-busy-http-request.component.ts

@@ -0,0 +1,47 @@
+// >> activity-indicator-setting-busy-code
+import { Component, AfterViewInit } from "@angular/core";
+import { HttpClient, HttpHeaders, HttpResponse } from "@angular/common/http";
+
+@Component({
+    moduleId: module.id,
+    templateUrl: "./setting-busy-http-request.component.html"
+})
+export class SettingBusyHttpRequestComponent implements AfterViewInit {
+    public originatingIp = "";
+    public status = "";
+    public slept = "_";
+    public response = "";
+    public isBusy = true;
+    private serverUrl = "http://www.fakeresponse.com/api/?sleep=5";
+
+    constructor(private http: HttpClient) {}
+
+    ngAfterViewInit() {
+        let headers = this.createRequestHeader();
+            this.http.get(this.serverUrl, { headers: headers })
+            .subscribe(
+                data => {
+                    this.originatingIp = data["meta"]["originating_ip"];
+                    this.status = data["status"];
+                    this.slept = data["slept"];
+                    this.response = data["response"];
+                    this.isBusy = false;
+                },
+                err => {
+                  console.log("Error occured.");
+                  console.log(err);
+                }
+              );
+    }
+
+    private createRequestHeader() {
+        let headers = new HttpHeaders();
+        // set headers here e.g.
+        headers.append("AuthKey", "my-key");
+        headers.append("AuthToken", "my-token");
+        headers.append("Content-Type", "application/json");
+
+        return headers;
+    }
+}
+// << activity-indicator-setting-busy-code