How to use ag grid in angular | From Setup to Advance

welcome back to Learning Partner so many of you were asking like how do we Implement AG Grid or the prime NG grid so in this video I'm going to explain how do we use AG grid setup is very easy from the documentation provided by AG grid only we will try to follow so that you can also uh face the same issue and whatever fixes we need to do you can also do the same so this is just their site so while if you the side what you have to do AG grid angular because AG grid is provided AG grid provides for the JavaScript angular and react also so you need to specifically search for angular so once you click on this the first site you will land on this page now this is a third party Library so we need to obviously install it so here is their command so let's try to install this let's open a new terminal you can use any project uh this is just an existing project I use for YouTube videos so npm install a GD so this is my command which will install the AG Grid in my local project once this is installed it will upload the package.json so it will add one entry to the package.json so you can see AG grid whatever the latest version they had 31.03 this is the latest version they have it is being installed now now let me just close it everything once we do the installation let me just add over here also so this is the command to add the to install AG grid once AG grid is installed after that we need to add the CSS just like bootstrap we install the bootstrap after that in angular doj we add uh their what do we say uh links so in angular.js we need to add the AG GD CSS links in the style section just like the bootstrap so that also provided it over here just you have to scroll down this is nothing but their path so in the node modu also you can see the same path so if I expand node module then we will have AG grid where it is AG grid yeah so here agrid Community dis folder CSS whatever the path we are going to add that is already provided over here once we install so after this in double code we need to add this comma and we need the theme also so let's just copy it so this is for the theme right second part in angular doj you need to add these two entries Styles array add below lines this is the second step you need to do right now coming back to like what things we are going to see in this particular video how do we create the basic table using a grid uh once you do that once you once you try to implement the basic table now you will face the error like it is not uh taking the full width on let's say in table we just have two columns so it will just take minimum space and the remaining space will be blank so how do we make it full WID how to format the data using cell renderer how to add the filter import and uh so sorry how do we export like we can export it to CSV or the Excel file inline editing how do we enable the inline editing row selection we can make single or multiple pagination like what are the things we can can do in the pagination so all these things we are going to do so we have installed the package we have added the CSS into angular.js let's save it once you do the install once you add the CSS to angular make sure you run the application again then only the uh CSS effect will run now in Pages folder this is the component I have created so here what I'm to in this component I'm obviously when we talk about table we need the data so I'm going to make use of the Json placeholder API to get the data so this is the API sorry this is the API which I'm going to use so in this API we actually get 10 records so let's try to use that Constructor we need to make the AP call so I'm creating private HTTP client object before this you need to add HTTP client module in your what do we say app module so this do HTTP dog and we need to pass the URL and do subscribe method we need to get the data whatever we get we need one variable to store the data so user list poon any this is going to be array of object whatever response we get that we will hold it over here this do user list is equal to RS now on the page load we need to call this API call so let's Implement On in It life cycle hook implements on in it once we implement we need to import we need to create the function NG on in it and in NG on in it we will call this function right now once this component load we are making the API call whatever the data we get that we have stored in the user list now let's come back to the AG grid page so now the basic implementation when we talk about AG grid so first we have to create a column array like what are the columns I'm going to have so if you see this is a basic implementation I'm just copy pasting from uh here only so that you also face some issue that I want to explain First Column definition it will need let's see if it is suggesting it is not suggesting let's check there code every in every page they have provided the sample example code also so you can check that and you can use that let's use that import right now so column definition is like what are the columns I'm going to have in my table so if you see the API so you can see these are the various field so let's say name this is one field I'm going to have then username what number of column you want to show username and let's say email only three columns we are going to create for now let's remove the last one so here we have created the column list like these are the columns we are going to have in my table next thing the selector so here this is the AG grd selector this is nothing but a reusable component but we are using their component just like we create our reusable component there we have inputs and output so whatever you see in the square bracket these are nothing but input so let's copy this let's paste it over here so do row let me just create column structure now one more I forgot in app module you need to add the AG grid angular so if I remove this then you will face one error so it won't recognize like what is a grid so in app module you need to add this AG grid angular module in your import section then now row data so column definition we have already created the this variable column depths right this we have provided to the column definition inputs now we have row data row data is nothing but the actual data the array you have to pass so we have stored the array into user list so let's pass this over here now let's save it and let's check it if we are able to render the AG grid let just inex because I'm just doing the same thing because this also whatever the issue I'm seeing you you are also going to face so for that I will explain like what you need to do so if you see here the grid is rendered but it is not taking the height and the width and everything it is there you can see here grid is rendered but it is not visible so for this you need to do some changes first here we need to add the height so let's go over here just like the inline CSS style height let's say 500 pixel we will try for now let's save so now you can see data is coming properly but still we are not able to see the proper table right after that we need to specify the width Also let's try to provide the width 100% let's see if if it takes the 100% width or not still it is not taking now we need to add a class that will uh what do we say for a theme like AG grid is a third party Library they have free version and the paid version also so we have to add the theme so AG theme and quads so this is a class we need to add let's save so now you can see we are uh something we are able to see just like a table but the problem we can see we just had three columns so remaining space is empty but what ideally should happen all these three columns should take an equal width so for this overall table we need to create one more variable that is default column definition so let's create default column definition this is an object and here we need to add Flex property Flex let's say one then we need to provide minimum weight Also let's say 100 value and let's just remove this and this we have to provide over here and the input will be column default column div so just like this let me just press enter so all the input we will provide one by one square bracket default column definition and here we have to Prov provide this variable which we have just created this will go over here let's save all and let's test one more time now it should take the full width still it is not taking not sa yeah now you can see we just had three columns now all these three columns are taking equal space means whole 100% width like 5050 whatever it is dividing whole table space into your equal width so this is my basic table implementation what we have did let's just see one more time so first we have to create the column definition like what are the columns we are going to have and in field you need to provide the actual property name what you have in your array then this is an extra thing that is default column head because we need to provide the flex value right and this we have to provide over here let just open this side by side so that it will be easier right and height also we need to provide because by default it doesn't have the height so we need to provide the height in row data we have to provide the actual array name where we have the data column definition the default column object we have created right so these things we have done now let's say user name is the field name so here you can say username is there but let's say I need my specific column name so that also we can give so let's try that now so the property head field in the column column definition we have a field that is nothing but the actual property name from your array of object right then we have header name property and this will be your title so let's say name let's try for this header name let's say user space name and here eail just like this now if we save now you will get the labels whatever we have provided see name username and email hypon so if you need proper your if you need to pass your custom header column name so this property you have to use that is header name right so our basic uh like basic implementation is done then making full width is also done by providing the call definition and flex now the third point is how do we format the data using sale renderer so sale renderer is a thing let's say we if we are not using a grid we have total control on the TD like if you need to display some value if you have first name name last name and you need to join that you can do that right but here if you see the HTML you don't have you cannot see TD where you cannot uh you where you cannot join something or you cannot add a pipe or something else so for that AG grid has provided a sale render now let's explain that like what is sale render so sale renderer is nothing but a function which allows us to render actual value with formatting so let's say let's check the data what we [Music] have let's say we need to show ID plus name as uh with hyphen connected just like that something so here let's say I'm creating one more field build is my ID then let's say header name user ID and from API we are going we are getting only one 2 three something but I need to add EMP word before that so if you can see currently we are getting 1 2 3 up to 10 whatever we have let's just move this at the top instead of this directly 1 2 3 I need to display emp1 emp2 like that so here I need to format the data before rendering so that is the function we have to use so that is sale renderer function and here let's say value whatever the value we get so let's wrap that with any because it needs the data type and the arrow function and here we need to return the value return let's say EMP iyon and the actual value so plus value instead of let's say item because there we will get the value item dot value right so let's just save it and let's check instead of directly now ID we should be able to see EMP SL whatever the ID we have so here you can see EMP hypen 1 EMP hypen 2 whatever the things we are able to see means we are we have successfully formatted the data before displaying so with sale render you can actually modify the data before rendering it on the UI so we are done with the sale render then we have then we have how to add filters like single and multiple so let's see like how do we add the filters [Music] just so let's say on the name column we need to enable the filter so let's say filter value and let's say true let's try this if we get to see the filter or not all right so it is not coming so I think it needs this value H Tak column filter let's pass that so this filter said to true or I or we can provide any of this value so let's pass that value now we should get the filter still we are not getting the filter why is it sorry on the name we have added and why I was searching over there so on the name column we said like filter is on so let's say we have we on click of this we get this small popup let's say we need to search starting with Glee so you can see we have got it let's try with our wherever we have the r that is available over here so we can add multiple Also let's say we need R plus we need M also so see only two records where we have R and M so just like that with r contains whatever user need to do contains equal does not equal start with end with you don't have to write the coding for that everything they have taken care of let's move on to next so this is like single with multiple we have done now export so what things we need to do for export so let's go over here let's see the export where do we have the export let me just okay so here we will have export ready it load so everything code if you see I'm also searching from here how to use it AG grid is very much used library in case of react and angular also so everything they have properly documented you just have to search it like what you need go to their implementation and you just have to do the same thing so see here also what they have done they have created a button let's copy their button only uh above the table we will add that now let's create this function let's see what they have done so in export button I think we will need now AG grid so the grid API we have to create so this is the code now what is this grid API grid API is nothing but a control what do we get like so many functions are there like on grid ready on page change are so many functions are there all those call backs we can access by creating object of the grid API so let's create this just like they have created so this is what they have added let's create this function variable first it will be any we don't we have not created any class or interface let's add GD AP over here now after grid API we need once if we have to use the grid API you have to implement the on grid ready function so that is like this grid ready function this is nothing but output just like we create so let's add it over here on grid ready this function also we have to create and we get the parameter that is event uh let me check what is the parameter grade event like this so let's copy the data type only let's make it any and this event we have to add in the inputs also now this grid API whatever we have added right so this should be initialized over here with perm. API means event. API then only grid API will be active like whatever the control or the object of that component is there that we are accessing over here right then this export will work so now let's save and check so we have already created the button export on this button click we are calling this function and here we are simply writing this. grid a export data as Excel so let's just test it so if I click over here no something is not wrong let's check what went wrong in console we might get one error no error is also there okay unable to use grade API Excel Excel input is not registered okay so instead of that let's use the CSV Excel export as data as CSV let's try this so again for the export you need to add one more moduel to the your import section so for now I'm using using export as CSV so now you can see export is downloaded right so just like if you have to use uh specifically import the Excel you need to add their import also that might be provided over here let's check if they have provided no they have not provided okay so export is done let's check what is next inline editing now inline editing is also very easy in the column like what are the columns you need to make it editable there only you need to provide the specific property that is editing editable sorry and you need to provide the value as true so if you can see in the field in the last column that is email we have said that this is editable so let's just save now if it is editable or not so if we double click you can see it is editable so on the double click you can edit it but remaining you can see it is not converting into the textbox because on the email column only we have said that it is editable as true right so with this simple flag you can make the column as editable so this is also done pro selection like let's say I need to select particular rows right so we can provide a checkbox over here so for that we just have one property that will be on the we just need to create that uh like on which column we need the checkbox selection so let's say on ID only we will provide checkbox selection and let's provide true let's save and check if with this we are getting the checkbox yes so here you can see we are getting the checkbox now this is like only single select is there but what if I have to select multiple also so for that we need to create one more prop property let's create a variable through selection let's provide the value as single or multiple or or equal to why is [Music] single okay column like this so you need to create a property like this and this you have to pass it as an input over here for the row selection is equal to and this you have to pass it over here what it is saying single is not accessible to type single multiple I spelling mistake I think it is there let's save still we are getting the error let's go to their side and let's check what went wrong so that will come in editing no sorry selection let's check what went wrong selection [Music] it will take some time to load their proper uh code so where it is like this only now so let's copy their code only Pro selection okay so it was something error was there let's save now you can see multiple selection is there but let's say uh just like on the table selection we need one uh what do we say one checkbox which will select all right we have a selection we have a selection at the we have a checkbox on the top and on that selection we need to select everything here so let's see if we have that row selection preview do we have that over [Music] here still taking time let me just find that so I found that that is nothing but header checkbox selection so this should be let's say instead of that let's provide this value let's save now this should get a checkbox on in the header yes and we have removed that property right so we we need both of them checkbox selection and the header selection also so now you can see we can select all also and deselect all also after that this is also done now last thing is like pagination so how do implement the pagination so first thing like basic pagination paginator property is there that we need to make it as true P generator true let's save and check if we get the basic default pagination so you can see basic pagination we are able to get now let's say here you can see page size by default is it 20 50 and 100 it is coming but let's say I need to provide my selections like my options like what are the options I need to see so that also you can provide that is pagination Page selector pagination P selector and this is should be array let's start with five 10 20 50 100 500 let's save let's check if we get those option so now you can see what whatever the options we said that are coming so now you can see pagination is working currently the Jon placeholder has only 10 record but if you right so like this you can do what else we have so the basic everything we have covered yeah so the last thing that pag that also we have cover so basic this video was main the purpose was just to explain like how you should use it everything it is there you just need to find it you can search it from here also like what you need export you need inline editing you need sale rendering you need server side filtering you need whatever you think that you can search it whatever they are providing they have well documented everything you just have to see their example and you have to use it so that's it with the current video please do like and subscribe

Channel: LEARNING PARTNER

Views: 5,986

Keywords: ag grid angular, ag grid, ag-grid angular, ag-grid, angular ag grid, ag grid tutorial, cell renderer ag-grid angular, ag grid angular example, ag grid in angular, ag grid angular tutorial, how to use ag grid in angular, how to use ag grid, ag grid pagination, ag grid cell renderer, row selection ag grid angular, export in ag grid in angular, angular ag grid use, how to use aggrid in angular, how to use ag-grid in angular, angular ag-grid, angular tutorial, angular 17, angular

Id: XqH7gXY0Rb8

Length: 31min 38sec (1898 seconds)

Published: Wed Jan 31 2024