Getting Started With Angular and AG Grid

in today's video i want to show you how to add ag grid into an angular application the first step is for us to use the angular cli to create our app we do this with the command ng-new my app we set our styling to scss and we don't need routing so we'll set that to false once the cli has created our app it's time for us to add our dependencies we cd into my app and then we need the aggregate packages ag grid community and ag grid angular with these dependencies installed we can then run npm run start to start the application once this is up and running we can see we have the angular template ready for us to add our 80 grid code before we update our code let's take a quick look at our package.json file you can see our angular dependencies and also our ag grid dependencies here you'll need both of these to work with ag grid grid community contains all the core grid logic and 80 grid angular contains the angular wrapper component that we can use in our application just make sure both are on the same version to use the azure grid component in our application we first have to add the az grid module to our module definition so we import the aggregate module from ag grid angular and then we add it to our imports array this means that we all have access to the aged grid component throughout our entire application next let's delete all the generated code from the cli so that we can start adding our grid code we will now add our angular component to our template so in the file app.component.html we add aj grid angular then in our app component file we will add two properties row data and column definitions we then pass these properties to our grid by the inputs row data and column defs in our example we want to list the make and model and price of some cars so we're going to have three column definitions make model and price then i will just paste in some row data which has those same fields make model and price now let's hit save and see how our grid looks oh that doesn't look like the grid at all and that's because ag grid requires some styling to add the styles for aggregate we go to the top level styles file in here we add two imports the first is a file called ag grid css this contains all the core layout functionality for azure grid to work so you must include this file the second is a theme file and we're going to use ag theme alpine with these two files imported we can go back to our component and add a class there called ag theme alpine this is how you apply a theme to the grid now when we hit save we still can't see our grid and that's because we need to provide height and width once we set these on our component you can see our grid is now displayed we can see our three rows of data with the columns that we've desired if we wanted to have a dark theme we go back to our styles file and we update the theme and likewise we go back to our component and add the dark suffix there too and we have a dart theme as easy as that it's also possible not to use any of our provided themes and you could write your own theme yourself if you wanted full customization on how the grid looks but you must still have ag grid css because without it the grid will not work now let's undo those changes so we can add some more features into our grid so we have a basic grid but now let's make things a bit more realistic let's see how we can load row data from the server to do this we'll use the angular http client so the first step is to import that into our app.module then in our component we will replace the hard-coded row data with an observable we inject http client into our constructor so that we can use it to load the data and then in ng on init we will set up our row data to listen to the event stream for our url as you might have spotted the template is now complaining because row data is no longer an array it's an observable of an array so we use the async pipe to subscribe to our http call now you can see that our grid is loading data from the server and we've got lots and lots of rows we've now got a grid with lots of data so a feature you might want is sorting and filtering for every column now this is easy to achieve with 80 grid for each column definition we add sortable set to true and filter set to true and now that means that in our grid we can sort the columns and we can also filter by their values but before you start worrying about all this duplication in your column definitions we can extract common features into a default column def and we can pass this to the grid in this way you can set sortable and filter in one place and have it applied to every single column there are many other column properties that you can set to customize ag grid for the full list check out our documentation another way to customize the grid is via grid options you can pass these directly to the angular component so for example we could set up row selection and set that to multiple and then we can select multiple rows in our grid using the shift key another property you might like to enable is animate rows setting this to true means that the rows are now animated when you're sorting which gives a much nicer feel for the user once again there are many grid options you can set all of which are listed in our documentation we've now looked at column definitions and grid options but you can also listen to grid events such as when a user clicks a cell to listen to grid events first of all in your component create an event handler here we're adding on cell clicked and you can see it receives an event of the type cell clicked event then in your angular component bind this to the output property cell clicked now if you start clicking rows in your grid you'll see in the console we are having the events for cell clicked there are many many events that age grid fires which will enable you to customize it and build the behavior that you want once again check the docs for the full list the last thing that i want to show you in this video is how to use the grid api so first of all we need a reference to the grid and we can do this using a view child where we pass it the component as a selector we can then use this to access the grid api so for example let's add a button which will clear the current selection so we add a method on our component clear selection and we use our view child property to access the api and call deselect all then in our component we will add a button with a click handler which calls clear selection now we can see if we select multiple rows and then hit our button the selection is cleared because we're now calling the grids api and as before there are many methods you can call on the grid api to control the grid which are listed in our documentation and that's it we've now finished our video i've shown you how to set up ag grid load data from a server and how to start configuring the grid listening to events and even then calling grid apis if you like this video check out the rest of our angular series where we will show you how to use all of agrid's features [Music] you

Channel: ag-Grid

Views: 52,489

Keywords: ag-grid, angular data grid, vue data grid, ag grid, javascript datagrid, angular tutorial, angular getting started, angular datagrid

Id: _cRDVM6NlPk

Length: 8min 2sec (482 seconds)

Published: Mon May 16 2022