Http

In order to use the Angular's HttpClient module the first thing to do is to import our NativeScript wrapper in the respective module file.

import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";

@NgModule({
    imports: [
        NativeScriptHttpClientModule
    ]

Note: The HttpClient is Angular module that comes from @angular/common/http. However, you will need to import the NativeScript wrapper (NativeScriptHttpClientModule) to be able to work with the HttpClient module.

Usage

HTTP Get

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).

http-get.service.ts

import { Injectable } from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http";

@Injectable(
    // Instead of providers array you can use provideIn
    // Learn more https://angular.io/guide/providers
    // {
    //     providedIn: "root"
    // }
)
export class MyHttpGetService {
    private serverUrl = "https://httpbin.org/get";

    constructor(private http: HttpClient) { }

    getData() {
        let headers = this.createRequestHeader();
        return this.http.get(this.serverUrl, { headers: headers });
    }

    private createRequestHeader() {
        // set headers here e.g.
        let headers = new HttpHeaders({
            "AuthKey": "my-key",
            "AuthToken": "my-token",
            "Content-Type": "application/json",
         });

        return headers;
    }
}

Provide the service in the component. Declare the service (either in the providers array of your module/component or by using provideIn - learn more about Angular providers here) and inject it in the component's constructor.

http-get.component.ts

import { Component, OnInit } from "@angular/core";
import { MyHttpGetService } from "./http-get.services";

@Component({
    moduleId: module.id,
    templateUrl: "./http-get.component.html",
    providers: [MyHttpGetService] // using the providers array
})
export class HttpGetComponent implements OnInit {
    host: string;
    userAgent: string;
    origin: string;
    url: string;

    constructor(private myService: MyHttpGetService) { }

    ngOnInit() {
        this.extractData();
    }

    extractData() {
        this.myService.getData()
            .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;
    }
}

HTTP Post

Using the POST method by creating a service file to keep the HTTP logic separated from the component file.

http-post.service.ts

import { Injectable } from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http";

@Injectable()
export class MyHttpPostService {
    private serverUrl = "https://httpbin.org/post";

    constructor(private http: HttpClient) { }

    postData(data: any) {
        let options = this.createRequestOptions();
        return this.http.post(this.serverUrl, { data }, { headers: options });
    }

    private createRequestOptions() {
        let headers = new HttpHeaders({
            "Content-Type": "application/json"
        });
        return headers;
    }
}

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.

http-post.component.ts

import { Component } from "@angular/core";
import { MyHttpPostService } from "./http-post.services";

@Component({
    moduleId: module.id,
    templateUrl: "./http-post.component.html",
    providers: [MyHttpPostService]
})
export class HttpPostComponent {
    public user: string;
    public pass: string;
    public message: string = "";
    constructor(private myPostService: MyHttpPostService) { }

    public submit() {
        this.makePostRequest();
    }

    private makePostRequest() {
        this.myPostService
            .postData({ username: this.user, password: this.pass })
            .subscribe(res => {
                this.message = (<any>res).json.data.username;
            });
    }
}

HTTP Put

Using the PUT method by creating a service file to keep the HTTP logic separated from the component file.

http-put.service.ts

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;
    }
}

Provide the service in the component (or in the related NgModule if the service should be reused).

http-put.component.ts

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 Delete

Using the DELETE method by creating a service file to keep the HTTP logic separated from the component file.

http-delete.service.ts

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;
    }
}

Provide the service in the component (or in the related NgModule if the service should be reused).

http-delete.component.ts

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;
    }
}

Improve this document

Demo Source

Methods

Refer to the Angular's official documentation for more details on HttpClient module.

API References