Database connection and data visualization using Ignite UI in Angular project

Question

I am working on a C# project (Visual Studio 2019) with Angular, in which I want to show the data from a server Microsoft SQL database in a table (using Ignite UI).

I searched for tutorials to create a connection with the database and to prepare the data from the database in a suitable form in order to show this data in a table (using Ignite UI). Unfortunately I did not find anything, there is why I am writing here.

What I have so far:

1. tracing-system.component.ts

export class TracingSystemComponent implements OnInit {

 constructor() { }

 ngOnInit(): void {
 }
 localData = [
 { Name:'John Smith', Age: 29 },
 { Name:'Alice in Wonderland', Age: 27 },
 { Name:'Jessica', Age: 31 },
 ];
}

2. tracing-system.component.html

 <igx-grid [data]="localData" width="1000px" height="800px" style="margin: auto" [allowFiltering]="true">
   <igx-column field="Name" dataType="string"></igx-column>
   <igx-column field="Age" dataType="number"></igx-column>
 </igx-grid>

So my questions are how can I connect my C# project (Visual Studio 2019) to a Microsoft server SQL database and how can I show the data from the database in a table, using Ignite UI (igx-grid, igx-column)?

Answer 1

Create a WebAPI project, which connects to your database and use either DB-first (if you already have the DB), or code-first approach to generate the models/db. Then create an endpoint returning a list of entities and consume it with an HttpClient service on the front-end.

For the client-side service you can refer to this sample.

code example of the service

We don't have examples of code for the backend (WebAPI), but there's a starter project for it in Visual Studio and it's pretty much ready to use.