Angular crud using JSON server rest API with reactive forms | material UI design | angular 14

hey guys welcome to negra techies in this video i am going to cover angular 14 credit operations using json server residue apa and reactive forms with angular material ui before going to the implementation let me provide the short demo this is my screen here i just populated the company data for this table i use the material ui here i have implemented this shorting from schwelty and also the pagination first let me create one new record so this pop-up also descend using this material ui currently you can see the text is add company the first field id is disabled so if i'm clicking the save it's not going to allow anything because we have the validation let me provide the name and this employee account revenue and this is active field it's defaultly checked now let me click this save button see now i'm got the message like saved successfully and the new record also got included so you know and if you noted in this revenue column i just included this pipe currency and we loaded all the information now let me try to edit this one so you know currently we are able to see this ids 8 but it's not an editable other things we supposed to edit let me change this name i'm going to include this private that's it so let me save it see now the updated successfully message is coming and also the text also got updated now if i'm trying to change this employee count currently it's in 44 i'm going to give 46. see now it's automatically gets updated now i'm going to delete this record so if i'm clicking this delete button i'm able to see this confirmation box so here i have two options if i'm clicking this okay so the record got deleted company removed successfully and also it's removed from our table okay great now we successfully completed our demo let me start the implementation okay this is my created application initially i have one small change i just included this text welcome to nickera techies you can see in this output okay great now we can create the component so our first component is company okay our component is created so let me go to the component so let me include here okay the text is company what is coming so instead of this p tag i am going to use this h2 i am going to create my second component popup this is for implementing our pop-up screen okay this one also gets created now i am going to create the service ok this service also created here the spec file is not required so let me remove it okay great now i am going to create my model so let me create one folder export interface here i am going to define my all properties so the final one is active okay the model is defined now let me go to the component so in the component i am going to define our table first here i am going to use the directory of mac table and then data source so let me define our data source here so let me bind it and let me add the class and next to be how to define our columns display columns so the first column is id second one is name the similar way i'm going to define all the columns so the final one is action so this is for including our delete and edit button now let me go to the html slide here we can define our columns so our first column is id then let me define our trigger section so here you can provide your own name so it's just like a for loop and let me use the interpolation concept here element.id the similar way i am going to define all the columns the second one is name and the third one is am count i mean the employee account so the final two are one is effective and another one is action do okay we have included two anchor buttons so let me include this material directory matters button color primary so similar way let me copy this one okay great we have done the basic changes and the very important thing is if you are using this material ui for every component you have to import the particular models okay so for that already i have created one custom model material model this material model i just imported in my app model okay so here after what are the components i am trying to use i supposed to include all the models in this material model so let me complete this section so already i have included this form field and input and the similar way i am going to use this table in this table i am going to use the property of basinator and this sort for the popup i am going to use this dialogue and button check box okay so let me change this models also mat table model at bay generation model the similar way i am going to include all the models okay the similar way we have to include this export section also okay great we have included the most of the components if we missed something we can include a little later now let me go to the html side here actually the map table should be like this and also this data source yes should be in caps and also i missed one more thing the footer section matte header row matte header row def so the display column we already defined similarly one more thing so this is for data row so let draw columns the same one so let me save it and we can check okay currently we don't have any build error okay something is coming because we don't have any data sunday decision also not looks good so let me include some class changes here so the first one is it should be with so the design you have to manage in your own way okay now it's somewhat fine so let me include the button for adding the new records create new the button is the math raised button so this is just a direct view from our angular material ui okay this is fine so when i'm clicking this button i'm going to open this pop-up so let me bind the even here open pop-up so let me define it now in the constructor i am going to inject this matte dialog now let me open the pop-up here the first input is component so that's what we have created the popup component and other things are just a property the width i am going to provide 500 pixel and the animation so exit animation duration 1000 milliseconds the same way i am going to provide ender animation duration also thousand milliseconds and the final one is data so this data section is mainly used for when we are doing the editing we supposed to pass the key value here also i am going to pass the empty parameter that's it now let me click this button okay great the pop-up is opened so currently i have the two important things one is defining my form design and the second one is defining our reactive forms so first i am going to define the reactive forms for defining this reactive form i am going to use the form builder so let me inject this one builder dot group okay we just defend our form now let me include all the properties so the default value is empty and this id field should be disabled and the second one is name default value is cmt and also i am going to include this required field validation the similar way i am going to define all the fields and the final one is active so here the default value is true okay now i'm going to start my font design so if you noted here i just included this mat form field inside that i have the mat label and the mat input so our first field name is id so this value is not required and this placeholder this one also id and we have this reactive form defined so let me take this form name form group okay great we have added now for the each and every element we have to include this form control name okay the similar way we have to complete all the fields and the second one is name let me do one by one so the fifth column is address for this one we have used this text area so let me see the design how it should be actually we are getting this issue why because we are using this reactive forms so then we have to import this reactive form model in our app.model so let me include it and also one more model is required http client model because anyway i am going to use this http client okay if it's not coming we have to include manually okay the decision is coming but it's not that much perfect i'm going to include one small style change here okay now it's somewhat good okay and the final field is is insective for that i am going to use this checkbox ok this one also done and then we have to include these buttons so the first button is for save okay and the second one is for closing the pop-up so let me provide one anchor tag only and let me include the directory for the button mat raised button and the color should be primary the similar way i am going to include the same styles to over close button also so let me check once again so looks good now we have completed our design part let me move on the service side so as i mentioned i am going to use this json server http so for installing this json server http so first we have one npm command so already i installed my machine so it's not required to install in every application and the second thing is be how to run our apa so let me copy this command i am going to open one more terminal okay great our ap is running and you can see one file is added a db.json so i'm going to use the company so let me change this post into company and other two are not required and this data also it's not required i'm going to use my own model okay see currently i have only one link so let me copy this one so we already created one service it's available in this shard folder ok great here i am going to define the api url and also i am going to inject the http client first let me define the getall method so return this dot http get this dot ap url so let me convert into our data model observable love and company model and this is the array next i'm going to create the post method for the creating company so i can return so this dot http the post method i i'm going to use the same url so let me pass the data also okay great first we can complete this create company function so let me go to the component side so the component let me define the function save company first let me check the form contains the values are valid or not so this dot company form dot value if it is valid only i am going to consider and we have to inject our services then only we can use private apa so our service name is apa service only so this dot apa create company and this dot company form dot value so let me subscribe it so let me format it once it's saved i'm going to provide the messages saved successfully okay we have done now let me include this save company function in this form submit save company does not exist yeah i'm not saved this one now i'm trying to add my first record so the first field is id it's not required nt infotech employee account is 55 revenue 2500 first straight semi pin okay and this active defaultly checked it's fine so let me click the save button okay i'm getting this message saved successfully so let me check in our db.json can see now the record got included so let me include one more record so again i am getting the same message saved successfully so let me check here so you know one more record got included so here the idea is whenever i saved the record i supposed to close this pop-up and i have to load all the records in our grid so let me do it so in this popup component i'm going to create one more function close popup okay so this dot already i have injected the matte dialer so let me use it dialog dot close all so let me include this one and also i'm going to include the same function in our close all button also and the second very important thing is b how to populate the data in our table so this one i supposed to do the changes in our company component so let me define the function load company so here also i supposed to inject our services so this dot company data equal to the response so let me format it i'm going to include this load company in our unload function and also whenever i'm closing this pop-up i need to call the same function once again after closed so let me call the load company method here also so we have done so let me refresh the screen now okay great the two records are loaded in our grid and this revenue i am going to include one of the pipe so it will give some good look and feel so the currency pipe and this employee count i'm going to provide the number pipe okay see the dollar symbol is coming if you want this indian currency the similar way you have to provide your own currency that is fine okay great so our second thing is be how to complete this edit and delete from schulte so let me go to the button edit company so here we supposed to pass our id that's the input so let me copy this one okay so whenever i am clicking this okay why i'm getting this error yeah i need to save it okay whenever i'm clicking this edit button i supposed to open the pop-up so we already defined one of the function for opening this pop-up i'm going to use the same one and also i'm going to pass the id see now when i'm clicking this edit button the particular method got triggered it is going to our open pop-up so in the open pop-up we are passing this id so i just passed so now i supposed to get this id in our pop-up component for that i am going to use open up the mat dialog property at inject mat dialog data so in the page load itself i am able to get these records so let me copy it here i am going to check not equal to empty and not equal to null so in this scenario i have to load the existing data for that let me define the function in our service side first so method name is get company by code and this is the single object online data data type should be any so the gate by code the similar way i am going to define two more function one is for remove and the return type justified only okay done and the final one is for the update method update company so it has two inputs one is the key field id and another one is the data let me format the bar also ok now we have done our changes in our service side let me concentrate on our component side so this dot data dot so let me check actually we are passing just object okay i have to modify the conditions this.data.id okay great so this dot edit data equal to response now we have to set the values in our forms so this dot company forms dot set value so the first field is id so this dot edit data dot id and the second one is name the similar way i'm going to include all the fields okay we have done so let me save it we can verify the output okay supposed to use the capital inject so let me remove it okay fine now so see now the existing records are loaded fine so let me close this one if i'm trying to click this second edit button the second records the id is true the datas are loaded fine okay now we have to include the changes in our save click so let me go there we already added something yeah so we added for the direct post method now we are going to do the changes for our update method so constant id called actually i need to check if i'm already have the values in this id field then i will consider this is the update scenario so the field is disabled so we supposed to take the value get raw value if it is not disabled we can use this value for the current scenario you're supposed to use this raw value only now i am going to check the condition if edit data not equal to empty and not equal to null and then it is the update scenario else as our current create scenario so let me copy the whole content i just replaced instead of this create company i'm going to use the update company and data requires one more field that is our id anyway we are we already have instead of this value also i'm going to change into get raw value add the salad updated successfully so let me format it so datas are loaded instead of this employee account double five i'm going to provide something like this and in the revenue also i'm going to include two more digit so let me save it okay looks like i'm getting some error okay i missed one of the small change so let me go to the service side yes so this should be a put method so let me try once again see now i am getting the messages updated successfully okay the pop-up is closed and see this employee account also got updated and here also included two more digit now let me create one more new record so a new record is created and you see it's included in our listing also without refresh okay okay great the final one is delete so let me do that also in this listing i am going to include the function first instead of the cad i am going to provide a remove okay so let me copy it more company by code and the input is id so once it's removed we have to update in our listing also okay so let me click see now the record got removed so the thing is if you are implementing this delete function we supposed to give this confirmation pop-up so for that i'm going to use this altify.js so we can complete this ultifi.js setup first so for doing this one first we have to install this package mainly let me stop this application okay the package got installed now let me include some css in our style.cs file now let me create one of the file so in the file i'm going to define the model so once it's done let me move on the typescript.json file i mean the config file here i'm going to include this type root section so if you noted the newly created file is just a map look here we have done the configuration now let me go to our component side the top of the component i am going to include the selectifi.js so let me include the same thing in our popup component also so instead of this normal alert i'm going to use this selectified.js so let me include this a lot also now let me move on the company side i mean this company component let me format it here also my electrify dot confirm so the first input is header remove company and the second one is message do you want remove this company and the third one is call back function so [Music] this is nothing but our okay click the final one is the cancel click so here i'm not going to implement anything so let me copy the whole content i'm going to include here let me format it i'm going to rerun the application once again ok now i am going to create one more record see now i am getting this notification saved successfully and if i'm trying to update the same message like updated successfully okay so if i am trying to click this delete button so the heading is remove company do you want to remove this company if you click it so if you click this cancel nothing will happen if i'm clicking this okay it's gone okay and currently we are seeing these three records so if i am checking in this db.json also these three records only available okay so now we are almost to complete all the functionalities so the two features only missing one is the designation and another one is starting so let me complete shortly i am going to copy and include three more records if i'm creating one by one it will take some additional time see now currently we have the six records okay okay here the first thing is i'm going to implement the base nation so let me go to the application so in this company component so after the table i'm going to include this pagination okay so here we have the options 5 10 and 20 if required you have to include so let me save it okay it's coming but it's not mapped with our table so let me go to the ts side so in the ts side i am going to define one more variable so after getting our record so this dot final data equal to new mat data table source and our data type is company model so this dot company data and here so this dot final data equal to i mean dot base net or equal to b how to define our basination for that i am going to use this view child matte paginator so let me include here and here after yeah it's fine so here after our final data is available in this variable only so let me change the data source also final data not exist it's not saved properly okay fine see now the pagination is applied we are in the first page if i'm clicking this one the second page we have only one record the similar way i'm going to apply the starting also so let me copy this one so instead of this matte page later i'm going to use mat shot underscore shot and match shot okay now let me go to the html side the table first i'm going to include one directory match shot and in this ticket side i'm going to include match short header so let me include in this name also so let me check now see now the error mark is coming now it's in the reverse order so the similar way the name also it's working so currently i have included in the two columns the similar way we can include all the columns okay now we have completed our video still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel if possible try to join our membership also thank you thanks for watching

Channel: Nihira Techiees

Views: 15,658

Keywords: json server rest api, create fake api using json server, how to use json server put method, angular crud with rest api, angular crud using json server api with reactive forms, angular crud with material ui, material ui modal popup, material ui table with pagination and sorting, angular 14 crud operations, angular crud operations with json server rest api, how to implement alertyfyjs, angular crud for beginners, how to pass data in angular material ui

Id: dOFGJekKYes

Length: 54min 17sec (3257 seconds)

Published: Wed Aug 17 2022