How to use Ignite UI grid with Angular 2 to load data from Web API?

Hi Deyan,

Thank you for your quick response.

I went through the sample you provided, still was unable to load the data. I am successful in rendering the grid but not able to populate any data in it. The code below is being used by me. Can you tell me what is that I am doing wrong.

Samples.ts

import { NgIf } from '@angular/common/src/directives/ng_if';
import { directiveDef } from '@angular/core/src/view/provider';
import { Component, Directive, OnInit } from '@angular/core';
import {IEmployee} from './Models/employee';
import {EmployeeService} from './Service/employee.service';
import { IgGridComponent } from '../src/igniteui.angular2';
import { Observable } from 'rxjs/Observable';

declare var jQuery: any;

@Component({
    selector: 'my-app',
    template: `
        <ig-grid [(options)]="gridOptions" [(widgetId)]='id' (cellClick)="cellClickHandler($event)" (rendering)='renderedEventHandler($event)' ></ig-grid>
 `,
 providers: [EmployeeService] 
})


export class AppComponent {
 employees: IEmployee[];

    private gridOptions: IgGrid;
    private cellClickHandler: any;
    private renderedEventHandler:any;
 private data: Array<any>;
 private id: string = "grid1";

    constructor(private _employeeService:EmployeeService) { 
 this._employeeService.getEmployees()
 .subscribe((empData)=>this.gridOptions.dataSource=empData)

            this.cellClickHandler= function(ui){
                console.log("grid cell click");

            };

            this.renderedEventHandler= function(ui){
                console.log("grid is rendered.");

            };

        this.gridOptions = {
 dataSource: [],
 width: "100%",
 primaryKey: "Id",
 autoCommit: true,
 autoGenerateColumns: false,
 columns: [
 { "headerText": "ID", "key": "Id", "dataType": "number", "width": "10%" },
 { "headerText": "Name", "key": "Name", "dataType": "string", "width": "40%" },
 { "headerText": "Age", "key": "Age", "dataType": "string", "width": "25%" },
 { "headerText": "Address", "key": "Address", "dataType": "string", "width": "25%" },
 { "headerText": "Domain", "key": "Domain", "dataType": "string", "width": "25%" },
 { "headerText": "Mobile No", "key": "Mobile_No", "dataType": "string", "width": "25%" },
 { "headerText": "Email ID", "key": "Email_Id", "dataType": "string", "width": "25%" },
 { "headerText": "Status", "key": "Status", "dataType": "string", "width": "25%" },
 { "headerText": "Salary", "key": "Salary", "dataType": "string", "width": "25%" },
 { "headerText": "Grade", "key": "Grade", "dataType": "string", "width": "25%" },
 { "headerText": "Team Name", "key": "Team_Name", "dataType": "string", "width": "25%" },
 { "headerText": "Date of Joining", "key": "Date_of_Joining", "dataType": "string", "width": "25%" }
 ], 
 };
    }
}

Employee.service.ts

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import { IEmployee } from '../Models/employee';

@Injectable()
export class EmployeeService {

 constructor(private _http: Http) { }

 getEmployees(): Observable<IEmployee[]>{ 

 return this._http.get("http://localhost:59088/api/values")
 .map((response: Response)=> <IEmployee[]>response.json()); 
 }
}