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.

Related Tags

About Author

Author Image
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 .

Request for Proposal

Name is required

Comment is required

Sending message..