Using agGrid in your angular applications.
Posted By : Sachin Arora | 28-Sep-2017
ag-Grid is a plugin which provides a developer with many good features while showing some dynamic data.
How to set up ag-Grid in your angular application:-
# clone the ag-Grid Angular seed project
git clone https://github.com/ag-grid/ag-grid-angular-seed
# install the project dependencies
npm insatll
# build & start the application
npm start
After setting up you just need to provide the three things ie. ROW DATA , COLUMN DEFINITIONS , GRID DEFINITIONS .
1. ROW DATA
At minimum we need to provide some data which we want to show in our ag-grid, ag-grid row data takes the data in a specific format which is in a form of array of javascript objects.
Example:
// row data [
{name: "john", task: "Washing", status: Done},
{name: "mike", task: "Cleaning", status: progress},
{name: "alex", task: "brooming", status: not started}
]
so here we have our data in form of array of objects having keys 'name', 'task', 'status'.
2. COLUMN DEFINITIONS
now we need to display this information we need to specify what data we are interested in , so now we need to define three columns to match the above specified data.
// column definitions
[
{headerName: "Name", field: "name"},
{headerName: "Task", field: "task", cellRendererFramework: RedComponentComponent},
{headerName: "Status", field: "status"}
]
So, at first our column definition needs a header name which our title of column and a field which is the data item to read off from the row data. In the case of task field we defined a cellRendererFramework , this allows us to use an angular component to render the data for that cell.
3. GRID DEFINITIONS
so we have defined our Row and Column Data, but here is how to define our actual grid. For angular application we need to pull in the ag-grid angular component and include in our template :
<ag-grid-angular style="width: 500px; height: 115px;" class="ag-fresh"
[rowData]="rowData"
[columnDefs]="columnDefs">
</ag-grid-angular>
Here we tell our grid to read the row & column definitions off the application component itself, in the fields rowData and ColumnDefs.
So , this is all you need to do for using ag-grid but there is much more you can do by adding the ag-grid features.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Sachin Arora
Sachin is ambitious and hardworking individual with broad skills,He have the capabilities to build captivating UI applications . One of his key strength is building a strong bond with the team in order to deliver the best results on time .