Angular 17 crud actions using angular in memory API | Fake REST API in angular

Hello friends welcome to my channel hereis in this video let me explore angular in memory APA and additionally we can do one basic redactions in angular 17 using this angular in memory APA first let me tell you what is this angular in memory APA it is a kind of fake rest APA okay it's almost similar to our Json server APA but only the difference is Json server APA will run in the separate port number but this angular in memory running within the applications okay next we can see the use cases there are two use cases okay so the first one is realtime applications uh the applications May handled by the different teams okay so the UI part and this back ends are handled by the different teams at the same time U team cannot wait for the backend team completing their all the tasks okay so meanwhile for doing their development and also the testing purpose they can use this kind of akas and the Second Use case is uh someone is is newly going to land this angular application but they don't have any active API okay so in this case they can use this fake AP for their stady purpose okay I hope you got some better understanding about this angular in memory APA so next we can see how to configure and utilize in our application for doing this implementation I just created one application and installed the material UI and then we can install the package for this angular in memory API so this command I will include in the description okay the package is installed next I'm going to create two services so the service is created we can create the next service I provided the name is Master Okay okay so next we can move on the data service there we can do the configuration for our angular in memory apaa here I'm going to implement this in memory DB Services okay so we can implement this one and removing this override function no need to throw anything and removing these parameters here we can return some array okay so in this object we can have our arrays so let me provide the the name is products so the same way we can create the multiple objects okay so all are act as the separate endpoint so let me save this one and for this products let me include some static values for accessing this data let me class one model class we can provide the name is product model OKAY export interface product model and then initializing the properties So based on the data only I'm just initializing so let me save this one so next we can configure this data service in our application through this app model so in this app model the import section I'm just importing HTTP client in memory web AP model okay so in this far RO section we can include our services okay now the configuration is done so next we can work for the our actual services so let me take this master service so here I'm going to inject the HTTP client so the first thing is we we should import this HTTP client model here so next in our Master service injecting this HTTP client then declaring the API URL so the API URL is API SL then our object name so we are going to use these products only okay so next we can create our actual functions so the first one is get all so it will return all the products we can mention the data type also so the product model array so the same way we can create the functions for other http verbs get product so it's having one parameter that is ID data type is number again the method is the get method only it will return the single object here we need to pass this ID and the third one is post method so the method name we can provide as the create product data type is product model for this parameter okay and the request type is post request so we are not going to return anything so in this parameter point of view one is our AP URL and the next one is the input data okay and the fourth one is for the update product the request type is put request and in this URL we need to pass this ID the unique value okay so based on this key value only the update will happen Okay and the final one is delete so the delete scenario uh the parameter is only just ID and the reest type is delete okay okay we successfully completed in our service side next we can move on the component so the component point of view I'm going to use the existing the default component only so here we can remove all the existing content so next in number two TS side we can implement this NG on into hook and this title also not needed same time we can create the Constructor so in this Constructor let me inject our Master service okay and then declaring two properties so the first one is product list okay next time creating one function load product list so in this function uh we can consume our getal service so whatever response we are getting from the API I'm just assigning into this variable okay so let me include on console.log and we can verify whether the AP is working or not so once we are able to get the values then we can bind in one of the table so after that we can focus on the other functionalities like for the creation and update okay the display point of view it's not showing anything because we not even included any of the add related things so method is not implemented yeah understood okay in this hooks we can remove this error and then we can call this functions okay okay so we got three records okay that we initialized in our data service it is acting as our uh in memory service okay so next we can bind these datas in one of the table I'm going to use the material table only uh the requir models already I have imported in this model itself so first we can include the M card so this is my parent uh card inside that I'm going to include one more card section so the ma table we used to many videos just following the same procedure only so next we can include the data source so here uh let me declare one more variable So currently we are having one array that we have to convert into the ma table data source M table data source okay now which looks fine and then added the source and then declaring one more variable that is for displaying The Columns so the data type is string array and we can include some static values so we have four columns based on the data only we are defining the columns so let me save this one so next in this table section so next we we can include the table row and table header definition so this is for the header and the next one is for the row next we can uh write for the individual column definitions and just add it here using the C container so in this mat column definition we are included this ID that actually we have defined in our displayed column section and then this is the static value and then we are binding this ID data okay so we are not going to use the shorting so it's not needed so if you want more details about this material way table I have created the separate video so I will include the description also in the link okay so the same thing we can apply for other columns also so we can see the response okay the datas are loaded So currently we have just three records only so the next thing is we can include the buttons for doing this add update and delete for doing this add we can directly include in this uh header section so we can use the material way table it should be matric button okay now it's fine so next in our table section I'm going to include one more column okay next in our HTML side we can utilize that and then I'm saying this is for action and in this header section we can say as the action and in this TD section I'm going to include the buttons so the first one is uh edit and the second one is delete okay and we can write the respective function also and we need to pass this ID as the parameter some spelling mistakes I'm just corrected so now this is for delete so next we can declare both the functions so both the functions are added so next let me include some static CSS that I prepared based on my last videos so so let me save this one and we can see the UI okay then now it is fine so the next thing is we can work for the creating new products so what I'm going to do in our TS side we can declare one more property okay he side the default value should be false okay and then declaring the reactive forms so let me inject the form buer is here okay and since we are using this reactive forms we should import this reactive form model okay it's done and defining this form we can provide the name is product form so inside the group I'm going to declare the controls on by one so the first one is ID so the default value I provided zero and then making this as the disabled okay and the next field is name we can make uh this is the required field so the default value is CMT and the fourth one is description again I'm just making this one also a required field and the final one is price so the default value just provided zero so so our farm is ready uh next we can work on the designing area okay this is our listing area so once the listing is completed I'm going to include one form so inside the form uh including this MAT card and then MAT card content so next in this form let me use the form group so there we can use our uh product form and then submit even NG Summit so these are the basic steps okay or else we can get save product because the create and update both are happening in the same event itself so we can include this event also here that's it next in this content side I'm going to include all the controls one by one Matt form field and then mat label ID so the form control name is ID the director we can use match input okay so let me save this one and see the design okay the ID only it's coming actually it is in the disabled mode and we don't need to use the complete space okay so 30% so we can include uh all the other fields see we have all the fields so the initial time we know need to show this page uh we should show this listing only so that we can handle through this function so we just included this add button so here let me include one function okay and we can Define this function also so we can say is s equal to true and in our HTML side this is for actually our table and this C is not needed so let me use this ngf okay for the same time for our form can give like this okay see the initial time the listing only it's loaded when I'm clicking this add button uh it's showing our form so next we can include the button so submit and also the for cancel in So at the end after this MAT card content uh we can include this MAT card actions so there we can include these two buttons so the first one is primary we can say save and this event is not needed because we are going to use the save submit and the next one we can use the anger tag so the function name is back to list now this iside we can make us the false so next we can work for this save fty oh again this spelling mistake okay so that's fine so in this sa product uh first we are checking whether it's having the valid value okay and if it is the case then we can create one object and the data type is Project model next we can assign the values okay okay so the same way we can apply for other fields also so the second one is name uh then [Music] description and the final one is price so here this name is the string and the third one is description and the final one is price price also a number okay okay now it is fine uh once we have this valid data we can call our APA create product then we can pass this object and just subscribe this one so we are mainly focusing on this uh angular in memory AP okay so that's what we are not worrying about this error handling scenario we are just working on the positive scenario we are we are expecting this should work so once it is created uh we can call over load product list okay so we need to populate the newly created record also and then we can say one alert like product created successfully and also we can make like is ADD equal to false we can just redirect to our listing screen okay and one more thing whenever we are clicking this add product make sure we have to reset our form otherwise the previous data only available so now we can verify this one okay same product created successfully and see we can see the the new record it's included it's here okay see the new products are created okay so next we can work for this edit so for this edit already included this function okay so here also we can just call our services get product and we need to pass this ID and I'm subscribing this one okay for getting the value let me declare one variable once we have this value we can assign into our form okay so the same way we can apply for all the fields okay let me format this one okay this is fine and for this edit scenario also I'm including one more variable so initially it should be false so in this Ed time only I'm just making this into true and in this back to list time we can make this into false okay and we can reuse this function we can use it here okay and just format and then edit variable also I'm going to use in our HTML side so this form is visible at least one of the property having the True Value okay and this list is visible if both are having the false value okay initially it's showing so if I'm clicking this add so now there is no data but but it's showing our add screen so when I'm clicking this edit see it's loaded with the existing data so if I'm clicking the second one see so next we can work for this save fromy so already we have completed so there we can include some optimization only okay first time I'm checking this is for add moving this code here so next in this uh El scenario first time going to assign the value for this ID okay so because uh in our reactive forms the ID field is uh disabled since we are using this value it's not fetching the datas okay but the create time is fine because the ID is autogenerated but this edit scenario this ID equal to using this raw value we can get this ID and converting this into number okay and next we can call the services so instead of a create we can use this update product and finally saying product updated successfully so instead of 80 I'm providing 85 and removing this all the contents and I'm saying test so it's saying updated successfully see it is automatically reflected so if I'm creating one new record okay it's reflected so now if I'm trying to edit this one see it's reflected so finally we have to refer this uh Delete so for this delete also we have a function we are having first we have to confirm to the user confirm delete so let me format this one and then we can have the AP C ID is the parameter okay so next we have to load this table and also sh the alert message product removed successfully we can verify now confirm delete once time click to okay so it's saying remote successfully and also it's reflected in our list okay so we successfully completed the cred actions once I'm refreshed I can see the default three datas because we these three values we have hardcoded okay so that's what it is coming once again and the side is the autogenerated field as of now we are provided the integer number so it is generated in the sequence order so we can try using some uh string value also so let me try yes one okay I just want to verify the behavior how the ID is generating that's it okay and in this model side also we need to make this into string and in this form declaration also we can say so the default value is CMT and for this conversion a string again here also it is string okay so almost we done done let me verify yeah initially it's loaded now I'm trying to create one record okay it's showing the error so the collection products ID type is non numeric or unknown so can only generate the numeric IDs okay so I believe in this case we have to provide the ID manually because it will generate the ID only for the numeric so anyway that also we can try we can pass this ID also parameter so first I'm removing this disabled property also okay then we can pass it manually S4 so now it is ID is created so if you want to use the auto generator ID make sure you should have this ID column as the integer otherwise you have to uh create the ID manually okay so that's that is a conclusion so now we are in the end of the video so I hope you got some better idea about this angler in memory still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 1,916

Keywords: how to use angular in memory api, angular 17 crud actions, angular crud actions, angular material UI in angular 17, what is angular in memory api, how to create dummy api in angular, how to create fake REST API in angular, angular 17 guide for beginers, use case of angular in memory, diff between angular in memory api ang json server api, nihira techiees, angular 17 tutorial, angular, angular 17, angular tutorial, basic angular videos, how to use angular 17

Id: dyCyvkU4hAg

Length: 33min 43sec (2023 seconds)

Published: Mon Feb 19 2024