Employee Management system Crud using JSON server #angularcrud |angular crud operation

hello everyone today we will be doing employee management credit operations so let's begin so first I have to create a project so I'll come to the folder and type CMD here I'll type NG new employee credit so we need routing so I'll give yes click here so it's creating a project for us foreign opened our project now so I'll go into my terminal first let me run the project first I'll cancel this so our project has been running at localhost 400 we can check now yes this default one I'll delete go to SRC I'll go to app component.html default one click select this indirect so I require bootstrap in my project so I will go here boost of official website foreign [Music] in this index.html I'll go back copy this paste below body so we need also link to link the font awesome CDN link so I had this Ponder some certainly this I'll give in description this I'll copy and paste just below here so we'll be also using the angular material in this so I have to install the angular material as well so this command I will be using to install NG angular material it will install angular material for us this I have to give us and select first one I want to globally into animation so now I have to create a component in G G for Generate C for component component folder add another would be View [Music] so inside this component I have to create model as well I'll create a new file employee model dot TS [Music] so I'll write here export interface [Music] employed all right so first is employee ID number I'll keep name [Music] string mobile admin number gender it will be string email [Music] position address is remaining and fishing and close this cut load this animation I'll go to app component.ts here so let us use in our component so we should make use of matte input module now I'll go here in Google mind root model all these are for material which will be using I'll copy this I'll go to my Android module.ts paste it here I'll use it here I need matte form field module as well copy this paste it and this will be coping and pasting it here I need matte select model copy this paste it here I'll be copying this as well I'm pasting it here go to my app.component.html here so we'll make use of routing [Music] here in app dot routing model.ts I'll be going here inside this all right let me take path and it is blank time redirect to add path Magic again I didn't take but let us add email use component add component and let me go to my here app.html till I use [Music] so I don't need this now let me go here foreign path component will combined it got Auto input data I will go back I'll cancel this now go to app dot component.html here no this also I don't need in add I'll go add component.html [Music] it's three I will use [Music] let me go Style text align Center as we can see employment system has come out in central let me take a charting you can say this line has come otherwise [Music] okay it has come now let me take you equals to container let me take container fluid let me take form I need row let me make use of call [Music] let me go into Google okay let me take any one example I'll take this example paste it here appearance Let It Be outline cool people because so we can see this has come so let me replace or it is employee ID and employee ID here it will be type sorry type equals to [Music] number we can see employee ID has come now this font should be like bigger it got changed so easy uh 20 pixelated with 30 pixel okay now I need employee name this I'll copy let me give you employee name type will be name on this default value will remove please enter employee name by chance this material is not working those forms are not working then you can import this in your Global CSS let me increase the width of those I will come here and in form fields and I'll give style Dot width dot pixel equals to 350. 783 it will be coming pixels only let me copy this and apply for the second one as well so for this also I'll apply the size and let me check now yeah we can see size has been increased here phone number will come we'll copy this again phone number and type I'll put number enter your [Music] we can see this field has come and go back I need another row now do class equals to row [Music] two class equals to four copy now I need email s [Music] emailing and type Let It Be email itself we can see email has gone here I need address I'll copy it again dead viewer address type is equal to it's not input it's text area because it's the address close the text area cool we can see we got now I need your salary so I'll copy this and this is server salary tag number you can see salary field has gone now two more is remaining one is gender and one is positioned for that I'll use drop down again and take due class equals to row do you class equals to call for I'll go to here HTML go to component.ts here let me use Industries gender good value string view value is also stream [Music] and here I'll use gender foreign [Music] [Music] value mail this any change gender and that is the user chapter red display mean female copy female [Music] so we'll go in Google material drop down [Music] close this first one my select model there has been already imported and go below we'll select this and go to here add component paste it here here I'll use gender let user gender of gender off gender where do I look foreign so let me make a here small V and it is general.p value and gender dot value again I have to make some edit PMS outline edit this gender everything which was here so size I will be using here itself Not Dead let me check as we can see in this way let's go now another field is remaining this will be of position so let me do I'll copy this again we should be going to be positioned so let me go to my component.ts here I'll be using this as a position and copy this thank you this will be positional using position now all right and I'll be changing the values here and get that I'll be changing here let me change the react let me copy it again make Java so I'll make here user position foreign and here I'll make position [Music] foreign as we can see it's coming buttons below here we need two buttons add and view so I'll go uh here I'll take a due due to LT and let me take button which is a bootstrap button class I'll give you [Music] VPN dark Let It Be button I'll give add first same thing I'll copy I'll use Danger here for the view button so we need this button in Center as well I'll use style here in due itself and give text align Center I'll give your Center we need spacing as well between this let me give margin left here I'll copy this paste it here [Music] and in CSS I'll go Dot margin left [Music] 10 pixel margin left Let It Go to 10 pixel and we got spacing here now I have to Route this page to the view component as well let us load it go to my HTML here so let me use router link the router link [Music] [Applause] and this will be [Music] let us check yes we can see this is taking us to the view component so I'll go to my ADD component.ts here let me input this model employee model.ts two pork employee from the component and I'll Define it here below export foreign public empty employee equals to s [Music] so we'll be making use of NG model so for making use of NG model we need to import forms model I'll go here import forms modules I'll copy this you go to app.nodule.ts use it [Music] and go to my HTML so I'll give you here name equals to tid let me make use of NG model Ng model equals to empty Dot explained so this is coming from here Eid is coming from here same thing for all we have to do I'll copy this so this is name [Music] dot name it is so this is mobile dot mobile this is email dot email it is [Music] this is address this is address so salary we didn't Define I'll Define here salary right this type of number [Music] so here I'll give name is sell them so here I will be using for gender [Music] gender gender same thing I'll be using for position as well so here I am using for position [Music] very dot position I have used everything now now I will be making use of Json server to add the user so I'll go here in Google and go to Json server here [Music] coming below on this I'll copy so digital server will get installed so it got installed so now this command I have to use to start it so Json server will be running at localhost 3000 so we can see so I'll go to my Json server back uh here I'll go for db.json here it is I'll remove this because I will be using this only already one is given so in post only we'll be putting all the data so let me create a service first so for service NG generate Esco service and I'll create in a folder map letters so service is created we can see my service.ts this is our service so we'll make create edit delete and all here only all the balls of the HTT will be made here only so I'll go back I need HTTP and answer [Music] I have to import first so I'll make use of this I'll copy this and go to my app dot model.ts here I'll be pasting it just below here I'll copy this models I'll put sorry all got copied actually foreign copy http and I'll use it in service my service is here all right this I'll make use this is just HTTP client mode so I'll create create user first create a user um so I'll pass the data here type in [Music] this will be written this Dot http client sorry HTTP related way because we have used HTTP itself Dot post any and will make use of the path which is this would appreciated yes we make use of this itself push and I'll be pasting it here so data and we'll make use of pipe pipe map data any [Music] foreign [Music] specifically operators so we have to return the data as well so let me make use of service I'll go to F component of TS will find a Constructor here let me make private Employee Service my service it is so got Auto imported here SRC app inside a service folder my service for click function I have to create for this add component here in HTML for this ad on click click equals to add so I'll Define in my component.ts add [Music] so this Dot Employee Service which is this we have used dot create user which is used to create a user [Applause] this Dot employee emty because all comes from here only we have given this name which is of the model we also need to subscribe the data Dot subscribe data employee here so after creating I have to route to The View page so this uh I have to import the router as well for here [Applause] in [Music] private router this also got Auto imported so this dot router dot navigate to this view page foreign I'll also Define the error during error [Music] we have to alert that something went wrong [Music] and I have to not navigate I have to stay on the same page as well this Dot router dot navigate [Music] stay on same page and I'll console and see the data as well like data is coming or not and here alert and data added okay so I'll consult and see the data so let me first inspect press on console let me give a data employee ID phone number value email ID address I need you foreign [Music] we can see here you can see data is coming this is our data so ad is working now now we have to display the data here as well that we will be doing so let me close it so I'll go to my view dot component dot HTML here okay there's one heading I want writing like this one layer copy this I'll remove [Music] employee management system view value [Music] let me give this the rate we'll be putting the table as well I did delete everything will be there here only uh so for that I'll go to my service first anything I don't need that is to get the data to render the data I needed it so let me create a get user here get user sorry done this dot http Dot get same thing I'll be using post [Music] this is to get I'll go to my view component dot DS here review component HTML and go for the table file I'll give here bootstrap table go here okay this table analytic below HR tag I'll paste this will dummy table which is Hardbody but all everything will be doing dynamically this is our table okay now go back here I'll take a due from here I need after a chat I take a Duo this will cut class container fluid I'll take [Music] table t table border dynamic you can see border has come to our table so this will be employee ID employee ID this will be this will be name second one will be third one will be designation or position I have given so that will be position foreign would be gender [Music] so I'll copy it three times here rated by address here mobile number here sell them [Music] another for email I need here I will email and last one would be for Action to delete or edit so this also I'll remove all will be dynamic actually foreign copy and let me copy once more let me check now yes it has come here I need two button one is edit and only delete that I will do this album edit and delete button I'll take go here so on awesome edit [Music] this I'll copy [Music] paste it here [Music] sorry I have to copy this actually and paste it here so this let me use I find it and check and check yeah edit is working one is for delete now try to delete all right it is trash for delete some space will keep okay it has come now let me put color as well style is equal to color and let me blue itself and here I'll put right up sell coffee [Applause] [Music] Let It Be Right let us check now we can say that it has come so I'll go to view company.ts so model also I have to call here so I have done it in add component.ts same thing I'll copy this employee model my service both we need Excel copy and paste it here we have to declare the model as well I have declared it here like this video export same thing I have to do here as well and in Constructor I have to specify it I have done here like that we have to specify there as well in this we need to specify so it got highlighted now so I'll create get user function here get user will loop everything by ng4 this Dot Employee Service Dot get user decided you get my user you have to subscribe it take the response and I have to store it in like a place for example I have to store it in my employee oh that's right my employee and [Music] start [Applause] [Music] my employee in that I'll store the result and I'll call it in engine this method Dot get my user so response is stored in my employee let us control and see the response [Music] we can see the response is coming same responses coming that we have created here not post so let this become my data now I'll bind it uh use it on HTML component in here TR I'll use ng4 NG for [Music] equals to let user of it was design copy my employee where response has been stored [Music] we tested here [Music] let me use it here using into position so user dot Eid make it here first is employee ID second is name this I'll copy everywhere or completely I'll copy dot meaning next one is position dot position this will be gender [Music] after gender email comes [Music] after that address remaining is mobile number and salary and sell let me check now yes every data has come now we can see I'll add another data and show [Music] email.com it doesn't [Music] mean position let it be erect we can say data has been adding now this has been working now I'll work on delete so let me go to my service first service services and model yeah and this is for creating this is for displaying now I'll create for delete Let It Be user any [Music] same thing I'll copy paste here some changes I have to make so here it will be delete [Music] so plus I have to put Plus user dot ID this I'll call in my component.ts now foreign function just delete or click delete specifying component.ts delete user foreign [Music] so I'll use this Dot Employee Service Dot delete user passes here user ending no subscribe thanks user I have to pass here yes error has been gone let me check now receiver to delete yes on deleting it on refresh it's updating is after deleting I need to update so I need to call it and just get get user start [Music] s now I'll check yes okay we can see it's deleting so delete is also working now edit is remaining add a back button first here I'll take a div here I need a back button foreign class BTN booster buttons it is Let It Be dark back and then it in Center text align Center let me check it has come to Center I want router Outlet or router link yeah mainly it will if I click here you can see we are going to that page so for edit I have I need to create a component so I'll create a component company open linked folder edit edit component has been created let me go to routermodel.ts here copy this kind I need for edit so I'll give [Music] edit component so so on click I have to pass the data to another component to that param so I'll use date or update it is data ID our server had been stopped so again I'm starting it so we'll go here on this on this edit right use a router link foreign [Music] slash update it is so data edit is user.id foreign edit component so we have to work on that edit component now this is remaining after that update also I have to do this basically carries the ID number eight we can see if I go back number three it's carrying the ID from here let me go to the global style.css here it is I'll keep our background otherwise background light yellow let me keep foreign [Music] service yeah in my service to pass through patterns and let it maybe fetch data we have to pass by ID number return this Dot http dot get in same I'll keep I'll take a strike plus ID editing and data no we are not passing data we are passing on the ID all right so let me go to my ADD component here I'll create this I'll copy this HTML and paste it into the edit section and it's boxing and here I'll give name thank you real page in edit component everything I have to pass which there are in a component of TS first I'll copy this both United component.ts I'll paste it people this I'll copy interface paste it here it's completely I'll copy and paste our Constructor all right I'm going to edit HTML which I have to remove and name this as update because it is update name it is foreign and here I have to make it back [Music] so let me click on edit everything is coming up data should come here that I have to do now so in Constructor I have to call that service how I have called in add same like this I have to call the service foreign [Music] got Auto imported here I can see so here I have to call it this Dot activated route Dot param map dot subscribe params so here I have to do param Dot get data so here data ID any and here this Dot data ID is equal to param dot get data and in active routes I have to pass where them says so I am getting an error let me see property get comes from signature index so let me fix it let me go to my ts config this I'll keep false and now error should go like this as well so here and I'll go this Dot Employee Service Dot fetch data this dot data ID yeah again I have to subscribe [Music] retaining and I have to store this response first so we'll go up public data any result inside the data this Dot data equals to data so name a Sim I'll change it I'll make it my data please don't mind data is equal to and my data I'll concern and block the data see the data if I click on I'll go to console first if I click on any edit you can see data is coming so now we have to render the data so this I'll comment again so this is actually not my data I think uh we have stored the data which is coming from the Public Employee from there it is coming that we have to enter so this is this plot three let me check so let me click on any of the edit uh I'm clicking on this widget we can see all data is coming so this actually we needed click of the edit all data should come yes data has been coming Now update is remaining again we have to go to our service and create a work on the update this is the last one for update so I'll create update and data and ID help us and me ID number written this dot http Dot put I have to use for update any I have used here will be our localhost certified this first two parameters that have one ID and data all right I have to pipe it I have to take the response map take the response thank you [Music] [Music] and actors this we will call there in our component create a function here on editor name is update foreign Employee Service Dot update update data Let It Be update this Dot comma Dot data ID [Music] here I'll pass DOT data ID after that I'll subscribe [Applause] First Data please so we'll make use of router outside as well import private just a router on the router Outlet will make use of router to go to view page after updating it has to go to the view page this thought router Dot navigate towards view page this I have to call in the button click this is update data we'll copy [Applause] so I'll go to edit.component.ts after updating uh here I'll give alert data updated successfully so let me check now so JS is a react developer I'll edit and I'll make him my angular developer and I'll update data update successfully we can see data has been changed so going back here previous this is delete this is edit so everything has been working now perfectly so please like And subscribe this video thank you everyone

Channel: The Angular - Info

Views: 4,310

Keywords:

Id: 2izIsmqCCpo

Length: 87min 36sec (5256 seconds)

Published: Sun Oct 02 2022