Angular 15 CRUD by using Material UI components| Using Json-Server | GYM Registration App in Angular

hello everyone I know it's been a while since I last posted a video I hope you all are doing well and welcome back to my channel so today I want to talk about a new project which I have created and that is angular 15 crud okay I already got so much uh response good response on my previous crud video which I have created and it is there on my YouTube as you can see right it is if you go on my YouTube channel so I have this video already where I have a very good views as well for this so that's why I'm saying I've got a very good response from you all so that's why I'm I'm creating the updated version of this okay the question how is this one is different from the last one right so to answer that we will see that in the demo okay just to share that uh this has been on my mind for a while now and I can't wait to share this project implementation with you all so sit back relax and let's jump right into it okay so as you can see here right so we have this created uh this UI by using angular material okay so again we are going to create a new project we will see how we can configure angular material in your project so this is going to be a step-by-step project so I want everyone to stick around till the last so that they can create this application without any bug and without any error so let's just get into the demo all right so as you can see again we have created this header with the title with the gym registration app so this is a gym registration app and this is the logo of the gym Fitness First okay so as you can see we have created this beautiful form right so as I have told you this is a crowd operation so so we need a form to create right so first c r u d so c means create so we will be creating a form so we have all these uh properties your first name last name email mobile weight height BMI BMI results some radio buttons then we have a package to select then we have some question to ask and we also have the inquiry date so okay as you can see let's go ahead first and create a form okay so let's create a form let's give it a name as uh John Rico email as John Rico at the rate gmail.com okay mobile let's give a random number for now let's keep it in a weight of 75 so as you can see right if I remove this weight and if I try to type something here I'm not able to do that why because this is a read-only form an internal unless I don't have value on this weight I cannot enter my height so let's first put up the height as 75 and now if I try to add any height so that I can do so this height should be in meter so that you can also put it as a matte hint here so that the height should be in meter so we can we will be doing that once we will be creating this application so how it should be in meter so it is 1.7 okay so as you can see we are getting a BMI result as well so this is calculated once we have these two value and this BMI is calculated and based on this BMI number we are getting the result of BMI okay if you don't know what is BMI you can just do a small Google like it is a boss body mass index something like that so here you can check for that BMI so BMI is nothing but you can just check here we have my calculator so this is what we are going to do its body mass index as I have told you okay so this is getting calculated by this form by some formula which we are going to implement in our video okay then we get this BMI result based on this number okay then we can select the gender as well so John is male and does he require trainer so he say yes okay and then there is an option for selecting a packet so he selects a monthly package and uh there is also one question which of the following is important to you like what motivates you to join the gym so we get a different option now this is not a normal select this is multiple select so you can select the multiple values here okay so this is what like uh he want Total fat uh toxic fat reduction energy endurance Fitness and all those options he has so he has selected four options and now he's asking have you been to gym before so he say no that's why he requires a trainer and then inquiry date he can just put as today's date okay so once we have filled all the forms what we can do we can just click on submit okay so once you click on submit we are getting this toast message as well that registration is successful for three seconds uh again we can configure that and we will see that in video how we can create that toast message and configure them as well okay so as you can see this form has been submitted how we can see the form so as we have filled this inquiry so what we can do we have this button called as view inquiries okay if you remember in my last video in angular 13 crud we were using a form this is kind of a Model A dialog box but in this one we are not using a dialog box we are actually creating a page and on the page we are registering all those details okay so to get the list we have this button view inquiry so once you click on here so we can see all the list of inquiries here so let's start from the top as well so here we have a back button as well back to registration so we can come again to the registration page or again if you want to go to the list page so we have this button okay so talking about the right hand side so this is an angular material table and angular material provides a filtering out of the box so once you configure the all you have to do just to configure and we will see how we can configure a material table in angular so here we can filter the record so this is a global filter okay so for example I want to search for name so I can do that John so I have all these options for John for example I want to search only female so I think I don't have any female um in my gym for now so you can see this is all mail so we can do a entry and we can check if this is working for this column or not so let's search for a BMI result so let's search for a normal you'll see I'm getting all the filter values normal and we have total 10 records which are normal so if you remove this so you can see the records got changed okay so this is how we can Implement filter as well and in this table you can also do um sorting and filtering as well like for example I want to sort by name right h J is s so this is my ascending order and if I want to do again so this will be in descending order so sorting and filtering both are here so we also have a feature of a pagination in this so as you can see that we have created this again out of the box from angular material so once you click on this next so you can go to next page we can go to the previous page okay so let's go ahead and see how we can uh see some detail of the employee for example if you if I go back so here we have Selected Few um entries right so this entries we can check uh but if you see here in the list there is nowhere it is mentioned so that if you want to see right you have to go and view the employee details uh sorry the register user details so here we have this three action buttons and this view buttons helps us to display that so if you click on this so we are routing to a different detail page and we can see the detail of that particular user like his name email mobile number his gender package PMI BMI result trainer require option and the goals what he has selected okay so those thing you can see here in the detail page all right now for example if you want to uh update the record so what you will do so again we have an action button for that this is edit so suppose I want to change that or if I want to update something if I click on this edit icon so you can see uh I'm again routed to the update page and all my values have been passed on the form so all the values has been sticked so we say it patching the value so we have passed all the form value and now I want to change my package from monthly to yearly so I can click on yearly and I click on update see once I click on update I can get again success message updated successfully and can you see my package got changed too early okay now for example I want to delete a record so what I can do I can use this the third icon which is the delete icon okay so once you click on delete I will get a confirm box that I will sure want to delete so if I say no it will still there but if I say yes I want to delete this record Then I then the employee record got deleted successfully and this is the number got changed from 19 to 18. if I show for this one as well let's go ahead and do that so delete yes now it is 17. again let's delete yes now it is 16 so which means our delete functionality is also working okay so in this way uh I have demonstrated you how we have created this application and we are actually uh did this crud operation that create means creating the form create means reading the form right we are reading the values like for example the list of values or the single value which is real and you for update like we are updating the form and D for delete we are deleting the form like deleting the user okay so that's how it is create read update and delete so that's how we created this Cloud operation all right all right so as I have told you that this is going to be a step-by-step project so please follow along to create your angular 15 grid operation go ahead and first create our project so I will be creating the project inside this YouTube Project folder so right click on this and open this into your terminal so this this is for the Mac users but if you have Windows then you can just uh open up your command prompt you can just press shift right click and you can open that in the folder so you can see I am inside this YouTube projects folder and I will be creating my first application so I'll just hit the command so let me just zoom it for you guys okay so the first command is to install an angular app is NG new and give the application name as angular 15 current angular 15 current YT okay this is this is how I have created the project so angular Cloud 15 that's it hit enter and it will ask for a few questions so let's say yes and I will be choosing scss and let's just wait for it to get installed okay so as you can see my project has been installed successfully so now I have to go inside the folder so I'll see CD space and tab so I have to choose the project directory so it is angular 15 current so press ok so now I am into my directory so I have to open vs code in this so I'll just say code space Dot okay so as you can see uh my project has been created successfully the project name is angular 15 credit okay all right so in this way we have completed our step number one so now let's go ahead and let's do the step number two which is we have to set up this project like we have to install everything that what we'll be using in your project okay so for that for the installation let's go here and open up this new terminal from the top so as we are into your terminal so first thing is we will be using angular material so let's go on the website of angular material so if you just open up your Chrome so let's go here angular material UI so on this website you can just go and go ahead here click on get started so here you will get this command to like uh install angular material so let's copy this command and let's go inside your project again and here you can paste that command okay so NG add angular material so first it will ask you for Google privacy policy so you can just say no okay this is for the Google analytics so just say no and then it will ask for the package will install your 15.1.1 so let me just zoom this a bit so that yeah so it will also just say yes I want to install so it will install all the required packages for angular material okay so now you have to choose the themes so I'll just go with any of the theme so I'll just choose this Indigo pink for now so I'll just go ahead and choose this Indigo pink uh set up the global say yes include animation say yes and now it will install the package and it will update everything for you okay so once this is installed the second thing we are going to use is bootstrap so again let's go to the website bootstrap.com get bootstrap.com and here if you scroll down with this version 5.3 if you scroll down we will be using the CDN setup so let's copy this first and let's go in your index.html let me just make it this a small yeah and let's go in the index.html and you can paste it just below this okay in in the head tag okay and let's again go here and copy this JavaScript so I think we are not going to use any JavaScript or bootstrap like we are not using any jQuery and setup so we just need to use a Pure CSS of bootstrap that's it so this link is enough for this setup okay so once this is installed uh once this is configured so let's see third thing we need font awesome because we will be using few icons from here so let's copy this first link this is on w3school slash icon awesome so let's copy this link okay and let's paste it in your head tag again so just below this you can do that so Ctrl V okay let me make this a little small yeah so that it is fine here so I have my style sheet so I can remove this Integrity it's fine it's fine fine so let's go here yep so now we have bootstrap and now we have uh font awesome as well okay let's see if the changes all right now so two things has been configured successfully the last thing what we need is we have to set up our project because I will be changing my themes a bit so let's go in your project directory so as you can know that I have to change a few of the styling so I will be using some custom stylings so as you can see so this is what um it has been configured by uh angular material so this all gets added automatically but I have to set up few things like I want to create my own custom themes so that's what I'm because I will not use the by default one so let's go here and make use of angular material themes so say add delete use and inside that you can just call your angular slash material okay angular material and you can just call it as matte okay and now you have to include the mat core so we have to say include math code mad dot core okay and now what you have to do is you have to Define your three themes primary secondary and year one so I already created that palette for me so I'll just copy paste it in my here so you can pause the video you can get these three themes okay you can just write it down if you want so these three things I will be using the primary accent and one and this is the palette what I'm using red palette Amber and green palette okay so once you have included this so now you have to just say that Define their light theme so what you can do I'll just again copy paste and I'll just paste it just below this so again you can pause this video and you can configure this theme uh in style dot scss so now we have my theme created and inside that I have defined my light theme so this again method is coming from your uh matte what we have just imported here okay material and here you can just define the color primary accent and bond so this color is coming from here so this palette has been used as your color okay so three color what we are using and you can Define your typography from you I didn't think that you have to include is that so once you have configured all the stylings so you have to say include so add the red include okay inside that you have to say mat dot then you have to say all component theme okay and inside that you have to pass that variable that you're using so that variable what we created is that my theme this is my custom theme what we have created okay so as you can see this my theme is coming from this guy so this my theme is defining your light theme from here and this you are saying to include in all your project so that's how we have successfully configured the custom styling which we are going to use in our project okay so once the material is also configured uh the next thing we have to configure is like what all components we are going to use okay so I'll configure all the routing first of all and then we will start the actual coding okay so step number one we have to first create a component called as create registration okay so for that uh what I will be doing let's go in let's go inside the terminal so I think my terminal is already open so let's go here and let's clear everything okay so let's create the first component so NG G for Generate C for component and the component name is create so first I will create a create registration so create registration component okay hit enter so can you see the component got created and this also updated your app module so that's how you create a component angular and the angular CLI automatically updates your module as well so whatever component you create that gets declared inside your app module okay so in the same way we have to create uh two more components the component second component is your registration list so we can just say your as list registration list okay and the one more component I need is that is my user detail you can say user detail okay so I have created my three components and I will also require some models to hold my properties so I will create a model folder models folder so inside this I will be adding all my models what I will be creating in the in in the future steps okay and I will also create one more folder for services because we are using Json server right to do the API calling so we need for API calling we need to create a services so that's why we have this folder okay so in this way we have successfully done the step number two as well where we have configured our application that whatever packages and stuff we are using so we have did that okay but one thing to note here is before that as you can see that I was using uh like once I was creating or once I'm updating anything so I was getting the toast message on the right okay so for getting that toast messages right I used one of my own created Library which is NG angular pop-up so you can get it from mpm so if you guys go on this website NG angular pop-up search for it okay so what you can do is you can just copy it from here directly okay and one thing to note here is that uh currently this package doesn't support the like the latest version but what you can do is you can make use of uh like attribute called as Force so if you just say hyphen hyphen Force okay for example like this Force so it will install this package in your application so npm install NG angle pop-up hyphen hyphen force and hit enter so once you hit enter this will install this angular NG pop-up okay so that has been installed successfully so one more package what I'm using is NG confirm box so NG confirm box okay so this one again this library has also been created by me like five months ago so you can also use this one as well so let's copy this and let's go here and again we have to follow the same hyphen hyphen Force okay so we have installed these two packages and this also we are going to use okay so as this has been installed but to use them we have to first uh like import them in the app module then only we can use them so let's go here and import so first is NG toast module let's say I'm getting this intellisense so if you see on the top this has been imported from NG angular pop-up NG toast module and I had one more I have downloaded that is NG confirm confirm modules this one so again this has been imported from the top can you see NG confirm box so now I can say that I have installed everything what is required for me to start in this project okay so now we will be doing this one by one so before that let's see if my application is actually running or not correct then only we can say that we have installed everything successfully so let's go into your after HTML so let me remove all this unnecessary code which it was there and I can just have H1 as and again say that gym registration app okay let's save this oh no the spelling is incorrect so let's make it fix it registration and save it okay now to run the application how do we run that in angular it's easy the command is just NG serve so the shorthand for that is NGS iPhone o and this will open up in localhost 4200 in the browser so let's see if everything is running or not can you see uh this is my H1 tag my gym registration app is running so I can say that my application is running successfully all right so now let's start our journey of this so what is first thing we have required right so first thing we need a header first from the top so for installing the header let's go in the Handler material okay let's click on the components okay so in the components we will be using something called as toolbar so let's copy this toolbar and I will be using probably this one this third one so first uh before using all all of this you have to go in the API let's copy this import go in the module and let's import this first mat toolbar module so this once you added here the import so you have to use them in the import array so I'll use them as matte toolbar module okay once you have added that but one thing to note here is so there is some icons as well in that toolbar so to use the icon you have to go again here scroll up and you will find something called as iPhone so again go in that icon API copy this go in your app module.ts file paste this here and again just down this say matte icon module import that in the input in the Imports array of app module let's save the changes save the changes both the places okay and now you can go ahead and like copy this what what I just showed right now the third one so let's click this and the third one is maybe this one so I can just copy from here to here copy this and let's go in your maybe app component.html yes here and you can paste it here that's written so let's save all the changes and let's see the compile is success let's see angular 15 correct yep can you see this is how it looks like so can you say this is not looking good uh so I know the reason because uh you have to also import button because these are the buttons of angular material so you have to go in the API and you have to import them as well so import the button module so again let's go in your project so let's see if this is um and 15 credit yep let's go here in the app module.ts and let's import okay we have added that and let's import them in the import array so it is matte button module okay so once this module is added we can save the changes so let me make this small so that you can see the code here this is added now if you go here can you see now it is looking better much better now so now let's remove the unnecessary things that we don't uh we require this icon on the right hand side and we don't require this icon so let's go in the code and remove uh what is not required so we don't need this and we can change it to H1 tag and we can just say the it is gym registration app okay this is the registration app and uh you can remove these two buttons as well or else you can just keep one button because one button will require but we require a raised button not icon button so it is matte raised button you can remove the classes which is not required and yeah that's it and you can change the color you can change the color to one so okay or you can change it because I need yellow color so let's see which is the yellow color for us so if I go let's save and check let's even check and this icon I have to remove I can just say it as view inquiries okay okay sorry we I know I can change it your inquiry I can save the changes yes that's the color what I wanted save the changes you can see I am able to get this button okay so now the issue with this is that oh so now we have a spacer your example spacer so there is a reason that we have this class so let's go here in the toolbar again and in the CSS you will find the CSS uh you will find something for that spacer so let's go in the CSS file and can you see this one just copy this and let's go in the app component dot CSS file and you can paste it there okay and save the changes so once you save the changes now you can see now we have the same header what I have showed in the demo the gym registration app and this view inquiry button okay so now we have to design the form for it so the form should come in the center of it so let's go ahead and just design that so for Designing the form we have something called as a component Creator which is create registration okay so now we cannot just go ahead and add the selector right because we have two three pages to show okay so in angular there is something called as if you want to load a component so we do it by using routing okay so because angular is all about creating single page application so let's go ahead and configure the routing for this component called as create registration okay so for configuring routing we have a file called as app routing dot module.ts so let's open this file and inside this routes array we can configure our routing so the first thing is we have to select path if the path is register so we can just say the component name which component I want to load I want to load the registration component I can say create registration component okay this one I have to load this component okay but if my path is blank okay if my path is blank if the path is empty we can say it should redirect to your register because this is the first component what I want to load and the pathway should be full okay it should pop exactly match the path then only it should take that okay so this is the feature of angular the path Match full a feature of actually routing so now we have these two configure so let's we can also configure the others as well for example we have the list right so we can just say path if the path is list so we have to load the component the component name is the list yes the registration list component so now let's go here and see can you see register is working here okay and now what we need to do is that let's go in the registration create registration and let's say here uh this is H1 let's make it as H1 so that we can see create registration works but it is it is not showing why because this has to be if you are configuring the routing right so you have to use router Outlet okay so this is your header section correct so just below that you should write your router Outlet once you have your router Outlet so now you can just go your can you see the create registration works so inside this below this header now you will see your router outlet has been visible if I change it to list so can you see registration list works okay so that's the benefit of using the router Outlet so where we are actually loading all our component inside this container router Outlet okay so let's proceed further and let's go ahead and design your register page okay all right so let's go ahead and design your create registration page so in the HTML so that we can remove this okay so first thing I need the logo of the company so I'll say div dot logo okay and whatever the text it should be it should be in the center okay and also guys just to save some time I will do some copy paste on my code snippet so that I can save some time and I can explain you guys okay so I will have my image and inside the image I will put my image inside that gym logo PNG so you can use any image what you want you can just take any image from online and you can just put it here so I have already created my image so I will be using that one okay and for to this image I'll give a width of 300 pixel okay that's it so that's how my image looks like okay so below this logo I want to display my registration form so I'll say div Dot registration form as my class okay and inside that I will take a margin so I'll say dot M3 margin 3 and I want to give padding so I'll say dot padding four can you see this is all coming from bootstrap that's why I have configured bootstrap so I'm giving margin of 3 and padding of four okay and this is my registration form for my CSS my class but just I have created and inside this div I will have my form okay so whatever form I will be creating the reactive form all those fields will be configured inside this this form okay form attribute all right it's not attribute form element okay so now inside that first thing I will be using is my div Dave dot row okay Dave bro and inside that I have something called as again I'll use this dot col md6 okay so I have divco md6 okay and again I'll copy this and again I'll paste it below okay so in this I will require a form right so to make use of that so I will be again going to angular material and there is something called as form Fields okay so first of all I'll go here and import this because I want to create a form like this right for example let me just show I want to create form like this so for that I'll just go here and import this so copy this and go inside your again appmodule.ts and mad form field again I need one more thing which is matte input so again I'll go in the API copy this matte input so that together I can write for both of them so as I've added these two so again I have to add them in the import settings so first one was mat input module ends matte form field module okay so both the models has been added let's save the changes and now let's go in the form field and check which inputs we can take okay so for example uh all right so I can take this one so this is what I wanted so I'll I'll just go here and copy the second one okay after copy let's go in the your registration.html and let's paste it here okay so this is Mac level so for our label it should be the first name first name of the user what we are going to take firstly then we have matte input we have placeholder we can just say here as first name and this is the just the icon if you want to use so you can put inside this icons and this is the hint so I don't require this in so I will remove this hint and this is the matte form field okay let's save this and let's go in the browser and see how it looks can you see now this is the form what I'm able to see okay so first but the thing is I also have the logo so let's for the logo I'll just copy paste it from one of my directory so yes I have added that already so if you go in my asset folder so I have this gym logo.png okay you can use any of your image what you want so you can just go ahead and do that and I have already added this in my URL as my source here so now if I go on the browser I can see that if I refresh this so I can I'm able to see the Fitness First it is written here okay and this is in Center there is a reason because I have used something called as tech center so that's why it is showing in the center of the page okay now let's see the next thing what I need to do is so here I see I have the first name added so I can just copy this again the form field and I can paste it in this deep cool md6 and this will be my last name last name okay and again this is fine fine and I'll save the changes again so as you can see I'm getting forms something like this which I am really not liking it because I want the width to be 100 right so what I can do I can just copy this form field okay go in the scss and you can just say that width should be hundred percent okay the form width should be hundred percent so can you see now it is 100 but again uh this is taking my whole Space so I want to make it in Center so what I can do is either I can create this div into a container okay this or else what I can do is I can directly go in my app come print.html this router Outlet I can just copy I can create a container of bootstrap and I can put inside that and I can also give a margin so if I save the changes right so you can see there is no margin on the top so I can just add here as margin top as four so can you say I'm getting a good space now and this is how I'm able to see the first name and last name okay all right so now again let's go in the registration so that's how the forms looks likes to me now okay okay so as you can see that two of my form is ready this is my first name and last name so let me just copy them and paste it just below because we are going to use the same okay so the next uh step is that once we have added your first name and last name so the third thing is we have to add is the email so we can just copy do that I'll just do some copy paste again so this is my email and again you can change this placeholder also to email okay and the next thing for us it should be the mobile number so let's again replace it with the mobile number okay and again okay this two mobile numbers save the changes so now again let's see the form so that's how our form is about to start now it is growing email mobile is done so now what is the next thing what we need is so once we have the mobile number we will go ahead and create the weight and the height so what we have just added right so we'll just copy I'll just copy paste it and just to show you just to explain you what I have did there so let's go back and Ctrl V so as you can see that I have this also ready I'll remove this for now okay so now here I have my weight again I'm using colon D6 appearance is outline I have my weight this is my weight and again just put here as matte hint if you want I can just put your matte hint okay can you see this one matte hint so inside that we can say that um unit is kg kgs okay we can say that unit test cases okay and for the V for the height again we can just copy this matte hint okay and we can just put uh below the icon or somewhere or just above the form field and we can see it as unit is meters let's save the changes and let's see on the browser how it looks can you see now we have the weight and height and again this is the icon so to change the icon what you can do is we have this matte icon right so inside that you can take any icons so again I am using this icon from font awesome so you can see this is far far text height and this is again and this one is I'm using from material so we have materials icons as well so to get that you can just search for it matte itel list okay so if you just go here so you can see the list of this this one matte icon list here you can see find a list of items for your this matte icon so you can just copy paste whatever you want to use so I'm using both of them I've been using font awesome as well as my title list okay so as that has been added so now we have weight as well let's see what what things we are so we have four things here or six things here is ready okay now after we have this so now we have we need the check box right so for the check box again let me just hide this for now so we have one two three four five six six field is ready again I'll say div dot coal md6 okay now I require uh this what we say that a text box or a radio box a radio button so why we required that because my question to that is like I want I can ask them like do you require training like you require trainer or something like those question I can ask so to get the radio buttons again I'll go here and there is definitely something here what we can find is okay so let's check for it where we can get the radio buttons which is the radio button so I want something in horizontal but before that let's again import this module if you don't import the module it will definitely throw errors so that again let's go in the app module.ts Ctrl V at Radio module again put in the array let's save the changes so now we can use matter of your module let's see some example uh yeah this one this one I can use so I will be using this one okay so let's go here and copy the code foreign again go in the registration.html and in the div you can just paste directly okay you can remove this all these things for now it's fine because once we will do the routing or sorry the configuration at that time we can uh not the outing I'm so sorry once we do the form valid form valuation then at that time we can do okay but for now uh we need two options right so what we can do is so the we have the matte radio group correct let me just go ahead and remove the unnecessary stuff we can remove this okay and there are some classes as well I can see so let's go here and copy the CSS let's copy the CSS and let's go paste here Ctrl V okay there are some errors so let's go ahead and solve them so I don't require mg model okay let's remove the NG model and here in term of season I can just remove and I can just say here yes or no I can say yes comma now because we have only two options right either he can say yes a trainer is required or no the trainer is not required and I can just say remove this as trainer opt the trainer options okay it's pretty that's it and this trailer opt we can just display so let's copy this trainer opt and let's paste it here Ctrl V let me make this small so that uh you can just have a look to the code okay like this so can you see now we have this matte radio button and here it's asking for the value again this value should be trainer upt so copy this and paste it here okay so you can pause this video again and you can just have a look like what I have did here so I have a name of cool md6 I had a label like here this I can change and I can change it to do you require trainer and now you can select two option either yes or no so this is the trailer options which will be visible as a matte radio button whatever option you selects that should be visible here so we can just change it to selected option is yes like whatever he select so we will fill this value later part of the video when we do the forms like reactive form okay so this is also ready okay this is also ready so what is the next thing I have to do okay so the next thing is actually completely similar to it okay because once we ask for the trainer is required right so next thing we'll say that we have to select the package so first of all let's save the changes and see how it looks can you see so now this is something like it is looking like do you require trainer and all those questions okay so now let's see how I can change them okay so the next thing is I can again copy paste because the next one is completely similar to this so copy and paste it down and the next thing is that the gender so I think I forgot the gender so let's rename it to gender and the radio options we can just remove from yesterday to male or female that's it right Jimmy okay two options and this we can change as uh gender and again we can copy this and paste it here for the value and paste it here for the options and we can say selected gender is whatever the value we will put so let's save the changes and again let's see on the browser so now we have two things do you require trainer yes or no and the gender male or female so whatever we'll select we can just display it here okay so I think I require some padding here or some some margin on the top so what I can do is I can just go here for these two mts3 which is margin top S3 and again for this mts3 let's save the changes and see so now we have some good gap for these two options okay all right so now this is also ready so now we required two more things and that is your um about the selection option okay so so that we can select the package correct so let me go ahead and let's see what we can use in this angular material so we have the select option so because we have to select a package right so again I can just take this basic select so let's go here and copy the code mat form field copy this and just below this I can say div dot coal md6 and inside that I can paste this now you will see there is an error so I did this intentionally actually so that's what happened if you just directly copy paste so to use this module first we have to import right so let's go in the API we have to use the select module so copy this go in the app module.ts Ctrl V so this is we need to add in the input array so matte select module okay press comma so now if you added that so now the error is gone for the matte select correct the only thing is this one okay so this we can change right so we have different different packages so we can create uh some package so let's go in the TS file and in the TS file we can we have to create packages so how can we create that again it's easy so we'll just say public packages equals to we can just add an array like this so we have monthly option correct we have a quarterly quarterly option and we also have yearly option okay so we have the list of packages okay same thing you can do for gender also guys so for example what I have just added directly there so you can say genders is equals to mail okay so whatever the option what I did on the UI right so again you can just copy this and can you see I added somewhere in the gender like this so you can just remove this and replace it with this one so they both are same they both are safe okay so same thing I have to replace this foods with the packages correct so let me copy the packages and paste it here okay so this should be packages and let package off package of packages and now we can copy this and paste it here for the value and I can also remove this and directly paste for the band so now I will get the list of packages which I can select yes or like a monthly quarterly or what do you say that uh yearly three options monthly quarterly and yet yeah three options sorry all right so this has also been added okay so now what is okay let's see how it actually looks so now this is the option now the which is we have right now but I don't I think we need some space on the top and also this is not looking good and this is uh because of this appearance so appearance fill has to be replaced with outline so because you are using outline and here we have to give margin top of 4 pixels so let's save the mt4 so not four pixel and margin top four this is something uh 10 or 12 pixel I'm not sure but we can check you can check that on bootstrap documentation so we just add mt4 and now I have a good space and this is how it looks correct monthly quarterly but this I need to change right the label so you can change it from here select package okay select package all right so now after this let's see the next one what we have to do so for the next one what I can do is I can just directly copy paste this I'll tell you what is the difference uh in this one because this one is a single select but uh the one which I I'm doing it now it is a multiple select so let's first create the label the label is that uh which of the following is important for you okay so we can ask this kind of question right to the one who is doing the gym inquiry like what motivates you like there are some multiple options he can select correct so here you can see that we have matte select here so only thing you have to do is you just have to change it to multiple that's it okay and now what uh just by choosing multiple it will not do our job so we have to change his packages as well correct if I save the changes so now it is showing packages with a single selection but here it is showing the multiple selection correct but we have to change the option so let's go ahead and change the options here so for that again it's easy we just have to create a property here property as a public property and I can give important list whatever they have of type string and like this okay I'm just trying to show everything how you guys so for this also you can add this if you don't add typescript is smart enough to take that type automatically but you can Define the type as well so that's why I'm giving both the examples this is also valid and this is also valid but it is always a good practice if you follow this like if you are adding this right so it is always good like you're defining your type but if you don't Define it you can directly put the value still the typescript will understand like what is the type what you are actually by actually seeing your data okay so this is the important list which I have to fill so what I will do is I'll just directly go and copy it from my snippet code snippet so I have it already ready so let's paste it here so this is the options what it should be visible on the UI so again if you want to use the same you can copy you can pause the video and you can just copy this so now you get different different options okay so it is not saved why because you did the changes in TS but you haven't updated that in the HTML okay so this is has to be changed with important list okay and this should be important and then again this will throw errors so you can copy and you can paste it here for value and paste it here for package okay so in this way you have successfully completed this field as well let's save the changes and see how it looks wow so this is like this now we are slowing slowly we are approaching there what we wanted to create okay all right so this is done so now the last two things we require is the last one was if I don't if I recall properly it was a radio button and this one was a date picker okay and those two are very important let's see let's go ahead and create that okay so the the last two was what I told right uh the first one is a radio so let's go and see where we have the radio option already so yes this is the radio option so I can just copy this directly this div uh copy this and we have to paste this below colon D6 so just below this I have pasted where this cool md6 ends I can remove this empty I don't require the margin top and this should be uh asking have you have been gym before okay and again you can answer only two things right either yes or no so I can create it directly from here either yes or you can just say no correct easy all right so but this you have you you should change right so we can just change it to bin Gene I'm just asking right which is binji and I can just change it again to copy and paste in the value this should match right and again to display it should change okay let's see if the changes all right so now this is also done if you just see here have been doing before I can say yes or no but this I should change the label so I can change it to selected option selected option option is okay this should be caps fine so now let's copy paste again this last call md6 or else let's go here and say div dot coal md6 and inside this we need a date picker so again let's go here and let's see the very studied picker here this is the one again you know the steps right now you know the grill what I am already doing since so long so we just have to import first copy import it so sorry copied and let's go in the app module.ts paste it okay and now let's go down here and say matte date picker module okay so whenever you are using date picker module one thing to always note that which I have always encountered you have to import one more module that is matte native date module so matte native date module you should also add this as well again if you go on the top this is also imported from angular material slash core so this is the date picker and this is the matte native date so whenever you are using date picker you should always import this module as well okay so please remember these two model has to be added to use date picker now let's go in the overview and we can use this basic date picker so let's see in the code and you can directly copy this map form field and now let's go in your create registration.html and you can paste it here okay so you can just click choose date and this appearance should be again outlined okay this is the date picker toggle picker let's save and check let's see how it looks as I can say it throws an error because I haven't saved the changes save the module so that's why let's save all the changes and now there is no error and now you can just see that how it looks can you see now we have this choose option and here we can choose the date correct so now we can choose the date as well so we can just say here choose a date to inquiry date so let's remove that and we can just change it to inquiry date okay let's see if the changes and in this way we have successfully created our form so our form HTML is ready correct the template is completely ready okay so now what we need to do is we have to create a reactive form to bind all the values correct so but once our form is ready we can click on submit button to like close the form right okay so let me just show you again what all things we have added right so that no one should miss any steps so in this way we have actually added everything in this row all the cool md6 so I'm just opening one by one so that if anyone missed it we can just add it right away so this is dip for first name well below that we have to write last name then we have to write the email then we have to write the mobile then the weight height then we have the the radio options that's how you use radio buttons then we have the gender options choose the gender and then we have to add it the select package like select for selecting the package mat select and this is the matte select with multiple options then again we have a radio button to check if he has been to gym and the last and important one was using a date picker and that's how we have completed the form okay so this is the step number four which was creating the form I will start with step number five which is creating the reactive form okay so to create the reactive form so let's see the steps to do that so first of all we need to have a form group so let's create the form register form and this should be coming from form group you can import this on the top you see in the top it is imported okay and next thing we require is the Constructor to inject the form Builder okay so we required Constructor to inject the form Builder so again let's create a private field FP form Builder and you can see it is auto imported on the top can I see form Builder and form group so these two has been added now I will also require NG on init to initialize my phone so I'll just say implement on init so let's go ahead and implement it quick fix Implement so we required NG On in It to initialize our form so our form name is this dot register form is equals to this Dot form Builder dot group so we are grouping our form okay so what all fields we have so we have first name last name and also so what I can do is to save some again some time I can directly go ahead and copy paste from my code sample so it will be easy for me to save some time and to explain you the code okay so can you see uh so this is a registration form so let me just change the name register form and I have all the fields added okay so one thing to note that we are not doing validation in this in this video but if you really want that notion can you do validation for us so just put that in the comment section so that I will note it and I will definitely create the validation for this video in future okay so that's how I have initialized all my forms so we have first name last name email mobile wait height whatever the field what you see here right what we have created as an HTML so all of them has been created in the TS as well so we have just uh what we say that initialized our form okay so once this is done so you have to go in your HTML and in the form you have to call form group okay and this form group you have to give the name so what name you should give you should note that always give the form what you have initialized right so for example I have initialized the form as a register form so you can just copy this and just paste it here okay and now it is still throwing error because we are using reactive form right and to use reactive form you should go in your app module and import this reactive form module so say reactive form module okay so once you have the reactive form module now you can easily use the form group can you see no errors now okay so now once you have this thing done right so now we have to bind all this form control correct with the HTML input so what you need to do is on every input you have to call form control name okay and then you have to say the name as so for first name it is first the firest and am meaning so one thing to note that this all Fields should match okay if you change this name right then your binding will not work and I have seen lot of people complaining me in the comment section that my form is not binding so this is the main reason actually so I did for first name similarly I have to do for all the fields okay all right so as you can see I have added all the form controls for all the fields what I have created in this HTML okay and all of them are matching this thing all right so now once that is done let's save all the changes okay and now what we can do is we can create a button a submit button so let's go here down somewhere here cool md6 and just above the form right so we can see this this is the div for our form row right so just below this div you have to create a button called as submit so let's clear the button and the button name is submit okay submit and now what you can do is you can just skip the name as a attribute as matte released button okay and the color should be yellow which is accent for us what we have did the customization okay now let's see how it looks like so the UI will be almost similar so just we can give some margin here if you want we can add that so for that let's go and do that so I'll just add a class here class as margin top of 4 and save the changes and now if you see there will be a good uh yeah space so now this is the submit button okay so once you click on submit so this form should get submit correct so let's go ahead and create that okay so on click of submit on click we will submit the form submit and this method is not created so it is throwing error so let's go down and create the method submit okay so what we will do is if so whenever there is a submit is Click we can just check if all our form is getting binded or not so we are doing console.cloud so we'll say register form dot value okay we will check the value if on click on submit I can see all the values or not okay let's save the changes and now let's go ahead and try to test it so I'll just put some name like some weight some height yes no select a package select some more options then select the gym before select an inquiry date and now let me open up my console okay if I scroll down let's go in the console if I click on submit right so one thing to note that I can just see all log all the values correct and you want to log all the evidence only the two thing is not correct is BMI result and BMI okay so let's see why why is that case Okay so because I think I haven't added those two field that is the reason so I have to add those two field as well and that is just below these two okay I think I have missed that two Fields so let's go ahead and add them all right so to add that so I will be adding them just below the height so this is the height right so let me just paste the value okay so can you see I just added these two lines so you can just also add at your end so just below this uh height where it ends with this column B6 I have added one more cool Android 6 for BMI and this has an input okay the label is BMI this input is read only the type is number the form control name is BMI and the placeholder is BMI and this is matte input okay and I'm using a matte icon and for that icon I have this a far far sort number descending and this is what the icon I'm using okay so this is my uh BMI and just below that I have a BMI result okay so this is my goal md6 math outline my label is BMI result the input is again read only I have a form control name this result and suffix and in that I am using in my mad icon I'm using this check okay so once this is added save the changes and now you can see two more extra Fields added here okay now it's easy now again if you want to check you can fill in all the details to check if everything is working or not I'll just put some random uh values for now wait I can put in this I can put this values I can just now this is a read only that's why it's not able to pull this also read only it's not able to fill I can fill in all these values again okay yes and again I can put a date okay and now if I again console.log it should give me the value okay let's click on submit and in the console I can see the values okay still this is empty because I'll give you the reason because these two fields are read only this field is read only this only can read record you cannot type anything okay so these two fields are read only this value will be filled based on these two value which is weight and height because we will be calculating a BMI number and this BMI number will fill this BMI result okay based on that number okay so let's go ahead and do this logic all right so now let's go here and create that logic in the TS file okay so for that to create that so we will create a method called as calculate BMI okay so let's create a method calculate BMI okay so now what this guy will do right so this guy will take the value of your height okay so it will take the height value height value and based on that value this will do some calculation okay so first let's check the weight so so how we can take this weight so let's go and do that so we have this Dot registration form dot value dot height okay not right this height I'm just taking from the form okay and then the next thing I want to take the height so I'll say const height is equals to your height value what I will be getting okay so once we have these two so we can create the BMI how we can do that we can say const BMI is equals to the formula for BMI is weight divide by height Square so we say height into height so that's how we get the number that BMI number and based on this number so we have to patch the value right we have to fill this value based once I put the height value correct so that I can do by saying that let us say this dot register form dot controls okay controls and in that which control I want to use I want to use the BMI and I say dot dot patch value okay dot patch value what value I want to patch which is I'm getting right the BMI which I am getting so this way that this value will get patched automatically so we don't have to type in here because this is read only field okay so once this has been added right so what you can do is so now based on this value I want to set this result value okay so let's try to do that just below it so we create a switch case we create a switch case okay and I want to switch the True Value okay so what is the case my case will be if my BMI value is less than 18.5 okay if my bar like my body mass index is less than 18.5 then I want to set a value called as this dot register form dot controls controls inside that I want to set the BMI result this value I want to set so I'll say dot patch value what value I want to patch if it is less than 18 then you are underweight okay then you are under width all right so based on this I will create some other cases so let me copy this case okay let me paste it here Circle third so what is my second case let me just open up like this okay all right if my BMI my BMI is greater than equal to 18.5 and if my BMI is less than 25 then what I want to say you are a normal build so I can say normal okay it's a normal weight okay but if I have one more case so this case is something different so now in this if the BMI is greater than equal to 25 and if my BMI is less than 30 okay if it is less than 30 if this is the case so what I can do I can just say it as you are overweight all right or else I can just patch one default value as if nothing is matching the case right then it is oops so okay if no my value is matching then you are like this this way so let's say the changes okay so when this calculate will get triggered so for example once I am able to type the height right so see if you see the reason right uh once I have a weight right 12 then only I can type this if I if the user have not written the weight like 56 Then I then only I can able to type suppose this weight is blank and I'm just trying to type height here so this should not be allowed first we have to type rate then only I can type height so to do this thing what I need to do is I have to stop the user correct so how can I do that how can I do that so what I'll do here is so here I have a weight right let me just open up that so this I want to stop so I have something called as field read only field okay and this read only what I can say that if the value is blank okay if my value is blank then only I can open that like for example if this dot register I'll just show this dot register form dot value dot weight if there is no way then it should be read only okay if there is no weight then it should be read only then I should not be able to type now if I save the changes if I go here if I am trying to type right see I mean I'm not able to do anything but once I put your weight as 45 kg and then if I see now I'm able to type so this is what I want to do this is what I want to perform and now whenever I put this height value then it should calculate BMI and the BMI result okay so let's see that how we can achieve that so to achieve that let's go in your TS file and let's go in here NG on Mid okay so just below this we can say this dot register form dot controls okay so we have to control we have to get this control called as height okay so with this height so whenever the value is changing right so we we are getting an observable so there is something called as value changes okay this value changes we can subscribe to it okay and once we subscribe it gets a response gives a response and that response will be your height value so we can say this dot calculate BMI and this expects a height value right so this height value we can pass it inside that as a response okay so this will call your method and this response will will have nothing but your value of this height and based on this height value this will calculate your BMI and the result okay so let's save the changes and see how it actually works okay you get the step five so step six is that we have to create the API service to do the crude operation okay so to do the API service that so as we are not using any actual backend here so we will be using Json server to create that fake uh backend for us okay so to use Json server what you need to do is first open up your terminal so if you haven't installed Json server yet so to do that the step is npm install npmi hyphen g means Global and then you have to say Json hyphen server okay so once you have installed this after that you have to run the Json server so after the installation you have to say Json server hyphen hyphen watch db.json okay so this will create a db.json file in your directory so let's hit enter okay so now it is creating your db.json file and it says that this is running on your Port so let's go on this port and check if this is correct all right so here you can see that this this is running on this port and this this is what the value is looks like so what we can do here we have to remove everything from here so let's go in the db.json file and you have to remove everything from here and then here you have to create register or you can say inquiry list you can say inquiry inquiry and then inside that this can be an empty array okay let's see if the changes and now if you go on this website and you see you are getting this inquiry as a single if you refresh there is nothing post so if you go back can you see there is only one inquiry object which is empty correct so we will be using this port to send all our requests okay the post update delete everything will be here all right so now once this is ready right so we have to use this URL as I have told so let's go and check that again so the URL was local it was 3000 slash inquiry okay so let me just show you again so let's copy this because this is going to be our base URL which we will be using okay now as you know that we have created a service folder here so inside this we have to create a service so let's generate a service so the service name is API okay so there is two ways to create this you can either create by NG GS and create the service name so we don't require spec file as we are not doing any testing so we can delete the spec file and now let's go in the API survey.ts so inside this let's create the base URL we can say private base URL of type string and we can just skip the value to this okay the local was three thousand slash inquiry okay and to do the API calling guys we have to first inject the HTTP client HTTP client okay so this we have this HTTP client and to do use the HTTP client so we require something called as HTTP client module so let's go in your app module and you have to import HTTP client module okay so once this is imported then now you can say that you can do API calling easily so Now API calling will be working okay so let's go ahead and create few Services okay so again to save some time I will be directly taking it from my code snippet and I can explain you that code it is very easy to understand okay this is all R1 liners so let me copy that and paste it here so as you can see that uh now this is throwing error so we can fix that that's fine okay so as you can see that uh this is what the four method we will be creating so let's go ahead and first fix this issue okay and then we will see this code so we need to create a user object okay a user model so as you know that we have a model created already so let's go ahead and create a user model so to create a model we can just say directly here as let's create a new file like this inside the models and say user dot model dot TS okay inside that we can say export class user okay and now this user will have all the fields the object right the alt object it will be storing so again let me just uh take it from the code snippet and paste it here okay so this user class will consist of all your form fields which is first name last name email mobile weight height BMI BMI result gender required trainer package important which is a array of string you can say list of string or area of string I have seen before inquiry date and the ID okay so this all you have to store right so that's why we created this class okay so once we have this class we have to import that in the service so let's hover on this Quick Fix and import okay so in this way our API service file is also ready so this is our API service file uh the name is API service so we have the base URL we have injected the HTTP client and now we have our four method five method created which is first one is post registration like post we are we are doing a post call right whenever you create a request right so we are posting the request and then we said this dot http.post what kind of value you want to post with that is of type user uh this will what it will return in back it will return a user again and we are using the base URL to and we are sending this object to this URL so that's how you do a post okay and then we are doing a get registered user so whatever we have registered right so we can get it by this API call so this dot http.get it gets you the list of users with this on this URL which is this okay and then we have update registered user so we are sending an ID which ID of user we want to updates and we are sending the object inside that so that's how you do for deleting again it's easy we are just sending the ID and this ID we can directly say http.delete this user we have to delete and then it does the delete job and then we have to say get registered user by ID correct so we want to get a single user okay from the list so I will be showing all of them in Practical so once we will be creating the table and stuff right at that time I will show you this how these methods are returning what are what all things so for now let's save all the changes okay then so to use the first API service so we will be first doing the post call okay so post call will be done in create registration component so here you can see we have a submit button right so we can remove this for now and once user click on submit we have to do a post call all right so to do a postcode it's quite easy we just have to do the API call what we have just uh created right now so let's go ahead to use the API service so we have to just inject that in the Constructor we say API an API service okay and now we can do the API call inside this okay so to do the API call we say this dot API dot a post registration okay and inside that we have to pass the register register form value so we can say register form dot value okay and we can say dot subscribe all right so in the Subscribe we get a response success response so that we can just use it here okay so what I will do is if my user is added successfully so as you know that we are using NG toast module correct so we have used this NG toaster module so what we will do is we will try to use the toaster so to use the toaster again you have to inject that in the Constructor by saying toast service okay this NG toast service so that's how you have to inject this private NG toast and if you see all of them are getting Auto imported from the top so this is imported from NG angular pop-up okay and now here what you will do is so we'll just say this dot toast service dot success I want to show the success response inside that that's how we configure the message right so first thing we have to say the detail we can input the detail as success right okay success success or else you can just change it yep success so what else you can do let me just fix this first yeah success and then we have summary here summary we can say that user added successfully like or we can say inquiry added okay and then we have a duration so durations that's why I put you can put here as a three second or five seconds based on your so I'm using 3000 millisecond which is a key value into three seconds okay and once this is been shown what we can do is the form has been submit we can say this dotregisterform dot reset the value so we can reset the form completely after the submitting so let's save the changes and let's do the API call for post okay so let's go here in the angular Cloud let me just refresh this so that uh I should uh I should don't have any value here so let's go back yeah let's go in the register and let's try to do some add some new values John do uh email we can just say John at the rate gmail.com mobile number we can give some random weight we can give for him 67 we will have a height of 1.6 so his BMI is 26 and he's overweight yes yes we can choose a package we can choose some motivation same before yes we can choose the inquiry date as current date and we can click on submit okay so once I click on submit right uh it was not showing anything here no toaster message but if you go here in the inquiry on this URL if I refresh this can you see John got added John got added with an id2 but white was not showing do you know the reason because the reason is that we have we have added the service and everything but we haven't used the selector so you need to go here and just add the selector called as the router sorry not the router sorry this is lib NG toast so you need to add the slip NG toast and same thing you have to do for NG confirm so for NG confirm also you need to add these two selector in the app component.html okay so once you have added successfully and now if you try to do it again so I'll just put some random data okay let's put some random data okay okay and now if I click on submit can you see inquiry added and I got a success success and inquiry got added so that's all now if you refresh this can you see you got the third inquiry with the name some random name okay so in this way your post is working okay and now you have to make use of get okay so how you can go to that uh list right so currently you can do it by this if you hit enter so now you're coming on registration lit list but what we need to do is so whenever I click on this guy I should go on this page okay so let's try to do that so for that let's go in the app component dot HTML and here you have this button so here you can make use of router link and you can just say slash list okay save the changes and now if you click on view inquiries see you are able to go on this round so that's how you do the routing so now I'm able to do the routing View okay so on registration list you have to use table right material table so let's go ahead and see how we can configure table so for here what you need to do is so I'll just go ahead and just try to use my code snippet rather than using the angular material but the few important steps that we have to do hollow anyhow which is importing the module so first we have to import the mat tab module in this okay so here we have already imported Mac table module and once you add it here you have to also include it in the array Imports array okay so once that has been added right so you have to search for the example of your table which we are using so I'm using the one with all the features yeah this one with the feature of sorting filtering and everything so what you can do is you can just directly go ahead and copy paste uh from or you can just take it from my code snippet which I will be using okay so let's go in the registration list and again remove all of this and paste This Record okay so if you see that I am using this matte table so if you want to use the same right so what you can do is so you can just go here and click on this view code you can copy all this code and paste it here okay so currently it is throwing error for mat paginator and match sort and for sure so to remove those errors you have to go here in matte paginator or paginator yeah this one and you have to import this API so copy this and let's go in your app module and let's press next and paste it here and same you have to do for sorting so there is a sort header go in the API copy this go in your app Dot model.ts and paste it below and again you need to import these two in the array so matte page generator imported and then mat sort table sorry site model it's matte sort module it's incorrect so matte sort well yeah this one the second one okay let's save the changes okay and now you see that the error just went off the matte position error went off okay now let's see about this displayed column and all those let's try to fix them one by one okay so as we are using those paginator so what we have to do is we have to call them here okay so let's call them one by one okay so we have to import these three things from angular material so Mac table data source again coming from this match sort coming from your and matte paginator okay so once we have added them so now we have to create our data source so let's go ahead and create your data source so how you can do that you can just say public data source or else you can directly go and copy paste so let's copy this data source and let's paste it here okay and this data source is nothing but coming from matte data source okay what this is what you just imported math table data so sorry and inside that you just need to provide the type and the type will be user what we have created okay that's it and just below that uh I want to create one more column uh not the column one more property called as users where I will store all my user list so I'll just say users and this is my list so this is like that okay so these two has been done and now I have to click create all the display column okay so I have to create all the display column to fix this issue so let's copy this and let's go here and paste this displayed column and again this is an string array of string and what I can do is I can just directly copy paste like whatever columns I want to add right so this I put inside this so this display column is nothing but what columns I want to display on display ID first name last name email mobile PMI result gender package inquiry date and action okay so this all I have to display again why I am taking this because I am just trying to follow the documentation of what angular material provides if you go in the mat table again if you go in the examples if you go in the last one what we are trying to use okay this one so they have did the almost the same thing like if they want to display the table right table data source that's how they are doing can you see the data source is this and the display column is this because they have one two three four columns correct if I just show you the the code after below this so they have four columns so that's why they are having displayed column S4 but for us this is what we need to display correct so that's what we did all right so once this has been added display column so now what you can do is you can just directly go and initialize the paginators okay so I'll do is above this so we have two things so we are using view child okay let's use view child and make use of matte pill generator inside that okay so this will be my paginator and this is of type matte paginator okay all right and now next will be again for sorting so again we say add the red view child [Music] we have match sort all right and then we say sort colon and say math sort okay that's it so once this has been added now we have to create our first method whose name is get the users so for that getting the users we have to use API calls so let's create the Constructor and as you know that we have already created the API service so let's go here let's say private API and then say API service okay and now we create the method called as get users and inside this we will be doing the API call okay so how we'll do it so we'll say this dot API dot get user registered user and we can just subscribe them okay and we can score them if you want in the users is equals to response and what we can do next right we can just initialize the data source and the paginator so we say this dot data source will be equals to your new matte table data source okay and inside that we can just pass the users okay so data source has been initialized and then we have to say this dot data source dot the PG meter so we can just give the paginator instance what we have created and now down we can say this dot data source dot sort so you can just send this this dot sort to it that's it and once you complete this thing like now your API call is doing uh going to take all the list of users but this will not work right because we have to use them inside your NG on init lifecycle hook so let's create the On in It implement the on init Quick Fix yes so now inside this we'll just go and say this dot get users that's it okay but there is still one error to fix as you can see it is showing apply filter so what we can do is so if you go in the TS file if you go in the TS file so that is for filtering actually so that is just mentioned somewhere here control F let's see the filtering yeah this one so if you go in the TS file there is a method they have created again it is coming from the angular team so we can copy this method apply filter and let's paste just below this and that's it all the errors are solved okay but do you think this will work the answer is no So currently you have just configured on the TS side you have to do all of them here on the on the HTML side as well okay so for HTML what you need to do is so you have everything done almost so all you need to do is you just need to change all these columns so I'll do it for one and rest maybe you can try so for ID it is fine this is row dot ID second column is first name so we I can change it to for the comment first name column and this column definition should change to first name so this name and this should match then it will display and this row dot this should match with the API first name which means this is what I am saying if you just see your right the API name first name last name email so this all should match with this row so in this way we have successfully done for one column in the similar way we have to do for rest of the columns and what are those those are last name email mobile and all of this so for me I will not be doing for all I'll just do some uh take it from my code snippet all right so now I'm just trying to paste all the necessary values so you can see now I have all of them created so this is my ID this is my first name my last name so I changed this and this this is my email this is my mobile PMI result gender package inquiry date and I'm using a pipe here as well for inquiry date as a date pipe okay you can have a look here and then in the last the I need one more I need one more call and one more column so I'll just copy this and paste it here and this name would be action column action column okay so let's change this to action what does Action column has it has three buttons so I can remove all this data and in the data in the TD sorry in the PD we will have three button button one which says that view so we have button two which says um edit and we have last one the button as delete but then as delete if I save the changes okay I have saved the changes and if I go on the browser and I can see if I refresh it right so it is throwing somewhere let's see what is the error and we can try to fix them so it is saying that uh the duplicate entity was provided for inquiry date okay so the problem here is that uh I did the copy paste right and because of that this issue came if I scroll up right so we have two times inquiry date and I told you that this should match with this so the the name is action and I have put here as inquiry date so that's why it is not matching so just do Ctrl V here so now action matches save the changes and let's go on the browser so can you see now we are able to display the filter and as well as we are able to display this table if I just show you the filter is working or not I can just search for my name can you see it is working is working okay let's remove this let's remove this percentage unnecessary percentage so let's go on the top and remove this percentage let's see if the changes okay all right now we have to design this three button right so to design this three button again we can what we can do is uh we just have to use material again so we will be using matte matte icon button icon button okay matte again button and we can choose a color as well so we can just say color as green I want to give it as a green color so for green color what I have right so I have something called as one okay same thing I can do for rest of the two so I can copy them these are my icons button so Ctrl V Ctrl B so this color I want to change it to Yellow which is accent and this one should be my primary if I save them now if I show you so now that's how they looks okay but I need icons not the exact exact text so it's easy anyhow for I right so we have Fafa ice so we can take it from there so let's go here and copy this okay so for view we have this icon this is I we can remove this it's not required the glass is Fafa ice save it and see the changes I has been added okay for edit it is a pencil so again I can copy this and paste it for edit I'll just change it to Far Far pencil okay for delete again I'll paste this icon and I'll say far forward trash if I save all the changes I can see we have view edit and delete items created okay so currently we have did two things we are able to add the add the inquiry and we are able to view the inquiry list of inquiries okay so now we have to do that edit and delete okay so once I click on edit right so it should go on this page and it should fill all the details okay so let's see how we can do that so to do that we have to first do the routing okay to do the routing we have something called as router link okay we have router link and here what we can do is we can have this array we can just say here that you should go on detail page okay and you can pass the ID for which ID you want to go okay so currently we don't have detail route created so let's go in your app routing and create that okay so here we can create the path as detail okay and but here one thing to note that I am routing by an ID as well so I will also pass an ID after slash okay and then once whenever I'm going on this I have to open up my new component called as user detail user detail component okay so this is for checking the detail page same thing I have to do for update okay for update what I'll do I'll say path space update slash ID so which ID I want to update so what component I want to load I want to load the component name as create registration create registration I want to open the same component but for this component I want to fill the record okay so once that has been added so once I click on this guy I should go on that page all right so let's go in the list page again and I have to do for the edit first so I'll go here and I say click so once I say that so I want to pass row.id okay so this method is not created so let's create this method called as edit okay let's create this below edit and inside that I have an ID which I am passing from the HTML is of type number so what I can do is I can do the routing from here so to do the routing I have to inject something called as router so private router routes okay and now what I can say is I can say this Dot this dot router dot navigate okay navigate where where I want to navigate I want to go to update page with an ID called as this okay this is what it will go it will route you to the edit page like your update and update is showing what so this is the route update slash ID so this ID will pass if I save the changes right if I save the changes so if I click on edit so can you see I'm going on this page can you see the route update slash one so this is the first one if I go back again if I do for the second the ID is 2. if I do for the third the ID is three okay but the thing is whenever I click on edit button right I want to fill all the details okay so let's see how we can do that okay so to do that what we can do is let's go with the create registration.ts file and inside that as you can see right I am having this ID value here so we can get this param value inside uh this NG animate so let's see how we can do that so here in this Constructor I will be injecting something very interesting which is activated route okay activated route and let's Auto if you click here it will Auto Import on the top okay so I can show you it is auto imported from angular slash router so this activated route will help me to get my value of user ID which I want to update okay so let's create a property called as public user ID to update this is of type number okay I created a property where I will store the ID of the user which I have to update okay and I'll go inside this Constructor oh sorry NG on in it and I'll say this Dot this dot activated route Dot activated route okay dot parents okay parents dot subscribe I can subscribe this value and inside this I have a value this value will hold my id id value so now what again I can say this dot user ID to update will be equals to your value what was that ID looks like like this so inside this I will extract that ID which is this 2. okay inside the user ID to update okay so once I have this right once I have this ID to update don't you think I can call this API which is get user by ID and from this value I can patch all the values of the form correct so this is what I am going to do now so let's go ahead and create one more method and the method name is register okay or else I can directly call inside this API itself so for example I'll say this dot API service dot get user register user by ID okay and inside that I can pass this dot user ID to update okay and I can say dot subscribe all right so in that I can say response okay so what I can do is with this response what I can do right I can just fill the value correct fill the form value correct so I will create a method called as fill form fill form to update okay and this guy will expect a value correct this guy will expect a user value which is coming from the response so I'll say user uses of type user correct fill form to update so this method I will be calling inside this so I'll say this Dot fill form to update and I'll pass the response and this response is of type what user correct so that's what I do so that's what I did here so fill form to update is of type user and now this method will film fill the user form how can I do that it's easy I'll say this dot register user register form dot set value okay we have set value and inside the set value you can just set all the fields for example you have first name right so let's how you do so first name you can say colon I can say user DOT first name okay in the same way you have to do for all the fields like from first name till whatever things we are using so it should be comma and Ctrl V okay so for us so I just copied it from my snippet so here you can see I have ordered for all the fields first last first name gender and everything whatever it was in the form and I save the changes okay so one thing to note right so what happens right in the NG on in it I called this activated route I got that ID I call the get user ID by user ID and that it has the response of user which I am sending it to fill the value of the form okay so now if you go here right if I try to click on edit so now I'm able to see all my form value got set and who is doing this to do that this guy is doing this fill form to update is helping me to set all my values okay but one thing to note right so whenever I'm clicking on edit so this should not be submit this should change to update okay so let's see how we can do that so to do the update right so again we have to create a a property and this property will be nothing but will hold right update is active or not so I'll say that public is update active piece of pipe Boolean and the current value will be false okay let's change this yeah update so what happens so whenever I am in this method right whenever I am in this method will form to update so what I can do do it right so if I am coming inside this subscribe value which means I want to activate that so I'll say this dot update update the active equals to true okay correct so this we can do if I save this right so now if you go on this page if I refresh this page right so this should this this will activate the update okay and based on that I have to create one more button below so I'll just copy the submit one and just below this I'll have one more button whose name will be update now and this update will not do submit it will do update okay so this is throwing error because we have to create it on PS so let's go here just below submit we can create the update okay nowhere else anymore and now we here you have to use the Boolean so we have n g if okay and G if the expression what is the expression we are using so is update active if the update is active not active Boolean so I have to show submit but if the update is active then I have to show the update button so Ctrl V so we can remove this negation okay so this is the logic for hide and show so let's save this changes and now if I go here can you see I am on the update and I can see the update method if I go back if I click on registration so I am able to see submit button can you see if you say V inquiry if I click on edit again update all right so now this is also done so once I click on edit I'm able to come on this page but I want to update some value right so for example I want to change this from quarterly to monthly and I once I click on update so I want to do that so let's see how we can achieve it so to do that again we have created a method right called as update so in this update we are going to do the API calling so for that I'll again copy the same method what I did for submit because it is almost same but the one thing to note here is that it is update registered user okay and this will send the value but this time I have to send also one more thing which is user ID can you see the user ID so you have to send the object as well as a user ID which I want to update so I have already created it in this dot user ID to update so this holds that ID which I want to update correct and I can just change it to inquiry updated if it is success okay and we will reset the form and what we will do is we will again go back again we'll go back to the first page the list page so to go back on the list page uh we have to use the routing correct routing so let me just remove all like made this on next next line yeah so I'll just say private router okay and now what I can do is I can just use this router to go on the page so I'll say router dot navigate okay I have to navigate to which page I want to navigate to the list page okay the spelling is incorrect list if it is update the success so let's save the changes and now let's go here let's refresh this and now I want to change it to monthly and I click on update can we say inquiry updated and the package has also been changed to monthly for Shashi if I change it or if I change the surname now okay the correct one so if I click on update so update is success and I see my surname got changed so in this way we have successfully done for get all user okay edit the user okay so those two has been done now we have to do for delete and for delete is the easiest one I have ever seen delete is the easiest one so let's go in the registration list and we have to click here make the delete delete okay so again we'll do the API because we'll say this dot API dot delete register user okay and delete we have to pass an ID who will pass this ID this ID will be passed from the HTML so let's go here so as you know that we have created this button right delete trash button so we can just say click and delete and we can pass the ID which we want to delete so we can say row dot ID okay and this ID we just have to pass it here to delete it so we can say dot subscribe okay and one thing to note here is that so this logic what I have just written here okay this logic what I have just written here is I'll just show you so I don't want to delete directly okay I first want to confirm okay so to do the confirmation right so do do the confirmation and stuff so we have created uh added a library right so NG confirm okay so we will be using that confirm service so let's go in the Constructor we have already added in the module so we say private confirm service so this is not the service I'll say NG confirm service oh let me check in my Constructor yeah so that should be imported let me just do it import from NG confirm NG confirm box yes and I want the service NG confirm service that's correct NG confirm service so we'll see here as credit form and then confirm service NG confirm service okay so now let's use this in the delete option so what we will do is we'll say this Dot please dot confirm Dot so we'll say show confirm okay so this is the method which helps you to show the confirm before deleting okay so show confirm inside that you have to first pass the message are you sure want to delete okay so we can ask this question and then you can pass two callbacks for yes and no okay so let's press enter and inside that you have the first one for yes if it is yes then only you will do the API call okay but if it is no then you will do this you will do nothing actually okay so that's what it is so let's go here Ctrl X and let's paste inside this all right if the if it is Success then what you will do you will just go ahead and create a toaster so we already have a tool service so we have two service we have to again inject in the Constructor so I'll just go here and do private toast toast service NG tour service okay again this has been imported on the Top If You See NG tour service okay and you just need to change it to toast deleted successfully and once that is deleted I will have to call the you get user again so that it should update the value so let's save all the changes let's go here and click on delete so if I click on delete it says are you sure I want to delete if I say no nothing will happen but if I say yes so it will delete the record and this will update this as well okay so that's how we have implemented get all delete and update okay so now what I need to do is uh okay I want to rearrange this thing so I want here a button which will go and take me to the uh this page the registration page okay to this page currently it is not there so what we will do is right so we will have to create that button so let's go in the list okay let's go in the list page and on the top we can create that so let's go here so let's click some enters and on the top we can click that so we have to create div dot reflex and we can say justify content between okay and inside that we can have our button so button which says that to register okay so button to resistance so we can again just have it directly in this day so we have this button and which this has the router link it will send us to the register page again this page to commit here and this is a raised button with the color of this accent that's it and this has an icon as well which is I can say that to the towards the left Arrow that's it so we have this button let's save the changes and see how it looks okay so if I again go on inquiry so this is how it looks correct so why it is like this so what you can do is just copy this matte form okay and let's put ins below this below this button okay so once you put that below this button now you see right so this is on the left and this is on the right so that's what this D Flex does d Flex justify content with windows so now we have a button inside that and we have this form as well so one thing we can do is we can change the appearance to outline so that everything is same for us Outlet okay all right so now if you click on back to registration so here you come and if you click on view inquiries here we come all right now the only thing is pending is the user detail and then we are done with this uh video so let's see how we can do that so if on this click of view we have to go on the user detail page can you see I have already did the routing so let me again just show you in the routing page like where uh where I have done that so if you go here in this routing we have this user detail detail slash ID and we are displaying user retail component that's why whenever we uh say that right whenever we go back like if we click on this I icon so it takes the detail slash ID the first user to display okay so now we have to display the record like a single record so how we can do that okay so for that let's go ahead first design the page so this is the user detail page so if you go here so here we have to do some designing so to do this designing what we will require is we'll require a card component so let's go in the material uh let's search for card is the card okay so first import the API let's go in the module let's put this below so we can use the sort not required I'm not sure how it came okay so we have to add the card module so let's go below matte card module okay Mad Card module okay let's see if the changes and now let's see which example we can take so let's see some examples so I'll take this one for now you can copy this code and let's go in the user details.html and we can paste it here okay now we don't require this content so we can remove this we also don't require the image so we can remove that okay so we require the title what do we require this title and we also require this class so let's go and copy the class as well CSS class because that's how we have the image so let's go in the CSS and paste it okay save the changes and let's see how it looks if you click on view can you see this is how it looks for now the Avatar the name and this so so also what I can see I don't require this matte action button so I can remove them as well okay so this is the thing what I have so here what we I need to do is I just need to put my name and I need to put the email address okay that's how it is and we need to change this Avatar as well right so to change the Avatar you can just search on Google as well you can take any URL any profile URL that's easy you just need to change this so I'll just remove this and paste it with some Avatar this is again I'm coming taking from internet so if you want you can just take it or I can put it in the description save the changes let's go here can you see now we have this author red altar Shashi and my email okay so now for rest of those things right what I will do is so what I'm planning is let's create a list okay so we have something called as mat list so let's go here and yeah this one so to use the mat list we need to again import so import the mat list go in your module and just down just say matte list module okay so once this is also added let's go back and let's see what we can uh do with the list so in the math content you need to add everything so first we'll have a mat list so that's how it looks like mat list this is how we actually write this kind of code math list and let's say inside the Mac list we have matte list content matchlet items Merit list items okay so the mat list item you can have your mat line so you can say the div okay and inside the div you will have your mobile number correct and just below this you will have the button and in this button you'll can give your mobile number okay now this will be matte line so we will be using this matte line attribute directive basically this is a directive okay so now we have matte list inside that this mat list item by mobile number and this so this we can change it to matte button and let's see if the changes okay if you just go here and see that's how it looks like so we have a mobile number and the value here okay so same thing you have to do it for uh like whatever details you want to show right so you can do it for all of them okay so I'll just do it for all of them just to save some time okay so now I did all of them right so but here it is failing so I can change it for now you can change it for now because this is uh I will be teaching it right now like why I added this so let me remove all of this for now okay all right so now for this goals I'm using mad chip so mad chip how we can get it right so there is something called as chips here so this is how I was trying to show you the uh the goals what they have added so I'm using match chip list for that so to use it so you just need to import matte chip list module and let's go in the app module let's put here in the Imports and just below let's try to add that matte chip chips module okay let's save all of them now there is only one error so this also we can remove by adding an empty array that's it okay let's save all the changes and let's see how it looks like so this is how it looks like for now but uh what I need to do so here we just need to paste all the values okay that's all but the problem here is that I I want this to be in Center okay so for that uh what I'll do I'll just do some changes here so I'll make this Max width to 800 pixel okay and I can change it to display block and I can say margin 0 comma R2 so that it should be in Center so 0 comma Auto okay so let's save the changes and see so now it is in the center that's looks nice and now what I need to do is so I need to fetch user by ID correct and those user I want to display for example if I select uh Shashi then I should see the name Shashi and everything all the details if I select John and I say John and everything all those details so again this is easy right we have read it already for example once I am going on this route I am getting the ID right on the top one so first sheet is one and for John it is 2. okay so the based on the ID we can fetch the record and that we can display correct so let's see how we can do that how we can do that in the API so first thing what I will do is let's go in your user detail component and first I need a few important things first one is on init let's implement and next one is my favorite Constructor okay now let's create two properties so first property will be user ID is of type number okay and the second thing will be user details again this is of type user so all of them are imported on the top okay once I just press tab so now in the Constructor what you need to do is you just need to inject two things first thing is activated route why activated route because you need to fetch the params right you need to face the parents from the route so we have activated route second thing is you need API service to do the API calls private API it's an API service okay so what I will do is that so in the NGO unit first I'll get the user ID so I'll say this Dot activated route dot parents dot subscribe it is the same thing what I did for the last page the value and then inside this I can say this dot user ID user ID is equals to your value correct and then I will create a method to fetch the value so this is stray error because parent is not assignable to of type number so why this is unparent so what is the param you need from that we need ID values on that now that's how to fix this issue so let's create a method called as fetch fetch user details okay and now let's fix this okay fetch user details and now here what we can do we can just call this dot API API dot get registered user by ID and in that we can pass the user ID all right so this user ID I can pass it from here as well you can say user ID of type number okay and this second is pass it here user ID and now again subscribe I can say this dot subscribe the response and I will store them in user details close to response okay and once it is stored so we have to call it here right so this dot fetch user ID this Dot scratch user ID user like user retail Sorry by ID and then we can just pass this dot user ID that's it and now we have to use this user detail so if I just show you in the console.log what we get right so if I do a console.log console.log user details okay save the changes if I do that so let's show you in the console so can you see I'm getting an object whose name is John if I go back if I remove this if I search for this so I'm getting Shashi if again I go back if I go for John second one so I'm getting John so that's how I'm trying to fetch this records can you see on this console I'm getting those records okay so now we have to just display those record here so it's easy right so we will be using string interpolation for that so for all this record so this I don't require any more so we can just say user detail DOT first name and space I can see the second user details Dot last name so this will display my first and last name and this I can replace it with again user details dot email mobile number again we can replace by this user details Dot okay so this all also you can change so user details dot gender then we have package to show so again user details dot package then we have BMI score so we'll use the details dot BMI and we can make use of a pipe called as no not for this I think for the date we have to do so again user details Dot result BMI result and then trainer required so we can do that again here so user details dot require trainer and we have goals right so here what we can do we are getting list of object if you see right if I just show you in the console again so in the object if you see we are getting list of importance like what you have selected building lean muscle Healthcare register and sugar craving body so we are getting this uh array right area of string so that we can just use it here okay so we can just say again um not the row it is user details okay user detail dot important so this is an array and this is what we are looping it inside this NG by using ng4 okay so in the goals that's how we have added in the button okay and this will display all the importance what they have selected and now if I see the changes if I go on the browser okay it's showing me error for first name and define let's see how to fix it let's go in the matte cardigan system or NG if and you can just say user details okay if there is a use user details then only display this page so Ctrl V okay so we have put njf with the user detail okay if I save the changes and now if I go here can you see there is no error all right so by ngf you can fix that issue so now again if I go back if I click on view I can view the record of the user if I go back if I choose the different user I can see that again different one all right so if I click on back here that's how we have completed this like now what you can do extra right so if you want to just try you can just create one more thing here as a footer like what I have created in the last so it's easy right you can just create one footer for yourself and then this application will be completely ready so that I want you guys to practice that like let's create a footer and then if you want you can add some more extra fields to it and if you really interested to grow this project anyhow I'm planning that uh this whatever I have created so this I will be connecting them with an actual back end maybe in node.js or maybe in in.net core I'm not sure but I'll keep you posted so do subscribe to my channel for that because we will be creating lot of stuff and also if you want that I should complete the validation for this part then do let me know in the comment section that you need validations for as well for this form okay then I will definitely gonna go and create those for for you guys all right so that's brings end to this uh beautiful journey of where we have learned about how we can create those crud operation and this was a little bit Advanced what I have covered in the my previous angular 13 crud so I hope you have liked it right because I have covered lots of topic correct if you just see in the module as well right we have almost covered 12 to 15 modules of angular material if I just show you here right so we have almost completed to 12 to 15 modules of angular material if you really interested right if you want like I should create more videos on angular material or any other framework do let me know in the comment section I will definitely gonna create that for you guys and if you have loved this video then do give a thumbs up and subscribe to my channel for more upcoming videos till that time bye bye and see you

Channel: Let's Program

Views: 28,111

Keywords: angular, Front-end Development, Back-end Development, Angular 15 fraemwork, CRUD, Web development, angular tutorial, angular app development, angular 15 crud tutorial, angular 15 app building, angular crud app with angular 15, angular crud app development, angular 15 full stack tutorial, crud with angular 15, angular tuturial, Angular 15 Front-end & Back-end Integration, Angular 15 for Beginners, Angular 15 Web App Development Tutorial, Angular 15 Development Walkthrough

Id: PdLpeXd5plc

Length: 130min 52sec (7852 seconds)

Published: Tue Feb 07 2023