Getting Started with Angular Data Grid using ag-Grid

[Music] so we're going to start by opening up a terminal and globally installing angular with NPM install minus G hat angular CLI once that's done I'm going to create my app by typing ng new - my app - - style s CSS - - rooting false then we're going to CD into the created directory and open up our project in vs code after that I'm going to open up my editors terminal and run ng serve and if everything has gone according to plan we should now have a web server a localhost 4200 next we're going to add the AG grid NPM package by running MPM install - - save AG grid community and we're also going to be installing AG grid angular following that I'm going to run NPM install again now the reason for this is because NPM will perform an auto prune this will ensure that all the expected dependencies are present and now that that's done we can start coding let's start by adding the AG grid angular module to our app module in source slash app slash app module TS so this code is mainly plumbing this is where we import the AG grid modules and our other components the next step will be to add the AG grid styles which we will import into our Styles dot s CSS file this code imports the grid style sheet and the most popular and ready to use theme available AG theme Balam now we're going to declare some basic grid configurations in the source slash app slash components TS file the code here contains two essential configuration properties for the grid the column definitions as the cold F's which outline the three columns for our grid one of make one for model and another for price each column has header and a data field to be displayed in the body of the table our row data will also have three entries representing three rows of data each row has three couplings each representing a field in the column deaths lastly we'll need to add the component definition to our template in the app / app component HTML file this file contains the AG grid component definition with two property bindings row data and column deaths the component also accepts the standard Dom style and class we've set the class to AG theme Balam which defines the grid theme as mentioned before and the CSS class matches the name of the CSS file which we imported earlier and if everything works we should see a simple grid like this one here here we can see the three columns we defined in the column deaths and the rows from the row data now lets enable sorting and filtering so the grid can help us easily find the least or most expensive car luckily enabling sorting is quite simple all we need to do to achieve this is to just set the sortable property in each of the columns we want to be able to sort by so I've set it to true in all three and now if we go back to our grid and click on the headers of the column we can see that they're being automatically sorted next let's enable filtering and filtering is just the same as sorting once again we only have to set the filter property to true in each of the columns we want to be able to filter in with this property set the grid will display a small column menu when you hover over the header pressing it will display a pop-up with a filtering UI which lets you choose the kind of filter and the text that you want to filter by let's try filtering by celica in the model column and just like that it works so far we've been hard coding our data but that's not going to get us very far in the real world we're more likely to be dealing with data from a remote server thanks to angular implementing this is quite simple and can be done using angular's HTTP client and an async pipe here you can see that we're importing angular's HTTP client module next we will need to get rid of the hard-coded row data in source / app component ts an import the HTTP client from at angular slash common slash HTTP next we will need to get rid of the hard-coded row data and import the HTTP client from at angular slash common slash HTTP this code turns the row data from a hard-coded array to an observable for the grid to work with it we need to add an async pipe to the property in our app component HTML like this now if we look at our grid we'll see that instead of just three rows there's many now let's add checkboxes to our grid so we can select rows that we're interested in this can be done in the same way as we did for sorting and filtering we simply need to add the check box selection property to the columns that we want the check boxes to be in let's have this now to our mate column but before we can fully utilize this feature we need to enable multiple row selection in our app component HTML now we should be able to select rows give this a go now if you like but before I do I'm going to add a button that gets the selected data and fires often alert with the row data of the selected rows it's important here to remember to make the instance accessible in our component TS now the wiring has been done which allows us to utilize AG grids API to access our data this gives us an incredible amount of power of flexibility within our app so let me show you how you can utilize this to get your selected rows and output them as an alert before in our component we put a reference to a get selected rows function that doesn't exist yet let's make it now so that when the button is pressed something happens in this function I'll be using the API to get our selected nodes then we'll map over these nodes to get the data and then we'll map again to join the make and the model and output as a string and then output it via the alert and now if we look at our grid we can see that a range of rows can be selected and then if we click the get rows button we'll see an alert just like the features we added before grouping is an easy addition to the grid for this we'll need to bring up the terminal again and install a G grid Enterprise next we'll need to add the import to our app module ts now if we open up the dev tools on our grid will notice a big red notification it's just saying that we're using an unlicensed version of enterprise as this version is here only for development and learning this is fine so now we have Enterprise enabled we can go ahead and add grouping so first what I'm gonna do is get rid of some code that I don't need to show this particular feature you'll notice here that I've taken out the model column this is because I'm going to be using that column for grouping in my make field I have enabled row group with row group true then I added an auto group column there in here I've got the model header name the model field a cell renderer and some Cell renderer parens that allow us to represent a checkbox next I'm going to add the auto group column def to our template like so now that this has been added we now have checkboxes and grouping let's look at this now the groups can be selectable but when a user selects a group all of their leaf nodes are not selected this fix is actually really easy to implement all you have to do is go back to the template and add the property group selects children equals true now if we go back to our grid you'll see that a trice appears it's possible to select the entire group by selecting the grouping node and it's also possible to select individuals within the group and the tri-staters will have a tick when the entire group is selected a - when parts of the group is selected and an empty box when nothing is selected thank you for watching [Music]

Channel: ag-Grid

Views: 52,424

Keywords: ag-grid, aggrid, angular javascript datagrid, angular datagrid, angularjs datagrid, angular grid, angularjs table, angularjs datable, use angular and ag-grid

Id: AeEfiWAGyLc

Length: 9min 24sec (564 seconds)

Published: Wed Jan 29 2020