title: Angular HTTP POST request
body: <p>I build an app in Angular2 and Spring-MVC, and when I try to make a POST request to my server I don't get any sign of success or fail, but the request doesn't happening because I can't see the new data. When I do the request from Postman - the request is successful and I can see the new data.</p>
  
  <p>The Angular2 code:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Response, Headers, RequestOptions  } from '@angular/http';
  import { Observable } from 'rxjs/Rx';
  import 'rxjs/add/operator/map';
  
  @Injectable()
  export class MainContentService {
    constructor(
      private http: Http) {}
  
    addNewCategory(categoryName: string) {
      let body = JSON.stringify({ name: categoryName });
      let headers = new Headers({ 'Content-Type': 'application/json' });
      let options = new RequestOptions({ headers: headers });
  
      console.log(body);
      console.log(options);
  
      return this.http.post('http://localhost:8080/api/v1/categories', body, options)
                .map(this.extractData)
                .catch(this.handleError);
    }
  
    private extractData(res: Response) {
      let body = res.json();
      console.log(body);
      return body.data || { };
    }
  
    private handleError (error: any) {
      console.error(error);
      return Observable.throw(error.json().error || 'Server error');
    }
  }
  </code></pre>
  
  <p>I can see the <code>console.log(body)</code> and <code>console.log(option)</code> printed in the  dev-tools console, but nothing more then that:</p>
  
  <p><a href="https://i.stack.imgur.com/5Hh89.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5Hh89.jpg" alt="chrome devtools"></a></p>
  
  <p>The postman request:</p>
  
  <p><a href="https://i.stack.imgur.com/IbbpI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IbbpI.png" alt="postman request"></a></p>
  
  <p>My component:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  import { MainContentService } from '../shared/main-content.service';
  
  @Component({
    moduleId: module.id,
    selector: 'bfy-add-category',
    templateUrl: 'add-category.component.html',
    styleUrls: ['add-category.component.css'],
    providers: [MainContentService]
  })
  export class AddCategoryComponent {
    editName: string;
  
    constructor(
      private mainContentService: MainContentService
    ) { }
  
    cancel() {
      console.log('cencel');
    }
  
    save() {
      let categoryName = this.editName;
      this.mainContentService.addNewCategory(categoryName);
    }
  }
  </code></pre>
  
  <p>My component HTML code:</p>
  
  <pre><code>&lt;div class="col-sm-12 col-md-8 col-lg-9 thumbnail pull-right"&gt;
    &lt;label&gt;Category: &lt;/label&gt;
    &lt;input [(ngModel)]="editName" placeholder="Category name .."/&gt;
  
    &lt;div&gt;
      &lt;button (click)="cancel()"&gt;Cancel&lt;/button&gt;
      &lt;button (click)="save()"&gt;Save&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>