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:
Installing Angular CLI
Now, Lets Install Angular!!. Enter the following command in the terminal:
npm install -g @angular/cli
We can check the version of Angular installed.
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.
Make your way into the project that has been created via the following command:
Now let us start our angular project using ng-serve.
We can view our app from our browser by going to this URL: http://localhost:4200/
If everything goes as expected, then Congratulations !!!.. Yeeee..
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).
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:
Enable HTTP Services
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.
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:
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.
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!