Angular HttpClient Delete

Question

I try to delete data from my database with an HttpClient (Angular), indeed I use a service (MemberService) which contain the delete method.

There is my MemberService :

export class MemberService {

  constructor(private http: HttpClient) { }

  getMembers(): Observable<IMember[]> {
    return this.http.get<IMember[]>('http://localhost:50867/api/Member');
  }

  getMember(memberId) {
    return this.http.get('http://localhost:50867/api/Member/' + memberId);
  }

  deleteMember(memberId) {
    return this.http.delete('http://localhost:50867/api/Member/' + memberId);
  }
}

So when i click on a button in my component.html that delete the data.

There is my component.ts code :

export class MemberDetailComponent implements OnInit {

  public member$: Object ;
  private id$: Object;

  constructor(private route: ActivatedRoute, private _memberService: MemberService) {
    this.route.params.subscribe( params => this.member$ = params.id );
  }

  ngOnInit() {
    this.id$ = this.member$;
    this._memberService.getMember(this.member$).subscribe(
      data => this.member$ = data);

  }

  deleteMember() {
    this._memberService.deleteMember(this.id$);
  }

}

There is my component.html :

<h1>{{ member$.username }}</h1>

<ul>
  <li><strong>wow:</strong> {{ member$.username }}</li>
  <li><strong>Email:</strong> {{ member$.emailUser }}</li>
  <li><strong>Phone:</strong> {{ member$.userPwd }}</li>
  <button (click)="deleteMember()">Delete</button>
</ul>

So when i launch my app and i click on the button, the id member is correct but nothing happens (there is no error in the console). Thanks in advance ;)

Answer 1

in component.ts, you have to subscribe in your deleteMember function like this :

deleteMember() {
  this._memberService.deleteMember(this.id$).subscribe();
}