title: Angular 6 Binding With .NET Core API
body: <p>Need one help on which I am working since morning. </p>
  
  <p>What I have done : </p>
  
  <ol>
  <li>I am able to bind the list to UI while getting list from Firebase. </li>
  <li>I am also able to connect with the "<a href="https://jsonplaceholder.typicode.com" rel="nofollow noreferrer">https://jsonplaceholder.typicode.com</a>" and bind the list to UI. </li>
  </ol>
  
  <p>Why/where I need your help: </p>
  
  <p>But I don't know why I am not able to bind the list from .NET Core API to Angular 6.</p>
  
  <p>Note:-</p>
  
  <ol>
  <li>My API is working and I am sure because I have test it with postman and swagger. </li>
  <li>Able to hit the API and getting response from .NET Core API but not able to map or bind it to my angular variable which declared as "any" type. Seems like I am not able to fetch the data from the response. </li>
  </ol>
  
  <p>I have tried so many examples but no luck till now. 
  Below is the code what I have done in angular 6 project. </p>
  
  <p><strong>##ToDoService.ts file code</strong> </p>
  
  <pre><code>import { Injectable, Inject } from '@angular/core';
  import {environment } from "../../environments/environment"
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/map';
  import 'rxjs/add/operator/catch';
  import 'rxjs/add/observable/throw';
  
  @Injectable()
  export class ToDoService {
    myAppUrl: string = environment.url;
  
    constructor(private _http: HttpClient) {
    }
    getToDoList() {
      return this.GetMethod();
    }  
  
    GetMethod()  : Observable&lt;any&gt; {
      console.log("called");
         var headers = new HttpHeaders();
         headers.append('Content-Type', 'application/json');
         headers.append('Access-Control-Allow-Origin', '*');
         headers.append('Access-Control-Allow-Methods', '*');
         headers.append('Access-Control-Allow-Headers', '*');
  
         console.log('calling viju method');
         console.log(headers);
         var result = this._http.get(this.myAppUrl,{headers:headers})
         .map((response: Response) =&gt; response.json());
  
         return result;
    }
  
  }
  </code></pre>
  
  <p><strong>##ToDoComponent.ts file code</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { ToDoService } from './service/to-do.service'
  import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
  
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'ToDo';
    ToDolist : any[];
    ToDoForm : FormGroup;
  constructor(private _fb : FormBuilder, private _service : ToDoService ){
  
    this.ToDoForm = this._fb.group({
      ToDoId: 0,
      Content: new FormControl(),
      Status: new FormControl(),
    });
  
    this.getToDoList();
  }
  
    getToDoList(){
      // debugger;
      this._service.getToDoList()
      .subscribe(res=&gt; this.ToDolist = res);
      debugger;
      console.log(this.ToDolist);
    }
  }
  </code></pre>
  
  <p>Please check the below error screenshot.</p>
  
  <p><a href="https://i.stack.imgur.com/Pk4PJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Pk4PJ.png" alt="enter image description here"></a></p>