Reusable Table Component Angular 17 | Angular tutorial | Reusable components in angular

welcome back guys so in this video we are going to see how we can create a reusable component so the scenarios will be multiple like let's say if you want to show tables which just displaying the list of columns and the list of data also it doesn't have any buttons and everything okay so rather than creating all the tables html tables and using ng for all over the places we can create a reusable component of that the component will be like we just have to pass the column array like what will be the headings and the actual data so that's it with that much code the same thing what you are saying now will be rendered okay so as let me show you the code this is a just simple uh new project i have created the package version angular version is angular 12 it doesn't matter like with the latest also code will be same okay in app module i have added http client model because i am going to use the json placeholder users api so this is the api which gives us this response so for that i need http client module then in user component i have created one method load users in that http client dot gate and i have passed my api then what are the result i got i am storing it in the user list and this user list variable i am using on the table so this is our multiple repetable code if we have to if you if we need the same kind of structure over the multiple component okay so now we just have to make this thing into a reusable component okay so let's start with so i have already created one component that is my table so what we need here is like this table only so let's copy it copied from the row paste it over here okay so now first thing like we need to make this also dynamic right so for this we need one input at the rate let's add input over here so at the red input my column [Music] list it will be up string array let's initialize it with zero okay so this is my first input that will be the heading array let's make it heading only next thing as we got the headings i can use it over here so instead of static th i will use it and g4 over here let head of my variable name and instead of the static one i will use the interpolation to print the current head that will be here so now we don't need this okay so i'm just going to comment it for now so let's just save and check whatever we have done till now okay so this is my selector app my table this we will use into user component instead of this table instead of it i will use my table since for this component we have one input so we need to pass it and input name is head array that we will pass it over here is equal to double quotes let's create a variable which will have our array list right array is equal to square bracket in single quote so first will be serial number then name email city let's see what things we have okay phone is there one so for now we are keeping the heading name as same as the column like the field we have okay i will tell you the reason in some time for now just remove the serial number as well then we have website over here okay so only four columns we are taking this we have to pass to my input here let's save and check like what do we get okay so as you can see in the table we have got the headings it is dynamic whatever we have passed okay now next thing is like in here we just need to make this t body dynamic so for that we need a tr so on tr again for loop will be the same okay let's remove the index for now now instead of user list we need a second input that will be my actual data so instead of head array it will be grid array and this we will use over here so we need that number of tr what number of records i am going to have okay now the actual logic lies here td okay so what number of tds we need because tds also we need to make it dynamic like what number of columns i have that number of tds should be plotted okay so for that on the td i will use my for loop for the head array because what number of headings i have same number of columns should be there so let's make it let's just see now this much let's save and this also grade array we need to pass now from our parent component here inside square bracket grid array is equal to our actual data in users list we have our actual data so let's pass it on let's save and check now in table we have static data one one one printed so let's check like yeah so see we have four columns so likewise four columns are being printed in tea body as well like what number of rows i have okay so 10 records were there so 10 tr is also being plotted and in that particular tier same number of columns are also being plotted okay so now what we have to do on the name column we just have to display our actual record okay so for that let me print you item like what do we get in item so once we print the item and before that i am printing my head also so it is a string and when item is an array so i have to use the json type so let's save and check okay so see in the name column we have name and in the object we have name property right so to extract that value from the object we just need to do like this item dot name okay so we have to enclosing the square bracket right is giving error okay item dot head we have to pass okay so this error is because we don't have we have here in string so let's make it any okay now let's just get rid of this printing so what we are doing from item object we are trying to print whatever the column name we have let's save and check now okay so you can see below that column same number of date same data has been printed okay this is just the basic now one more thing we need we need the serial number okay so for that let's just add a serial number over here or the table itself we need a static ph which will be serial number okay and one static td here that will be index so from ng for we can get the index using index so we are storing index into sr now we just need to print it so normally indexing start from the zero so we just have to increment it by one plus one [Music] let's save and check okay so you can see same output we got why it is showing here now okay so this is the simple reusable table we can develop now let's say we need edit and delete buttons also in this revisible table so to achieve that or let's say first consider scenario like this is properties we have in that object right but headings can be anything right it can be capital name it can be capital email so when we should when we are designing a reusable table we should have control we should make everything dynamic okay nothing can be static in this case like we need to pass the same heading name which is present in my object same name should be present but to make it dynamic we can create object instead of this let's make it any and in head array we will pass the object like let's say my object name is head colon my heading name will be let's say name or username to be specific then my field name what will be my field name out of that array so that i will use it over here so this is my one object like this i have to prepare multiple okay so now this property will go over here phone will go over here field name and website will go over here instead of this email contact and website so now since we are sending object array okay now same we have to use over my reasonable component also now instead of head directly i will use head dot head okay and so my head name will be printed and instead of here head dot field name i need to use so now if we see see column names are something different but still data is visible that is because we have sent complete object so head will be like use in the th only nine field name will be used in the td only okay so same output we have got now code is also very less and you can use the same table or multiple component okay next thing if we need buttons let's say we need edit and delete button at the last column so for that let's just add one more input like do we need the edit and delete button or not so for that we can have is action okay so his action can be boolean let's make it by default false okay now this boolean flag i will be using after my all the th i mean all the headings being plotted after that i can use it star ng if okay so if this variable we have got the value as true then only this heading will be plotted okay so let's just test this is action what we have to send from here this action is equal to true let's save and check so with we are sending true so that should be plotted yeah so you can see action column is being added let's make it false so that is not visible okay so since if we send it true in all the column after the data we need edit and the delete button so for that in my table after all the tds have been plotted or in this only we can add a check where we can have a due if action is there okay we just need to make one more change instead of using this what we can say separate variable we can add an object in my header only so let's remove this because we are already sending one object so let's make use of that now here the last column if we need the action item so here we can make head will be action and field name will be empty okay so like same check we can add here header will be plotted like the same what is the error is action okay so since we have removed this we don't need this let's save and check if we get the same output yeah so same output we have got action is being plotted now in here so since we are using header only so you can use head star in g if head dot if field name you can see for the last object field name is empty so if we have the field name empty means it is a action column right let's copy this if it is not action column is equal to not equal to empty then means we just have to print the data whatever we have why it is giving error okay compilation time if it is equal to empty then we need those two buttons okay so let's add buttons primary just the color i'm adding edit one more button that will be for delete okay so like on click of this we need to emit the data also like the click handle click handler will be in my parent component right so we need the whatever the row i'm editing let's just first see like how it is being printed yeah so you can see edit and delete button is plotted let's just add one class margin left two let's see if we have the gap okay so in bootstrap what is the class so i'm using bootstrap five so i think classes are being changed so i will just for now i will write the style margin left let's make it 10 pixel okay then we will assign to center as well center okay so what i need now once i click on the edit i will need this row data into my parent component that is user right because if we have the click handler into that reuse component only what what is the use of that so i need the data once i click on here reusable component i need that data into my parent component so for that we need one output so let's create an output let's add just here we need output and event emitter to emit the data so for that output open closing on edit new event emitter of data type any just give it a time it will okay so this is one output which will be for edit and second on delete okay so now we just need a local function also on edit here we will have item colon any same functions will be like delete okay now we need to call this function on my buttons normal click event and we need to pass the object also so object we will be passing like complete item same thing or delete also okay so now from this local function we just need to emit the data on edit dot emit and we need to pass item same thing in delete function as well instead of on edit it will be on delete okay so now we have two output first there was two input and now there are there are two outputs so now we need to add these callbacks in my user html so these are the input after that we have one output output we write like in round bracket just as like the function so we need a local function in user component also to get the callback so let's say edit user now this function name can be anything because this comes from this function is limited to your parent component okay i will be getting one item as an input same delete user okay now i just need to pass this into my user component okay so from output my table component i am sending data also so to catch the data i just need a parameter which is dollar event okay same thing i need for the output delete also on delete and in user component on delete and my user component function that is delete user so let's just add the debugger everywhere so that we can see how data get emitted now in here also let's save on and check okay so let's click on edit so on click of edit first debugger will be from the revisible table okay so you can see in my table we have got the debugger and in item we have got the current row so you can see current row was linen gram so you can see that once i emit the data from here i will get the callback in my user component in and same data you can see here now you can do anything on the parent component okay let's check the delete also so now we have got the my table com event from the delete and same we will get in here also okay so this is how we create a reusable table again here we can have a common search box pagination and everything everything you can rather than writing the same code and designing the same html in all the components wherever you need the table you can have the reusable component this will reduce your code and increase your code efficiency okay so that's it with the current video following with the same in next video we will try to implement the search thing so we will have a search box here and a basic pagination okay till then thank you please do like subscribe i will upload this code okay the same in a link you will get in the video links so please do like and subscribe thank you

Channel: LEARNING PARTNER

Views: 15,749

Keywords: reusable table component angular, reusable component angular, reusable table component in angular 14, reusable table in angular, how to create table in angular, create dynamic table in angular, how to create reusable component angular, angular reusable component, dynamic table angular, angular table component, table using ngfor angular, angular ngfor in table, table in angular, create reusable component angular, angular tutorials for beginners, angular 17, angular 17 project

Id: vsTrYV6CXQM

Length: 23min 34sec (1414 seconds)

Published: Fri Jul 15 2022