angular 4 httpclient delete example


Angular 4 HttpClient delete example

angular 4 HttpClient delete example , here in this post we will learn how to @PathParam value as part of Angular HttpClient delete method.

We will be using HttpClient class delete method along with RxJS Observables.

Let’s take create service and component class to call Rest Api with student object.

  1. student.service.ts
  2. student.component.ts

student.service.ts

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

@Injectable()
export class StudentService {
   BASE_URL="/api/"
   API_DELETE_STUDENT_URL = this.BASE_URL + "delete/student";
   constructor(public http: HttpClient) { }
   
   deleteStudent(id: string) {
      return this.http.delete<any>(this.API_DELETE_STUDENT_URL + "/" + id);
   }
}

student.component.ts

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { StudentService } from './student.service';
@Component({
  selector:'student',
  templateUrl:'./student.html'
})

export class StudentComponent {
  constructor(private studentService: StudentService) { }
  ngOnInit() {
     this.deleteStudent("s-101");
  }

  deleteStudent(id: string) {
      this.studentService.deleteStudent(id).subscribe(
      (data: any) => console.log(data),
      (err: any) => console.log(err),
      () => console.log("--------Done--------")
   );
 }
      
}

Here student service will be calling below Rest Api.

package com.javagf.api;

import javax.ws.rs.Consumes;
import javax.ws.rs.Path;
import javax.ws.rs.DELETE;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
import com.javagf.vo.StudentVO;

@Path("/api/")
@Consumes(MediaType.APPLICATION_JSON)
@Produces(MediaType.APPLICATION_JSON)
public class StudentApiImpl {
  
  @Path("delete/student/{id}")
  @DELETE
  public Response deleteCustomer(@PathParam("id") String id) {
     System.out.println("-----Delete student request------");
     return Response.noContent().build();
  }
}

 






Full-stack web and mobile app development company Contact Us : Skype: indore.webcoder Email: info@w3sparks.com Sales: +91 8085506229