Angular - HTTP Services

HTTP Services

I was recently outlining a new Angular site and I realized that I didn't have any solid HTTP services template code, and while I'm sure this isn't 100% solid yet, it's gettin' pretty firm ;-)
//Services (Typescript file - actual service file)

//post.service.ts

//this is the code that makes the actual HTTP call and gets/puts/patches/deletes data as needed

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

@Injectable({
  providedIn: 'root'
})
export class PostService {

  private url = 'http://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) { }

  getPosts() {
    return this.http.get(this.url);
  }

  createPost(post) {
    return this.http.post(this.url, JSON.stringify(post));
  }

  updatePost(post) {
    return this.http.patch(this.url + '/' + post.id, JSON.stringify({isRead:true}));
  }

  deletePost(id) {
    return this.http.delete(this.url + '/' + id)
  }
}


//Services (Typescript file - component consuming the service's data)

//authors.component.ts

/*the code below is the component that consumes the data from the post service 
(from the code above)
I roughed in some error trapping but the bulk of the HTTP trapping is happening 
in a global file which uses HTTPInterceptor and some Observables magic. I'll post that 
in another entry*/

import { Component, OnInit } from '@angular/core';
import { Url } from 'url';
import { PostService } from '../services/post.service';

@Component({
  selector: 'app-authors',
  templateUrl: './authors.component.html',
  styleUrls: ['./authors.component.css']
})
export class AuthorsComponent implements OnInit {
  posts: any;
  
  constructor(private service: PostService) { }

  ngOnInit() {
    this.service.getPosts()
    .subscribe(
    response => {
      this.posts = response
    }, 
    error => {
      alert('OOPS! An unexpected error occurred.'); 
      console.log(error);
    })
  }

  createPost(input: HTMLInputElement) {
    let post = {title: input.value};
    input.value='';
    
    this.service.createPost(post)
      .subscribe(
      response => {
        post['id'] = response['id'];
        this.posts.splice(0,0,post);
        //console.log(response); 
      }, 
      (error: Response) => {
        if (error.status === 400){
        }
        else {
          alert(' ...uh boy, an unexpected error occurred.'); 
          console.log(error);
        }
      })
  }

  updatePost(post) {
    this.service.updatePost(post)
    .subscribe(
    response => {
      console.log(response);
    }, 
    error => {
      alert('YIKES! An unexpected error occurred.'); 
      console.log(error);
    })
    //this.http.put(this.url, JSON.stringify(post));
  }

  deletePost(post){
    this.service.deletePost(post)
    .subscribe(
    response => {
      let index = this.posts.indexOf(post);
      this.posts.splice(index, 1);
    }, 
    (error: Response) => {
      if (error.status === 404) 
        alert('This post has already been deleted.');
      else {
        alert('NOT GOOD! An unexpected error occurred.'); 
        console.log(error);
      }
    });
  }
}


<!--Services (HTML file to output the service calls response)-->

<!--authors.component.html-->

<!--the code below is the html that displays the service call's data response
NOTHING PRETTY! This was all about the functionality, don't hold the formatting 
(or lack thereof) against me-->

<div style="text-align: left;">

    <input (keyup.enter)="createPost(title)" #title type="text">
    <ul *ngFor="let post of posts">
        <li>
            <button (click)="updatePost(post)">Update</button> <button (click)="deletePost(post)">Delete</button>
            id: {{post.id}} title: {{post.title}}<br>
        body: {{post.body}}
        </li>
    </ul>
</div>


Link your website to this page! Copy and paste the URL below:
http://www.cfsnap.com/angular/angular-2-http-services/