i am doing CRUD Operation i Angular using WebApi : 

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->


    employee.component.ts

    import { Component, OnInit } from "@angular/core";
    import { EmployeeService } from "../Shared/employee.service";
    import { NgForm } from "@angular/forms";
    @Component({
      selector: "app-employe",
      templateUrl: "./employe.component.html",
      styleUrls: ["./employe.component.css"]
    })
    export class EmployeComponent implements OnInit {
      constructor(private employeeService: EmployeeService) {}

      ngOnInit() {
        this.resetForm();
      }

      resetForm(form?: NgForm) {
        if (form != null) form.reset();
        this.employeeService.SelectedEmployee = {
          EmpId: null,
          FirstName: "",
          LastName: "",
          EmpCode: "",
          Position: "",
          Office: ""
        };
      }
      onSubmit(form ?:NgForm){
        this.employeeService.postEmployee(form.value).subscribe(data =>{
           this.resetForm(form);

         
         })
       

      }
    }


    Employee.service.ts

    import { Injectable } from "@angular/core";
    import { Employee } from "./employee.model";
    import {
      Http,
      Response,
      Headers,
      RequestOptions,
      RequestMethod
    } from "@angular/http";
     import { Observable } from "rxjs/Observable";
    import 'rxjs/add/operator/map';
    import "rxjs/add/operator/toPromise";
    import 'rxjs/add/operator/catch';
    import { map } from 'rxjs/operators';
    import 'rxjs/add/operator/map';
    @Injectable({
      providedIn: "root"
    })
    export class EmployeeService {
      SelectedEmployee: Employee;
      constructor(private http: Http) {}
      postEmployee(emp : Employee){
        var body = JSON.stringify(emp);
        var headerOptions = new Headers({'Content-Type':'application/json'});
        
        var requestOptions = new RequestOptions({method : RequestMethod.Post,headers : headerOptions});
        return this.http.post('http://localhost:3184/api/Emp',body,requestOptions).map(x => x.json());
      }



    }



<!-- language: lang-html -->

    <form class="emp-form" #employeForm="ngForm" >
      <input type="hidden" name="EmployeeID" #EmployeeID="ngModel" [(ngModel)]="employeeService.SelectedEmployee.EmpID">
      <div class="form-row">
        <div class="form-group col-md-6">
          <input class="form-control" name="FirstName" #FirstName="ngModel" [(ngModel)]="employeeService.SelectedEmployee.FirstName"
            placeholder="First Name" required>
          <div class="validation-error" *ngIf="FirstName.invalid && FirstName.touched">This Field is Required.</div>
        </div>
        <div class="form-group col-md-6">
          <input class="form-control" name="LastName" #LastName="ngModel" [(ngModel)]="employeeService.SelectedEmployee.LastName" placeholder="Last Name"
            required>
          <div class="validation-error" *ngIf="LastName.invalid && LastName.touched">This Field is Required.</div>
        </div>
      </div>
      <div class="form-group">
        <input class="form-control" name="Position" #Position="ngModel" [(ngModel)]="employeeService.SelectedEmployee.Position" placeholder="Position">
      </div>
      <div class="form-row">
        <div class="form-group col-md-6">
          <input class="form-control" name="EmpCode" #EmpCode="ngModel" [(ngModel)]="employeeService.SelectedEmployee.EmpCode" placeholder="Emp Code">
        </div>
        <div class="form-group col-md-6">
          <input class="form-control" name="Office" #Office="ngModel" [(ngModel)]="employeeService.SelectedEmployee.Office" placeholder="Office">
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-md-8">
          <button [disabled]="!employeForm.valid" type="submit" class="btn btn-lg btn-block btn-info" (click)="onSubmit(employeForm)">
            <i class="fa fa-floppy-o"></i> Submit</button>
        </div>
        <div class="form-group col-md-4">
          <button type="button" class="btn btn-lg btn-block btn-secondary" (click)="resetForm(employeForm)">
            <i class="fa fa-repeat"></i> Reset</button>
        </div>
      </div>
    </form>

<!-- end snippet -->


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web.Http;
    using System.Web.Http.Cors;
    namespace WebDemo
    {
        public static class WebApiConfig
        {
            public static void Register(HttpConfiguration config)
            {
                // Web API configuration and services
               config.EnableCors(new EnableCorsAttribute("http://localhost:4200", headers: "*", methods: "*"));
              
        //  methods:'Access-Control-Request-Method',
                // Web API routes
                config.MapHttpAttributeRoutes();

                config.Routes.MapHttpRoute(
                    name: "DefaultApi",
                    routeTemplate: "api/{controller}/{id}",
                    defaults: new { id = RouteParameter.Optional }
                );
            }
        }
    }


<!-- end snippet -->

Here i tried to use Post Data on SqlServer on Button Press and its gives me 

> Failed to load resource: the server responded with a status of 400 (Bad Request)
localhost/:1 Access to XMLHttpRequest at 'http://localhost:3184/api/Emp' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Plz help me to resolve thanks in advance i used the reference[enter link description here][1]


  [1]: http://www.codaffection.com/angular-5-tutorial/angular-5-with-web-api-crud-application/