title: Angular 4 - How to get data from ASP.Net web api
body: <p>Using the famous Visual Studio 2017 Angular 4 template, I tested the side navbar buttons and could fetch the in-memory data.</p>
  
  <p>Then I added to the project, a new ASP.Net Core 2.0 API controller connected to a database using Entity Framework, and got it to run with the <code>200 HTTP GET</code> result.</p>
  
  <p>The controller code:</p>
  
  <pre><code>#region TodoController
  namespace TodoAngularUI.Controllers
  {
      [Route("api/[controller]")]
      public class TodoController : Controller
      {
          private readonly SchoolContext _context;
          #endregion
  
          public TodoController(SchoolContext DbContext)
          {
              _context = DbContext;
  
              if (_context.Todo.Count() == 0)
              {
                  _context.Todo.Add(new Todo { TaskName = "Item1" });
                  _context.SaveChanges();
              }
          }
  
          #region snippet_GetAll
          [HttpGet]
          public IEnumerable&lt;Todo&gt; GetAll()
          {
              return _context.Todo.ToList();
          }
  
          [HttpGet("{id}", Name = "GetTodo")]
          public IActionResult GetById(long id)
          {
              var item = _context.Todo.FirstOrDefault(t =&gt; t.Id == id);
              if (item == null)
              {
                  return NotFound();
              }
              return new ObjectResult(item);
          }
          #endregion
  </code></pre>
  
  <p>Now, I wanted to display the resulting ASP.Net Core controller data using Angular, so I created a TypeScript component named “<code>todo</code>” as below:</p>
  
  <pre><code>import { Component, Inject } from '@angular/core';
  import { Http } from '@angular/http';
  
  @Component({
      selector: 'todo',
      templateUrl: './todo.component.html'
  })
  export class TodoComponent {
      public Todo: task[];
  
      constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
          http.get(baseUrl + '/api/todo').subscribe(result =&gt; {
              this.Todo = result.json() as task[];
          }, error =&gt; console.error(error));
      }
  }
  
  interface task {
      Id: number;
      TaskName: string;
      IsComplete: boolean;
  }
  </code></pre>
  
  <p>And created its HTML component as below:</p>
  
  <pre><code>&lt;h1&gt;Todo tasks&lt;/h1&gt;
  
  &lt;p&gt;This component demonstrates fetching Todo tasks from the server.&lt;/p&gt;
  
  &lt;p *ngIf="!todo"&gt;&lt;em&gt;Loading...&lt;/em&gt;&lt;/p&gt;
  
  &lt;table class='table' *ngIf="Todo"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Id&lt;/th&gt;
              &lt;th&gt;Task Name&lt;/th&gt;
              &lt;th&gt;Is complete&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr *ngFor="let Task of todo"&gt;
              &lt;td&gt;{{ Task.Id }}&lt;/td&gt;
              &lt;td&gt;{{ Task.TaskName }}&lt;/td&gt;
              &lt;td&gt;{{ Task.Iscomplete }}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Then went to add its routing in Nav side bar menu, here is TypeScript code:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
      selector: 'nav-menu',
      templateUrl: './navmenu.component.html',
      styleUrls: ['./navmenu.component.css']
  })
  export class NavMenuComponent {
  }
  </code></pre>
  
  <p>And here is Navbar HTML code:</p>
  
  <pre><code>&lt;div class='main-nav'&gt;
  &lt;div class='navbar navbar-inverse'&gt;
      &lt;div class='navbar-header'&gt;
          &lt;button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'&gt;
              &lt;span class='sr-only'&gt;Toggle navigation&lt;/span&gt;
              &lt;span class='icon-bar'&gt;&lt;/span&gt;
              &lt;span class='icon-bar'&gt;&lt;/span&gt;
              &lt;span class='icon-bar'&gt;&lt;/span&gt;
              &lt;span class='icon-bar'&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;a class='navbar-brand' [routerLink]="['/home']"&gt;TodoAngularUI&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class='clearfix'&gt;&lt;/div&gt;
      &lt;div class='navbar-collapse collapse'&gt;
          &lt;ul class='nav navbar-nav'&gt;
              &lt;li [routerLinkActive]="['link-active']"&gt;
                  &lt;a [routerLink]="['/home']"&gt;
                      &lt;span class='glyphicon glyphicon-home'&gt;&lt;/span&gt; Home
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li [routerLinkActive]="['link-active']"&gt;
                  &lt;a [routerLink]="['/counter']"&gt;
                      &lt;span class='glyphicon glyphicon-education'&gt;&lt;/span&gt; Counter
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li [routerLinkActive]="['link-active']"&gt;
                  &lt;a [routerLink]="['/fetch-data']"&gt;
                      &lt;span class='glyphicon glyphicon-th-list'&gt;&lt;/span&gt; Fetch data
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li [routerLinkActive]="['link-active']"&gt;
                  &lt;a [routerLink]="['/api/todo']"&gt;
                      &lt;span class='glyphicon glyphicon-apple'&gt;&lt;/span&gt; Todo api
                  &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>And my <code>app.component.ts</code>:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
      selector: 'app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  export class AppComponent {
  }
  </code></pre>
  
  <p>The issue here is that when I click the menu button to get data nothing happens, all other buttons are working but not this one, and 200 result is still showing when use directly the browser URL.</p>
  
  <p>No error message, and I failed to find solution searching on the net for issues related to Non clickable buttons in Angular, and related to passing data from ASP.Net to Angular.</p>
  
  <p>What am I doing wrong?</p>