Help guide the NativeScript roadmap! Participate in the community survey. 📝

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 import 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(
    // 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.

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 {
    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