title: How can I solve - Property 'then' does not exist on type 'Subscription'
body: <p>I wrote PUT and DELETE methods inside their functions ("editForm" and "deleteForm" respectively). </p>
  
  <p>I wanted to display <code>setAlert()</code> function after each request successfully completes. therefore, I used <code>.then()</code> method and it works perfectly inside <code>editForm</code> function as you can see it below. </p>
  
  <p>but when I do the same for <code>deleteForm</code>, <code>.then()</code> method does not works, because 
  it says: " Property 'then' does not exist on type 'Subscription' ". So how can I solve this?</p>
  
  <p>Here is my component.ts file:</p>
  
  <pre><code>import { Component, OnInit, OnDestroy } from '@angular/core';
  import { ActivatedRoute, Router } from '@angular/router';
  import { FormService } from './forms.service';
  import { HttpClient } from '@angular/common/http';
  import { alert } from './alert';
  
  @Component({
    selector: 'app-forms',
    templateUrl: './forms.component.html',
    styleUrls: ['./forms.component.css']
  })
  
  
  export class FormsComponent implements OnInit {
  
    alert: alert;
    id: any;
    posts: any;
  
    constructor(public formService: FormService ,private route: ActivatedRoute,
      private router: Router, private http: HttpClient) { }
  
  
  
    ngOnInit() {
      this.id=this.route.snapshot.params['id'];
      this.alert = new alert();
  
      this.posts = this.formService.getForms(this.id).subscribe(
        (forms: any) =&gt; {
          this.formService.form = forms[0];
        }
      );
    }
  
    editPost() {
      this.formService.editForm().then((res:any) =&gt; {
        this.formService.alert.setAlert("Post has been successfully saved !");
      })
    }
  
    deletePost() {
      this.formService.deleteForm().subscribe(
        data  =&gt; {
          console.log("DELETE Request is successful ", data);
        },
        error  =&gt; {
          console.log("Error", error);
        }
      ).then(() =&gt; {
        this.formService.alert.setAlert("Post has been successfully deleted !");
      })
    }
  
  }
  </code></pre>
  
  <p>Here is my service.ts file: </p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { form } from './form-interface';
  import { alert } from './alert';
  
  
  @Injectable({
      providedIn: 'root'
  }) 
  
  export class FormService {
  
    formsUrl = "https://jsonplaceholder.typicode.com/posts";
    form: form = {
        id: 0,
        userId: 0,
        title: '',
        body: ''
    };
    alert: alert;
  
  
      constructor(private http: HttpClient) { 
        this.alert = new alert();
      }
  
      getForms(id) {
              return this.http.get('https://jsonplaceholder.typicode.com/posts'
              + "?id=" + id)
      }
  
      editForm() {
          return fetch(this.formsUrl + "/" + this.form.id, {
            method: 'PUT',
            body: JSON.stringify(this.form),
            headers: {
              "Content-type": "application/json; charset=UTF-8"
            }
          })
          .then(response =&gt; response.json())
      }
  
      deleteForm() {
          return this.http.delete(this.formsUrl + "/" + this.form.id);
        }
  
  }
  </code></pre>