title: Angular 5 Post API Call
body: <p>I am very new to Angular , Developing an app in Angular 5 . I am trying to post some data to an API , below is my code </p>
  
  <p><strong>.Net Core Web API</strong></p>
  
  <pre><code>    [Produces("application/json")]
      [Route("api/Audit")]
           public class AuditController : Controller
          {
              private IConfiguration _configuration;
              private CommomUtility util;
              private Login Login;
  
              public AuditController(IConfiguration configuration)
              {
                  _configuration = configuration;
                  util = new CommomUtility(configuration);
                  Login = new Login(configuration);
              }
  
              [HttpPost]
              public JsonResult Action([FromBody] List&lt;Dictionary&lt;string, string&gt;&gt; li)
              {
                  DataTable dt = new DataTable();
                  string jsonString = string.Empty;
                  try
                  {
                      if (li[0]["ActionMethod"].Equals("CheckLogin", StringComparison.InvariantCultureIgnoreCase))
                      {
                          dt = Login.checkLogin(li);
                      }
                  }
                  catch (Exception ex)
                  {
                  }
                  finally
                  {
                      dt.TableName = "Result";
                      jsonString = util.DataTableToJson(dt);
                  }
                  return Json(JObject.Parse(jsonString));
             }
          }
  </code></pre>
  
  <p><strong>Angular Login Componenet</strong></p>
  
  <pre><code>    import { Component, OnInit } from '@angular/core';
  import { HttpClient,HttpClientModule,HttpParams,HttpHeaders } from '@angular/common/http';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
  })
  export class LoginComponent implements OnInit {
    username: string="";
    password: string="";
    loginBtnText: string='Log In';
    clearBtnText: string='Reset Fields';
    message:string;
    cssClass:string;
  
    constructor(private http:HttpClient  ) { }
  
    ngOnInit() {
    }
  
    checkLogIn(){
      const params = new HttpParams();
      params.set('ActionMethod', 'CheckLogin');
      params.set('StaffCode', '15989');
      params.set('Password', '#####');
      var queryHeaders = new HttpHeaders();
      queryHeaders.append('Content-Type', 'application/json');
     debugger
      var v= this.http.post("http://localhost:57863/api/Audit/",
        params,{ headers: queryHeaders}
      )
      .subscribe(data =&gt; 
      {alert('ok');},
       error =&gt; 
       {alert("Error");}
      );
    }
  
    clearFields(){
      this.username="";
      this.password="";
      this.message="";
    }
  
  }
  </code></pre>
  
  <p>I am invoking checkLogIn() on button click , after invoking this API it reach to constructor of API class only but does not go inside API Method.</p>
  
  <p>I checked my browser Network tab and it show </p>
  
  <blockquote>
    <p>415 Unsupported Media Type</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/Jvbsd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jvbsd.jpg" alt="Header section of request"></a></p>
  
  <p>When I invoking the Get API (values api) which is by default comes in .Net Core Web API template than it works and show alert OK but failed in case of POST </p>
  
  <p><strong>Update 1</strong></p>
  
  <p><a href="https://i.stack.imgur.com/7mSsC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7mSsC.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/0gT7v.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0gT7v.jpg" alt="enter image description here"></a></p>