Create a new post object and display it in the top of our list in the browser

app.component.ts

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

@Component({
  selector: 'posts',
  templateUrl: './posts.component.html',
  styleUrls: ['./posts.component.scss']
})
export class PostsComponent {
  posts: any;
  private url = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) { 
    http.get(this.url).subscribe(res => {
      console.log(res);
      this.posts = res;
    });
  }
    createPost(input: HTMLInputElement){
      let post = { title: input.value };
      input.value = '';

      this.http.post(this.url, JSON.stringify(post))
      .subscribe(res => {
        post['id'] = res['id'];
        this.posts.splice(0, 0, post);
        console.log(res);
      })
    }
}