📺 "One project. One language. Three apps." Learn more in our upcoming code sharing webinar!

NativeScript Angular

Http

HTTP Module

Http Delete

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

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

Improve this document

Demo Source


Http Get

In order to use the HTTP the first thing to do is to declare our NativeScript wrapper in the respective module file

import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";
...
@NgModule({
    imports: [
        NativeScriptHttpClientModule
    ]

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

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

@Injectable()
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;
    }
}

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

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

@Component({
    moduleId: module.id,
    templateUrl: "./http-get.component.html",
    providers: [MyHttpGetService]
})
export class HttpGetComponent implements OnInit {
    public host: string;
    public userAgent: string;
    public origin: string;
    public 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;
    }
}

Improve this document

Demo Source


Http Post

In order to use the HTTP the first thing to do is to declare our NativeScript wrapper in the respective module file

import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";
...
@NgModule({
    imports: [
        NativeScriptHttpClientModule
    ]

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

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.

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

Improve this document

Demo Source


Http Put

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

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

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


API Reference for the HTTP Class