httpservice.html

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

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {

  private headers: Headers;
  public dataURL: string = 'https://jsonplaceholder.typicode.com/';
  public listAllUsers=[];
  public searchUsers: string;

  constructor(private httpClient: HttpClient) { 
    this.headers = new Headers()
    this.headers.append('Accept', 'application/json')
    this.headers.append('Accept', 'application/x-www-form-urlencoded')
    this.headers.append('Content-Type', 'application/json')
    this.headers.append('Content-Type', 'application/x-www-form-urlencoded')
    this.headers.append('Access-Control-Allow-Origin', 'http://localhost:4200/')
    this.headers.append('Access-Control-Allow-Credentials', 'false')
    this.headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS, HEAD')
    this.headers.append('Access-Control-Allow-Origin', '*')
    console.log('Hello RemoteServiceProvider Provider');
    
  }

  ngOnInit() {
    this.getAllUsers();
  }

  //HTTP Service GET Method Coding
  getAllUsers()
  {   
    return this.httpClient.get(this.dataURL+'users').subscribe((res : any[])=>{      
      this.listAllUsers = res;
      });
  }

  //HTTP Service POST Method Coding
  // saveEnquiryDetails(enquiry: Enquiry)
  // {
  //   let options = new RequestOptions({ headers: this.headers });
  //   return this.http.post(this.dataURL+'api/insertEnquiryDetails.php', enquiry, options)
  //     .map(res => res.json());     
  // }

}
In the app.module.ts we have to add this line and to the imports array
import { HttpClientModule } from '@angular/common/http';