Angular Data Tables For Beginners - Easy Angular Tutorial

what's going on guys today in this video let's learn how to build a complete data table with page nation and filter options using angular and a fire store from scratch without any plug-in used so let's get [Music] started hey everyone before we get started I just want to let you know that I have recently opened a patreon account for Oct Academy if you enjoy my work and would like to support it and great please appreciate if you could consider joining even if you can only go for the free membership every bit of support helps me to create more valuable content like this so I can put my 100% focus on OCT Academy YouTube channel if you able to join the paid membership that would be truly appreciated thank you so much already enough of the self-promotion and Bing stuff let's get started thank you all very much for your time and attention all right guys so so in this tutorial let's learn about how to create an angular data table with pation and the filter options from scratch without any plugin so npm packages also guys in the end of this video we will learn how to connect this data table to the F store database and how to load the F store collection data to our data table as well so don't skip any part and watch till the end so let's quickly demo what we are going to build in this tutorial so guys there is not much here you can see here our angular data table which now loads the data from the F database and down here you can see the vagination we can go next or we can come back to the previous pages and also we can quickly jump into each page by clicking this pagination numbers so top here we can see the filter text bar using this we can search for specific data loaded inside this table this will will happen real time every time you type a text inside the text field this will filter out the table according to that filter word right next here we have the P page data limit count drop down we can choose how many data that we want to load on each page okay so I think that's it for the demo hope you guys got an idea about what we are going to build in this tutorial so next let's dive into the real business actually guys this is just a small portion of my new angular real world client application from scratch full course which has 120 plus hours of content you can find the full details about this course at the end of this tutorial or you can find the links in the description perfect so guys first thing first we have to generate a new angular app for this so as usual open the terminal or the command prompt and navigate to the project folder in my case my project folder is inside the desktop so I navigate to the desktop CD desktop and CD my project folder name is angular projects so inside this let's generate the new angular app using the angular CLI hope you guys already installed and configured angular CLI if any of you guys are new to angula I recommend you guys to watch my complete angula full course you can find the link in the description all right so let's generate the new angular app using the angular CLI tools so the angular CLI command is NG and in order to generate a new angular app we have to use the ni command so NG ni and the project name let name it something angular data table and hit enter so from here we are not going to use any routers so give no to this after this here choose CSS as all Style method that's it awesome now this will generate a new angular app for us once this is complete go to the project folder and open this inside of the vs code now open the integrated terminal inside the vs code so we can open this by going to the we and terminal this will open the integrate terminal or the command prompt inside the V code now inside this terminal let's run our angul app so for this we can use the NG serve Command right hope you guys already know this this will compile our angular app and load it inside the browser by opening this URL inside the browser we can see our angular project inside the browser so guys this is how the default angular app looks like so let's remove this default Bo break code so go to the component HTML file and remove the all default HTML markups so after this for now just simply add an H1 tag and add these text angular data table now save this all and go to the browser as you can see here this time we can only see our H1 text angular data table so guys our angular app is ready for our work so first let's generate separate angular component for the data table so inside the integr terminal area open another new terminal and run this command NG g c so this G stands for Generate and the C stands for component so after this pass the component name something data Dash table hit enter to execute this command this will generate a new angular component inside the file tree now we can see our component folder inside this we can find all data table component HTML CSS and TS files next what I want to do is I want to install tailin CSS because for this I'm planning to use tailin CSS as our CSS framework so guys any of you don't know anything about t CSS I recommend you guys to watch my Tailwind CSS course the link is in the description all right so let's install and configure Tailwind CSS inside our angular project so how do we install tailin CSS very simple just go to the Google and Google tailin CSS angular and go to this URL tailin CSS documentation URL in here you can find the detailed documentation about how to install and configure T CSS with our angular project so first uh simply run this first command to install the package inside our angular project so copy this first npm install command go to the vs code and inside the integrated terminal paste the command and hit enter to run this command so once it done again go to the tailin CSS documentation and copy this second command this will generate the Tailwind configuration file so copy and paste this command inside the integr terminal and run this so after this we can see a new file inside our angular project folder Tailwind doc config.js file so now open this inside this we have to config the tailn CSS path so go to the documentation and copy this SRC path and paste this inside the Tailwind config file under this content tab so so at last we have to add the tailin directives inside our main CSS file so open This Global styles.css file and paste these Tailwind directives that's it guys so in order to work with new installation of T CSS just simply restart our angular application that's it so guys now go to the browser and go to angular app now as you guys can see here this time our H1 text is smaller than the previous which means having CSS successfully installed and configured with our angular project and the default styling is reset with the tailing CSS default Styles that's why this H1 text got smaller than the default size so let's double confirm this is just go to the V code and add these T in CSS classes for this H1 tag text- 3XL and text- red- 500 so guys this text 3XL will make this text size bigger and this red 500 will apply T CSS red 500 contextual color to this H1 tag so save this and go to the browser as you guys can see here this time this H1 text is big and red which means these tailin CSS classes are working so which means tailin CSS is sucessfully installed and configured with our angular app awesome right all right now let's first write the HTML markups for data table layout so in our layout we have at the top uh text field for the filter option after that on the right side we have the page data count selector and the bottom we have our data table with the pagination so let's start our design with the filter area so go to the data table component HTML file and add these HTML markups so remove this default tag and add these first let's write the HL tag for the filter text field create an input tag and the input type will be text after this add the place holder for this the place older text is search next let's add the select text for the page size selector after this select tag and inside this create an option tag for now just simply pause dummy option something test so now save this and go to the browser as you can see here the page is not showing anything that we added inside of the dat component HML file so why is that can you guys tell me yes of course in order to show or load an angular component inside of an angular app we have to add the component selector inside of the app component HTML file so then only this will load this inside the browser so go to the app component HTML file and add the data table component selector which can be found inside of the data table component TS file so app- data-table so that's it so guys they add this like an HTML opening tag and close tag now save this and go to the browser now we can see this text field and the selector inputs as you guys can see this is not looking good so let's make this look nice by using tailin CSS so go to the vs code go to the rear table component HTML file and add these tailin CSS classes to this input field class attribute and the tailin CSS classes are w- full border p-2 rounded dlg so I hope you guys are familiar with these T in CSS classes I'm going to explain all of these because this is not the scope of this tutorial if you guys want to learn more about TN CSS I already uploaded a full complete guide tutorial about tailin CSS where you can learn about all of these tailin CSS classes all right so next let's add T in CSS classes for the select input inside this select input class attribute add these classes border p-2 rounded dlg H that's it so save this and go to the browser I want to place both input fields on the same row so let's work on it very simple just go back to the vs code and add this create a div and put these all inside of this newly created div after this add these tailin CSS classes to this div Flex justify Dash between items Dash Center that's it save this and go to the browser as you can see here this time both inputs are placed on the same row cool right so now let's move on to the table first let's add the HTML TXS so down here after this Flex dip add these table markups so down here open and close table tags inside this create T head tags and inside this create TR tags now inside this create th tags uh we need six th tags for the table heads the first one is for the number so for this we'll use the hash symbol next another th tag and this table column heading is supplier next th tag and the heading is address next another th tag and the text is email so after this gain another th tag the text is phone so after this create another th tag for the action column that's it so now after this Tad Texs create D Body tags now inside this for now let's hand code some dummy data so it will be easy for us to style this table so inside this uh TBO tags create a TR tag now inside this TR tag create TD tags the first TD is for the number column so Hand code a dummy data number one after this again another TD for the supplier for this is for supplier name so name it supplier one next DD this TD is for the supplier address so uh dummy data something address one next DD this is for Supply email so add something supplier gmail.com so guys next D for the phone number so add the dummy number 0 1 2 3 4 5 6 7 8 9 next D for the action column for now keep this TD empty guys now save this and go to the browser this is how this looks like with the default HTML Styles so let's make this look nicer by adding tailn CSS so back to the vs code and add these tailin classes to the table tag the class attribute and the tailin CSS classes are w- full border das4 that's it for this table tag next add these table classes to the th tag so class attribute and the classes are p-3 text- left BG D gray D200 um next copy and paste these class attributes to all other th tags guys next add these taing classes to this TR so the class attribute and the taing class is border das2 next at this classes for the TD tags p-3 and Border -2 now copy and paste this for other TDS as well guys that's it for the data table styling save this and go to the browser as you guys can see here this time we got something looking nice table rather than the previous one right um let's add a margin between these so again back to the vs code and add this to this first D mb-4 and mt-4 this will add margin bottom and margin top so save this all and go to the browser now this this looks awesome right guys I almost forgot about the pagination the pagination should come bottom of this table so let's add that so guys after this first thing first create a div and add these classes empty D4 Flex items Das Center justify Dash Center so inside this first create a button for the previous option so create a button tag and add these tailin CSS classes text Das Canan d500 border D4 py- 2 px- 4 rounded Das l- LG cursor Das pointer Mr -5 so after this add the button text the button text will be previous so after this the buttons for the page numbers create a button tag and add these Tailwind CSS classes p-2 PX -4 cursor pointer BG Canan 500 text Das white so for now just add the number one for this button later we will make this Dynamic so after this create another button for the next option so create a button and add these tail CSS classes text Canan 500 border 4 p py 2 PX 4 cursor pointer rounded R LG ml- F the button text will be next that's it for the presentation markup so save this and go to the browser this looks awesome right so now let's make this a little more organized by making this all Center to the page so go to the V code rub this all with another div and add these CSS classes W 4-4 Shadow Das MD P das1 BG Das white shadow Das blue D200 sl20 mx- 36 my-10 that's it so save this and again go to the browser now this looks clean right all right guys now let's load some data to this table dynamically so for this first let's create a dummy array with dummy supplier data so guys we cannot do all the defining variables and loading data and all other Logics kinds of stuff inside the HTML file in angular right so where we Define this all yes of course we can do all the logical stuff inside the component TS file so open the data table component TS file and Define an array inside this class scope let's create an array so the array name is suppliers after this colon and this data type is an array so pass that here array and after this we have to pass the array type so this will be object type array because we will store Supply data objects inside this array so pass that here that's it so next I want to assign some dumy Supply data objects to this array so let's do this after this equal sign and open and close aray scope which is two square brackets so now inside this let's define our first supplier object the object scope to curly brackets inside this first key value pair is name now pass the value the value is supplier one so pass this as a string inside Cotes so now after this comma and the second key value pair is and address and the value is address one next key value pair is 4one and the value is something 0 1 2 3 4 5 6 7 8 9 so next email and the value is something supplier [e-mail] that's it we successfully created our first supplier object next let's duplicate this object several times and change the values the second object supplier name is supplier 2 address 2 and keep the email and change the email to supplier [e-mail] keep the phone number as it is so after this is duplicate this again the name value is change it to supplier three and change other data according to this so after this again copy and paste this supplier for likewise copy and paste this several time and change the data according to that so I copy and paste this for 20 times so you guys also can copy and paste this 20 times and change the values all right guys our dumy supply object is ready next what I want to do is I want to load this data inside our data table so how do we do that guys we can use the ng4 directive for this right hope you guys know about this so let's do this so go to the HT file and now let's load the data so guys as I said for this we can use the ng4 directive so inside the TR tags let's add this ng4 so asri and the ng4 directive so after this equal sign inside of codes pass the loop logic so let supplier of suppliers this is the suppliers array that we defined earlier inside the the supplier component TS file so guys this is the loop now we can load the supply data inside of this TD tags so the First Column is for the index how do we get the index so very simple just after this Loop add this semicolon create a variable to store the index number let I and assign this to the index that's it so now inside the first remove this and create a string interpolation scope and inside this pass the index variable which is this I so next TD is for the supplier name as you guys know the supplier name is stored inside this name key value pair so our Loop variable is supplier after this Dot and the key name is name name so guys put this inside of string interpolation scope okay so this will load the supplier name as you guys can see here we are getting an error saying that property name does not exist on type object why is that so guys inside of this array this name property exist but this is giving us an error saying that the property name does not exist in this object so why is that this is because when we call this object property inside of the template file angular compiler doesn't know that this object has this property or not in other words angular doesn't know shape of this suppliers object so that's why this returned this not exist error as a solution for this we can Define the shape of the supplier object using an interface so guys who don't know about this interface simply it's just a blueprint of an object using this we can predefine the shape of the object what are the expected key value pair of the object so let's create this interface so guys for this we can use a separate interface file for this tutorial I will Define the interface inside of the same component file okay so top of the data table component file after these Imports let's define the interface very simple just uh type the interface keyword and pass the interface name supplier with capital S now create the interface scope open and close curly brackets so now guys inside this let's define the shape of our supply object so inside our supply object first we have the name property so so the property is name after this col Now define the data type of this property so this type is string course we will store the supplier name as string right so next we have the address property so after this add a comma and the property is property name is address and this type also string next the email property so this type also string the last property is font this type also string that's it for the interface now we have to change this array object type to our interface type so remove this object and pass the interface name supplier with capital S inside this array data type that's it so so now go to the HTML page and see now the previous error is gone why is that now angular compiler knows the shape of the supplier object so guys this is how we fix the property does not exist error awesome right so let's move on the next one is for the address so inside this TD string interpolation the loop variable supplier dot the object key for this is address so next one for the email so inside this remove this and add string interpolation open and close two curly brackets so this is what we call string interpolation right so inside this the loop variable supplier dot the key for this email is email right and at last we have the phone number so inside this remove this and and a string interpolation scope the loop variable supplier. pH course this key is font right awesome so we successfully loaded all the data now let's save this and go to the browser as you guys can see here this time this table loaded the data from our suppliers object array um wait before we move on as you guys can see here this number field is starting from zero why is that can anyone guess yes of course because in here we are loading the array index so array index is starting from zero so that's why these numers started from zero so just to prevent this just simply add one to this index variable so inside this string interpolation and plus one to this so guys we successfully loaded the data dynamically next let's start work on the pation so guys I know some of you guys may think why am I doing all these basic stuffs and making this long and wasting your time but guys this is not true I'm always creating my tutorials considering all levels of students like beginners to advanced level students some of you are familiar with angular and you will understand all this concept at once but for beginners it's a bit difficult ult to understand what I am saying that's why I always start all projects from scratch and I'll do all the designing stuff from the beginning so guys until now if you enjoy this video please take a moment and give a thumbs up for the YouTube algorithm and also leave a comment what you are thinking about my teaching pattern really appreciate your support all right guys I have a small announcement about my next premium course where you will learn to develop a complete angular real world client project from scratch so this course you guys will learn an update version of the angular from scratch you will learn typescript T in CSS how to get requirements from the clients how to plan the project according to the client's requirements how to price your project how to create a project proposal and so on and also guys in this course I will teach you how I do freelancing as a web developer and I will show you all the techniques that I use to find new client or works so guys in this course we'll develop 12 Standalone applications complete admin application complete inventory and production management application complete point of sale application for the retail store complete wholesale management for the whale client complete customer management and reward application complete online inom store for online sales employee management system income and expense accounting application report management application online sales management application for like eBay and Amazon complete e-commerce application and complete e-commerce content management system actually guys this is a project that I worked on for the past 6 months for a big clothing brand in my country so guys in this course I am sharing my real world experience with you that you will never learn from an online course this is not just a theory course this is a totally real world practical course guys I am expecting this course content will last more than 100 plus hours and I almost completed 20 plus hours of content so guys I am announcing a pre-sale offer for this course for a limited time if you join this you will get all of this knowledge just for a $6.99 and those who join to this course will receive a bonus gift which is that I will release this course in reactjs with nextjs and also in swjs with swell kit JS so with my uh pre-sale offer you guys will get these two courses for free guys this is for a limited time and for limited slots this course will be released in mid of November so guys join now and give your support for me to add more valuable stuff to this course so it's really appreciated guys if you guys want to know more details about this course I have released a full promotional video about this course you can find the link in the description and also the pre-sale link also in the description really sorry guys for wasting your time on self-promotions so let's get back to the work all right so let's implement the pation as you guys can see here this table loads almost 20 items inside the table on this first page from our suppliers array think if our supply array and is more than thousands plus items and if you load all the thousand plus data inside this table at once what can happen to our application can you guys tell me yes of course our application can be crash or our application will get slow and also guys it's very expensive this will increase the usage of the Ard server and also this will increase the database usage therefore this will be really expensive to the client so in this case we have to think about how to reduce this for this we can use the page generation and we can load only just five recent data inside this table if the user needs to see other data they can navigate through the next Pages via the pagination so at a time this will only lower just five or 10 items at a time so this will make our application fast robust and cost effective so this is the reason why we should Implement pation when we deal with big data all right so let's write the pation logic we already designed the pation so now let's write the code so as you guys know we write all the logic stuff inside of the component TS file right so open the data table component is file now inside this so first thing first let's define two Global variables for this the first variable is the current page and this type is number so after this assigned number one to this right next variable is Page size and this type also number and set default value number file so guys I Define these two variable to store important information of our page ination system so let me explain what they do let's look at the first variable current page this variable keeps track of which page of data we are currently leing so I assigned a default value one because it starts at page one because that's where we usually begin when looking at a list of items right so at the in initial stage of this component loads inside the browser I want to load page one inside of the data table so hope you guys got the idea next one is the page size so this variable determines how many items or entries we want to see on each page in our case I set it to five by default which means we'll see only five items on each page unless we decide to change it later so next what I want to do is I want to filter this array to load only five items inside of the we rather than loading all of the data so how do we do that very simple guys I will just create a new array for this and will store only five items that we want to show inside the view from our original supplier array so guys how do we cut and separate only five items from an array for this guys we have a separate method called slice in JavaScript so we can use that same method to slice our main array so guys let's see this in action let's write the slicing logic inside of a new method so create a new method inside this component class scope the method name is something visible data and parenthesis after this the method scope so now inside this let's slice our suppliers array so this do suppliers this is our main Supply array right so after this Dot and this slicing method name is slice so after this parenthesis so this slicing method requires two parameters first parameter is the starting index of the slicing array and the second one is the last index of the slicing array actually guys we have to tell this method exactly from where to where that we want to slice our main array in our case on the first page we have to load the first five data from the suppliers array so let's pass the index number of the first five array items so what is the first or the starting index one is that correct guys answer is no why is that array index is starting from zero so always keep this in your mind okay so now therefore we have to pass zero as our starting index to slice this array from the first first item so the start index is zero right so what will be the end index is it five or four it's four why is that again array index is started with zero so the First Data is zero the second data index is one and the third data index is two fourth index is three and fifth array item index is four so in our case we are slicing the first five array items so the fifth items array index is four so guys pass this as the second parameter for this slicing method that's it so guys in order to check whether this slicing method working or not so log this entire slicing method down here so console. log inside this cut and paste this slicing method so guys this slicing method will slice our suppliers array according to our start and end array index numbers and save this inside of a new array and this will return that new array right so save this and go to the browser and open the browser console we got nothing here why is that can you guys tell me yes of course in order to execute a method in angular or typescript or any other programming language we should call that method when this component loads inside the browser so for this we can use the NG on init life cycle hook in angular so inside this component file at the top import the oninit life cycle hook this also coming from this angular Coe package so inside this import and this on init life cycle now down here before this Define the NG on init method the method name is NG G on in it carefully follow this Capital simple letters so after this as usual method parenthesis and the method score so now inside this let's call the visible data method the method name is visible data and the parenthesis so guys this NG onit method will automatically execute when this component loads inside the browser right so we don't need to call this ngon unit method again right so save this and go to the browser as you can see here this time we can see our sliced array inside the browser console inside this array we got only first five items from our supplier main array so which means our sizing method is working like a charm right now I want to load this SED array of items inside of the view so how do we do that for this we can use two approaches the first one is we can create another Global array and we can load that inside the Vive using the ng4 like the previous the second method is we can simply return this from this method and we we can Loop this sliced array items by calling to this method from the ng4 so for this we'll use the second method it's very easy so just simply go to the HTML VI and inside this ng4 remove this suppliers array and call our visible data method visible data and don't forget to put the parenthesis here so save this and again go to the our visible data method and inside this remove this console log and just simply return this slicing method from this method so guys when this execute this ng4 this will this time call this method this visible data method is returning this sliced array so this ng4 will capture that returned slice array and do the looping and load the data according to these three interpolations this approach is cleaner than the first approach guys for the first approach we have to create another array and we have to store the sliced array on that right so compared to this first method this method calling approach is clean and less noisy right so guys uh save this and go to the browser as you can see here this time our data table loaded only five items from our supplier app awesome right guys in the previous we sliced this array by passing the slicing starting and ending index manually and these manually passed numbers are static so when we call this every time this will slice only this 0 to four array items index think if you want to show the next set of suppliers list on the second page how do we load that for this we have to make this dynamic so how do we do that let's learn this by writing the logic for the next pation button so first let's create a method for this next page logic so inside the data table component is file create a new method the method name is next page and the parenthesis when clicking this next button I want to load the next set of data from the suppliers data array so at the initial stage of this application uh we are inside the first page of this pation and we loaded the first five data from our array so when we clicking next I want to load the second page of the pagination and load the next five set of the data from our suppliers array so let's write the logic for this so if you can remember at the beginning I defined two variables in the global scope current page and Page size so now what I want to do is when clicking the next page I want to increase this default value to one so at the initial stage we are in the first page so that's why I Define a default value to this number one so when clicking the next page this current page should move on to the next page which is the page two so in order to do this we have to increase increas this current page value by one right so let's do this so inside this next page method let's increase the current page value by one this do current Page Plus one so next assign this new value to the current page same variable so before this this. current page and equal sign so next down here for now just log this current page method so we can see what's happening here console log and inside the parenthesis log the current page variable this do current page now save this and go to the HTML page and call the next page method from this next page generation button when click action for this we can use the click event binding so inside brackets the event is Click so pass that here after this equal sign and inside codes hold the next page method next page and pareses that's it so save this all and go to the browser now click on this next page as you guys can see here this printed number two on the browser go at the initial stage of this we are at the first page and the next page is page number two again if I click this next button this will change the page number to number three so again I click page number move to 4 5 6 and so on so now with this current page variable we can track the page number that we are in so next what I want to do is I want to load the supplier data according to this page number on the first page we loaded the first five values from the suppliers array for the second page we have to load the next five data from the suppliers array so now let's build the logic for this so guys in the previous we loaded the first five data slice by this hand coded index numbers this is not actually right course for the first page this is okay but for the second and third Pages how do we load the data so guys because of this we cannot hand code the index numbers every time right so it's not her good practice so now what I want to do is let's make this array index numbers Dynamic using our current page variable so in the initial stage of the current page default value is one so on this page I want to load the first five data right so the first array index number is zero so the starting index number should be zero the current page number number is one so we can deduct one from the current page number to make this start index zero so pass that here as the starting index for the slicing method so this do current page minus1 so now this will represent the slicing start index guys actually this is not done yet CU for the first page the starting index is correct but thing for the second page what should be the starting index for this can you guys tell me on the first page we load the first five data from the suppliers array for the second page we should load the next five items from the suppliers array which is the array index starting from the sixth item from this array so when we slicing this the starting index should be five because this six array item index is five because you guys already know array index starts from zero so this six items index is five so according to our code the starting index value is on the second page one how is this one because current page value will be changed to number two on the second page so 2 - 1 what is the answer 1 so the slice starting index is one according to our code so this is not correct right so once again the starting slicing array index must be five on the second page wait I'll show you this inaction inside this let's Define a variable to store this start index so let start index assign this do current page minus one after this uh let's log the start index variable console.log and the variable name is start index now let's call this method from the next page method as well so inside this next page method scope after this log call the visible data method this do visible data and the parenthesis save this all and go to the browser at the initial stage this start index log is zero wait let's separate these logs by passing a message with the console log methods for this console log method we can pass a string value at the beginning of this pass the message something start index next inside the next page Log pass this before this inside codes with this we are printing the current page number so current page so with this guys we can easily identify the logs that printed inside the browser console so save this all and go to the browser as you can see here at the initial stage of this the start index is zero so if I click the next button on the second page the start index change to one is that correct yes of course it's wrong on the second page array slicing index must be five so how do we fix this very simple just simply multiply this whole statement by per page size so in our case our page size is five in one page we are loading only five items or the five sets of data from our suppliers array right so let's write this code inside this rub these all inside of brackets and simply multiply this all statement by file so now save this and go to the browser as you guys can see here this time initial stage slicing start index is zero if I click the next page as you guys can see here this time the start index changed to five is that correct yes of course on the second page we want to load the sixth item from the suppliers array because once again reload only five items for page on the first page we already loaded the first five items from the array on the second page we should load the next five items from the array starting with sixth item from the suppliers array so sixth items array index is five because array indexing start with zero hope you guys got the idea now again click this next page button so this time the page number is three so on the third page we have to load the next set of items from the array so on the second page we loaded five items from the array which start with the sixth items and ends with the 10th item so on the third page we have to load the data that start with 11th item from the our suppliers areay so the 11th suppliers array data array index is 10 so this is what we got here awesome right guys now this start index is perfectly matching on all pagination pages guys before we move on let's do another small thing let's uh make this page size also Dynamic here we hand coded the page size if you can remember at the beginning we created another Global variable called page size so replace this uncoded file to page size variable this do page size so by default I assigned the value to file so in case if I want to load 10 items for page all I need to do is just change this page size variable value to 10 that's all all right guys now we have the start index next what I want to do is I want to make this end index also Dynamic for this let's create a variable so let end index so after this equal sign guys how do we capture the slicing end index very simple we can get the end index by adding page size to the start index so for example at the initial stage the starting index is zero and we will load only five items for the page what will the end index five so we can simply add five or the page size to the start index to get the end index so very simple right so let's do this after this start index which is stored in this variable start index next add the page size to this so after this plus and the page size Global variable this do page size that's it so guys now we have the both start and end index here so replace the slicing method parameters with these variables so start index and the second parameter is end index awesome now we do not need this log so remove it inside the next page also remove this log so now save this all and go to the browser in the initial stage this loaded the first five data from the suppliers array now click on this next as you guys can see here this time our data table loaded the next set of suppliers data from our suppliers array starting with the supplier six if I click again as you guys can see here this time also this loaded the third page data set start with supplier level awesome right so guys our next page ination is working without any problem all right next let's move on to the next operation on our pation which is the previous button operation so let's do this very simple for this also create a brand new method inside the component ES file and the below this create a new method the method name is previous page after this parenthesis and don't forget to add the method scope so guys now inside this method I want to write the logic for the previous button this is very simple as you guys know for the next page we add one to the current page so for this pre previous page what should we do we do the same exact opposite of the next page just minus one from the current page variable that's all so inside this the current page variable this do current page assign again this do current page minus one next we have to call the visible data method to load the data inside the data table so after this call the method this do visible data and the parenthesis that's all guys with this we are deducting one from the current page number why is that with this previous button we are loading the previous or the back page of the current page for example if you are on the second page and if you want to move back to the first page we can detect one from the current page to then this will go back to the first page you guys got the idea so with this method call according to our current page status we can load the suppliers data items from the supplier array this is what we wrote in the previous lecture save this and go the page and call this previous page method from this previous button so inside this click event binding and the method called the method name is previous page after this don't forget to add the parenthesis right so save this all and go to the browser go to the second page and again come back to the first page as you guys can see here this loaded the first set of data from the suppliers array and this move on to the first page awesome right guys before we move on to the next chapter I just want to clean up our code little bit guys inside this next method and this previous me method we add one to this current page and minus one from the current page variable as you can see here we repeating the same variable both of the side and this code is bit long right so we can shrink this code by adding incremental and decremental operators to these statements very simple so just remove this equal sign and this adding operation after this add increment operator to this just two plus symbols after this current page variable this also same thing like the like our previous code this will add one to this current page variable that's it so now this looks more cleaner than the previous right so next do the same uh for this previous page logic asle so remove this all and this time add the decrement mental operator which two minus symbols that's it so guys this also minus one from this current page variable that's it guys so save this all and go to the browser check this all are working or not as you can see here this next and previous page generation features are working like the previous so this is now increment and decremental operators working as we expected so guys we almost completed our page generation Logics so next let's see how can we load the page number buttons dynamically as you guys know previously we just created this button but for our suppliers are data there should be more pages more than one page right so let's write the logic for this so first thing first create a method for this inside the component is file create this method page numbers and after this parenthesis and don't forget it to add the method scope as well so now ins said this first thing first guys we have to calculate how many pages we need to load this whole supplier array by loading five supplier data on one page so how do we calculate that very simple we have to divide this array length by the page size okay so as we know our array length is 20 and the page size is five if if we divide 20 by 5 we need four pages to load all the data inside our data table simple maths right so all right so let's see this in action inside of this method first let's calculate the total page count that we need so for this uh we have to divide the suppliers array length by Page size so this do suppliers. length this will return the length of the suppliers array AR so after this divide symbol and we stored the page size inside of the page size variable so let's use that here this do page size now let's store this inside of a variable so create a variable let and the variable name total pages and assign this to this calculation so guys with this we are getting the page account that we exactly need for this suppliers array for now let's log this down here and see whether this is working or not conso log and the variable is this total pages in order to execute this method we have to call this method from the NGIT method so inside the NGIT call this new method this do page numbers and the parenthesis now save this all and and go to the browser as you can see here we got four which means we need four pages to load all the data inside the table guys now we have the total page count next what do we have to do is we have to load the page numbers button inside our weave right so in the previous we designed this one page button so according to our total page count we need four pages buttons right so so how do we create four buttons we can create this by hand coding manually like this just duplicating this first page button but guys we don't do like this right this total page count can be dynamic we cannot exactly say it's four pages or five pages so how do we make this Dynamic for this also we can use the ng4 directive so in order to use ng4 directive we need an array or observable so we are not going to use observable in this lecture so let's do this using the array approach very simple for this we have to create an array that has array items according to the total page count so then we can load the page number buttons inside of The View using this new array and ng4 directive so let's see this in action inside the page numbers we have to create an array that has this amount of items so how do we create that very simple for this uh we have an inbuilt method in JavaScript so we can use that here so just Define a variable let variable name something page num array and equal sign so after this new keyword and array with capital A after this add parenthesis inside this we can pass the item count that we want to include in this array so pass this total Pages variable as a parameter for this array method so inside this parenthesis the variable name is total Pages for now let's log this array down here so we can check whether this declaring a new array according to our total page count working or not so down here this console.log insert brackets pass this array variable so save this and go to the browser inside the browser console as you can see here this created an empty array with four items so why this is created an empty array guys to this method we only pass the array item counts so that's why this returned an empty array if you want to define the data we can can do that but for this loading page numbers button we only needed empty array so this is fine guys now we have the array using this we can Loop and create our page generation page buttons so guys in order to access this outside of this method we have to return this from this method or we have to assign this array to a global variable so for this let's just return this from this method so down here return this page num array so return keyword and return this variable page number array that's it so now we can access this page number array by calling to this method so now go to the HTML page now we want to Loop these page number buttons so inside this button tag ng4 directive equal sign inside codes the loop variable something let page number of Now call the page numbers method so this will return the page number array so the method name is page number and parenthesis after this we need the array index number to label the page numbers button label the page number buttons so after this semicolon and create a variable to store the index number let I assign this to the index of this array next add the button text inside this string interpolation open and close to curly brackets inside this pass the index variable I and end one to this course array index starts with zero but we need to start our page generation buttons from the page number one right so after this + one that's it now save this all and go to the browser as you guys can see here this time this loaded the page buttons awesome right guys I want to make this page button background to this San color only on this active status otherwise I want to make this button background white so how do we do that for this we can use the class binding approach in the angular right so so let's do this so guys we can capture the active status of this page Nation button with the current page number so first at the class binding inside this button tag open and close square brackets and inside this class Dot and the tailin CES class that we want to apply to this button conditionally BG Das s-500 so after this equal sign now inside codes pass the condition to apply this stat class so the condition is array index is this I variable after this plus one equals to the current page variable so guys with this condition we are saying that if the button number is equal to the current page number apply this tailin CSS cl to this button otherwise don't apply this so guys we labeled our page numbers with the page numbers array index and we stored the currently active page number with the current page variable right so guys if the current page is one this will apply this background color to the number one button if the current page number is two this will apply to the number two button and so on hope you guys got the idea before we move on I want to make the text color to white on the active status for this also we can use the same approach so let's duplicate this change the class value to text Dash white so guys this will apply this delin text white class to this button when this button is active and at last remove these classes from the class attribute from this button tag previously we hand coded this right and now we are applying this logically with the class binding so we don't need this anymore now save this and go to the browser as you guys can see here this time the first page number button is active if I click the next button look at this guys the active page number button changed to number two so guys now this page active status changing according to the current page number perfect right all right guys next let's work on the page numbers buttons click status so guys when we click this page number button we have to load the data according to that page number so this is very easy guys we almost wrote all the logic for this all we have to do is just change the current page variable number to the page number that we click right so let's do this first let's uh add the click binding to this click event binding to this button so inside this after this all let's add the click event binding inside brackets the event name is Click after this equal sign and inside codes let's call a method from this click event so the method name is something change page and the parenthesis with this pass the page number to this method as a parameter so we add the page number using the array index so the index variable name is I and + one course array index is starting with zero right that's it so as you guys can see here we are getting an compile error because this method is not defined yet so go to the component is file and create this method the method name is change page after this parenthesis this required a parameter so create a parameter variable to capture that page number and set this type to number after this add the method scope so guys ins inside this assign this parameter page number value to the current page global variable this do current page assign page number parameter variable after this call the visible data method to load the data inside the data table according to this current page so this do visible data and the parenthesis that's it guys save this all and go to the browser now click on this second page pagination Button as you guys can see here this data table loaded this second page data set click on this three four and five all the time we click one of these page buttons this data table loads the data according to the clicked page and also you can see this change in the buttons active status as well so until now everything is working as we expected perfect guys before we move on we have to make make a small change in our code guys inside our suppliers array we have 20 items now I want to add another item to this arrays 21st supplier data so duplicate this and change this data values so guys now inside of suppliers array we have 21 items right so save this and now go to the browser look at this guys data table this is not looking good here we can see an empty column and down here also we cannot see the page numbers and also inside the browser console we can see this error so what's going on here if you look at the error this error says that invalid array length now can you guys guess the problem so guys I added a new item to our suppliers array so now this array length is 21 if you guys can remember to get the total page count we divided the suppliers array length with the page size so previously this was returned four because the array length was 20 and the page size is five if you divide this 20 by five the answer is four right but now this array length is 21 so if you divide this by five what will be the answer for this let's log this here again so we can see this clearly so down here and a console log as the first parameter pass this inside codes total page so after this comma and they pass the total page variable now save this and go to the browser now look at inside the browser console this total page count is now a decimal value Val of 4.2 so guys this is why this new array statement returned an error saying that invalid array length in order to create an array using this array method we have to pass the array length as a full integer number we cannot pass decimal values so how do we fix this so for this we have to round up this total Pages value to the nearest full digit number for this we can use the math sale method in JavaScript so let's do this now before this type this math with capital M after this Dot and the method name is sell c e i l after this parenthesis now put this calculation inside of this parenthesis so guys this will round up the answer of this calculation to the nearest full digit so now again save this and go to the browser look at this this time the error is gone and this total page count rounded up to the nearest full digit number five and here also we got these five regation buttons and these all and the data table also loaded the suppliers data without any problem and all these work as previous without any issues awesome right all right guys let's move on to the next feature of our data table filter data based on the users input so for this we created a text field so using this we can get this search term and search through our suppliers array and we can load the filtered supplier details inside the table so let's see this in action first thing first we have to capture the user input from the text field how do we do that for this also we can use the angular event binding approach so for this we can use the key up event binding so go to the data table component HTML file and inside this text field let's add the key of event binding so inside this input tag open and close brackets inside this event is key up all simple letters right so now I want to call a method when triggering this event so let's call the method from here equal sign and after this insert codes call the method let's name this method something filter data and after this add the parenthesis so guys we are getting this error because still we don't have this method declared right so go to the component TS file and create cre this method down here the method name is filter data and the parenthesis after this don't forget to add the method scope now guys we have to capture the user input data so for this we have to pass the user input value from this input to this input text field to this filter data method so how do we capture the user input value for this we have several methods but for this tutorial I will use the template variable approach so let's define a template variable for this input how do we define template variables very simple first hash symbol and the variable name something we Define variable name filter that's it so guys using this we can capture the users input value from this text field so in order to pass this value from this HTML file to the component ES file we can pass this as a parameter for this method code so inside this PR thesis pass the value this template variable filter after this dot value so with this we are passing this inputs value to this method using this template variable so now next we have to capture this parameter inside of the component TS file so inside this filter data method parenthesis create a parameter variable to capture the user input value so the parameter variable name something search term and after this colon and set this data type to string next um let's L this parameter and see whether this is working or not so inside this console.log inside this pass the parameter variable search term awesome now save this all and go to the browser now inside this text field type something as you guys can see here this typing value printed inside the browser console which means this capturing user input value or logic is successfully working as we expected all right next let's get into the filter logic so guys for this first we have to filter the main suppliers array then we have to fil filter each and every suppliers object right this is something like think there is a box full of suppliers cards with written supplier details like supplier name address and so on so in order to find a particular supplier card first we have to get into this supplier box and we have to go through all of the card details to find that exact supplyer card so this finding a data inside of this array also same like this first we have to get into the box or our supplyer array then we have to go through all of our cards or the supplyer object right so hope you guys got the idea so let's work on this logic first we have to filter into the suppliers array so for this we can use the filter method in JavaScript so our array this dot suppliers after this dot filter and add the parenthesis so guys inside this parenthesis we have to add the call back function so inside this let's use the arrow function for this open and close brackets after this arrow equal sign and the greater than symbol after this call back function scope so guys this will return the array items so capture that inside this callback parenthesis capture that so create a parameter variable for this so now with this filter method we will Loop through all of the array items now we have to go through each and every supplier object so for this we have the object method in JavaScript so we can use that with our angular code so inside this call back object with capital O after this dot values and parentheses so guys with this object method we are going to look in inside our suppliers object so we captured the supplier object with this filter method call back which is this item parameter variable so now we have to pass that to this object method so then this will go inside this passing Supply object and check for our matching data right so pass this call back parameter variable to this object values method so guys in order to perform this search with this we have to call another method so after this dot the method name is sum after this parenthesis so inside this another callback function so open and close the brackets create a parameter variable something Val after this arrow and the function scope now inside this we have to check the current object value is is matching with our search term so we captured our object value with this callback parameter variable so val dot I want to make this object value to lowercase letters because it's easy to perform this search if there are all lowercase letters okay so after this val dot to lowercase and parenthesis so follow this method name Capital simple letters carefully if you spell it wrong this will not work so guys this will convert this value to all lowercase letters so after this we have to check that this object value match our search term so after this dot includes and parenthesis inside this parenthesis pass our search term as a parameter for this method search term and guys also I want to make the search term values to all lower case so after this dot to lowercase and parenthesis that's it so guys with this we have capturing the supplier's object value and here we check whether our object value includes the user input search term or not so guys once again with this we are filtering our main suppliers array and capturing the suppliers object with this we are going inside of each and every Supply object values and at the end we are checking that this object values match with the user input search term or not hope you guys got the idea so next what I want to do is I want to store this value inside of another array so create a global array for this so top here inside the class C new array variable name something filtered suppliers and the this type is array and the array type is suppliers interface right so after this assign this to an empty array so now inside our filter method assign this array filtering to our new array so this dot filtered Supply after this equal sign so guys in order to capture this we have to return this statement as well so the B statement will go through our supply array and filter out the data that matches the search term create a new array and return it so with this we are storing that returning array now we can load this inside the table so guys how do we do that for this so as as you know we are loading the suppliers array inside our table using this visible data method now we have to load the filtered array also inside our data table but we cannot Loop two arrays at a time so what we can do for this so guys instead of loading two arrays we can load only one array which can load both data so at the initi initial stage we have to load all the data so now what I'm going to do is I am going to assign the suppliers array to this filtered suppliers array at the initial stage so remove this empty array and assign the suppliers array to this filtered suppliers so this do suppliers now inside our visible data array change this suppliers array to filtered suppliers that's it one more thing call this visible data method from this filter data method as well now that's it save this all and go to the browser at the initial stage this loaded all the data CU we assign the wall supplier data to this filtered suppliers array right so now this is loading this filtered data array inside this table right so now next type supplier 10 inside this filter text fils as you can see here this time this loaded only this supplier 10 data which means our filter option also working as we expected so guys one more thing with this filter you can search any of this data supplier name address email or phone number for everything this filter will work so guys some of you may notice this when we filter this paginations page numbers still showing this total number of page numbers even this showing a one data why is that guys now we are loading the filtered supplyer array inside the view but we are calculating the total page numbers using the suppliers array so that's why this is showing the old page numbers so in order to fix this change this supplier do length to filtered suppliers. length now save this and go to the browser as you can see here this time this pation page numbers only show one page awesome right I think that's it for the filter section let's move on to the next so next we have the page size selector so let's work on this logic so first thing first let's load the page number options to this drop down so for this create another new page page size array so go to the component ES file and inside the global scope create a new array so array name is Page sizes and this type is array and the array type is number so after this assign this to page size array open and close QR brackets inside this Define few page sizes something like 5 10 and 20 so now let's load this inside of our page size drop down for this also we can use the ng4 directive so using that we can Loop through this page sizes array and load the page sizes array items inside this dropdown so go to the HTML file inside this options stag at the ng4 so as ng4 and equal sign now after this Loop variable something size and of array name page sizes so next add the value attribute to these options T to load the page numbers so inside square brackets value and assign insert codes pass the size Loop variable so between these options Texs display the page size so string interpolation and the loop VAR aable size that's it so save this all and go to the browser as you can see here this now loaded the page sizes so guys next let's see how to load the data inside the table when we change the page size from this drop down so for this we can use the change event binding so inside the select tag and the change event binding so inside brackets event name is change after this as usual call a method from this so method name is something change page size and parenthesis now from this method pass the selected page size to this method so how do we do that for this also we'll use the same approach as previous we'll use the template variable so declare template variable inside this ash variable name something page size now pass this value using the template variable for this method inside the parenthesis template variable page size dot value with this we are passing the selected value from this selected tag to this method so still we don't have this method so create this method inside the component is file down here method name is change page size parenthesis and the method scope this method receives a parameter so create a parameter variable to capture that page size and set this variable type to any inside this method all we have to do is just assign this parameter page size to our Global page size variable so this do page size which is the global page size variable variable assign this to the parameter variable page size so after this call the visible data method to load this inside the table so this do visible data that's it so save this all and go to the browser by default these loaded five items inside the table let's change this to 10 as you guys can see here this time this loaded 10 data inside the data table on the first page and change this to 20 perfect this loaded 20 data here awesome right so guys at this moment we completed all the functions of our data table and this looks cool right so guys next we'll see how to load F store data inside this table before we start if you guys really learned something with this course please give a thumbs up and also so leave a comment what you think about this tutorial your like and comment will help this video to rank on the YouTube algorthm all right let's move on to the next and the final chapter of this course for this first thing first we need Firebase account and a fire store collection for this I have created the suppliers fire store collection inside my Firebase account you guys can create this manually so very simple same as our suppliers array okay guys if if you don't know what is fir store or Firebase you can learn about it in this video I'll leave the link in the description for your later references okay so let's get started by adding angular fire to our angular project so guys in order to work with fire store we need this right so inside of this vs code integrated terminal run this command NG add at angular SL fire hit enter to execute this command now give yes to this this will install the latest angular fire inside our angular project so after this installation process this will ask you to select what are the F base features that you want to set up so guys for this tutorial we need only the F store setup so unti this uh first NG deploy option we can select or deselect an option using the space bar so untick this and move down using the arrow keys and select the F store option once you select hit enter to execute this next this will ask you to log to your Firebase account so do that here next uh this will ask you to select the desired Firebase project so select that as well so again after this at last select the five base app that you want to set up that's it so guys this will install and configure angular fire according to our selections so we don't need to do anything manually this will do everything automatically not like uh the previous versions of the angular fire in the previous versions of the angular fire we have to set up all the things manually one by one right so this is very easy now go to the uh appts file now we can find all this setup configurations awesome right next in order to work with angular fire we have to install another mpm package so without this you may get some errors when writing queries so let's install this inside the integr terminal run this command npm install rxf at 6.0.3 so guys this will install this RX fire module inside our angular project that's it all right the angular fire setup is done now let's work on the query to retrieve the suppliers collection data so go to the data table component file and write this code so guys usually we will write all the database Conn uh queries inside of angular service file so for this tutorial I will not going to use any service files I will write all the queries inside this same data table component TS file right so let's write the queries so guys this is nothing much very simple so first we'll work on the load query and after that we'll see how to load that F store Supply collection data inside the data table instead of our dumy array data so first let's import a few modules from angular fire to this component is file so at the top this import area at this import and import modules are F store this is with capital if next uh the collection simple C and after that collection data this D is capital so this all imported from at angular slf fire SL fire store next you want to use the F store modu we have to inject that into our component Constructor so create the con Constructor method here Constructor and parenthesis after this Constructor scope now inser this Constructor parenthesis inject the F store module so private F store and the module is f store with capital F perfect so guys I am going all the setups and all these F store queries a bit fast CU I hope you guys already know about F St so so any of you guys are new to this angular fire or new to the fire store queries you guys can learn about this in detail in this video so I leave the link in the description all right so next let's write the query so for this we'll create a separate method so inside this class cope create a new method new method name something load F store after this parentheses and the method scope so now inside this let's write the F store query first we have to define the F store collection reference so from which collection we are loading the data right so create a variable let collection ref after this equal sign now for this we can use the collection module so we imported that right so collection and parenthesis so this require two parameters the file store module and the collection name so first let's pass the F store module which we injected to the Constructor so this do F store as the second parameter pass the collection name suppliers so pass this as a string value inside of codes so I already created this collection inside my f store Database The Collection name is suppliers so that's what I passed here awesome now we have the collection reference next uh let's retrieve the data for this we can use the collection data model previous we imported this as well right so down here collection data and the parenthesis so this required The Collection reference as a parameter for this so pass it here collection ref so this return the suppliers collection data as an observable in order to retrieve this data we have to subscribe to this method so after this dot subscribe and parenthesis inside this parenthesis call back function so again parenthesis and the arrow function so this return the data so capture that with the call back function parameter so create a parameter variable for this well now inside this for now let's log this well variable and see whether this is working or not so console.log inside this pass the variable well so guys in order to execute this method we have to call this method right so inside theit method let's call this method the method name is this do load file store and the parenthesis so now save this all and go to the browser as you guys can see here uh we got our file store suppliers data collection printed here which means our query is working without any issues so guys now we have the data so next let's see how to load this F store data inside our data table so guys uh first thing first uh we don't need these suppliers array data anymore so I'll remove this all the hand coded data from this component file and assign this to an empty array so next inside this subscribe method assign this Val to the suppliers array this do suppliers array equal sign well we are getting a compile error in order to prevent this error just set this subscribe parameter type to any so next we have to assign this newly data assigned supplier array to our filter data array so down here this do filter suppliers assign this do suppliers that's it so guys now we directly assigned our file store data to our main array suppliers and also we assign the suppliers array data to our filter suppliers array course with this visible data method we are loading the data using the filtered suppliers array variable right so save this all and go to the browser so as you guys can see here this time our data table loaded the actual data from the fire store database and also guys all the data table options are working without any issues next and these previous buttons are working page num working filter option also working and this page size selection also working as previous without any issues very simple and easy right so guys we successfully completed our data tables or all functions I think that's it for this tutorial guys before the end of this tutorial quick note guys this is just one way that you can build a data table using angular there will be so many ways I just use the easiest way to create this tutorial then only it's easy you guys to understand each and every logic right so don't stop from this here you guys try to experiment the code and try to make this more robust and user friendly the source code link is in the description and also guys as I mentioned earlier this is a part of my premium course so in that course we will dve into more details and we will follow more best practices when we creating this data table so any of you guys like to join to my premium course I'll leave the link in the description and also guys to my subscribers and for my patreons thank you very much for staying with on past few months even if I not posted any video and really appreciate your support this is it for this tutorial let's meet you with another awesome tutorial like this until then learn smart not hard

Channel: OctAcademy

Views: 9,598

Keywords: Angular Data Tables For Beginners, angular data tables, Angular tutorials, angular tutorials for beginners, angular tutorial for beginners, angular tutorial for beginners 2023, angular tutorial for beginners freecodecamp, angular tutorial for beginners with project, octacademy angular

Id: 5c_678HRutQ

Length: 109min 13sec (6553 seconds)

Published: Wed Oct 25 2023