As per the requirement of my project, I am in need of developing Ignite UI grid with Angular 2 and Web API. I have worked on Ignite UI Jquery grid. But Angular 2 is entirely new to me. I do know that the support for Angular 2 is on the way. I was following the sample sol. from Github('https://github.com/IgniteUI/igniteui-angular2') to create Angular 2 Grid. I was successfully able to do it. But I want the data to be dynamically loaded from Web API. I tried creating some HTTP service class from angular to achieve the dynamic loading of data, but was not successful in doing it. I went through the forum for any relevant solution, but didn't find any. It will be really helpful if you could provide a working example of Ignite UI grid with Angular 2 & Web API ASAP.
Awaiting for your response.
Please take a look at the following sample which uses angular-in-memory-web-api https://github.com/IgniteUI/igniteui-angular2/blob/master/samples/igGrid-HTTPClient/app.ts
I believe this is a similar scenario.
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.
Just to clarify the scenario. I am actually able to make a HTTP request to API. While the API is being called and data is being fetched the grid is already rendered with no data. So once the response is received the data is not binded to the grid. Can you suggest a solution to this.
I successfully binded the data from Web API to the grid. I used a Promise to bind the data once it is received. Just one more query, say I am dynamically binding the data to the grid and I don't know which will be column names and model/design of grid. So, In this case is it possible to create the design of grid dynamically based on data received. By design what I meant is to configure each column properties like column fixing, read only, filtering, . . . If it is possible can you tell me how can I achieve it.
Hoping to hear from you soon.
Thanks & Regards
You can reapply the grid configuration when setting the data, apply a whole new set of gridOptions including columns declarations.