chore: version update + added HTTP examples for PUT & DELETE

.gitignore

@@ -14,4 +14,4 @@ app/**/*.js
 tags
 
 tsconfig.esm.json
-
+package-lock.json

app/ng-framework-modules-category/http/http-delete/article.md

@@ -0,0 +1,5 @@
+Using the DELETE method by creating a service file to keep the HTTP logic separated from the component file.
+<snippet id='http-delete-service'/>
+
+Provide the service in the component (or in the related `NgModule` if the service should be reused).
+<snippet id='http-delete-component'/>

app/ng-framework-modules-category/http/http-delete/http-delete.component.html

@@ -0,0 +1,13 @@
+<ScrollView sdkExampleTitle sdkToggleNavButton>
+    <GridLayout class="page" rows="auto, auto, auto, auto, auto, auto, auto, auto, auto" columns="*, 2*">
+        <Label class="p-15" row="0" col="0" text="Host" textWrap="true"></Label>
+        <Label class="p-15" row="1" col="0" text="User-Agent" textWrap="true"></Label>
+        <Label class="p-15" row="2" col="0" text="Origin" textWrap="true"></Label>
+        <Label class="p-15" row="3" col="0" text="Url" textWrap="true"></Label>
+
+        <Label class="p-15" row="0" col="1" [text]="host" textWrap="true"></Label>
+        <Label class="p-15" row="1" col="1" [text]="userAgent" textWrap="true"></Label>
+        <Label class="p-15" row="2" col="1" [text]="origin" textWrap="true"></Label>
+        <Label class="p-15" row="3" col="1" [text]="url" textWrap="true"></Label>
+    </GridLayout>
+</ScrollView>

app/ng-framework-modules-category/http/http-delete/http-delete.component.ts

@@ -0,0 +1,42 @@
+// >> http-put-component
+import { Component, OnInit } from "@angular/core";
+import { MyHttpDeleteService } from "./http-delete.service";
+
+@Component({
+    selector: "sdk-http-delete",
+    moduleId: module.id,
+    templateUrl: "./http-delete.component.html",
+    providers: [MyHttpDeleteService]
+})
+
+export class HttpDeleteComponent implements OnInit {
+    host: string;
+    userAgent: string;
+    origin: string;
+    url: string;
+    data: string;
+
+    constructor(private myService: MyHttpDeleteService) { }
+
+    ngOnInit() {
+        this.extractData();
+    }
+
+    extractData() {
+        this.myService.deleteData()
+            .subscribe((result) => {
+                this.onGetDataSuccess(result);
+            }, (error) => {
+                console.log(error);
+            });
+    }
+
+    private onGetDataSuccess(res) {
+        this.host = res.headers.Host;
+        this.userAgent = res.headers["User-Agent"];
+        this.origin = res.origin;
+        this.url = res.url;
+        this.data = res.data;
+    }
+}
+// << http-put-component

app/ng-framework-modules-category/http/http-delete/http-delete.service.ts

@@ -0,0 +1,25 @@
+// >> http-delete-service
+import { Injectable } from "@angular/core";
+import { HttpClient, HttpHeaders } from "@angular/common/http";
+
+@Injectable()
+export class MyHttpDeleteService {
+    private serverUrl = "https://httpbin.org/delete";
+
+    constructor(private http: HttpClient) { }
+
+    deleteData() {
+        let headers = this.createRequestHeader();
+        return this.http.delete(this.serverUrl, { headers: headers });
+    }
+
+    private createRequestHeader() {
+        // set headers here e.g.
+        let headers = new HttpHeaders({
+            "Content-Type": "application/json",
+         });
+
+        return headers;
+    }
+}
+// << http-delete-service

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

@@ -3,7 +3,9 @@ import { Link } from "./../../link";
 
 let menuLinks = [
     new Link("HTTP POST", "/http/http-post"),
-    new Link("HTTP GET", "/http/http-get")
+    new Link("HTTP GET", "/http/http-get"),
+    new Link("HTTP PUT", "/http/http-put"),
+    new Link("HTTP DELETE", "/http/http-delete")
 ];
 
 @Component({

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

@@ -6,7 +6,9 @@ import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";
 
 import { HttpExamplesComponent } from "./http-examples.component";
 
+import { HttpDeleteComponent } from "./http-delete/http-delete.component";
 import { HttpGetComponent } from "./http-get/http-get.component";
+import { HttpPutComponent } from "./http-put/http-put.component";
 import { HttpPostComponent } from "./http-post/http-post.component";
 import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module";
 
@@ -15,13 +17,21 @@ export const routerConfig = [
         path: "",
         component: HttpExamplesComponent
     },
+    {
+        path: "http-delete",
+        component: HttpDeleteComponent
+    },
     {
         path: "http-get",
         component: HttpGetComponent
     },
     {
         path: "http-post",
         component: HttpPostComponent
+    },
+    {
+        path: "http-put",
+        component: HttpPutComponent
     }
 ];
 
@@ -37,8 +47,10 @@ export const routerConfig = [
     ],
     declarations: [
         HttpExamplesComponent,
+        HttpDeleteComponent,
         HttpGetComponent,
-        HttpPostComponent
+        HttpPostComponent,
+        HttpPutComponent
     ]
 })
 

app/ng-framework-modules-category/http/http-get/article.md

@@ -9,9 +9,9 @@ import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";
     ]
 ```
 
-Creating a service file to keep our HTTP logic separated from our component file (which does not need to know details on how we fetch our data)
+Using the GET method by creating a service file to keep the HTTP logic separated from the component file (which does not need to know details on how you fetch the data).
 <snippet id='http-get-service'/>
 
-Finally, we can provide our service in our component. Note that the services should be explicitly declared in `providers`
-and then should be provided as an argument in our component's constructor
+Finally, you can provide the service in the component. Note that the services should be explicitly declared in `providers`
+and then should be provided as an argument in the component's constructor
 <snippet id='http-get-component'/>

app/ng-framework-modules-category/http/http-get/http-get.component.html

@@ -1,5 +1,5 @@
 <ScrollView sdkExampleTitle sdkToggleNavButton>
-    <GridLayout rows="auto, auto, auto, auto, auto, auto, auto, auto, auto" columns="*, 2*">
+    <GridLayout class="page" rows="auto, auto, auto, auto, auto, auto, auto, auto, auto" columns="*, 2*">
         <Label class="p-15" row="0" col="0" text="Host" textWrap="true"></Label>
         <Label class="p-15" row="1" col="0" text="User-Agent" textWrap="true"></Label>
         <Label class="p-15" row="2" col="0" text="Origin" textWrap="true"></Label>

app/ng-framework-modules-category/http/http-get/http-get.component.ts

@@ -24,7 +24,7 @@ export class HttpGetComponent implements OnInit {
             .subscribe((result) => {
                 this.onGetDataSuccess(result);
             }, (error) => {
-                this.onGetDataError(error);
+                console.log(error);
             });
     }
 
@@ -34,11 +34,5 @@ export class HttpGetComponent implements OnInit {
         this.origin = res.origin;
         this.url = res.url;
     }
-
-    private onGetDataError(error: Response | any) {
-        const body = error.json() || "";
-        const err = body.error || JSON.stringify(body);
-        console.log("onGetDataError: " + err);
-    }
 }
 // << http-get-component

app/ng-framework-modules-category/http/http-get/http-get.services.ts

@@ -1,6 +1,5 @@
 // >> http-get-service
 import { Injectable } from "@angular/core";
-import { Observable as RxObservable } from "rxjs";
 import { HttpClient, HttpHeaders, HttpResponse } from "@angular/common/http";
 
 @Injectable()
@@ -14,11 +13,6 @@ export class MyHttpGetService {
         return this.http.get(this.serverUrl, { headers: headers });
     }
 
-    getResponseInfo() {
-        let headers = this.createRequestHeader();
-        return this.http.get(this.serverUrl, { headers: headers });
-    }
-
     private createRequestHeader() {
         // set headers here e.g.
         let headers = new HttpHeaders({

app/ng-framework-modules-category/http/http-post/article.md

@@ -9,7 +9,7 @@ import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";
     ]
 ```
 
-Creating a service file to keep our HTTP logic separated from our component file (which does not need to know details on how we fetch our data)
+Using the POST method by creating a service file to keep the HTTP logic separated from the component file.
 <snippet id='http-post-service'/>
 
 Finally, we can provide our service in our component. Note that the services should be explicitly declared in `providers`

app/ng-framework-modules-category/http/http-post/http-post.services.ts

@@ -16,8 +16,6 @@ export class MyHttpPostService {
 
     private createRequestOptions() {
         let headers = new HttpHeaders({
-            "AuthKey": "my-key",
-            "AuthToken": "my-token",
             "Content-Type": "application/json"
         });
         return headers;

app/ng-framework-modules-category/http/http-put/article.md

@@ -0,0 +1,5 @@
+Using the PUT method by creating a service file to keep the HTTP logic separated from the component file.
+<snippet id='http-put-service'/>
+
+Provide the service in the component (or in the related `NgModule` if the service should be reused).
+<snippet id='http-put-component'/>

app/ng-framework-modules-category/http/http-put/http-put.component.html

@@ -0,0 +1,13 @@
+<ScrollView sdkExampleTitle sdkToggleNavButton>
+    <GridLayout class="page" rows="auto, auto, auto, auto, auto, auto, auto, auto, auto" columns="*, 2*">
+        <Label class="p-15" row="0" col="0" text="Host" textWrap="true"></Label>
+        <Label class="p-15" row="1" col="0" text="User-Agent" textWrap="true"></Label>
+        <Label class="p-15" row="2" col="0" text="Origin" textWrap="true"></Label>
+        <Label class="p-15" row="3" col="0" text="Url" textWrap="true"></Label>
+
+        <Label class="p-15" row="0" col="1" [text]="host" textWrap="true"></Label>
+        <Label class="p-15" row="1" col="1" [text]="userAgent" textWrap="true"></Label>
+        <Label class="p-15" row="2" col="1" [text]="origin" textWrap="true"></Label>
+        <Label class="p-15" row="3" col="1" [text]="url" textWrap="true"></Label>
+    </GridLayout>
+</ScrollView>

app/ng-framework-modules-category/http/http-put/http-put.component.ts

@@ -0,0 +1,42 @@
+// >> http-put-component
+import { Component, OnInit } from "@angular/core";
+import { MyHttpPutService } from "./http-put.services";
+
+@Component({
+    selector: "sdk-http-put",
+    moduleId: module.id,
+    templateUrl: "./http-put.component.html",
+    providers: [MyHttpPutService]
+})
+
+export class HttpPutComponent implements OnInit {
+    host: string;
+    userAgent: string;
+    origin: string;
+    url: string;
+    data: string;
+
+    constructor(private myService: MyHttpPutService) { }
+
+    ngOnInit() {
+        this.extractData();
+    }
+
+    extractData() {
+        this.myService.putData()
+            .subscribe((result) => {
+                this.onGetDataSuccess(result);
+            }, (error) => {
+                console.log(error);
+            });
+    }
+
+    private onGetDataSuccess(res) {
+        this.host = res.headers.Host;
+        this.userAgent = res.headers["User-Agent"];
+        this.origin = res.origin;
+        this.url = res.url;
+        this.data = res.data;
+    }
+}
+// << http-put-component

app/ng-framework-modules-category/http/http-put/http-put.services.ts

@@ -0,0 +1,25 @@
+// >> http-delete-service
+import { Injectable } from "@angular/core";
+import { HttpClient, HttpHeaders } from "@angular/common/http";
+
+@Injectable()
+export class MyHttpPutService {
+    private serverUrl = "https://httpbin.org/put";
+
+    constructor(private http: HttpClient) { }
+
+    putData() {
+        let headers = this.createRequestHeader();
+        return this.http.put(this.serverUrl, { headers: headers });
+    }
+
+    private createRequestHeader() {
+        // set headers here e.g.
+        let headers = new HttpHeaders({
+            "Content-Type": "application/json",
+         });
+
+        return headers;
+    }
+}
+// << http-delete-service

app/ng-framework-modules-category/http/metadata.md

@@ -1,6 +1,6 @@
 ---
 title: HTTP
-description: The HTTP client allows submitting GET and POST request on both iOS and Android. 
+description: The HTTP client allows submitting GET, POST, PUT, DELETE requests on both iOS and Android. 
 position: 9
 slug: http-ng
 ---