Tyring to import import { HttpClient, Headers, RequestOptions } from '@angular/common/http';

user_11475560 0
Viewed 4070

Im working with ionic 4 project. and now im trying to make an http post and im follwoing the tut on this link: https://www.techiediaries.com/ionic-http-post/. now it is saying that he cant find Headers, RequestOptions in @angular/common/http';

I tried different thing i find on stack overflow.

import { Component, OnInit } from '@angular/core';
import { HttpClient, Headers, RequestOptions } from 
'@angular/common/http';

@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {

constructor(public httpClient: HttpClient) {
 }
 ngOnInit(){}

  sendPostRequest() {
var headers = new Headers();
headers.append("Accept", 'application/json');
headers.append('Content-Type', 'application/json' );
const requestOptions = new RequestOptions({ headers: headers });

let postData = {
        "name": "Customer004",
        "email": "customer004@email.com",
        "tel": "0000252525"
}

this.http.post("http://127.0.0.1:3000/customers", postData, requestOptions)
  .subscribe(data => {
    console.log(data['_body']);
   }, error => {
    console.log(error);
  });
  }
ionic-framework angular
4 Answers

Hi try this insted of headers use HttpHeaders: 

import { HttpClient, HttpHeaders , RequestOptions } from '@angular/common/http';
user_66137430

Angular 5 Onward, If you want to communicate in JSON only then it is not required to set Content-Type as application/json. It will default communicate in JSON format.

So you can just use it as

For GET call

this.http.get('YOUR API').subscribe((response) => {
    console.log(response);
});

For POST call

this.http.post('YOUR API', `{JSON OBJECT}`).subscribe((response) => {
    console.log(response);
});

You can also add Custom Headers for example Authorization token as below

import { HttpClient, HttpHeaders } from '@angular/common/http';

requestHeaders = new HttpHeaders().set('Authorization', 'Token');

and use it as below

For GET call

this.http.get('YOUR API', {headers: this.requestHeaders}).subscribe((response) => {
    console.log(response);
});

For POST call

this.http.post('YOUR API', `{JSON OBJECT}`, {headers: this.requestHeaders}).subscribe((response) => {
    console.log(response);
});

HttpHeaders includes the methods like set(), append() etc.

user_93809440

this is how we can add header 

  import { HttpHeaders } from '@angular/common/http';


    let yourheaders = new HttpHeaders({
    'Content-Type': 'application/json'
    });

    let youroptions = {
    headers: yourheaders
    }

Take look this look at this also

user_61831130

Keep it Simple:

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) { 
}

Get Api:

this.http.get('https://someapi.com/posts').subscribe((response) => {
    console.log(response);
});

Post Api:

    let YourHeaders = {'Content-Type':'application/json'};
    this.http.post(url, YourData, {headers: YourHeaders})
      .subscribe(data => {
      console.log(data)
    },
    (error) => {
            console.log("Error" + error)
    })
user_59090260
Related