Data Binding in .net core API and Angular2

Question

I am making the CURD API of .net core and Try to Use that API in Angular 2 application

1)Service File EmployeeService.ts

    import { Injectable } from '@angular/core';
    import { Http, Response, RequestOptions, Headers } from '@angular/http';
    import 'rxjs/Rx';
    import { Observable } from 'rxjs/Observable';
    import 'rxjs/add/operator/map';
    import { employee } from "../employee/emp"

    @Injectable()
    export class empservice {

    //step 1: Add url of the .net api (get that by running .net api using F5)
    private _url: string = "http://localhost:65088/api/Employee";
    constructor(private _http: Http) { }
    //step 2 : Method to get value from  url 

    GetAllEmployee(): Observable<employee[]> {   

    return this._http.get(this._url).map((res: Response) => { return 
   <employee[]>res.json() });;

     }
    }

2)Component File Employee.Component.ts

import { Component, Input } from '@angular/core';
import { RouterModule, Router, ActivatedRoute, Data } from '@angular/router';
import { empservice } from './emp.service';
@Component({
selector: 'my-emp',
templateUrl: 'app/employee/Emp.html',
styleUrls: ['app/CSS/stylesheet.css', 'app/CSS/media.css'],

 })
export class Employee {   
public employee: employee[];
 public ngOnInit() {
    this.AllEmployee();

    $(document).ready(function () {
        $('#emptble').DataTable();
    });

}
AllEmployee() {

   this._employeeservice.GetAllEmployee().subscribe(empdata => 
   this.employee = empdata);



 }
 }  
 export  interface employee {
ID: any;
Fname: string;
Lname: string;
Age: any;
Mobile: any;
Phone: any;


 }

3)HTML Code

<table>
        <tr *ngFor="let emp of employee">
            <td scope="row">{{emp.ID}}</td>
            <td>{{emp.Fname}}</td>
            <td>{{emp.Lname}}</td>
            <td>{{emp.Age}}</td>
            <td>{{emp.Mobile}}</td>
            <td>{{emp.Phone}}</td>
            <td>
                <i style="cursor:pointer;" class="glyphicon glyphicon-edit 
            pointer"
                   (click)="Update(employee.ID)" title="Edit" data- 
            target="#update"></i>&nbsp;&nbsp;
                <i style="cursor:pointer;" class="glyphicon glyphicon-trash 
              pointer"
                   (click)=" delete(employee.ID)" title="Delete"> 
          </i>&nbsp;&nbsp;
                <i style="cursor:pointer;" class="glyphicon glyphicon-user 
             pointer"
                   (click)="openModal(employee.ID)" title="Details" data- 
          target="#details"></i>
            </td>
        </tr>

    </table>

I didn't get expected output of this code. It's not show the employee name,id,age..etc Details of employee in the table cell. API call is done correctly and data come from API to angular but i can't understand why that data not bind with angular html page.

Answer 1

You don't seem to call your AllEmployee() method at all, so no API call seems to be made. Instead you should put this in the ngOnInit() lifecycle hook .

export class Employee implements OnInit {   
  public employee: employee[];

  ngOnInit() {
      this._employeeservice.GetAllEmployee()
          .subscribe((data) => this.employee = <employee[]>data);
  }

Side note: You're still using the Http service which was deprecated in version 4.3. You should switch to the new HttpClient .

Answer 2

You should use ngOnInit() lifecycle hook

ngOnInit() {
//call here in your data binding method
}