typescript Angular HTTP Rest API GET，POST，PUT，DELETE

Posted 2021-05-20

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

@Injectable()
export class PostService {

  constructor(private http:HttpClient) { }

  getPosts() {
    return this.http.get('http://restapi.jomphp.com/wp-json/wp/v2/posts');
  }

  createPost(data) {

    //set authorization headers

    const token = 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9yZXN0YXBpLmpvbXBocC5jb20iLCJpYXQiOjE1Mjk4MTQzMTMsIm5iZiI6MTUyOTgxNDMxMywiZXhwIjoxNTMwNDE5MTEzLCJkYXRhIjp7InVzZXIiOnsiaWQiOiIxIn19fQ.6cKDCcoP7pdUajTiEdWqhQmkwRat8zBQe3bfBK2gNqk';

    const headers = new HttpHeaders()
      .set('Authorization', token);

    return this.http.post('http://restapi.jomphp.com/wp-json/wp/v2/posts', data, { headers });
  }

  deletePost(id) {

    //set authorization headers

    const token = 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9yZXN0YXBpLmpvbXBocC5jb20iLCJpYXQiOjE1Mjk4MTQzMTMsIm5iZiI6MTUyOTgxNDMxMywiZXhwIjoxNTMwNDE5MTEzLCJkYXRhIjp7InVzZXIiOnsiaWQiOiIxIn19fQ.6cKDCcoP7pdUajTiEdWqhQmkwRat8zBQe3bfBK2gNqk';

    const headers = new HttpHeaders()
      .set('Authorization', token);

    return this.http.delete('http://restapi.jomphp.com/wp-json/wp/v2/posts/' + id, { headers });
  }

}

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

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

  posts: any;

  constructor(private postService:PostService) { }

  ngOnInit() {
    this.getPosts();
  }

  getPosts() {

    this.postService.getPosts().subscribe(
      data => {
      
        this.posts = data;

        console.log(this.posts);
      }
    );

  }
  
  createPost() {

    //set to publish
    this.formData.status = 'publish';

    console.log(this.formData);

    this.postService.createPost(this.formData).subscribe(
      data => {
        console.log(data);

        //redirect to post list

        this.router.navigate(['post']);
      },
      error => {

      }
    );

  }

  deletePost(id) {

    let choice = confirm('Are you sure to delete?');

    if (choice) {

      console.log(id);

      this.postService.deletePost(id).subscribe(
        data => {
          this.getPosts();
        }
      );

    }

  }

}