Implement dataTable in angular 17 standalone template | angular-datatable

Hello friends welcome to my channel hereis in this video Let Me Explain how to implement angular data table in angular 17 Standalone template first let me go to my application so as I mentioned I just created one brand new angular 1 application for the designing point of view I just installed the material UI okay for the API purpose we can use the Json server APA so I have one Json file there I have included some sample data okay so first let me start my API so if you not installed the Json server make sure you have to use the npm command and install the Json server okay our API is ready the next thing is we have to install the package of angular data tables so this is the command I will include in our video description okay the available latest version is 17.1 so we can install that and The Styling Library we can use the default data table Styles okay the installation is completed we can see the changes so in our angular.js side uh it's included to script and and also one CS file okay and in this package.json it's included these angular data tables and this data tables.net and DT and also the jQuery okay so next let me go to our component side so in this component point of view I have created one component product so in this HTML side we just included this m card so here I I'm going to have one table okay and let me Define The Columns for the sample purpose I'm going to have some basic columns okay then we can have the fils are code name price category and Status okay okay this is fine add then this T body so T body we can generate from the uh APA data so the next thing is uh let me work for the services first I'm creating one service file let me provide the name is Master Okay so the service also generated so if you are using the HTTP services uh make sure we have to import this provide HTTP client okay so next in our actual Services let me inject this HTTP client so these are the common steps we have followed in many videos so this is actually my function and our method is get method we know our APA endpoint also and we can Define on model class okay so already we have a folder and I'm creating one model file okay so what are the fields we are going to show uh based on that we can Define our model so in our db. JSM we can get the sample data So based on that I'm just to creating this model okay anyway most most of the fields are string only and this price comes under the number and finally our status also comes under the Boolean okay okay our model class also ready so let me include in our service head also it will return the list of data okay so next in our component site implementing on inh also adding this Constructor so in this Constructor we can inject our Master service okay and also I'm declaring one variable and the data type is products and then writing one function load products from this function we can consume this services and there is no parameter also I just subscribed what whatever value is coming that we can include our product list now we have our AP data into our local variable so let me take this one and next in our HTML side let me use this for Loop okay since we are using this angular 17 uh instead of using this ng4 we can directly go within this for syex product list and in this pack we can say item okay so let me remove this one so based on the data we are generating our gr inside that we can have the columns value item. code okay so the same way uh we can include the other columns also name price status so initially this much field is fine okay and the next thing is uh we are using this angular data table so already we have install the packages so in this import section we have to import this data table model okay I just saved call this function here from this NG on it this one also fine and declaring one variable DT options okay data type is config so the default value we can give the Mt okay so next let me copy this one and in our HTML site so in this table first I'm adding this data table directory okay and then we can use this property binding so the property name is DT options the O should be caps okay so the same way we can declare one more variable that is DT trigger and this is the subject RS subject only data type is C so once we called this APA we can just trigger this one so it's expecting some value we can provide us the N that is fine we can map this uh data trigger also in our table side again here also the T should be caps okay so the initial changes are we have done uh let me run the application and we can see the view so after that we can do the customization okay so we got one error and this library is unresolved okay actually it's added automatically while installing this packages so let me show you in angular.js okay this is the Cs file so we can check in the actual uh node model folder okay this is the folder okay so we have the Cs files but the names are different so that's what we got this error so let me copy this name and in our angular.js site I'm just changing this name it should be data tables do datat table. min. CSS okay I just save we can rerun once again okay uh now there is no error okay see the screen uh it's simply loaded but we have some error I believe so that's what uh so DT options cannot be empty so then we can include some values for this DT the initial level itself so in our product component side so after calling our method we can use our DT options here first I'm going to use this Beijing type okay the value I just provided for so let me save this one okay so the error got resolved and also see our data is also binded okay so we can include some uh CSS so that makes our U better and it's applicable for TD and th see the design now it's somewhat changed okay so we have the default uh B generation and then the search and we have the starting also let me show you so we have a 12 records see so in this next page uh we can see this two records okay the vation is working so the same way if I'm doing the shorting it's working so let me do this search so the glow card so the seity also working fine so that means we have done the basic implementation so next we can see how to apply the customization okay so first let me start from this bation so in this pation type so initially I just provided full okay so next we can provide full numbers we have some other option that I will include in this description see now we got this numbers okay and the next thing is if you are checking in the select we have the default values 10 25 50 and 100 okay so this one also we can do the customization for doing this one we have to include this length menu property okay so here here I am starting from the five 10 15 2 you see now okay now we started from the five so it's taking the five as the default one 10 okay this is working fine so currently it's showing five records for the page okay so in this options we have provided the first values five so it's taken automatically okay so in case if you want to set some value as the default that also we can do let me show you so before that I'm including one more option okay eight okay let me provide page length equal to 8 see now so initial load itself uh it's loaded eight records for the page okay okay okay and the final option is so in case if you don't want show the pagination so that also we can do so let me command all other options okay so defaultly it will show the bination so what I'm going to do so let me use this Bing option and provided as false see now there is no pagination at the same time this shorting and this uh search functionalities will work so the same way we can disable this sharting and this searching also ordering for this ordering let me provide false now the shorting is disabled see there is no option for and the same way for this searching also I provided false see now the search option also gone so let me command everything anyway it's not needed for the knowledge purpose I just Shar these informations okay we can just uncom at the first two options so the next optimization we can do for this shorting so as of now it's shed based on this the First Column only I believe okay so let me change this into name for doing this one let me include this order property it is expecting input in Array okay the position I given as one and the order I would say ascending see let start from B so that's what it's coming like this okay whether we if I'm changing this into price then let me change this position see it's in the ascending order so the same way we can change this into descending order also see so the next thing is we can disable this select option okay length change so if I'm given false see we don't have any select option but the bination will work so anyway let me change this one okay we can have at least 10 records in the page okay okay this is fine and the next two properties scrolling okay so in case uh if you are showing uh more records in the same page let me command this one also so anyway I just choose 15 so if I'm choose 25 so in this scenario we will have more entries so even though if you are scrolling this header and folder section also will scroll for avoiding that we can use the scroll option scroll y minimum height I just seted 400 so you know okay now we can feel right otherwise if I'm reduced into 300 then you know the better difference see so now we have completed the scrolling also so next in the searching side so if you want to provide some placeholder text that we can do search placeholder text so I would say enter product name see the placeholder text is coming so if I'm do the searching also it will work so finally we can include some action buttons also anyway once we are using this concept in the real time application definitely we have include the action buttons so this designing side I'm having two buttons okay mat raced button so actually this directory belongs to the material only and adding one CSS okay now we are good to go see now maybe this scrolling let me command that okay the design also looks good and also we have covered most of the topics still if you have any doubts or clarification please PST in the comment box and also please don't forget to subscribe my channel thank you thank thanks for watching

Channel: Nihira Techiees

Views: 1,086

Keywords: pagingType options in datatable, implement datatable in angular, what is dtOptions in angular datatable, resolved angular datatable is not working, dtTrigger in angular, how to change the search place holder in angular datatable, how to stop pagination in angular datatable, datatable implementation in angular 17, nihira techiees, angular datatable in angular 17 standalone, how to set pagesize in angular data table, how to customize angular datatable

Id: -cXg4jxZcaA

Length: 21min 4sec (1264 seconds)

Published: Mon May 06 2024