Angular crud operation using JSON server | Reactive form Crud operation #angularcrud #angularproject

hello everyone today we will be learning angular Cloud operations using Json server so I have created my empty project already so now I will be running this project so first I'll go to my terminal and click on a new terminal and then the project first so our project has been running at localhost 41200 if you don't know how to create a new project so I'll be showing you first go to another new folder then type CMD and then type NG new project name for example I'll give credit so by this command we can create a new project so I have already created a new project so I will not be creating again so it will ask you whether you want routing or not that time we have to give s so here it's asking would you like to add angular routing that time I have to use y so I have already created new project so I will not create again so I'll go to my project again so I'll open localhost store on 200 here so this default one is running so I'll be removing it I'll go to SRC then app and then app it's component.html then I'll select this all and Save so first let me install the bootstrap for this project because we will be using bootstrap in this project so I'll go to the bootstrap official website so this get bootstop is the official website of bootstrap I hope on that so I'll be copying this first link and I'll go to my again here project and I'll go to my index.html and I'll be just pasting it below here again I'll be going I'll be copying this link you go to my project and I'll be pasting it on just below body and I'll save it so now we'll be creating the components so I'll be going to a new terminal so I'll be creating a component so NG generate component and component name Let It Be list so component has been created we can see list component has been created so I'll go to my routing module.ts a product module.ts here I have to specify the routes so I'll be going here path I'll give list and component will sorry component will be this component itself component this component and this will be getting Auto imported so by default we want to open the list component only so again I'll be giving path blank ET time redirect to begin list and path match play and save and then I'll go to my app component.html here I'll use router Outlet and save it and let me check yeah we can see this work list component is working it is our list component so here class equals to container foreign [Music] operation so again never here I'll take one now foreign equals to nearby and for H2 I'll begin the CSS so let me take H2 color s let me check yes we can see our number is finished so here I'll be needing a add button and here also I'll be needing a table so let's make it so let me make use of model first so again I'll go to my browser to bootstrap model go to official website of get booster and let me copy a model I'll be copying this model we'd like to paste it here so here I'll give BS here so let me go to my project yes I can see the model has been opening so this we have to change now uh like I want another here add button here I need after clicking the it I have to open so let me take a dupe here then I'll take a class deflex and I'll be taking a button here class equals to Green Club but I need BTN success and here I will be giving like we'll be doing a project for employer we can do for employee as well so I'll be doing add important so you can see that Empire has come so now what I will be doing this I will be copying foreign and I also need to copy this and let me check now when I click here now model has been open so this I don't need so I'll remember this so here also I'll be using PS so let me add in line style for this time equals to background it will be yellow green now for photo so I need to copy this thank you so I'm pasting it here as well yes I can see so for this close button I'll be using CSS so I'll be going here that is Dot close fourth weight I will keep 700 color LED uh border box cover let it be white LS blue foreign let me check where's the problem go back and the motor color as well and save it and attention yes looks fine so model title I will be doing so let it be add employee data wow all right so let me remove background of this right white color was coming and okay fine add employee data so let me use style for that Style together White so it's fine okay because we don't need to waste time in designing part if you want you can make this also as white I'm going to see is this color anyway font size will be 33 pixel okay this seems fine now this I'll change one will be cancel and one will be added so instead of close I'll make it cancel and this I'll make as ADD and class I will be changing and now like for add a relative to Blue primary and for cancel I will be making it Danger so let it be Danger okay we can see now so here I need a form so I will be going here bootstrap form I will be typing first link I'll go I'll be copying this go to my code and in my model body I'll be pasting it and let me check yes we can see but this is this will be changed now as per our project requirement will be doing so first let me remove this button this I don't need this form check code so I don't need actually so I don't need first one let it be so let it be here enter name first one will be name type will be text so another class I'll give you that is mb2 and this extra thing will be removed which is not required so this also will be removed because we'll be replicating this one first one name second one email will come so in the email here I'll be doing name let me check now and we can see fits and the name frame enter email field and next now next one will be setting so this will be the setting okay it will be text and here enter ing capacity and after that I need like PIN code and phone number as well good stuff it's I need and it is PIN code and phone number this will be for PIN code and PIN code so I'll be number PIN codes and last one will be the phone number again I'll be copying this click and paste enter phone number foreign let me change and we'll be making use of reactive forms so I'll go to my appmodel.ts here and I have to import reactive forms so I'll make use import ant okay this I'll copy paste it here and we'll be giving the form control name for everyday field in our list component.html so form control name equals to this one will be name I'll be copying for every fields this will be email and this will be City and this will be PIN code validation will be not doing actually we are doing Simple for validation you can check the validation video which I have done for this this will be phone number and here I will be using form group form group is equal to employee oh now I'm getting error because in component I have not done anything yet first I will do this then I'll be using it here so I'll go to my app company list component.js so employee form will be using so in Constructor first private form Builder form ulated MPS and I have to import form Builder from it angular oops so that error has gone now so from group also I'll be making use of it we will be using the validators as well as of now validator message I will be now showing in this video in this project because I already have done in different one last videos and all you can check there validator so employee form I am using employee form and it will be used receiving it will be here this Dot employee form equals to this Dot com Builder dot group first one will be the name and that will be validate does not required so we'll hit a spelling it changed okay now it's right next one is our email this I'll be copying 3D fibers that are totally our next one is email this will be email and it will be City pin and phone number City PIN code number let me see and I have sealed it and I am going to here and here I'll be using form group formed equal to employee form I am getting error because I have used extra P here observe this area let me save this and here I'll be creating a function on click so on this button I'm creating click codes to add employee let me Define it in TS let me see let me consol and check the values uh here I'll take a parameter data let it be any and I'll console and say culture.log data here abusing this Dot we want our formula employee form dot value we'll be testing it whether data is going or not you know what we can sync consoles so when I click here I just inspect first we're going to put a test status first test and if I click on ADD we can say data so let me remove it let me comment this let me disable this add field when data is invalid so I'll be using disabled if this Dot employee from dot in value let me see and check it yeah we can see button is invalid because there is no data I will make it validated putting all the data test and now it's become valid we are facing one problem when I click on ADD when I click on cancel it's not closing actually so here again data BS I have to use so right it will work now if I click and if I click on cancel it support me now here I need a table and that is on bootstrap table so you go here so I will take a due class equals to container fluid and little margin top I need and here I'll be using the table for you right table will be doing the first one if I go below check okay this table I'll be using the stabilize I'm using I'll be pasting it here let me check now okay this table has come here now I'll be changing all those things what we need that I'll be putting now of course will be name email setting this will be name everything will be dynamic when we do API integration this will be email next one will be setting after that we have the feed like pin code phone number you should be having any code again I'll copy here I'll be having phone number then action for edit or delete General may have action there's so much I don't think actually I'll be reminding all the static things these are and here I'll be doing edit and delete connection so let me use RTD then button and it will be edit and I'll be using class that will be primary class PTM foreign I need a delete here I'll be using images I'll be copying economic use of danger and let it be delete we can say edit and delete your account so let me create a model here I'll go create a model so I'll name as port foreign data model and here I'll be having first I'll be having name I also need ID and take ID of type number name of type string I'm sorry and then email of type string then I have password type number then we have like PIN code actually we are not using password I guess name email City pin and phone number image and let it be um number and for City I will replicate this one Let It Be set it and last one it will be input type number I will say so let me close all now I will close all the tabs I will be doing the API integration so first I have to create a service so I'll open a new tab and we'll be using the Json server for that so NG g400 is for service and services API so service has been created now I have I need a Json so I'll go to Google again type Json server and go to the first link here and I'll be copying this npm installed globalization server on another type or there also I could go paste it I install the recent server service has been created already and Json server has been installing after that I have to read the another command that is this is our watch the video Json at the time it will be running on localhost 3000 I have tested this okay now Json server has been running at localhost 3000. you can see Json server has been running post command time profile you can see here it will deploy.json ah I'll close it so I have to import HTTP Client First so I'll go to my app model.ts and here I'll import http client for angular comma right and do the foreign copy this paste it here I'll go to apa Service First private http system Decline and this will get Auto imported so first we will be doing a post request we have to post the data in this server and then we have to render it in the UI so post request will be doing so again I'll come here and give add employee and let me design the integration of that an employee and I'll be using parameters actually says this has to come below this okay I have to do parameter data of type where is our modeling model what we have give the name that we have to give that was data model so I'll be using the data model data model so this will be getting Auto imported or I have to import it otherwise and boot update let me see import data model from can't see right down only let me see let me fetch from SRC and check why it's not getting imported it's not getting imported because it's under the list component you can see so let me do one thing and list and got imported so I'll use return on this dot HTTP Dot now for the posting We will be using post method and I'll use data model foreign I'll be using the same URL post let me show you once I will go to w.json here uh different time to open it and this I will remove detected people and this is the photon also and then and save it and I'll copy a little refresh once and show post this there and copy this I have paste it here this data and Save so let me go to my list component.ts here and use instance private API API service API said this is what Auto imported so here in add employee data I have kept typing enabled remote and give data model regime data model this interface uh this will get Auto imported and here I have to like our API this dot API Dot add employee and I have to subscribe as well data dot subscribe response let me check once either we are getting data or not in this post when we when I use the postal data so I have come here so let me use test head test and phone number and adding it and I'll refresh because the data has been coming whatever it will post and I have I can check here also in david.json data is coming so we need to reset the form as well after submitting so now the form isn't present we can see for that also like I'll be using the reset function so this Dot employee form dot reset it will be listed automatically after submission so now whatever I am posting I want to show it here so that I will be doing and it is get method so again I will go to my API so Android employee will go for get it is the get method so let me give get employee return this dot HTTP dot get Autolite data model and data model ing no sorry yes yes data model update okay something I'm missing let me check yeah I am closing this selected also I have used and after that same I'll be using post I'll copy this again I will not write I'll paste it here same so in list component or TS first let me create a variable first so here I'll be creating a variable data and it will be like undefined and I'll be using data model so variable has been created and I will be saving the response in this variable only for the integration Focus so it is finished like I'll be using get employed and get a low um so this dot API dot get employee and I'll subscribe it take the response of it be same again this Dot data equals to the response and let me you know use this in HTML so I am using star engine for here uh star mg for item of data and now first one will be the data.name this will be that okay item dot name item dot name and then email City pin code phone number and okay email City pin code phone number I will be copying this after in main city will come copy this setting then pin code telephone number here pin code will come then phone number foreign foreign wait till refresh we have to call this function again after adding this Dot get employee and now I'll be heading the data so let me use [Music] um and phone number is adding it you can see data is coming we can add the data now let me create the update component so I have come to my terminal NG generate safer component component name is update um so update component has been created so I will go to my routing first on this update component we can see I'll go to my app routing model.ts first and here I'll give a path let it be up to date and component will be update let me try once again update component and this is what Auto imported so we'll on edit will pass the data by ID so I need ID as well slash that is ID and save it and let me check update as of now I'll remove the ID password ID because first I'll design the UI of it and we can check update so update works let me design the UI of this update page so I have come to my update component.html this default one I'll remove let me take a container do class equals to container let me take a row 2 class equals to row again give class equals to call MD 6. and let me take a card I need a margin top as well here I will and inside the card lgoh5 thank [Music] and I'll name it as update data date data receive here we can see completed so I'll go to my CSS first take H5 and textile and I'll use enter textile and it will be sending again I'll go to my HTML let me take a row class equals to root and I'll take the form let me go to the list HTML I have to copy from here the form tag this I'll be copying and I'll be pasting it here and this I'll remove and Save you can see now let me put CSS for this so I'll go to CSS again Dot card top 50 percent left hundred percent width 435 pixel padding 31 40 pixel transform Translate minus 50 percent let me see and we can see it has come here now this seems fine now I need two buttons as well we'll go here and here I'll take a due and send it I'll take a button foreign update and another will be like back button here I'll use these let me name this as back so I'll be using class class equals to BTN BTN for green color button and for back I'll give a dark color here I'll make it as dark and I'll keep a router link and you can see when I press on here back it's going back so now we'll be using forms module so we'll be using NG model so we don't need this form control name so form control name from your Gmail this form control name I have to remove from everywhere it is present in its update component and then save it so let me import forms model so I'll go to my app module.ts and here let me import forms model B from angular forms this I'll copy and paste here and Save so I'll go to my routing model.ts now slash thank you ID and here on list component.ts I can see the edit button so let me give a click function for it I mean router link ID link I'll give it as link um slash slash item dot ID and save it so whenever I click on edit we can see ID is also coming three if I go back and I click on edit it number is coming so ID is coming so again I'll go to my update component.ts and here private activate around you activated route this will get Auto imported and I also need a router Prime beat a router router Revenue to go from one page to another page and I'll save it in here on Android this dot activated route Dot param map I'll link you and I'll subscribe random panels pre-capital so I'm getting analysis yeah again I'll use a error function this param I have to use here up as well so and I'm Define a variable like data ID public data ID in your type number and now install this dot data ID equals to get that should be ID and I will console data type ID is net ID and I'll save it so let me inspect first if I click on edit you can see data ID is 5. so let me comment and keep this so let me go to my API service here I'll do the fetch data fetch data so I have to fetch the data and I'll be using ID number and let me use written this dot http Dot get and inside it I'll be using data model and I have to use the same path plus ID and plc it is a extra parameter and let me see you so I'll go to my update component.ts and here below this dot API Dot okay okay I have to link here in the instance I have to Define private API fpsrx yeah this dot API Dot fetch data dot subscribe and envision distorted ID entity ID first edit of ID and like after it I have to subscribe and take a data data model I'll be using another function so I have to store it in a variable so I'll Define a variable link employee data model Define Delta model so this dot employee or let me write it down or employee this Dot employee equals to data so I'll go to my HTML foreign data is coming so now this data I have to display over here all right maybe I'll remove this so I'll be making use of NG model Ng model equals to and it is employing dot name and then name equal to name undefined I have removed from here so we have to use the NG model for every field so for this and this will be email so name equals to email you copy for this it will be City so name equals to City foreign and last one will be for the phone number so number and this will be funny I like the same in check we can say all field has come if I click on anyone edit all the build will be coming now I'll be working on update so again I'll go to my I'll close unnecessary things first so I need API service and this is for update so employee and data using data model in ideal so I need or type number and return this dot http Dot we use put for object put data model should be using this URL and copy and paste it thank you plus ID and dig down and be saving it and go to my update company.ts so on HTML I'll give a click function I think update go to company dot yes update sorry update this dot API Dot update employee this door employee retiring and I'll subscribe take the response a response will be the data model itself and then after L Route 2 the main page now that is our list page dot navigate let's see let me check on this one I will make as [Music] and we can see in the round the movie will be updated we can see Mumbai has been updated on this Jack LED it and make Jacqueline I can set data has been updating and it completes our angular Cloud operation thanks for watching please do like and subscribe

Channel: The Angular - Info

Views: 22,153

Keywords:

Id: XdqVLFmnd74

Length: 69min 23sec (4163 seconds)

Published: Sun Jan 29 2023