Angular 13 CRUD with Angular Material UI | json-server | Angular Reactive Form

hello everyone welcome back to my channel so i know it's been a quite a few times that i have uploaded any video on youtube okay so i am back again on youtube with this new video which is on angular 13 crud operation okay and you will say that this video is already there on my youtube channel if you see here so that we were having this with angular 11 crud with json server okay but the difference here is we are going to use angular material ui okay we are going to use dialog box of this angular material because we are working on angular and most of the companies prefer that the people should know how we can use this particular material components okay so this is the reason that i am back with this video so that we can it can help others as well to create this same angular crud operation which is in angular 13 and without any further ado let's get into the demo okay so what what things we are going to implement here okay so we are going to implement this header part which is called as material toolbar okay on the left hand side we will have this title as well like we can give any title with this icon and on the right hand side we will have our button add product button that whenever we click this button a dialog box will open okay and here you can see we have this like good looking table and if you see here we have total six record okay we have implemented paginations as well that we can just click here and we can implement like how many data we want to see if i click on 10 so here you can see our total app was having six so all the data has been shown here if i again go to five and we can see we have this next page selection if we click on next we can see that sixth data as well okay and if you can see on the top we have this filtering as well so we can search by the name for example we have to search mango or we have to search one plus so everything is possible here okay by using this filtering so this is called as global filtering okay now so let's first do the demo for add product okay so once we click on this button a dialog box will open so let's add a product i'll add a samsung mobile phone okay let's do that s10 okay category will so we have this drop down as well where we can see we have this categories fruit vegetable electronics so i'll choose the electronic uh at what date we are adding this product it is 23rd so what is the product i know this not looks good but yeah we can change accordingly the way we want so this is a refurbished product so i'll select this option okay you can see we can see that product is refurbished we can put some additional description that this is old phone any any description we can put and we can put a price as well like i'll buy it for 2500 or also we can put any comments like this is not new it's not new phone and we can click on the save button to save this record okay so once we save we can see the product has been added on the top if we press on ok now we can see this item has changed to seven so let's click on this next page to see okay yeah so this has been added successfully okay what if if i want to update it okay so for that we have this action button which is edit we have to click here and it will patch all the values on our form okay so i have to change this to i have to change the price suppose i will have to change it to 1500 now so i change it to 1500 and click on update okay so once we update update has been successful and we can see the price has been changed to 1500 now so this was about updating the record okay what if if i want to delete any product so for that we have this action button called let's delete once we click on this delete button you can see the record has been deleted successfully press ok now we can see the record is again back to six all right so this is what we are going to do the complete cloud operation create update delete okay and get get this basically we are getting all this record so this is actually a get call so this was just a demo part so we are going to see how we can implement this by our own so let's get into the video all right guys so let's first start like what what things it is required to start off like so that we can start the coding part okay so so for doing for starting it first of all we need to have like for example if you are starting fresh then what you have to do you have to have node installed in your system and also angular should also be installed in your system and if you want to check if node and angular is installing a project or not so just open up cmd and you just search for node okay version if you hit enter you can see the node is installed and if you want to see if angular is installed or not just type ng minus minus version and hit enter and you can see it will uh like give that cli conduction that angular class has been installed and you can see what version is installed and all that here from here okay so if angular is installed and node is installed so second thing we need is we need to have this json server in our system so how can we add this json server is simple just run this command npm install hyphen g json server and this will be installed okay because this json server will be acting as our database here all right so the third thing is installing bootstrap and it is optional to be very honest you can have it or you don't have it because if you want to use some container or some margin padding all that boots up classes if you want to use it then you can have it or else you can skip this part all right and the fourth thing which is most important this is why we have created this video because of material ui we are going through this squared operation by using this material ui so we need to install this angular material package and so here there is a website that angular dot io here you can go and you can just see all the steps to add angular material in your application so we are going to follow each and every step so first let me just open up a folder here first and let me create our first project okay so i'll create a new folder here and give it a name as my project okay and let's go inside this folder and let's try to create our new project so open up cmd in this folder okay on the top just press cmd and a command prompt will open inside your folder okay my project so what we are going to do we are going to first create an angular application how to create an application the command is ng new and the name of the project so we will do angular 13 crud this is the this is name of our project so hit enter so i'm expecting few questions so let's see let's wait for it okay so it asks for would you like to add angular routing so i would say yes then it asks which kind of css you want to use so i'll go with the scss and hit enter okay so it will take some time to get it installed so that you can see our new project like whatever the scaffolding part so it basically scaffolds and create all these things for us by default okay so let's wait for it to get installed as you can see the message that package installed successfully okay so now what we are going to do we are going to go inside our project folder so so the we have to put this command cd space and press tab so you can get this option the angular 3 and hit enter okay so now we have to open this project angular 13 crud inside our vs code so for that just press code and dot so this will open up this project in vs code okay so here it comes angular 13 crud so as you can see we this is our application ready and so now let's see what we have to do so there was a last step which you see here we have to add angular material okay so let's try to do it now so for that i will make use of that website again so you guys can follow the same step there okay so i'll go here and i copy this command okay ng add angular material okay i have opened this command prompt so i will just put this pasted ng add angular slash material hit enter again i am expecting some questions here so let's wait for it okay so it is determining the package manager okay so it asks for that this will be installed so i'll say yes would you like to install yes we have to install angular material so i said yes so next question it asks like what kind of theme you want to choose so you can choose any one of this theme so i'll go with this indigo pink it will again ask for global like set up global angle material typography style so you say yes hit enter asking for browser animation say yes and it will update your package.json and it will install all the dependencies and all the packages whatever we have here okay so let's go here let's see what what things we get from this so we have this our components okay so what is the first thing we need to design we have we need to have this header part okay so this is called as toolbar all right so let's choose which will looks good for our for our need all right so here is the example of that okay so i need this one because on the left hand side i need this a title and on the right hand side i need a button so i'll choose this third one okay so you can just click on this view code and i'll choose the third one from here i'll just copy this whole and i'll open this in my application okay so i'll go here in app.complain.html i'll remove all this code whatever i was having previously and i will paste the mat toolbar okay now you can see we are getting all these errors so let's try to fix it and why this errors is coming because we haven't imported the dependencies so if you go here in this uh on the top the api so we need to import this mat toolbar module okay so i'll import this first in the app module okay so go here and below this i'll import this mad toolbar module okay and the second error is coming because of this matte icon so we need to import the matte icon as well okay so for that matte icon we can search for your icons and in the api just import this as well copy this and in the module import this as well so now we can see i have these two now we just have to mention the same in the imports array so i'll say mat toolbar okay and the second is matte icon module so both has been inputted and you can see the error is fixed now so here you can see this is the icon the way it is look so let's save it and let's check all the changes and you can run the command ng so minus or to run your application all right so my application is already running if you can see here okay so it is already running in this compile successful as well so let's go here in the angular 13 grid and you can see okay so this is looking so can you see this is not looking so good because this is buttons okay and we need to import button modules as well so let's go in the buttons and in the api you can import this as well matte button modules all right so go in the module and import this as well and same thing you have to mention it in the imports array so it is matte button module okay let's save it and let's check on the browser now now it looks good so what we need is we need this thing on the left hand side this title and this thing on the right hand side so for that we need to just use the css so go inside this toolbar okay and in the examples you have to copy the css so open this view code and in the css just copy this thing all right and you have to put this thing in inside this app component.scss file you can see this example spacer class and we're having this flex1 and moto so this makes it like display flex this is how we do in bootstrap we do that display flex and space between but in material we do something like this all right so now if you go here on the application you can see title on the left and icons on the right hand side okay but we don't need this icon we need a button which will be our add product button okay and we have to change this as well okay this icon so what we'll do now so there is a list of matte icons so we will just go on google and search for mat icon list you can see this is the website we can search any icon whatever we need so i have let me just search for that so we will use this one okay so i'll just copy this icon or i can just copy this name okay and i put it here i will replace this menu with this one okay and i will change the app name to angular13 crud using material ui all right and for that and for the button what i need to do is i just have to remove this icon okay so i'll remove this one i don't need this button i will only require the single button so what i'll do now i'll just go here on the website angular material and i will copy this button here you can see we have list of buttons here so i want to use this raised button okay you can see this we have basic button flat button trace button so i have to use this raised button in this color so i'll just go here and where is this raised here this is the one so i want to use this button i'll copy this and i have to paste it here inside this so i'll just remove this button and paste with our new one button so i want to change the name to add product and let's save it let's see the changes can you see now the changes looks exactly the same now we have a add product button and we have this title as well that angular 13 cred using material ui all right so our first job is done okay now what we have to do is now we have to open up the model okay the model is basically called as dialog box so if you go here for model like if you have seen that my previous video okay this one so here we were using this bootstrap model all right so now we are going to use a dialog so it's a material dialog so for that just go on this website and search for a dialog can you see this dialog okay so now first thing we have to import this okay so we have this api reference for the material dialog so we'll copy this and go inside our material okay app model sorry and we have to import it here ctrl v and just have this in this array okay matte dialog module all right now let's see what else is required if you go in the example you can see lots of example here so we can see dialogue with the header and all this thing so we also required something similar okay so what we will do is so let's go in this example and see some code okay so when we see click on view code i can see there is a button we have to put for that icon okay so we'll do the same thing okay without changing anything we have to have a click event which will have a method so we already have a button called as add add product so we'll just copy this event click which opens the dialog okay and we'll replace it with this one okay it will open the dialog so it is putting error because we have to use the method so if you go in the ts file okay here you can see we have a method called as open dialog so what we have to do here is can you see there is also a component which is importing so we will create a first dialog component okay and then we can have this logic so for that so what we are going to do is we are going to create a a component so let's go in the terminal and create a component ng g c for component and the component name is dialog okay hit enter so this will be our dialog component let it get create okay so our dialog component is created so i'll remove this peg file i don't need it so i'll just go here and delete this [Music] alright so now we have this component as well dialog component so what we are going to do is we have whenever we click on this open dialog we have to open up a component so i will go ahead and copy this code and i'll paste it here so this dialogue so let's try to import this also on the top so we have this matte dialog all right so we need a constructor to make use of this matte dialog all right so i'll go here and just add my constructor and i will going to inject this matte dialogue so i'll say private dialogue mad dialog okay now this error is gone now what it tells us it opens up a component so for r we are we have created a component called as dialog component so we will inject it so i'll say dialog component you can see this comes and just import it so you can see on the top i have imported this dialog component so don't get confused this component is coming from here which one we have created can you see the name this is our dialog component okay and this will get this is going to get opened in the dialog all right so so what we are going to do we don't have to pass all these things so this is the data we can pass data as well and all that we will see that in the video okay all right so now we can just give some width and height as well if you want to give like suppose if you want to give some width of 30 40 percent that we can provide it from here if you just say your width we can provide a width of 30 percent to this dialog and let's save all okay let's see what is not saving let's say control save and we can overwrite okay so we have saved all the changes and let's see if our application is running successful let's go here and click on this add product so once we click on add product we can see dialog works so this is coming from where this is coming from this html so we have this dialog work so that is getting rendered on this particular dialog okay so this was about opening a dialog all right so now what we are going to do next is our dialog is ready now we have to create a form okay so how can we do that we have to write a lots of code inside our particular dialogue html so you can see we have dialog works so we will create a header with a title as add product form okay so let's go in the html part of this dialog component.html i'll remove this and i will have a h1 okay this will say add product form all right and we are going to use mat dialog title so this math dialog title we can give all these attributes let's save it and let's check the changes can you see this looks good now so now what we are going to do is we just need to have that form below it all right so let's go here just have a div and inside this div tag we are going to have that matte dialog content so inside this we are going to have all our mad form fields okay so what we are going to do now is we need to have that forms so let's see how we can use forms from material ui so let's go here and let's see what kind of form we can use so there are lots of option here you can see we have form fields like this okay so we can copy any one of this for our need if you want any one of this to use so you can use it you can see we have this mad form field so i'm going to use this one i think this looks good so i'll just copy this one okay and i will paste it below this can you see we get lots of error because we have not imported this we have to import on the top if you go to the api we have to import this mat form field module okay so let's copy this and we paste it here in the app module okay let's see what else what else we have we have this mat label error so let's see what we have to import for that okay so mad form field is done so there is example here so let's see what else we have to add okay okay let's see um okay all right so i think let's try to fix this error so it says that it still has error but we have inputted that in the module okay all right so we don't have our dialog component so we need to import our declare our dialog component so yeah so now that error has been gone so let's go here in the html and let's save it and let's see how the changes reflects and this is compile successful let's open the browser and go in our application so if i click on add product i can see there is a placeholder okay and so the css is still not applied so let's see how what is the error here so i'll go here in this mat dialog content all right so let's go here and see if our css is applied or not you can see this is our css is there so this is correct let's go here and see what has to be done all right so let's try to import something else from here like input field yeah so let's try to have this matte input module as well let's copy it and paste inside our module [Music] can have this matte input module okay let's save all the changes and let's go on the browser if things works or not can you see now this works okay so now we have this outline form as well and we can give any name to it all right so let's check what else has to be done okay we need to give this this should be hundred percent so i'll go here and change the css a bit so i'll go inside the css file [Music] and i'll change this format form field okay just do as i do like whatever i am writing it just copy it and just do exactly the same so we have to give the width of 100 to the forms so let's save it and let's see the changes now this is 100 this is what it was expected all right so let's go here and add all the forms okay whatever things we need to edit that like it was shown in the demo so the first thing we need to do is we need to have that product name product category and all that so let's go and change this accordingly so this will be our product name okay mat input is correct uh we don't need this icons so i'll remove this and i don't need this hint as well okay so let's save it so second thing was product category and that product category was basically a drop down so for that what i'll do i'll just copy the same matte form field and paste below it okay this will be product category alright and this will not be a matte input it this this is going to be a matte select okay so we can just say match select it gives all this option that no whatever we need to bind and all that so we don't need this all right and this is the matte option we can put all the options here okay we can give provide all our own value to it so let's try to change it the way we want so we can give placeholders as well for this we can put as what is the product name and all that or so this is going to be name and this is going to be a category all right so let's see what what option we were having we were having fruits and we having that electronics product vegetables and all that option so let's try to put all that and then electronics we can give the same value to here so this value is going to be sent on the database so whatever value will have on this attribute okay value attribute copy and let's paste here okay so to fix this error we have to go here and we have to just check for select and in the api we have to import this mat select module okay so let's open up your application and go in the module so this is what it is required we have to import whatever things we are using the whatever components that we are using of material we have to import it in our app module so it is match select module import it successfully let's go here and this error is gone now okay so let's open this dialog component click on save all and everything will be saved okay let's go here and see the changes so now we have product name we have product category as well okay so let's see what is this problem let's fix it okay all right looks good so we have fruits vegetable and electronics thing it is shown all right so let's go and add our third form field which is for choosing our date okay so for that we are going to let me let me first copy this and because for that we need to import a calendar all right so let's paste here and let's put here like choose a date okay and this will be having a input okay so this is a matte input so let's not try to do it by our own we can just go on this website and we can have this date picker so in the top you can see date picker in there yeah this is the one and we are going to use let's go in this example and let's use this one okay so this is for basic date range uh this is for date and all that so let's try to use this one okay so i don't want this example type let's see with a single one with a single value not this one so yeah let's choose this one so in the overview you can see this option is that mat form field so we can paste this and just change this appearance to outline okay it should match this because we are going to use the common we don't have to use the way it looks we are not going to have this one we are going to have that circle one okay so this puts error because we have to again import that date picker module so copy this and again import this here all right and i think one more thing is required for like whenever we are going to use this so we have to import uh a data model so it it is kind of for native date module so we need to have this as well okay so from date picker only we have to import that so that is mat native date module so we'll import that as well so just say mat native i think the spelling is incorrect so let me just check what is so it should be like this date module okay see if it has it or not so it is coming from okay so this comes from core okay we have to see if core is there or not so you know we have to import it so we have to import sorry import from mat core sorry i thought it is from date but yeah it is coming from mad core so it is going to be angular slash material slash core okay let's cut this and paste it here this is correct now okay so we have to import this matte native date module from angular material slash core let's add this pillow matte native date module okay so can you see that error is gone now let's save this and see all right this looks good let it run compile successful and we can see here that okay so this is also visible now we can see a good looking calendar where we can choose any data all right so three things are done okay now we have to add that fourth one which is for like adding some comments or like freshness if you want to add so for that we are going to use drop downs we are going to not drop down sorry the radio buttons so for that let me just try to do it for you guys and you can copy me while doing it so let's try to add that matte radio button okay so first thing we are going to add a label okay so this label we can put our h1 tag here which will say about product freshness okay and below this label we are going to put the matte radio okay so this will match radio group so first thing we have to put like it should be a group right so it is matte radio group and inside that we have that radio buttons so inside this we will put matte radio button all right so so inside the group we have mat radio button so what we are going to do right we are going to import an uh list okay so for that let's create a list on the component.ts file okay it will be a list of freshness like whatever we can put so let's create a freshness list okay because we have to put that value so you will come to know what i actually mean so we were having options first it was brand new then second option was second hand the third option was refurbished okay so this freshness list will be used because we are not going to do it manually we can just copy this list and we can use ng4 directly okay so that that will just loop whatever we can put like whatever the radio buttons will have it will loop with that all right so we'll go inside this and to this group and we have to go inside this button we can use ng4 so we'll say star ng for and select fresh of freshness list so we can directly copy so that there should be no issues with the name with the naming so we are using this ng for let fresh of freshness list all right and we can just say below this if you want to put some bind the value as well so we can bind the value as fresh so this fresh will be binded here with this particular value that whatever we select okay and here we will interpolate that fresh thing all right so now this is error because we have to import import some references so let's go here and we can just search for radio radio buttons and we have to import this api so let's import that reference here not radio button module okay let's go here and let's see okay the error has gone now you can see let's save it and let's check so there is some error with this fresh okay the changes are not saved so let's click on save all compile successful and let's go here and see how it looks so can you see now we have our option product freshness but we need it like it is horizontally you know let's try to make it vertical okay so for that let's see if it has any options to do in the examples so yeah we need something like this okay let's go here and copy the css [Music] okay so we can copy the css so this was for matt radio group we can put this and for mad buttons we can copy this one okay now go in the css and copy these two click on save all and let's check how it looks can you see now this one below the other so we can select the product freshness as well all right so now let's go ahead so we have done two things we have done actually three things which is quite difficult people find it very difficult to do the select one the date picker and then this radio buttons okay so now so the fourth thing it was price and the last thing we will put is command so we do not have that additional description we will just have two okay so let's create that now let's go inside this okay and we can copy now again this the top one mat form field and below this group we can paste it so this is actually going to be very simple now okay and this is already outlined we just have to change this to form uh of price form of price and this matte input will be there and we can change it to like that we can give a type here because this is going to be a number right so we can give number to it let's save and check what is this pause okay let's see what is that okay so this came by mistake so let's will not need this let's copy that again let's paste below this this is the product name we have to change it to price okay and we can give okay and we have to give our type as number because this is going to be a number so mat input will be there and this is our number okay and the last thing we have to give is we have to give that comment okay again this is also matte form field or we can create a text area but let's create a text area not an input text so we'll just have that text area and inside this text area we have to mention that this is a matte input so i'll say matte input let's save this and let's go on the browser to see the changes can you see our form we have a product name category has a drop down then date we can have this current calendar year we can select the product freshness we have price and then we have comment okay so our form is almost ready okay now we have to bind this by using our reactive form okay we are going to use angular reactive form to bind all this details okay so yeah whenever we click all right so it looks good now so i think one thing we have missed here is that we need to have a save and cancel button so we'll give that as well so let's open our this okay now inside this we will have one more div below this and this is going to be a matte dialog action so we'll put give attribute as matte dialog action okay and we will align this we can use this align as end okay but it should be in the right hand side and we can put our two buttons here so we'll say add that button so first button it is going to be raised so you can copy paste from but i know the code how to do it so i'll do it by my own but if you want you can copy it from the website as well the buttons okay and this is going to be whenever we click on close so this is going to be my close okay so this is going to map dialog close okay and the button name will be cancelled or we can say close the dialog so closed loop is better and for this again i can copy this now and you can paste it below this will also be a raised bed and this is going to my primary button the color will be blue so pablo we are using color primary and we don't have to close we can just say save let's save it and let's see on the browser how it looks if i click on add product i can see this form with these two buttons okay so i think we need some like margin on the left of the save button so we can give the margin as well so let's go here and give some margin let's open the code we can style this and we can give margin left left as 8 pixels so when i'm not using bootstrap if i was booting booster i can just say ml 5 or ml3 whatever but i'm using that styling so you can see there is some padding now of 8 pixels between these two buttons ok so if we click on close see the form gets closed okay so this was done from this particular line so whatever we have added this matte dialog close which means this will helps to close my dialog okay now let's try to create our form okay so for creating form so now we are coming into reactive reactive forms now so let's see how we can add a form in our application so for that let's go inside this dialog component.ts file and first thing we need to create a form so i'll say product form of type form group okay can you see on the top it has imported as well so whenever you press i tab so if your tab is not working then you can import it by saying this import from angular form so the second thing i need is form group sorry form group is there so we need form builder and also we need validators for validations okay so now let's inject this form builder in the constructor so i'll say private form builder of type form builder okay now we are going to initialize our form inside this ngoninit so i'll say this dot product form equals this dot form builder dot group we are going to group our form now so what were things we nee we had we had product product name and we can give it as validators dot require that product name is required so that until unless we don't fill this we can't submit our form okay so we are adding validations as well product form then we have category validators.require so let me create all these things okay [Music] you okay so this you get here you can see our form is ready that we have initialized our form now we have to bind this form on the ui so how we can do it first go inside our dialog component.html okay and do one thing like we need to create that form right so what we'll do now in the dialog content okay let's copy all these things let's cut all these things i'm doing ctrl x and let's create a form and inside this form whatever you have did ctrl x just paste it whatever we have just cut from there okay so now we have our form we have to bind the form we can say we need to have that form group okay so we'll say form group okay in the form group we have to give so sorry this has to be like this your form we have to give the form name so our form name is product form all right let's see why it is error let's copy paste the name form which is correct okay so this is because of the square okay this should not be there okay so this is going to be our product form all right so this is error i think because we have it imported reactive form module so we have to import reactive form module and that error was because of that so we will say import reactive forms module okay and we will also import forms module because no i don't think so because let's try to import it for the safer side if i use ng model then we need to have this forms module also but let's see how the requirement goes okay so let's save it and we can see our form has been grouped so now what we need to do is for every input we need to create our form control so let's bind the form control name so let's say form control name for this this has to match with our product name okay so this form group name should be same with our this this form okay and whatever the form control name is so this name this whatever i have here this should match with this one so what i'm going to add so i'll just copy this form control name for category as well okay so in the mat select i'll paste this and i'll have to change this name to this category so i'll copy this category and i'm going to paste here with this replace with this okay same pour over this as well so again i'll copy palm control name okay on the input control v and this is our date so this has to be changed to date this is our freshness so we can directly put here on the group okay and we can paste here and we can just say this is our freshness so this name is again i'm repeating this is coming from here whatever i've had so price and comment is spending so let's add both of them so here on the price again i'll use that form control name and let's give it a name as price okay the last one is form control name of the name was comment okay let's save all this changes okay now what next is we have to just bind like suppose whatever i have selected okay so i have to bind that as well so let's see if that binding works like whenever i click on save i want to add our product so i will create a method called as add product so whenever i click this that method will be called so this is my add product okay so let's create this method on the ts file okay so whenever this button is clicked i want to console some value so i'll say console.log this dot form product form dot value i'm just checking if the value is binding correctly or not okay so let's see let's save all and let's inspect this [Music] so let's try to create a perform so i'll say you choose a category choose a date freshness price and some comment let's click on save and let's see what what value is binded so i can see everything is working that we have a category we have comment we have date we have freshness we have price and we have product name so everything is binded successfully okay which means our form is ready so now what we have to do is we have to store this form value on the json server okay so now let's create our json server okay so for first of all if you haven't installed json server so let me give you the command so the command is npm install hyphen g json server okay if you don't have json server then please run this command before starting so i have already installed json server so what i'll do i'll create a fake json server so for that i'll say json server hyphen hyphen watch db dot json okay i hit enter can you see now this has run this command and we can see this has created our local server for us so if i can visit this website localhost 300 i can see we can reuse this resource post okay so this gets created so if you see one more thing get created in our application that if you come here you can see db.json created okay so what i'll do i'll just change this post to product list okay and i will remove this whatever it was having okay so if you again again i'm saying if you want to find this db.json it will be down there below this angular.json and open this and change the post to product list and make this array as empty let's save it and again let's go to this website and refresh this can you see that post has been changed to product list now and this is empty and now we are going to put all our data inside this product list object okay so now let's go here and for adding we need to create our api okay so let's first create a api service so for creating that api service open up a new terminal and hit a command ng g4 generate s for service and i have to create that service inside a service folder so i'll say service services slash api okay this will create our api service and hit enter can you see this has created a services folder inside this we have our api service so let's open up this api service okay and we are going to do http call now so for that we need to have http client so inject http line so let's try to do it i'll say private http slash http client so http client is imported so this is injecting so i've injected this http client so for using http client we need to have we need to have http client module imported in our app module okay so i'll go here and i will import http client module can you see this option just click on tab and this will be imported if and you can see on the top this has imported from angular slash common slash http all right so now our api service can do http call now okay so first thing we have to do is we have to say post post product we are doing a post call now because we have to save a call on the database on the server so i'll say post product okay and i will say return this dot http dot post any type of data on where where we have to post it we have to post it on localhost slash product list so we have to post here so i'll copy this link and i will paste it here okay and just add a slash here [Music] okay so we are posting our data here so what we have to post we have to post a data so i'll post a data of type any and this data will be posted on this server so can you see this data is posted on this server okay and i'm returning this all right and what if i want to do a get call so for get call we will say get product and for that we from where we want to get we want to say return this dot http dot get of type any okay from where we want to get we want to get the data from this link so i'll copy this and i will paste it inside this so our post and get call is ready okay so let's first go ahead and post some data on the server okay so as you can see we have created a api service and we are we have to use this inside this dialog so we what we need to do is we have to inject the api service so i'll say private say api and this is how we inject so from a previous video lots of people were facing this issue that how to do this so so i have an answer to it and you can see this is how we import the api service okay so api service is imported and now we can use this api service for posting our product so i'll go here i'll remove this and i'll say if if my form if my product form is valid okay if my form is valid then post our record so i'll say this dot api dot post product what we have to post we have to post the form value so i'll say this dot product form dot value so whatever value i was having i have shown you already right so we were having an object which was getting stored inside this form and we have to post this data okay and we will subscribe to this data you can say subscribe okay and this is going to be an observer so what i did so i just need to have the next so it has next error and complete so we have to say next and here inside this i'll have my response and arrow function and then like this okay so if it is success then it will run this next block okay and here we'll say alert i'll say product added successfully okay but if there is error so we have a error block so we'll say error [Music] so so this is actually this changes came from angular 13 like if you have angular 13 then you will see this kind of change so it requires something like this so this is how we subscribe or we can throw any error in in this observer so this is basically an observer type which is next or error and then we have complete so this is actually an rxjs topic of like how we can make use of observer types so this is how we use error block so if there is any error we can say alert and we can put our message as error while adding the product okay so this is our error block let's save this changes and let's see if the compile is successful so the compile is successful now let's try to add a product in let's see here if if i refresh this currently i have zero record let's go here and add a product so again i'll add product as apple category as fruits on which date i'm adding so you can choose it from here on 24th it's a brand new the price is 100 and comment is this is fresh apple we added a comment and let's click on save if i click on save i can see product added successfully if i press ok ok so form is like this so we have to see something for this but first let's let's just check if that is added or not if i refresh this i can see our first product is added can you see the product name is apple category and all that so now let's try to fix this problem like okay so because we have to close this form once our product is added so let's do it okay let's open up this and whenever there is a success okay what i'll do is i'll just say that first of all i will reset the formats at this dot product form dot reset okay and then what we need to do is we have to inject something called as material dialog reference okay so go on the top and import angular slash material okay slash dialog from here we have to import that matte dialog graph so this matte dialog ref so this is what we have to import now and let's inject this let's inject this in the constructor as well okay so let's go in the constructor and i'll say private dialogue dialog ref okay and let's add that math dialog ref and here we have to give the type what is the type like what is the component from it is coming so this is here we have to add our own component name so we are actually getting the reference of dialog component okay so this is how we have to inject this mat dialog reference again i am repeating the steps first we have to import my dialog graph from angular material slash dialog and then we have to inject it in the constructor like this once this is done what we have to do is we have to close the form okay so i'll say this dot dialog ref dot close okay so this is the way to close this okay so close this up method basically so yeah this is the way the form will get closed once our data is added so we can close our form like this okay and we can also pass some data that our form is saved so i'll say save this is for save okay let's save this and let's try to check if it works or not again i will add a product again let me just refresh this and let's show you we have only one data currently all right and now we are going to add the second product as mango it is again our fruit con fruit category date is going to be 24. it's secondhand okay let's and price will be 250 and this is not fresh and let's click on save so once i save it previously the form was staying but once press ok i can see the form is getting closed and if i go on this product list i can see one more product has been added okay so this is the way how we can create our add product all right and now let's do for get product okay so the get product we are going to do inside our app component.ts file why because this is what it displays like whenever we see this this displays our app component and we are going to implement a table here we are going to implement a mat table but before that let's try to bring our data okay so bringing our data we have to do a get call so i'll go here i'll say get all products okay and again we are going to inject the api so for the injecting the api i have this constructor so i'll say private api api service can you see imported on the top api service and we are going to use it inside this particular get all product all right so for getting all the product we just have to say this dot get api and we can get all our product values so i'll say this dot api dot get product and i can say subscribe again the same way we need to say next this is our next block which will have our response and we can just say console.log so that we can check if we are getting the response or not okay and if there is any error so we can create an error block error and we can put this error here if you want to console that error or we can just say alert we can alert like error while fetching the records okay let's save this and let's see and we have to call this inside our ng on it so let's implement the on in it okay let's click quick fix and this will add our ng on in it and inside this ngo in it i will call my get all product okay let's save all the changes and let's see if we can get the record in the console.log okay let's inspect this and in the console we can see our array let's let me refresh this page again then you can see we are getting this two array which is our apple and mango so get call is also working okay so now let's try to implement the table mat table so for that what i'll do is i'll go inside this again website material.angular.io and i will open up this table tab so for using the table we have to first import this api reference which is for mac table module so i'll copy this i'll go inside this app module and i'm going to paste it so the first step is we have to import mat table module so lots of people having doubt how to use material table so this is the first step to make use like how to implement the material table okay so first thing to import mac table module inside your appmodule.ts okay let's add this in this import array math table module okay all right so now let's see what is the second step open up this browser and we'll first see like i need with pagination and filters and all that thing so let's search for it like which table we are going to use so i'm going i'm just seeing some examples like which one to have so i think this is with sorting pagination and filtering so i'm going to use this table like with all these features sorting presentation filtering so let's click on view code all right and let's see let's first copy this html okay let's copy this whole html let's see till here okay so we have till here i've copied this and i will paste it inside our app component.html below this toolbar okay so i will have a div dot container and below this i will have a div and i will put up with my styles that i need a margin top top of 10 pixels and i will paste that code here okay you know there is lots of error but we will fix it one by one all right so the html part is done so for the ts we have to import all these things so we have mad table data source mat sort mad pagination and this view child so let's copy this and go in the component.ts and paste below this okay we also have to import that view child so virtual has to be inputted in the angular slash code so we have imported it let's see what is the second step so second step we will go here and we will add these these things display columns data source view child let's copy all these things and paste above the constructor all right so we don't have this user data i'll say any and let's remove this error by adding this exclamation okay so now again let's add exclamation here to remove all these errors okay so this has been added now all right so now we can see that the displayed column so what what columns i need to have so i need to have a product name so i'll say product name okay again i'll have then category so i want you to match this with the api like whatever api i'm getting so i usually do it so i want you guys also to do that this should match with all these names so category command state so this name and that name should match so i'll just copy this reference from here and paste it here we have price and then we have comment as well product name category price we have we are having date okay let's see what things we have in the form we have name category date we have freshness then price and then comment okay so let's copy freshness then price and then comment okay so we were having one two three four five six six columns we have okay and let's see how we can add our data source so what we will see once we get our data so let's come inside our get all product so let me remove this console.log and what i will do is whenever i will get the response so i'll say this dot data source equals new math table data source okay and inside this source i will give the initial data so this data will be our response whatever the response i'm getting i'll put inside this data source okay and also i will initialize the pagination so i'll say data source dot paginator and i'll give this dot so whatever the paginator i had on the top this originator and so i will give this value to this paginator okay and same goes with the sorting so i'll say this dot data source dot sort i'll say this dot sort and this sort and this paginator is coming from the top what we have declared here you can see we have declared this view child paginator and sort and we are passing it to this data source designator and data source sort okay let's see here to fix few errors again so it does that apply filter so we have to copy this method as well so if you go on the material you will see this method apply filter this is the this is the one which helping us to do the filtering so i'll copy that method and i will paste it below this get all product [Music] okay let's see two more errors to fix so we are getting this error for paginator so let's see how we can fix that as well so i think we have to uh import some modules to fix that error so let's go inside our this and let's search for paginator and let's import this matpaginator module let's copy this and go inside our module and paste okay you can see the error is gone now for sorting also let's see if we have anything so we are going to import this mat sort module as well inside our app module okay so this is also added and let's click on save all to save all the changes whatever we have did all right so now let's see on the browser what things looks let it get refresh all right so now we have this table but it has some issues so let's try to fix all these things now okay so let's go in the html and we have to change few names okay because this is coming from that value so first we are going to change this so whatever the columns we have declared here this has to be come here okay for example we have this product name category everything should be coming here as well so this is our product product name and let's change the label to product name okay the second thing was category so change it to category and this is our label name also change should be changed okay now this is the name so third thing it was date so i'll change this to date and this also to date then we're having let's see what is that in the list freshness price and comment okay so we'll add this freshness freshness then we need to add price and then we need to add comments so i have added two more extra for price and the last one was for comment we have to change this as well so in the column depths we have this comment and this is our price again i'm repeating this matte column defs whatever the name i have added this should match with this okay with this all right so once this things are done let's save the changes and we have to change this as well whatever the data we are binding so this should so this is the reason i told that this should match with the api so that it is easy to paste so we have to copy this and paste here so this value should match from the api name okay so the api whatever we are getting so that should match with that so i will do this first and then i'll show you copy all right i'll remove this percent let's do ctrl save and check can you see this is our we are getting all the records okay the problem is with this css so for the css what we will do is we'll go in this table okay and let's go in the example so we have choose that with pagination and sorting so let's search for it yeah this is the one let's open this code and let's copy this css after copying let's go in this and paste the css i will recommend to remove this one because i need a hundred percent width so i don't need divide that in 25 25 so let's go here and check so you can see our table is also implemented all right so now let's give some margin here so we are not using bootstrap and this is the reason that our container is not working okay so let me try to style it by my own by saying container and i'll give max width as 1200 pixels ctrl save let's check and we have to make it center let's say margin zero auto to make it center okay so this is what css we have to apply margin as 200 and and max width that's 1200 and margin is zero auto okay so you can see this is in center okay now we i can see this is there is a problem with the state so we are going to use a pipe we are going to use a by default pipe which comes and that is date pipe okay so for here just add this and just say date this is the pipe we are using a date pipe and for price also we will add a currency pipe again add this pipe and just say currency so i have added two pipes for price and for date if i save it now i can check the date has been changed like this and price also in dollars okay and you can see we have this pagination we have this how many page we want next and we can filter as well let's try to use filter i can see mango is filtering if i say apple apples which means our filter is working so once we have some good record added we can see all the features of pagination next and also about sorting and filtering if i see here i can sort this data as well so it is descending now it is ascending okay so you can do that as well right so this is how we implement tables okay tables in angular material all right now but there is two things still pending which is edit and delete all right so for that i need to add one more extra column for action okay so now you will see how we can add like our own um columns extra columns okay suppose we need to add an action column so we'll go here so there is a step so step number one we have to put here define the column name so this is going to be our action okay and in this html i'll just copy any one of this container will paste here and i'll change this to action because i have added in the list okay so this has been changed to action and the header value will also be changed to action okay and now in the td we have to remove this and we have to add our two buttons okay so the button number one will be for um edit and the second will be for delete all right so let's try to add our button so i'll say here button we are not going to use a bootstrap button so it's easy to implement and that button will have a icon so i am going to use mat icon all right and the icon name will be edit so that it should look like pencil and for the button let me put on that i'm going to use matte icon button so i have matte icon button and i have to give a color as well color will be one i think one should be for delete and for edit i should do it as primary okay i'll copy the same button again all right and i will paste it below this and this is going to be delete button so i'll say mat icon as delete and the color will change to one save all the changes let's go on the browser to check can you see now we have this two button edit and delete on the click of edit i have to open this form with all the field data okay so for that let's try to do it okay so the on so this edit function will be basically on our app component.ts file okay we have to do edit and we have to open that component so let's open up our component and let's try to write the logic for the same okay so i will add it below this above this so edit product once we click on edit on the click of edit i have want to pass some data as well okay first of all i will open it first so i'll say this dot i'm going to open the dialog so i'll say dialog dot open so i have to give the component as well that what component i'm opening so i'm opening a dialog component okay and i am giving the width again as 30 all right and this time i have to pass some data as well okay data so i want to pass some data as row y row because whenever i click on edit so let's first try to know why we need this so whenever i click on this edit i want to pass this row value so that that value should get bind in this product so for that i am passing the data so for that i will go in the html and on click of edit on edit button click i'll say edit product i want to call that product which i have created edit product and i will pass this row value okay this row value will pass inside this edit product okay and here i'll just use that row value okay and i can in this way we can pass that data all right so let's save all the changes and first let's see if our data is calling or not okay like our model is opening or not so once i click on edit okay so our form is opening but our job is not done we have to patch all the values here set the values so let's try to do it now so once we click on edit product this opens our dialog and our data is getting sent okay so whatever data i have sent i have to use it as well correct so for using it first thing i have to inject something first i will import it and i'll show you what i did so here in the dialog form you have to import something called as matte dialog data okay so once this is imported okay so in the constructor you have to inject so let's let me go in this constructor let me put this enter so that it should be in one line all right yeah so here what i'll do i will inject it so for that i'll say add the rate inject i'm doing it in the constructor okay in this bracket constructor bracket this is my constructor bracket so inside this i am saying inject can you see on the top it is injected and like this is also imported on the top from angular and what i want to inject i want to inject matte data dialog okay let's give it a name as well and this will going to be our edit data so whatever data i want to edit it which is coming i have given the name to it all right this is how we can now this edit data will have that row value okay this will have our row value now all right so now what i'll do is i'll go inside this edit and let's try to do console.log if our data is getting sent or not so i'll say console dot log say this dot edit data let's save this open up the browser and let's go in the console if i click on edit i can see i am getting some data here in the dialog component can you see which means our data is coming successfully now let's try to use this data to pass the value all right again i will go to my dialog component.html and i have to pass the value correct so what i will do now i will go inside this constructor to patch this values so inside this constructor sorry in this ng on it i'm so sorry in this ngon in it so whatever data i was getting i will i'm going to use it so i'll say if i receive data which means if i have a data which means this condition is true at that time i want to patch all the values so i'll say this dot product form dot control what is the control name the control name is product name so i'll copy this product name dot i want to set the value what value i want to set whatever the value is coming from edit data dot product name okay and this way it will set the data for us i'll copy this again and we'll paste it for next five next one like five more times sorry this is a mistake wait let me fix this again let me copy so this sixth time so i have to do for all like for category all right so in this way we have patched all the values okay all right so now here what i did is just copied the same name and pasted it here in the controls and this edit data whatever the data i was getting from that api okay so this is how we have to patch the values let's see if the value is getting passed or not so i'll go here and again i'll click on this action button and i can see all my value is getting passed on the form okay so this is how we do so that has been done now so but there is one issue and what is that issue that whenever i click on add i want to see the save button and whenever i want to click on edit i want to say this update button okay so let's try to implement that so let's write a logic for it but okay so what i'll do is i'll just go here and change this name and i will have something called as action button okay i'll say action btn like what is the action is it update or is it update or it or is it um safe so copy this action button and i will create a action button property and this will be of type string and i'll give a name as save so initially the name will be save okay this action button name so this action button is interpolated here okay and whenever the data is edited whenever this we have edit data that like person clicks on pencil that edit button then this value should change to update okay this is how we change the update button let's save it and let's see how it looks if i click on add i can see save and if i click on this pencil i can see this update okay so this is working fine all right so now let's try to update the value okay so whenever i click on this pencil button i can change any value and i can click on update but if you notice one thing this button has a single action for example this button has this single like it has only this ad product okay so but this only helps to add our product so how can we update it okay so for that we will put up a value put up an uh condition one more extra condition here so let for for that what i'll do i'll just cut this or you can see here how i'm doing let's cut or you can press ctrl x cut and i will add a if condition if this dot edit data like if it is not an edit data then we have to add so i'll say control v okay i've added the condition again okay if this is if this is not edit data then add our data else else we want to update the data so i'll say this dot update product and let's create this method below here okay update product so for the update product what we have to do first we have to create the api so let's create our api so let's go in the service and let's create our update product so i'll say update or say put product put put product because we are going to use http.put okay so this requires two things it requires data and second thing it requires okay so let me just check it requires an id of type number okay what will and we will return this return this dot http dot put we are using put method now okay where we want to put this data we want to put it on this particular site copy and let's paste here okay and we have to pass the id as well like for this id you have to put this data and press comma what data we want to put you want to put this data so this is how you do so this is http output slash id comma this data you have we have to put for this id okay so this is how we do for put product and let me create for delete product also i'll say delete product and we have to pass id of type number here and we can just say return this dot http dot delete of type any and we are going to use the same link this one to delete our record can you see delete this id and done our api is ready okay let's add this as well yeah so recon so you can see our api is ready for update and delete all right so let's use it this put so in this update record so what we will do is we will say this dot update or we can say api dot put put product and inside that i have to put this form value so i'll say this dot product form dot value okay so this data this is our data which want to put for which id so we have to say this dot edit data dot id for whatever edit idb which is coming for that i want to put this data update this data i'll say this dot subscribe okay and in the subscribe we have again next for success and i can say add alert okay and we can say that product updated successfully and we can then reset the form as well product form dot reset okay and we can also close this form so for closing the form again we need to uh have that reference so let's see we have that reference mat dialog references we have so we say this dot dialog dot close and we can mention that we have updated so we say close update okay all right so let's save this as well and let's see if the record is getting updated or not okay let me write the error block as well error there is an error we can just say alert and let's put here and we can say error while updating the record okay save it and let's check on the browser okay i have to change the name or i want to change the price i want to change this price to 550 okay and i click on update but can you see the product updated successfully if i press ok the form is reset and i can see still the price is not updated but if i refresh this so can you see this has been changed now so we are not going to refresh manually okay so let's try to handle this so that it should automatically gets update once we close the dialog box all right so for that what we need to do is we have to call that get all product and that get all product is present inside our app component.ts okay so i i think let me just show you that what exactly i mean okay so what we need to do is whenever we open the dialog so let's go here in our component and we have to call this method get all product okay so for calling that what we'll do is so whenever our dialog is getting closed okay this dialog is getting closed we can just say dot after close okay after close we can subscribe we can subscribe we can put this value okay if the value is if the value is equal to equal to save the one we have added right if you remember if the value is save then we can say this dot get all product okay and again for edit also we can use this we can say dot after close dot subscribe or we can say value so whenever there is a success what we will do is we will check if value is equal to equal to update if it is update then again call this method this dot get all product okay so can you see this update and save is coming from this is coming from this dialogs whenever we close the dialog we are passing some data update and save so that data is getting sent there and we are checking if it is saved then this again call that method and if it is update then again get all product should be called so if i save it and now if i change this again this let's change the category to electronics i'm doing a wrong i know let's click on update update successful okay can you see this is updated now to electronics without any refreshing so now let me again change it to fruits only click on update and you can see update successful and this changed again okay so in this way we have did update also and our update is also working now the last thing is pending is this delete so let's try to handle that delete as well all right so let's go inside our dialog not dialog inside our app component dot html okay so you can see we have this delete button and whenever this delete button is called so first create a method for delete let's create a method delete product okay and this should exp this expects an id okay of type number [Music] and what we'll do here is we'll just call that api service this dot api dot delete delete product and we just have to pass the id and we can subscribe once we subscribe again the next block next so this is our success block which says that alert deleted successfully the product successfully okay and if there is any error then we can just say in the error block and we can alert error while deleting the record okay this is all now let's see if it is deleting or not okay so let me just go here and let me try to delete this record this mango if i click on delete okay so okay this is not working because we have created a method but we are not calling that method okay we are calling we should call that method on this html so here let me just copy this method delete product and let's go here in the html and let's create a click event and let's paste this method delete product and we have to pass that id so we'll say row dot id okay this row.id we are passing row.id and if i save it and if i go here and if i delete click on this button now i can see product deleted successfully and okay so we have to refresh target again so that it should reflect it so you can see it is removed so let me first add a product again so that i have to delete again i just have to check if it is working because we have to again call that get response okay and let me put some comment as well random product added came here and when we delete it we have to refresh that again we don't have to refresh it should automatically call that api again so whenever it is successfully deleted we have to again call this dot get all products okay let's save it and let's check if it is updating at the same time or not deleted and you can see this is updated now okay so this is the way we have implemented the delete as well add as well edit as well and get as well all right so if you have any doubt related to this video on any of the step you can just mention me like you can just mention the comment section that i'm not getting this step can you help we can connect on telegram and i will help you to resolve all your error and issues all right so this brings an end to this tutorial where we have created like how we can add update delete and get the products and how we can also implement degeneration and we can do filtering we can do sorting as well so i want you guys to implement the same and you can mention me in the comment section if you have any doubt related to this all right so i will be there to help you guys and i will want you guys to subscribe to my channel so that you will be updated like whatever whenever i will uh upload any video you can just see to it and that will definitely gonna help you if you are into this field of web development by using angular so that's it from my end take care and keep learning guys

Channel: Let's Program

Views: 347,967

Keywords: angular 13 crud, angular CRUD, angular CRUD operation, angular CRUD with json server, angular crud fake JSON server, angular tutorial, angular latest video, angular crud tutorial, angular 11, bootstrap, bootstrap ui, angular learn, learn angular, latest angular video, angular crud, crud, crud in angular, angular forms, reactive forms, angular project, angular lastest, angular material, angular material ui, angular material crud operation, crud using material ui

Id: jGbP620NahE

Length: 105min 32sec (6332 seconds)

Published: Sun Jan 23 2022