Angular 12 CRUD with Web API Tutorial Part #2 | Angular Material 12 CRUD Step By Step

hi friends welcome back to arc tutorials this is angular 12 grad tutorial this is a step-by-step guide where we are exploring a lot of angular material components working along with angular framework in the last episode that is part one we started with the basics of crud which is reading the data via http client module which is basically the http service that we inject in our components via service and call the api make sure that you check out the part one because this is a continuity of it i'm sure you will only learn something better that being said let's get started in part two today so today we'll be attempting the other features of crud which is creating updating deleting etc before we get started i'll request you to kindly check out my angular full tutorial playlist that is angular 10 the latest one that i did it has more than around 75-80 episodes so far uh in-depth use cases along with a lot of examples hands-on coding and i'm sure you'll only benefited by going through that and if you really want to learn and master angular this is the course for you please do check it out the link is in the description box below please do subscribe to my channel so that you can keep supporting and encouraging me all right so i won't spend much of the time in talking because we'll do most of the part hands-on which is uh today we'll be attempting the create update and delete along with that we'll also learn to play along with some angular material components so let's get started all right so i have my application open it's running so this is the application we have done so far we have the list users it is listing the top 10 users it's coming from the api that we are calling uh we'll modify this into a data table but first let's attempt the add user edit and others and make it all working together all right okay so that being said let's open the project directory go to users go to add users so we'll work on the add users all right so what i'm going to do is we'll work with the reactive forms which means that we'll need to create a reactive form first so i'm going to call it add user okay form so this is a variable that i'm declaring and this will be of type we'll have to create something called form group right and we need to initialize it so i'm going to initialize it empty for now okay and what we are going to do is this is an empty so this is a variable which is of type form group which gets imported here all right so i'm working with visual studio code so it imports it here make sure whichever editor you're working it has the it has imported the form group so now that we have created the variable so next thing we will do is ng on in it we will initialize uh this particular form so we are going to say this dot and user form and we'll also need a form builder right so we are going to say private form builder we'll need to import this as well here so you see we imported the form builder here now we are going to say this dot form builder dot form dot group all right so here we are telling that we are building a group so this form is a group now um so let's say we are going to give two um let's say two fields to start with right so i'm going to say form control and this will be empty so i'm saying in for now i'm just starting with empty so i'm saying there's a field called username and let's say the other one is called email right i mean again this can be anything that you would prefer this is just for learning purpose so feel free to use your creativity throw in some more like phone number right phone or anything that you would prefer try if you are uh starting new in learning or practicing angular i would suggest start with only basic few things like put together two or three fields start building a form that will give you confidence to keep on going all right so here what i've done i've added three username email and phone we can modify that if we require later let's just work with that for now all right so that was our uh ts file component where we created the form now we need to create a form in the ui so for that let's go here and i'm going to refer to material.angular.io i'm going to go to components and then i'm going to go to input okay so we have this beautiful input like this right we can use these okay so this looks good we can put it something like this right so go to examples or we can take something called form field group and use any one like this form field right looks good so i'm going to pick any one which is let's say to keep it simple i'm going to go with this okay so let's go to code and pick up this last form element alrighty now i'm first i need to do the grouping so i need to put all of this inside a form so i'm going to say this is a form group make sure that you get this spelling right here uh this is f is small here right make sure that this is the same name as that you have given in your the component file right so if you are calling it here add user form make sure that you bind using the same and then we'll also need a event for submit right so i'm going to say create user so this is my form now here i will paste my form field element which is what i've got so i will take this two more times because we have three we have three elements to work with right fields okay so then one last we'll copy okay so now when we do this we should see some errors and why is that yes that's because we have imported form field all of that but we have not imported the modules required for them so let's go ahead and do that part now right mat form module and you will see we need mat icon we need mat input so we have to import all of those if you the good way to see that is in your errors right so you can see here it will tell you matt hint all of that errors it will tell you what all modules you need to import so let's just import it here mat form field and import it into the array okay then we also need mat input go to api copy that again copied mat input module okay we are also trying to use a icon so we need to import the api for that all right put it in users module i can copy it same so whichever modules you need just import them in the users dot module okay so let's see what is the error anymore errors do we see okay we still see so it says that now the method is not available that is good so let's go ahead add that method create user and what we will do is we'll simply do a console log of this dot add user form dot value okay nothing crazy now let's see is it compiling so now okay so it says generating bundles should be good now this time around it says form group isn't a known property of form okay so let's check that out as well here you got the form and you have the form group what is okay we got the form okay that's because we might have not given the form controls yet so let's bind them here so we will give form control name is equal to user name these are the names of the fields in that particular form that we have added here username email phone so let let's add that also now email and then there would be one which will be form control phone now let's see okay so it is saying it is compiling it is saying form group isn't a known state of form okay so that's because we have not imported the main thing which is our reactive forms right so we have to use and import that reactive forms module from angular forms and now once we do that we should see that error go away all right so now it is compiled successfully so now let's go to add user and we see we got three fields right that we want now i'm going to style it little bit quick not much just to make it better i like to work with full screen do let me know in comment section how do you like how do you prefer to work matte card so i'm wrapping all of this inside a matte card right so let's format and a lot of people think will format it later they leave it i am not that person for sure i definitely like to format the code as i go along that gives kind of clarity to me right um so again we should see error i think because we know i think we already have used matte card in view users so that's why that's no error so here we have the white color box right and we have the three fields now let's quickly change the names here i'm going to say user name i don't like this hint so i'm going to remove it feel free to remove or add based on how you like it okay so let's call this as email address let's call this as phone number okay so this will be phone number this will be email address okay this will be username okay all right so you got username email address phone number right now icons i'll leave it up to you to add that creativity to your code i'm not going to spend time on finding an icon now okay all right so we got the three fields so now we need a submit button let's throw in that also real quick and then we are good to start working with processing the data so go to button go to code and i'm going to pick um the stroked mat stroked primary button okay and we might need to import the buttons module unless we have already done so okay so we already have it okay so we got it here all right and create user okay so this should be now good right so create user so we got the mace mac basic overview example so this is matt raised button right so let's use that raised button that way it will be full background blue okay so we got the three fields and we got the button which says create user just one last thing this is missing is matte card title add or i'll say create new user okay so we got create new user and we got this um right mad card content and just group them here and let's format the form and give the indentation alrighty so we got the username email and phone number so now let's enter some details here some at the ratetest.com okay so now i'm going to open my inspector here and open the console and click on create user and in my console i see the values getting captured email phone number and username right all right so far so this looks good we created our form we are able to capture the data now is the time to work on our service and add that data so open our service dot ts okay so this is a simple one add user url so what i've done is this is the base url and we'll have to send a object right which is nothing but the users this is the object that we will send to this method which will be sent to the api okay so just so that you know it um so i'm going to just code it again just so that you guys know what is happening here so you have this user add user method where we will send the data what is the data the data is the same one that we got it here in the console.log this one this is the user object that we will send to our api okay now once we do that we have to pass it to a url okay and the url is same like this copy this paste it here this will be users okay and there won't be any extra url except it will have since it's a post this will be a post http post and post will require us to send data so we'll say user object okay so http this dot http dot post the url where we want to send the data and the object that we are sending okay so that is what it accepts if you want to read more documentation you can always go to this url jsonplaceholder and you can check out all the details here in the endpoint okay so if you want for examples just visit here and you will see all the details like fetch then post comments album photos to do users uh details like post put patch delete so this all the documentation here that you want to use for your mock testing so you can use that so what we are saying is we are going to call the user's endpoint and send the user object details okay that's what we are going to send to create it all right so far so good now let's call this method in our component so we will go to add user here and we are saying once the user submits on the create user then what we need to do we'll say this dot user so now we need to import private user service okay user service now we are going to say this dot service dot add user okay so it says it will take the user object so we are saying this dot add user form dot value so now what we are doing we are going to send this data and we are going to get an observable back okay so we are going to say dot subscribe data ok so console.log right user created or else if it's an error then console.log error okay so you what you're saying you're just saying that once you get data then you capture the data process it if the data comes back we will say user created else we will console log the errors for now so let's see it now let's refresh and say mark spark tutorials dot com some phone number and now it's important for us to see what data is being sent in the network okay so i'm clearing everything just click on create user now go to so it's see now it is calling this url see the url json placeholder users that's the url that we send see the method is post and the status code is 201 status code 201 means that user is successfully created and it is giving back the id right so whenever we send data to the api or the back end whenever you get the 201 request 201 status that means user created resource created in this case the resource is the user so resource created with an id right that means our user was successfully added okay but there has to be a way to notify to user right so let's quickly put that also and maybe we'll use something called a snack bar right that's a simple example to use so something like this it will show up so let's do that so what i'm going to do is just in the right so we need to include the mat private mat snack bar that's what we'll have to use so i'm going to import it here and say private snack bar and import the mat snack bar right so to work with mats snack bar we need to first import from the module so go to module go to users module import the mat snag bar module add it here and now in the now you should have a reference to matt snack bar okay so now i'm saying if the data is created successfully then this dot underscore snack bar dot open right and here we will say the message that user created success fully with id plus data dot um or just say for now with users are created successfully okay or here i'm going to say unable to right unable to create to create user okay so now what we'll do is this will throw up the snack bar and inform the user so let's see that okay so now you do this and it will show here user created successfully okay but the thing is uh if you see this message will not go away on its own right so we need to fix that so how are we going to do that so we need to put a utility that's provided so i'm going to go to users module and here in the providers right not in the imports here i'm going to say providers and here i'm going to say for each of that instance right so i'm going to say matt underscore um oh sorry we're going to first say provide and say matt underscore snack bar default so there's a default options okay that we have to use we are going to use snag by default dot default options okay and here we are going to say use value use value and here we are going to say the duration so here we can specify the duration and say how much duration so i'm saying 2500 milliseconds so what this read this again in the providers we are setting a default options for the mat snag bar and saying that the duration should be 2 500 milliseconds so that means after that it will go away now let's try this again right now see here it will come and it will automatically go away okay earlier it was not going so now that we added that match snack bar default options it will go away all right so this was the create new user right now i know that the form can get complicated you can have lot of fields but the idea behind this tutorial is to show you how easy it is to work with right so even if you have 10 20 doesn't matter whether radio check box etc etc will make it complicated as we go along but let's process little bit more and i'm going to use something called validators right so you can use validators also here in the form we'll do that as we progress in the application first i want to show you the functionality okay so this was about the create new user right now we will also do something called delete okay so let's go to delete user okay so here we are saying whenever we click here on delete the user should go to the route and here if you see here delete hyphen 2 and it works says delete works so that means the route is there okay so now let's work on delete quickly and then we'll come to the edit piece if time permits today all right so private um so now i'm going to say activated route in delete because we need the id that needs to be captured so i'm going to say ng on it this dot activated route dot params right now dot subscribe in the data you will get the data right so i'm going to say here and say user id right is string is equal to empty initializing a user id and then i'm going to say this dot user id is equal to uh data dot what is the name id that is the name that we have used in our routing module if you see here id i delete id so we got this now we are going to say if this dot user id if this dot user id then what we need to do we need to call the api method to delete right so let's add that method service in the service file user service and we are going to say delete user and i'm going to pass the id right and what we are going to do we are going to return this dot http dot delete call right now again this dot base url that's the one that is required if you see the documentation for the delete route right delete slash id that's what it is saying so we'll use this one again here for view user that we did so here we are saying this dot base url slash user slash id that will be the delete url for that particular user so now let's go ahead to our users delete user component and say now we need a instance of our service here private user service dot user service okay so now i'm saying this dot user service dot delete user and this dot user id okay dot subscribe if there is data coming back successfully else error so here again we can use um something called the matte snack bar that we have used previously in create user so snack bar say matt snack bar okay all right so now i'm going to say this dot underscore max dot open and say user deleted successfully here or here i'm going to say unable to delete the user okay all right so let's try this out so go to list users now click on delete and it says delete user successfully deleted users successfully right so now this will this is calling the correct data this is calling the correct endpoint you can see it here you can see that in the network since see here these are all static calls because they will not actually modify the data in the back end right they'll only simulate these are fake end points but you see that the call is going here to users right and it is first deleting see here we are putting user slash five there is a delete request method and the status is 200 that means it was deleted successfully but since these are fake endpoints the data is still there okay but this is how you should know how to replicate the data okay that is how the delete end would work since we don't have any actual endpoint so this is the one that we have now if you want after deletion what you want you want to navigate it back to list let's say so we can say router okay and we are going to import the angular router and i'm going to say once it is successfully deleted dot navigate and this will be the url where it has to go right so it's commands like an array of url fragments which needs to be constructed so here i'm going to say back to list users and this will be an array okay so if you see here oh this is just list so let's see now i'm going to click on delete it is deleted and it did not navigate let's see why so it says cannot match any routes url segment list okay so it is unable to find it because there is no uh level up okay so we are going to say go one level up and then list or i can just say navigate y url and i can just give the url of the string that it needs to go so let's just use it here for now okay and i'm saying go to list all right looks like some issue with the routing url cannot find uh cannot find too many matches okay just do list let's check one last time okay we'll fix that later um next one but you get an idea that we can use the router navigation all right so that covers our create and delete parse right so let me just demo it one more time before i call it a day today but we'll continue in the next one to do edit and fix up the routing and validations so we got test test.com phone number create user user gets created successfully and it goes then we got list we got the delete so it says delete successfully will fix up this screen and also route the user okay so the pending part is the edit that i'll cover in the next episode so this is you see we'll also add some data table uh we will add some data table validations we'll use some pipes to keep will keep learning and i'll keep adding a lot of things to show you practical way at some at some point i would want to convert it to actual api so that you can see all of this data connected and working keep your comments coming in let me know if you want me to cover something specific i know uh one of some of you have requested data table i will cover that as we progress let me first fix the functionality of crud which is we have done view right we have done the view we have done the listing we have done the adding new user and we have done the deletion next episode i'll do edit and add some validations to our forms right now this doesn't have any validation we'll add some validations to this forms and we'll start enhancing it to more and more to make it more practical thank you so much for joining in this episode i hope you're liking it uh i'll try and publish as soon as possible by tomorrow so make sure you follow along please do hit that subscribe button if you like my work please do consider buying me a coffee at buy me a coffee.com art tutorials thank you so much for joining see you in the next episode

Channel: ARC Tutorials

Views: 4,399

Rating: 4.8933334 out of 5

Keywords: angular 12 crud tutorial, angular 12 crud, angular 12 crud web api, angular crud, angular crud with web api, example tutorial angular crud operations, how to implement angular crud project, angular crud example, angular crud application, learn angular crud table, examples angular crud generator, how to angular crud application tutorial, angular crud tutorial, angular crud application tutorial, angular tutorial 2020, arc tutorial angular, angular 12 2021 tutorial

Id: -e9Drok8eiA

Length: 32min 29sec (1949 seconds)

Published: Mon Jul 26 2021