title: .subscribe in Angular 2 to post data from a component to server via a service
body: <p>I have a question regarding how observables work in Angular2 .. I am currently using the following</p>
  
  <pre><code>@angular/cli: 1.0.0
  node: 6.10.0
  os: win32 x64
  </code></pre>
  
  <p>I have a addUser component which uses a method of user service to post data to the server. I am able to achieve this but have a question on whats happening when the component file sends the data to the service method.
  I have imported the required packages. Below is the method which sends form data to a service method</p>
  
  <p>addUser.component.ts</p>
  
  <pre><code>export class AddUser{
  
      addUserForm:FormGroup;
      value:any;
      constructor(private userService: UserService,private formBuilder: FormBuilder) {
  
          this.addUserForm = this.formBuilder.group({
            name:['',Validators.required],
            age:['',Validators.required],
            email:['',Validators.required]
          });
  
      }
  
      submit(value){
  
          this.userService.addUser(value).subscribe(data =&gt; {
           // refresh the list
           console.log(data)
           return true;
         },
         error =&gt; {
           console.log(error);
          });
  
      }
  
  }
  </code></pre>
  
  <p>Below is method used in the service to send the request to the server</p>
  
  <p>user.service.ts</p>
  
  <pre><code>import {Injectable} from '@angular/core';
  import { Http, Response, Headers, RequestOptions } from '@angular/http';
  
  import 'rxjs/add/operator/cache';
  import 'rxjs/add/operator/map';
  import {Observable} from 'rxjs';
  
  @Injectable()
  export class UserService{
  
      _userInfoData: Observable&lt;any&gt;;
      private addUserUrl = 'http://localhost:8080/addUser'; 
  
      constructor(private http: Http){ }
  
    addUser(body: Object): Observable&lt;any&gt;{
      console.log(body)
      let bodyString = JSON.stringify(body)
      let headers      = new Headers({ 'Content-Type': 'application/json' }); // ... Set content type to JSON
      let options       = new RequestOptions({ headers: headers }); // Create a request option
  
      return this.http.post('http://localhost:8080/addUser', body, options) // ...using post request
               .map((res:Response) =&gt; res.json()) // ...and calling .json() on the response to return data
               .catch((error:any) =&gt; Observable.throw(error.json().error || 'Server error')); //...errors if any
  
    }
  
  }
  </code></pre>
  
  <p>My question is that when i remove the <code>.subscribe from the submit method</code> in  <code>addUser.component.ts</code> the request calls the service method <code>addUser(body: Object): Observable&lt;any&gt;</code> but the service method does not post to the server.</p>
  
  <p>addUser.component.ts</p>
  
  <pre><code>submit(value){
  
          this.userService.addUser(value)
  
      }
  </code></pre>
  
  <p>Could anyone please help me understanding what is the concept behind this </p>
  
  <p>Update : </p>
  
  <p>@Denko : You are correct it is not calling both the functions but only the error </p>
  
  <pre><code>submit(value){
  
          this.userService.addUser(value).subscribe(data =&gt; {
           // refresh the list
           console.log(data)
           return true;
         },
         error =&gt; {
           console.log(error);
          });
  
      }
  </code></pre>
  
  <p>This is what gives me the error <code>TypeError:error.json is not a function</code></p>
  
  <p><strong>Update 2</strong></p>
  
  <p>@Denko ... thanks for helping me out here ... Below is the component file with the class.</p>
  
  <p>addUser.component.ts</p>
  
  <pre><code>export class AddUser{
  @HostBinding('@routeAnimation') routeAnimation = true;
      @HostBinding('style.display')   display = 'block';
      addUserForm:FormGroup;
      value:any;
      constructor(private userService: UserService,private formBuilder: FormBuilder) {
  
          this.addUserForm = this.formBuilder.group({
            name:['',Validators.required],
            age:['',Validators.required],
            email:['',Validators.required]
          });
  
      }
  
      submit(value){
  
          this.userService.addUser(value).subscribe(data =&gt; {
           // refresh the list
           console.log(data)
           return true;
         },
         error =&gt; {
           console.log(error);
          });
  
      }
  
  }
  </code></pre>
  
  <p>Below is the service file which is used to make the ajax request to the server</p>
  
  <p>user.service.ts</p>
  
  <pre><code>import {Injectable} from '@angular/core';
  import { Http, Response, Headers, RequestOptions } from '@angular/http';
  
  import 'rxjs/add/operator/cache';
  import 'rxjs/add/operator/map';
  import {Observable} from 'rxjs';
  
  @Injectable()
  export class UserService{
  
      _userInfoData: Observable&lt;any&gt;;
      private addUserUrl = 'http://localhost:8080/addUser'; 
  
      constructor(private http: Http){ }
  
    addUser(body: Object): Observable&lt;any&gt;{
      console.log(body)
      let bodyString = JSON.stringify(body)
      let headers      = new Headers({ 'Content-Type': 'application/json' }); // ... Set content type to JSON
      let options       = new RequestOptions({ headers: headers }); // Create a request option
  
      return this.http.post('http://localhost:8080/addUser', body, options) // ...using post request
               .map((res:Response) =&gt; res.json()) // ...and calling .json() on the response to return data
               .catch((error:any) =&gt; Observable.throw(error.json().error || 'Server error')); //...errors if any
  
    }
  
  }
  </code></pre>
  
  <p>Whenever i hit the service method the request is passed on to the server correctly and i am able to create a user but it always enters the error block and throws the below error ....</p>
  
  <pre><code>TypeError:error.json is not a function
  </code></pre>
  
  <p>I would like to point out that the <code>catch</code> block in the service method is not called until the server is not available but the <code>error</code> block inside the component class is always called even if the request goes through to the server ..... What am i missing or doing incorrectly here </p>