title: Post data to Asp.net web api using Angular 2
body: <p>I want to post data on my asp.net web api using angular 2 but i am getting these errors. I cannot figure out what is wrong with my code.
  <a href="https://i.stack.imgur.com/AaqWo.png" rel="nofollow"><img src="https://i.stack.imgur.com/AaqWo.png" alt="Error Screenshot"></a></p>
  
  <p><strong>Asp.net Code</strong></p>
  
  <pre><code>    [ResponseType(typeof(User))]
      public IHttpActionResult PostUser(User user)
      {
          if (!ModelState.IsValid)
          {
              return BadRequest(ModelState);
          }
  
          db.Users.Add(user);
          db.SaveChanges();
  
          return CreatedAtRoute("DefaultApi", new { id = user.UserID }, user);
      }
  </code></pre>
  
  <p><strong>Angular 2 code</strong></p>
  
  <p>////////////////////////////////////////////////////////// Service ///////////////////////////////////////////////////////////</p>
  
  <pre><code>@Injectable()
  export class TaskService {
  
    private Url = 'https://jsonplaceholder.typicode.com/posts';
  
    private handleError(error: any): Promise&lt;any&gt; {
      debugger;
    console.error('An error occurred', error); // for demo purposes only
    return Promise.reject(error.message || error);
  }
    task;
  
    constructor( private _http : Http) {
    }
  
    getItems()
    {
       var Promise =this._http.get(
        'http://localhost:27353/api/Users')
        .map(res=&gt;res.json())
        .toPromise()
      Promise.then(taskFromServer =&gt; this.task = taskFromServer)
      Promise.catch(this.handleError)
    }
  
    postitems(userId,username,userrole)
    {
        debugger;
        let data = {
          "UserName": username,
          "UserRole": userrole
  
        }
      //let body = JSON.stringify(data);
      let headers = new Headers({ 'Content-Type': 'application/json' });
      let options = new RequestOptions({ headers: headers });
  
    return this._http
      .post('http://localhost:27353/api/Users', JSON.stringify(data), {headers: headers})
      .toPromise()
      .then(res =&gt; res.json().data)
      .catch(this.handleError);
  }
  
  private extractData(res: Response) {
    let body = res.json();
    return body.data || { };
  }  
  
  }
  
  ///////////////////////////////////////////////Task Component /////////////////////////////////////////////////////
  @Component({
  
    selector: 'tasks',
    providers: [TaskService],
    template: `&lt;h4&gt; This is the Task in Angular &lt;/h4&gt;
    &lt;Button class = "btn btn-primary"  (click) = "OnClick()" &gt; Click me &lt;/Button&gt;
  
  
    &lt;input [(ngModel)] = "userId" &gt;
    &lt;input [(ngModel)] = "username" &gt;
    &lt;input [(ngModel)] = "userrole" &gt;
  
     &lt;Button class = "btn btn-primary"  (click) = "OnClick(userId,username,userrole)" &gt; Submit &lt;/Button&gt;
  
  &lt;div class="table-responsive" &gt;
  
  
  &lt;table class="table" style="width:100%"&gt;
    &lt;tr&gt;
      &lt;th&gt;ID&lt;/th&gt;
      &lt;th&gt;Title&lt;/th&gt; 
      &lt;th&gt;Body&lt;/th&gt;
    &lt;/tr&gt;
  
  &lt;tr *ngFor = "let task of tasklist.task"&gt;
      &lt;td&gt;{{task.UserID}}&lt;/td&gt;
      &lt;td&gt;{{task.UserName}}&lt;/td&gt; 
      &lt;td&gt;{{task.body}}&lt;/td&gt;
      &lt;td&gt; &lt;a class="btn btn-link" (click) = Edit(task) &gt; Edit &lt;/a&gt; &lt;/td&gt;
    &lt;/tr&gt;
  
   &lt;/table&gt;
  
  &lt;/div&gt;
  
    `
  })
  
  export class TasksComponent implements OnInit {
  
    sample:string = ""
  
    constructor(public tasklist: TaskService , private router: Router) { }  
  
    ngOnInit() {
  
      this.tasklist.getItems(); 
  
    }
  
    OnClick(userId,username,userrole)
    {
      debugger;
      this.tasklist.postitems(userId,username,userrole);
    }
  
    Edit(value)
    {
      debugger;
      this.router.navigate(['/others' , value]);
    }
  }
  </code></pre>