Angular With Ag-Grid Quick Start

Welcome to a walk-through on integrating Angular with ag-Grid

Monish Narendra
Aug 8, 2020 · 5 min read

Angular Installation

Angular projects are dependent on npm packages. So by installing Node.js, we by default get npm package manager, which is used to install npm packages.

Download Node.js using this link → https://nodejs.org/en/download/

Once the installation done, we get node and npm binaries added to systems environment path. That means, now you can use node and npm command.

Lets check the version of Node installed by using the following commands in our terminal:

Command Prompt — Node and NPM Versions

Now, Lets Install Angular!!. Enter the following command in the terminal:

npm install -g @angular/cli

We can check the version of Angular installed.

ng version

Create Your Angular Project

ng new my-sample --style scss --routing false

In the above command we are passing --style scss, so that we can customize our project using Sass and --routing false , as we will not be implementing routing.

Output from Command Prompt — After running the above command

Make your way into the project that has been created via the following command:

cd my-sample

Now let us start our angular project using ng-serve.

ng serve
Output from Command Prompt — After running ‘ng serve’ command

We can view our app from our browser by going to this URL: http://localhost:4200/

If everything goes as expected, then Congratulations !!!.. Yeeee..

Angular App — Browser at First

Lets stop the command prompt by pressing “Ctrl + c” and add the Ag-Grid NPM packages to our project.

npm install --save ag-grid-community ag-grid-angularnpm install

Now that the Ag-Grid packages are added and a great deal of time has passed since. Lets get to the code !!!!. We have to add the Ag-Grid styles to the styles.scss (my-sample\src\styles.scss).

@import "../node_modules/ag-grid-community/src/styles/ag-grid.scss";
@import "../node_modules/ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin.scss";

.ag-theme-alpine {
@include ag-theme-alpine();
}

The next step is to add the Ag-Grid Angular module to the root AppModule file by importing it and add AgGridModule to the imports array (my-sample\src\app\app.module.ts):

Next, we have to declare the grid (my-sample\src\app\app.component.ts):

In the code above we have used column definitions (columnDefs) and the Row data (rowData). Here in our example we have three columns where each of them contain two properties ‘headerName’ which contains Header Name and ‘fields’ which contains the data field to be displayed in the body of the table.

Please Note: The value in ‘columndef (key,value)’ must match with the key of ‘rowData (key,value)’.

Now lets add the HTML component to our code (my-sample\src\app\app.component.html).

If everything goes as expected, then Congratulations Once Again!. Yeeeah!!!...

Get/Fetch Data from a Server

Now that we have successfully displayed hard coded data, lets try getting our data from a server or in this case github where i have a JSON file.

Github URL for the json file:
https://raw.githubusercontent.com/monishnarendra/Angular-Ag-Grid-Quick-Start-Example/master/Data.json

Let’s add HttpClient to the root AppModule file by importing it and add HttpClientModule to the imports array (my-sample\src\app\app.module.ts) which is used for communicating with a server.

Now we need to remove the hard-coded data and fetch it from a server by making changes to the app.component file (my-sample\src\app\app.component.ts):

Injecting HttpClient into the constructor in a private property called http. Through http we can used the get method to communicate to the server and the subscribe function receives the data (json) from the server and pushes it into to the ‘rowData’ list for display.

Notice that we also imported the OnInit and implemented it in our export class. This is done so that we can use the ngOnInit function. As the ngOnInit is called by Angular to indicate that the Angular is done creating the component. Hence we want our data to be loaded as soon as Angular is done creating its components.

Browser After Fetching Data from server

Checkbox, Filtering and Sorting

Since we are done with fetching the data, let me show you how simple it is to implement sorting and filtering in the data using ag-grid.

All we need to do is to add the properties ( sortable, filter and checkboxSelection) and set them to true. Yes its that easy, Don’t believe me.. hmm Let me show you.

If everything works out well then you should be seeing this:

Browser After implementing Checkbox, Filter and Sort

Getting Selected row from Ag-grid

This task is fairly simple too, lets first create the instance of the component.

Now lets try accessing this (‘#myGrid’) instance from our component.

Next we need to add a button that triggers/calls a function which gets the selected data and prints the selected row in the browser console.

Conclusion

I do hope this “Quick Start” guide has shown you how easy it is to integrate and configure Ag-Grid with Angular.

Whole solution at this GitHub Repository. Your probably now thinking “I could’ve avoided all that copy/pasting.!!!!” But hey, hope you learned something along the way. I know I did.

Comments and questions welcome below — I hope that you found this useful!

Happy Coding!!!

The Startup

Get smarter at building your thing. Join The Startup’s +786K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Monish Narendra

Written by

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +786K followers.

Monish Narendra

Written by

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +786K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store