Displaying sql data in multilevel(Hierarchical) angular Grid

Question

I am totally new to Angular and there is a requirement wherein we need to display the data in an Angular Grid which is multilevel/Heirarchical.

The data is coming from the SQL Database. It is basically a query where in we pass the arguments in where clause and get the data back.

My Questions are:

1. Do we have a multi-level grid readily available in Angular? The multilevel grid should have a expand - collapse functionality.
2. I am seeing in most of the places that the data(that is fed to Angular Application) from the backend services is always in JSON Format. How to convert the data that comes from SQL DB to JSON so that it can be used in multilevel grid?
3. How to pass the parameters to be used in the sql query while getting the data using HTTP Client?

Note : This needs to be done in Angular 8 or above version.

Answer 1

Your question covers a broad range of topics and therefore my answer is in a very high level.

1. You can implement multi-level data representation by using basic HTML elements like div, or by utilizing Angular material components like table, which supports expand/collapse functionality. It also depends on the level of hierarchy (nesting) you have. Lastly there are 3rd party libraries such as PrimeNG that provide even more components.
2. JSON format is the de facto industry standard format when transferring data from client to server and back. Nothing to do with Angular.
3. You pass parameters by creating an Angular service that has HttpClient injected into it and can communicate with your API endpoints. Traditionally DB query params are sent as part of the API URL or in the request's body.