Reusable Table Component in Angular | Reusable Component Angular

welcome back to learning Partners so in this video we are going to see how we can create reusable table component like from the basic to advanc level mean basic means we won't have any control over the data we will be showing just a normal reusable table right so again it's a reusable table right so reusable compound so obviously we are going to make use of input and output properties so reusable table will be responsible to show the data along with some buttons right so and for the API call I will be just making use of the Json plus holder API to get the data that will be users so this API call we will be making so first thing let's try for a simple table and then we will make it a dynamic so in this is a component I have created Json user component here here I have to make EPA call so in Constructor I will create object of private HTTP client service right I'm going to need an array so users array this is a variable it is going to be our object then get users right this is a function in that function I will be call calling this. http.get method right API call the gate API call is there this is a URL and after that URL we need to subscribe whatever the data we get so do subscribe round bracket round bracket result calling AR operator right so whatever the data I get from this API that I'm going to hold in this particular array so that is nothing but reason we need to implement life cycle event that is on in it so we will need a function that is NG on in it so because API call should be triggered only from the life cycle event that's why we are create that's why we have to implement this API we should not trigger API call from the Constructor that is just a thumb rule we normally follow right so on the page Lo we are going to make the API call we are going to get the data and we have stored that into this particular variable so here I will just create a row inside that column let's say six or let's make it eight and inside that I will create a normal table first we will Implement like how do we do the NG for everything in the component then we will make it Dynamic so T head then TR th we need serial number right so this is the basic thing like everywhere we show the serial number the name let's see what data we get let's say name username email phone number and website things we can show so name let me just copy paste username email phone and website yeah so website we can show right so Tad is complete then we have t body inside T body we will have TR and on ng4 will be on the TR because that is what we are going to iterate so NG for let user of after that our array name that will be users array always try to copy paste if you don't you might make a spelling mistake and then you will find like why what is going wrong and you won't find it right so we need a serial number so we just have to create a variable let Sr is equal to index we are going to store index into this Sr variable but indexing will normally start from zero so we just have to increment so that it will start from one ND round bracket round bracket now user dot just to save time I'm writing this because this is going to be common right so I will just copy paste now I just need to copy the field always whenever you are inter when you're using interpolation from any AP objects always try to copy paste it because you don't know the exact spelling or anything you might do something wrong but you won't get the error but data one also be visible right so always try to copy paste these things and this is phone this is website right then let's add a class to the table bootstrap class there is table table B let's save and check we should see the table along with some data of 10 reports right you can see we have got data and that is visible over here let's make it 12 only right now this is a normal table now we just have to create one more component that will be a reusable component for the table right so let's create a table so in the shared portal or reusable folder is there I will create one component over here NG generate component let's my table name is already there let's say wide aable right so this is the just a component I'm creating for creating my reusable table component so enter one thing with the reusable component we don't create a route of it right ideally we should not create it because obviously it is using input and output so why it is not necessary that we are going to access this component as a route right so we never create route of the reusable component right so this component is created now the thing is this was a table right so we can copy this whole code right and paste it into our reible table HTML now so if you think whenever you create any reusable component now you should think properly like what things you can make Dynamic so you can see here this th it is going to be it is repeating so we can create an array right where we can make this thing Dynamic same like this also so first thing first input we are creating just a basic version so let me just note it down what how we are going to do so first way is with just one input means with just one input we will create our usable table that will be array first way okay so let's create an input at theate input right is not suggesting let's add here first input from bracket table data than any square braet is equal to empty right so we have created an input now now this is my selector I'm going to use this into my Json now I will comment this so actual table I have commented now this I will put it over here and for this component we have one input so that input is nothing but table data so here input and I will send my actual array that is users array I will pass it over here right now we will start to write the code in the reusable table right so here you can see in table data you will get all the elements data right whatever the ele how number of elements you have got from that particular API that you are sending to this particular element now we need to know like how many columns are there right so this I will use now this thing should be dynamic serial number we can keep it as a static but remaining things will be dynamic so I'm just removing this only one th will be here star ng4 okay before this we need to see how many keys are going to be there in my particular object what I mean if you can see there are so many keys right so what we need to do is we just need to get the keys like how many keys are there so we can get the keys from any object using object. keys method so here let me just Implement Constructor here I am taking column Keys it will be string array okay now what I need to do I need to get the keys in this particular table so that I can get like this do column Keys is equal to object dot Keys then what we need in the table array we are going to get the array so this dot table array dot square bracket of zero just one record I'm trying to read so in this particular variable I'm going to get the keys I have in all the object so let's paste that over here or let's not do that we will again get confused let me just undo this or simply we what we can do we will create one more input that will hold the column array means what are the columns I have columns array it will be string array Mt is equal to Mt right so we need to send the columns also from our parent component so that will be just juston placeholder this HTML is equal to square bracket now this column array what we are going to do whatever the column we need to display in our table that array we are going to create right so here string array right so let me just create now name property let's copy it from here only username email phone and the website these are the columns I'm going to have right so I have created an array in HTML only for this input now in void table I'm going to use this array to iterate over the NG power so let column of column array right so whatever the column name I have that I will paste it over here so this will be column because this is an string array now next thing in we have a second element that is table data so now table data so first thing is Right TR right so how many TR we are going to need how what number of data we have so that we are going to decide over here so this is correct now after that this is static because we are going to need the serial number so this T just like this serial number it will be static only right after that what we need to do is how many TDS we are going to need just like this how many columns we have so same for Loop we are going to use it over here right so I will just print one over here to see how many columns we get let's say and check so you can see what number of columns we have those number of TDS we have got right the first part is done now we just need to print the data into that particular column means in username column should get the username in email I should get the email so for that what we are going to do so we have got user over here let me just print it user with Json pipe we will see the data then you will understand how we are going to extract so you can see this is the whole object right and inside that this column also is also there so first before that I will print the column now so you can see name is there and then we have object so how do we retrive particular field using our key right so we have got property also and we have got object also from that object this property is over here this property is over here this property is over here so we just need to read particular field from that particular object right so this is our let me just comment it out in user we have got whole object so that's why user dot then we can make use of the column right from user we are trying to print the particular column means key so let's see is wrong let's see if we get error might be we need to access that using square brackets and square bracket inside that our column name let's see now right so now we have got the data because object we can access using Dot and in square bracket also we can pass the key so this was here we were getting the key so we have put that inside the square bracket so from user object we are just printing the particular key value so you get the particular name name email and email according to that particular column so this is very basic right so with what with just two input first is the actual data and second is the column array we have shown the same thing into our reusable table right now this is very basic table but let's say you need some buttons Also let's say what we normally do in table is edit and the delete right basic if we talk about basic C operation in table we need edit or the delete button also so for that either what we can do [Music] in our HTML we can pass one more column that will be action right so if we have action if we have added one action column so we will get one more column over here now in the last T we need to add the buttons right so in here we just need to create one more D over here I will explain like why because in the column we are getting action also now if the column name is action we need to show the button so that's why star NG if equal to if column is equal to is equal to action we know like in the array we are going to send the action right so this we can compare it over here if the column name is action then we are going to show the button s else we are going to print the actual data not means if the column name is not action then we will print the data if column name is action then we will have edit and the delete button so button plus BN BN SM BN success let's make it edit just like that we will have a delete button also delete we will just add a danger class and it will be deleted so see with just one property and ngf we will be able to show that particular thing so see in all the column we are going to get the data just in the action column we have got edit and the delete button right now let's say on edit we need to edit the data and on delete we need to delete but this operation we are not going to perform in a reusable table because the reusable table is not for a particular AP or particular data it is it is reusable right so we don't have data specific we are not going to do anything so edit and the delete operation will be in the parent component means this Json user component right so from when we click on the edit we just need to send data back to the parent component like on which record I have clicked on edit just like with the delete also so here we need to send data from par child component to the parent component means our child component is revisable table and parent component is just on user so we need to send the data back so let's do that right so we need to create output over here so input is used to send data from parent component to child component but to vice versa means from Child component to parent component if we have to send the data we have to make use of the output so let's create let's just add input first output and event met also we are going to WR because we normally emit the event right so first output at the rate output round bracket on edit is equal to new event emitter now data we are going to send is object so let's make it any only so first on edit so first output we have created for edit and just like this second will be for delete right so two output we have created two input and two output now what we need to do is from these buttons we need to create local events so that is Click event edit record and we need to pass the data so that is nothing but user we need to send just like that delete function also click delete record and we need to pass the user whole object we just have to send now we need to create this function edit user and the delete user now both functions are having some data we are sending from the parent from HTML so we need to catch that item colon any here also item colon any right so what we need to do now when we click on this particular button we are we are passing some data also that we just need to emit so that is nothing but this dot on edit. Emit and we need to pass our object along with this right in the delete also this dot on delete do Emit and item we need to pass right so we have created in outputs and uh from the normal function we are just emitting the data right now in our parent component so we had two inputs also let me just remove this table this is not needed now so we had implemented to input so just like that we need to implement the output also right so input will normally win the square bracket but output is nothing but event so we have to make use of the round bracket so you can see once I added the round bracket it is suggesting there are two output in this particular T component so let's Implement first edit now this output is going to get the data right because when we are emitting we are passing some data so we need to cat that also so we cat that data okay let's uh first grade function edit user now we are in the parent component right so when we are going to when this event when this event is going to trigger we are going to get the data also to cat the data every time we need to write dollar event only okay then second event that is on delete delete user dollar event right now let's create this function into our parent component now same again we are going to get the parameter right so we need to catch that over here data any let's add a debugger so that you will understand how we get the data then delete user same like here also data col any here also we will add the de whenever you are creating something new writing some Logic for the first time always add a debugger and debug properly here also I will add Here Also let's sa and check let's open the console right now let's try to edit this Ain record if I click on edit first debugger I will get in the table component so you can see in white table I have got it and in item we have got the whole object just expand so you can see Ain record we have got now from this reusable table component we are emitting the on output edit with data also if I continue see you have got the edit user function called from our parent component and data you have got whatever the data we have sent from the child component this is how output work whatever the data we have sent while outputting that event and that data we have received in the parent component this is Ed let's Ty for the delete let's click on the P here and click of delete first our function from the re reusable component is getting triggered data we have got continue and same over here also we have got right then in the parent component you can make your edit and the delete API call use reusable table doesn't have to concern about that whatever you do it has just send the data back right now so we have created our basic table along with edit and delete icon but let's say this is a reusable table right reusable means everything should be controllable let's say in this particular page I need the edit and the delete button but let's say in another component I'm going to use this table but there I don't need the edit and the delete button so that you can manage now I'm going to create one more variable input round bracket show action button col buan by default false I will make it and this variable I will use it on the action button if it is one already ngf is there with and condition I will add this variable if this variable is true and the column action we are getting then only this div will be visible right so now this variable we have to pass it as an input input will be in square bracket is equal to I'm passing false for now now we should not get the data but one thing were missing is there but let me just you can see delete button is not there but action column is there right so we just have to remove this also so this thing we have to take care like how we manage okay so action column we need to remove it that we need to take care if we don't have the action we need to show the button or not that we have taken care right let's make it true and we can pass the action column now we will have the edit and the delete button visible now let's say we need to apply pipe how we are going to apply the pipe because pipe are multiples we have date pipe string pipe lower case uppercase we have number pipe also based on the data type we should apply the pipe right but if we with with this basic table if we try to apply the pipe how we are going to determine like for this particular data we have to apply date or number or something else right so now we are going to just Advance the actual our uh input right so when we are the column array we had right so column array normally we have created is a string array but now we need to modify it it will be array of object like I just let me just create first I'm just going to create an column array now column array any square bracket square bracket now what I need to do is I need to create an column ARR like what number of column I have but for each column means for each column I need to specify the data type also if we get the data type according to that we can apply the pipe right so let's say header name then data type it will be string right so just like that we need to create all the columns so this thing will be dynamic name and user now you have a control over actual heading also because previously we had the property just like whatever in the particular key object key we had right this is also string let see if we get the date over here somewhere okay date is not there let's I will I will just add a date username then what things we had email phone number email phone number one more thing that is website right so we will have three field header data type and the actual field name because we are going to need this property now because we are we are reading like this right so we need one more property that is field name field name f name nothing but name whatever whatever the array we have created right over here this is nothing but our field name particular key in that our object so let me just paste it name username email phone number website right so let me just format it so you can see in our column array now it is an array of object header is there which we will use to display the heading here then field name this we are going to use it when we have to print the data right and the last thing is data type we will C type now since this is the array we will pass it instead of this string array we need to pass the object now in the column array we are going to get the array of object now we need to changes into our column so this column will have now object so column dot what we need to display header so header we will display it over here right why is saying okay so initially we had created this as a string now it will be any because it we are going to get the aray of object so first thing is done now here also instead of directly column we need to make use of field name right here also column dot header let's save and check our table should behave the same yeah so now you can see our columns are very really proper previously it was whatever the field name we had in the property that we had displayed but now column names are properly and the data is also visible right let's try to add a date so here we have got the array inside this array I'm using for Loop for each loop I just need to in insert one more property that is date element dot current date is equal to new because in API response I don't have any date field so I have just added one more field that is current date let's increase this one more column also date and the field name Will current dat so what I have did is here I have just use a for Loop and inside this for Loop in each object I'm adding current date current date and this will be date right so let's say we have created a column array just all the remaining columns are string but we have one date now if it is date we need to add a date pipe right let's just see how does it look so you can see date is visible like this but we don't show date like this we add a pipe right so to handle that again we are going to change our logic now this was the DU which is responsible to show the data here we are going to add different span because we are going to use ngf condition St ngf equal to if our column dot now we are going to make use of this data type if column do data type is equal to is equal to string right then mean we can add a lower case upper case whatever right this is first and this will go over here let's add a perase pipe title pipe we can add title case just like this if we have a date data type so the second if statement then we have to use date by so date colon then we can pass for DD mmm y y y y right so let's save and check now we should have our proper date pipes also added have some okay this was there right so now you can say our title case pipe is also added and date pipe is also added right so this is how we make things Dynamic but let's say just someone might have a question like this is again static right I should have a control over it let's say I for one column I need to add lower case and for one column I need to use upper case but if we do like this this is static right this and this also can be controlled by we can add simply pipe over here let's say here we can say what is it what col title case let's pass it title case over here again for username I will use upper case this I will use for upper case okay and let's see now in the object we are going to get one more property that is five now let's try to make use of that here instead of column dot I'm not sure like this is going to work or not let's try right column dot our pipel okay I think it won't because it will need that particular thing so again we have to make use of NG only but that will again increase our what we can say coding because there are number of pipes pipe pipes are what we can say limited number of pipes so we just have to start writing ngf and ngf or NG switch case according to the different pipe here so that whatever the pipe we send that particular NG will get applied just like this just explain inside this span again let's see if we have span RNG if and we can have now column. data type instead of column. data type we will have use pip is equal to is equal to let's say title case is there right if we have to we have the title case then we will make use of title case because when we apply the pipe it needs directly like this we cannot pass a value to it then if it is uppercase then we can use upper case just like this we need to manage right but again it will be complicated so we will just restrict to minimum let me just control Z right so this title case we have done one more thing we are going to see is how we can do the filter thing right so let's say on this table I will have a c SE box over here and whatever I type over there that should be that should get filtered now I just have a function already ready just copy that paste it now inside this inside this table we will have our search box so above this table let just create a row call 12 text box I will need input CL for control let's set a placeholder search let's assign it to the end we have got full screen let's make it six or let's make it three okay so we have got a search box now whenever I type whenever start whenever I start typing I should filter the table now whenever we are doing the client side filtering now now this is just a client side filter we cannot make the server side call we can but again we need to write the PO now this was the actual array we were getting from the parent component so just like this I will create filtered data col any array is equal to right now what I need to do is whenever I'm going to get the data that data I'm going to store it over here also so in Constructor this do fil data is equal to this dot table data right and instead of directly binding this table data to the actual table we will use filter data over here so let's see if it is working or not okay no because we have to make use of NG on changes because when Constructor is getting called we don't have the data ready so now we have to make use of NG on changes on change need to implement NG on changes right so this line I will put it over here see if to get the data yeah now it is working fine right so this is the use case of ngon changes so if you have seen Constructor doesn't work but if we have write the same code in ngon changes we have got the data because whenever this column property changes means whenever this input value change this ngon changes will trigger again that's why we will get the updated data over here now so we need to create one variable that we will bind to that text box search box the string is equal to empty and this we will bind to our text box with NG model square bracket round bracket NG model is equal to this now since we have an NG model so we can make use of NG model change event right on search change round bracket and we need to get the latest value so that's why dollar event now let's create this function into our table component we just create after this so from front end we are going to get the whatever particular value we have typed into that text box so that we need to Value catch it over search when data type will be string only right so let's make use of this function paste it over here now this is an existing function which get filtered the data so we need to filter the data and store it into this filter data variable so this will go over here right now we need to search the data from the actual array actual array we are going to store into table data so here what we are simply if you can see this code what we are doing we are just filtering the table data and with each key you can see object do value sorry value we are trying to match the data and this search Val will go over here so this value. two string lowercase we are trying to search and if we got we are returning true otherwise flag right so let's save and check now let's so you can see if I'm writing Patricia I'm getting that let's say Cameron I'm getting that let's try for a mobile number that is one two something so you can see wherever I have one two let's say 06 so you can see wherever I have one two all those record because one 12 is present over here here here here but if I say 1289 only that record will be visible so you can see we have got one search box that is working for all the columns let's say search do net so wherever we have net here also where we have net in this column dot is there that's why it is searching let's try Kina yeah okay so this is how we implement the search box I mean this code you can use it to your normal component also whenever you have to do the inline sorry client side filteration right so this is the uh end to this video so we have start we have start when we have started we have created basic table then with uh Ed it and the delete button adding pipe and then client side filtering also we have dat again we can go into detail like we can add pagination sorting and but just like this we can add that things also right so that's it with the current video in next video again I will try to cover some more scenarios

Channel: LEARNING PARTNER

Views: 3,677

Keywords: reusable table component angular, angular reusable table, angular table, angular reusable table using input, reusable component angular, angular reusable component, input in angular, output in angular, angular custom table, table in angular, dynamic table in angular, dynamic angular table, ngfor in angular, ngfor in table, how to create dynamic table in angular, angular tutorials, angular tutorials for beginners, angular 12, angular 16, angular 15

Id: 3GGzDRbdkdQ

Length: 42min 22sec (2542 seconds)

Published: Mon Oct 02 2023