app.component

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
import * as _ from 'lodash';
import { Post } from './post';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit  {
  /**
   *
   */

  constructor(private http: HttpClient) {
       
  }
  title = 'app';

 readonly ROOT_URL= 'https://jsonplaceholder.typicode.com';
 posts:Observable<Post[]>;
 newPost: Observable<any>;
  
  getPosts(){
    let params = new HttpParams().set('userId', '7');
    let headers = new HttpHeaders().set('Authorization', 'auth-key');
    this.posts =this.http.get<Post[]>(this.ROOT_URL + '/posts', { headers })
  
    
  }

  submitPost(){
    const data:Post = {
      id:null,
      userId :7,
      title: 'New Post',
      body: 'Hello HTTP Client!'
    }

   this.newPost = this.http.post<Post>(this.ROOT_URL + '/posts', data)
   .map(post => post.title)
  }

  ngOnInit() {
    
  }

}