title: How to properly move function from component.ts to a service file?
body: <p>I wrote a function in my component.ts which sends PUT request. It works as it should, but I want to move the function to a service.ts file. I moved it but it doesn't work. When I click "Save", it shows an error in console:</p>
  
  <blockquote>
    <p>FormsComponent.html:32 ERROR TypeError: _co.editForm is not a function
        at Object.eval [as handleEvent] (FormsComponent.html:32)
        at handleEvent (core.js:23008)
        at callWithDebugContext (core.js:24078)
        at Object.debugHandleEvent [as handleEvent] (core.js:23805)
        at dispatchEvent (core.js:20457)
        at core.js:20904
        at HTMLButtonElement. (platform-browser.js:993)
        at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask
    (zone.js:423)
        at Object.onInvokeTask (core.js:17279)
        at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask
    (zone.js:422) View_FormsComponent_0 @ FormsComponent.html:32
    proxyClass @ compiler.js:18234
    push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError
    @ core.js:24040
    push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError
    @ core.js:15761 dispatchEvent @ core.js:20461 (anonymous) @
    core.js:20904 (anonymous) @ platform-browser.js:993
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @
    zone.js:423 onInvokeTask @ core.js:17279
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @
    zone.js:422 push../node_modules/zone.js/dist/zone.js.Zone.runTask @
    zone.js:195
    push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @
    zone.js:498 invokeTask @ zone.js:1744 globalZoneAwareCallback @
    zone.js:1770 FormsComponent.html:32 ERROR CONTEXT DebugContext_ {view:
    {…}, nodeIndex: 31, nodeDef: {…}, elDef: {…}, elView: {…}}</p>
  </blockquote>
  
  <p>Here is my forms.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 { form } from './form-interface';
  import { HttpClient } from '@angular/common/http';
  
  @Component({
    selector: 'app-forms',
    templateUrl: './forms.component.html',
    styleUrls: ['./forms.component.css']
  })
  
  
  export class FormsComponent implements OnInit {
  
    formsUrl = "https://jsonplaceholder.typicode.com/posts";
    id: any;
    form: form = {
      id: 0,
      userId: 0,
      title: '',
      body: ''
    };
  
    constructor(private formService: FormService ,private route: ActivatedRoute,
      private router: Router, private http: HttpClient) { }
  
    ngOnInit() {
      this.id=this.route.snapshot.params['id'];
  
      this.formService.getForms(this.id).subscribe(
        (forms: any) =&gt; {
          this.form = forms[0];
          console.log(this.form);
        }
      );
  
    }
  
    deleteForm() {
      this.http.delete(this.formsUrl + "/" + this.form.id)
      .subscribe(
        data  =&gt; {
        console.log("DELETE Request is successful ", data);
        },
        error  =&gt; {
        console.log("Error", error);
        }
      );
    }
  
  }
  </code></pre>
  
  <p>here is my forms.service.ts file: </p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { form } from './form-interface';
  
  
  
  @Injectable({
      providedIn: 'root'
  }) 
  
  export class FormService {
  
  formsUrl = "https://jsonplaceholder.typicode.com/posts";
  form: form = {
      id: 0,
      userId: 0,
      title: '',
      body: ''
    };
  
  
      constructor(private http: HttpClient) { }
  
      getForms(id) {
          return this.http.get('https://jsonplaceholder.typicode.com/posts'
          + "?id=" + id)
        }
  
        editForm() {
          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())
          .then(json =&gt; console.log(json));
        }
  
  
  }
  </code></pre>
  
  <p>And here is my HTML file:</p>
  
  <pre><code>&lt;div class="forms container"&gt;
    &lt;form #postForm="ngForm"&gt;
        &lt;div class="form-group"&gt;
            &lt;label for="title"&gt;Title&lt;/label&gt;
            &lt;input [(ngModel)]="form.title"
            name="title"  
            id="title" 
            type="text" 
            class="form-control"
            &gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="body"&gt;Body&lt;/label&gt;
          &lt;textarea [(ngModel)]="form.body" 
          name= "body" 
          id="body" 
          cols="30" 
          rows="10" 
          class="form-control"
          &gt;&lt;/textarea&gt;
        &lt;/div&gt;
        &lt;button class="btn btn-success" (click) = editForm()&gt;Save&lt;/button&gt;
        &lt;button class="btn btn-danger pull-right" (click) = deleteForm()&gt;Delete&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>