Angular 15 CRUD app using material UI | JSON-server | step by step

so in this video we are going to build a complete crud applications together so let's see what are the features we are going to cover in this video so user can add the detail like final user final at the rate gmail.com date of birth we could select as of now let's take this date mail education postgraduate company Google pack experience 4 package 12. click on save so you can see record added successfully you can see the last record 201 final user added successfully we could also update this record like fail to female date of birth let's change the date of birth and also update the package to 125 once hit the update button here you could see the record is updated let's refresh this page by default it's showing on ascending order we could also short this in descending order here you could see the detail we could also filter the record like final and we could delete this record as well so for building this applications what are the technology we are going to use so we will use angular 15 angular material for UI designing and also we'll use Json server before building the backend and rest API without any coding so these are the features we are going to cover in this video so let's get right into it without any further delay so hi guys it's me Ansari so now let's start I'm going to generate my angular application inside this coding folder so here I'll generate my angular applications so the first thing let's clear the URL and type CMD so that we could open CMD inside this folder so here you could see I am inside e Drive encoding folder here I'll generate angular application NG new but before that let me show you the version NG version here you could see that I have angular CLI version 15.0.1 which is the latest as of now and node version is 16.16 and you could see all other versions so now let's generate application NG new crud app would you like to add routing yes CSS I'm going to use scss so application generated successfully now let's open this in vs code so first of all let's go inside this folder CD and type code Dot now let's open Terminal for opening the terminal we have two ways to open that you can go here and click on new terminal or you can also type control and tilt symbol Control Plus tilt now let me run this application so for running this we have command NG serve and if you want to open in browser you can also type hyphen o so now here you can see our application compiled successfully and also you can see the output in the browser perfect now let's add angular material to this project okay up in the browser go to material.angular.io now click on get started and here you will find the command to install this angular material in the project and make sure guys right now the latest version of angular is angular 15.0.3 okay just copy this and add in your project now let me open one more terminal so I'll click here on plus icon and I love to organize everything so let me name this first terminal angular and I'll name the second one CLI okay so let's go to the CLI and type this command NG add at the root angular slash material so this will add angular material in our project so now it is also automatically detected with the package angular 15 is going to be installed would you like to proceed so if I say yes it will start installing these packages now here we could choose pre-built theme or if you want to create the custom theme we could also choose the option custom here but let's go with the pre-built theme Indigo slash ping this one and it will ask few more questions like set up the global angular material typography style let's say yes include and enable animation yes so it's updating the installation file package installed successfully and everything is done now let's check angular CLI it is also fine now let's start so before starting let's go back to angular material websites now click on components now first thing we want to build is the header for the header we are going to use toolbar now we have many examples plenty of examples here we could use any one of them so now let's go with the basic toolbar this one so what we want in our left side we'll just give the title like in our case we'll give grad app and the right side will add one button so we could also copy this one toolbar copy this here minimize it let's go to the app and first component is the default component now let's delete all the codes including router Outlet let's delete everything as of now and we pasted this toolbar code now this is not going to work guys you will start seeing the field because we haven't added any module so now let's add the module first so go back to the angle material click on API copy this module import come back to your app module.ts and here you need to add that okay matte toolbar module and also add inside Imports array save this still you can see it's failing because of matte icon if you see inside this toolbar we are not only using the toolbar selected we are also using matte icon for that we need to also go to the component click on icons and click on API we need to also import this module because we are using it so we need to import it let's import this here as well okay now here you could see compiled successfully now let's check the output yep it's completely like it's not looking as we expected now whenever you installed angular material it's highly recommended at recompile your applications let me recompile it again now this time I don't want to open the browsers let me remove hypheno option and I'll just run NG sir so app recompiled successfully now let's check it again now this time if I refresh I get this look right this is much better but still we are getting this because we haven't imported the button module let's come back to the code and import one more thing matte button module if you don't get Auto suggestions let's import it directly from here instead of this button matte button module perfect now save it come back here refresh it now here you could see it's looking much better now if you notice that we don't have any gaps if you see the actual one matte dialog let's go back to the dialog toolbar actually okay in this example here you could see there is a gap so we haven't copied the CSS let's copy this CSS example from here in our application and paste it here if I check the output you could see the gap between now let's delete the extra thing like we don't need this hamburger icon and we don't need these icons let's go back to the code remove the extra thing this hamburger we need space between these two elements so let's keep this span as same it is now let me Define again a button and material button we need to add one matte directive matte raised button okay I could give title like add employee that's all now let's go back and see here we are getting this in a white color if we want to make it primary then add one more color primary now let's look at this it's looking fine but we don't want this button as primary keep it as wide default color and we want to make this toolbar as primary color so let's make it color primary save this and here you could see is coming on primary color my instead of my app let's add it crud app or application crud application perfect so our header is ready now let's work on ad employee so whenever I'll click on ADD employee button I want to open a dialog box inside that I want to load add employee component I'll use the same component like for ADD and edit so now let's generate first employee add edit component let's go to the CLI NG generate component EMP add edit so component created successfully now we need to First import the module uh matte dialog module if it doesn't Source we could also import manually import matte dialog module from at the rate angular material slash dialogue perfect so we imported matte dialog successfully now it has one service let's use that here in app component so now let's first create Constructor private let's inject underscore dialog I always use underscore for like dependency injected variables so matte dialog so it's easy to like differentiate this is a service variable right now let me create a pin add edit EMP irm I'm very poor in giving names but it's the don't worry use and it has one method open and inside that you need to pass the component which you want to open inside a dialog box so here I'm going to use EMP add edit component that's all now save it go to angular CLI and see this so it's compiled successfully now let's see the output in the browser if I click nothing is working because I just defined this method but we need to execute this function whenever when we click on ADD employee button let's bind with the click event so anyone will click on this add employee button this method will be executed and it will open dialog so now here you could see this EMP added it works here perfect so now let's work on this employee added form so my dialogue has three things let me tell you so let me first create three divs this will be used for mat dialog title in the middle we'll use mat dialog content and the last one we'll use for mat dialogue actions now let me tell you what is the difference between these three so we'll use this part for giving the title like in our case let's give the title employee form and we'll use action for creating two buttons here like cancel and save let's create button matte raised button cancel and for Save values also my Trace button say but the color will want different for the save button so let's color primary values for the same so action is done so action always come in the bottom with the two buttons like cancel and primary and header is also done and the content we'll use for defining our form element let's save it let's first check the output here you could see we have two button cancel save and we could also see the title employee form perfect so far so good so now let's for defining the form control we'll use material so we'll use form form fields now here you could see these are the fields we are going to use for the select now the first thing we need to import this module in our module let's go to the app module imported this now let's copy the example code here not this one I will use this code only the first one I am going to use this matte form field inside our employee add edit component now let's paste it here save it now let's check it now here you could see there is some issues in the form you know why because we are using matte input as well and we haven't imported matte input module now we need to import that as well so let's import matte input module we are not getting any auto suggestions so we need to input let's copy this paste it again and change this from the form field to input and let's change this to matte input module perfect I'll save this and let's again check the output now it's working fine perfect now we don't want a simple one we want outline so we'll use instead of fill we'll use now let's see the difference between so this is the outline now if I'm using outline here you could see there is uh there's something issue with the top okay we'll resolve that later on let's first so in uh actually what I want in each row I want two element so let's define one div and inside that I'll keep this okay so Dave class row so in each row I want two form element let me copy this and paste it here and this will be the first name name last name okay by default type will be text we don't need to mention and also we could mention placeholder so here I'm giving like example technical the same way we could give example here the last name Baba apart from text if you have any other type of input then definitely Define it for the text you can skip this this is optional now you can see it's coming side by side but there is an issue like we don't have any Gap row class is applying so let's define this row class here display Flex Gap I'll keep the gap of 10 PX perfect so far so good now we want the margin from the top okay so for that what I will do is inside the content I'll use one class uh content let me add padding inside this class let's keep this class in top I haven't used Dot let's define the padding top now here you could see the text are proper visible now let's repeat the same process I'll use the row this time I'll use email and the type will be email example test at the rate of gmail.com perfect now here I'll use date of birth for date of birth will not use form field we are going to use some other material component which is date picker date picker this one we will use this component okay now for using this we need to import this module in our own module actually we need to import two modules not only this one let's first import this here and also we need one more module mat native date module if you don't import you'll get some issues and in the error you will get the message okay so I imported these two now fine now let's copy the code so let's go to the example code here this one this is looks perfect let's copy this one now let's remove this second row and here I'm going to add this one perfectly fine now let's see this output it's working or not yep as of now you can see first name last name email and choose date here we see two problems first of all it's not coming outline outlines are not coming and also it's taking little more space so let's first fix the outline instead of fill we'll use perfect so outline issue is resolved now the issue is like the space so every form field is coming inside row okay this is also a form field so what I'll do inside a row because I'm using scss so I'll Define a style inside a row for this form field not class directly to I'll apply to the form field with 100 percent so everyone will take the 100 space so it will automatically solve the issue now here you can see every component is taking the equal spaces okay perfect now let's add one more thing for the gender let's add one more row row here I'll use radio button now let's check in angular for the radio button search for the radio button r radio buttons okay we're going to use this basic one so first we need to import the module let's import this module at Radio module go to our own module matte radio let's import it here now let's come back here and copy the example code now let's come to this employee added form and inside this row let's add it here now we need one more thing like matte label and here I'll give gender and gender should be in bold so let's wrap with the B tag so it automatically will be bold now two options so the first option value I want value male in small letter and the text which will be displayed in UI will be mail in capital letter the same I'll do for female female value will be in small and the text and let's add one more for others others perfect now let's check the UI now here you could see gender is also working fine let's add more form elements so let me add one more row so now I'm going to use one more row and in this row I'll take two things education and company name so for Education I'm going to use select material select let's go here and find select so here I see the select I'll use the simple select okay basic select and there I'll give the options for all the education option let me paste here now here you can see the mat select is not working because we haven't imported mat select module let's do the same process now let's go here and we see the errors because ng4 and Foods we don't have this variable as of now so let's delete this and let's delete this as well as of now we don't have absence we have a blank option now let's just check so select is also coming here we have two issue notice it's not coming outline and also we don't have any options so let's make first outline and then for each options let's create a variable education variable here type would be string and inside the array let's give metric enter create all right diploma let's keep diploma before intermediate let's add Grudge let's add postgraduate so these are the list and these are the options I want to give so for that let's come to this option and here uh for generating multiple options we could use as trick ng4 let Val of education so it will Loop through all the elements of that array now every option has value property and it is an input so we could pass this Val so at each iteration it will point out to each element like in the first it will point to Matrix then diploma intermediate graduate postgraduate now this is the value when user selects and now we want to show in the UI and Val so this will show on the UI and if user selects this value will be passed to the backend now let's check the UI now we could select these options now let's fix the label issue here favorite foods instead of favorite foods education or qualification as you session and here also I noticed one thing choose a date date of birth birth now in this row I want to add one more thing company name so that will be the simple form field a text field let's copy this one and paste here and change the name company example Google I'll give in a placeholder and by default it would be a text type of input now let's add one more row and this will be the final row class row and here I want to add two more form field for experience and package and finally package example experience four and package 12. inside a package I also want to give a hint to the user so Matt hint in in rupees so user cannot enter in dollars like I'm just giving hint whatever you are writing that will be in rupees in terms of rupees okay now let's save it and check that perfect in rupees here you could see the end as well and both this field should be of type number so let's add type press alt for multiple pointer at the same time so here I'm giving type number perfect you won't see the much differences on it but it would be a number type like explains this this way so our form is ready now let's work on this uh button so actually you could see the alignment little bit of the alignment issues we could see and I want button should also take the equal space and entire space okay now let's do this so action I'll use this class first let's define this class action I'll take the padding from Top should I let's check this there is no need to take the padding from Top okay so 0px will take but from left and right we need some space so 25 PX I want and also From The Bottom I want 20px so this will for the left and right side and this is for the top and this is for the bottom let's save it let's first check it yeah perfect now you could see the alignments are perfectly fine now actually in material angular material uh the action if you use inside a model they already applied the flex class so we just need to put button directly give Flex one now let's check it now here you could see these are taking the equal spaces so our form is ready now let's bind with the reactive form so using the reactive form we need to import a module reactive for modules perfect now let's come to this let's define a form P form form group type will be and here we are getting the error because it has no initialize so let's initialize this form and for me the best place is to initialize this Constructor but most of the people use also NG on in it no worry I'll use Constructor EMP form and we don't need to make it optional I have seen many people make it like optional because they defined this form inside engine on it if you are defining inside a console you don't need to make this you don't need to make this optional now this Dot now let's use the service of form Builder private as I said I always use underscore for service variable form Builder now three start FB Dot group now let's create all the control here like first name blank last name I forget to put the comma here email date of birth gender education the company then finally package so now let's bind each of these with our form field now here you could see you notice like we have two sections we have matte dialog actions and we have made dialog content and we have few elements here our form fields and the button we have here so how we will take the form tag so we cannot take form tag inside this if we take we cannot wrap this two button with the form so let's create the form tag outside of this and wrap with these two like content as well as with action not get any issue because this don't take any space now let's bind this form group EMP form perfect now let's bind each of the control one by one and always bind with the input so here form control name first name and this name is actually should be same with these names okay make sure that all the names whichever you define whenever you use form control name this should match hundred percent with these names if don't then it will not work okay now let's copy this use for the last name I remember the name so I don't need to copy paste here email here I'll use in the input DOB engender I'll use gender here inside the education in math select values and here I'll use here I'll use here I'll use perfect so we did the bind and now let's make this save button type as submit submit so whenever I'll click this submit type button inside a form it will trigger one event which is called NG submit event so we need to capture here inside the form tag in this submit so only this event triggers when we click on submit button so on form submit let's create this function so this function will call whenever submit event will be triggered now let's Define this function here let's use if this dot employee form valid then do the console as of now we haven't added any validation so there won't be any validation error then finally we just want to check the value now let's check our form is ready or not if I click so here you could see let's also open also open the console so we could see that we make sure that we don't have any issue we click it the form is open let's fill with the basic details like date of birth let's use today's date of birth mail education postgraduate company Google Experience Fourier package let's add 12 just for example and if I click on Save here you could see it's coming all the details make sure that every details are coming packages last name mail first name experience email education dob company so everything is coming right so our form is working so our form is ready now let's build rest API and server for storing this data here I'm going to use Json server so Json server is full fake rest API with zero coding in less than 30 seconds so you can create a j server without any coding this is created for front-end developers who need a quick backend for prototyping and mocking so exactly guys I'll show you how you can create and set up each and everything in this video so I'm not going to take like 30 seconds maybe I'll take little more because I need to explain you guys as well so the first steps let's come here copy this and store globally so that this command will work installing this package globally put hyphen G as an option so it will install this package globally so package is installed successfully now let's go back to here and you just need to copy one more command just this one go to your project and type it again so this command automatically creates a db.json file and here you could see already some default datas how it works let me explain so you can see here three URLs already generated so post if I call this apis if I call the get methods I'll get all the list of the post if I create post it will add one more post inside this array so in this way it works now let's check this URL first in the browser so here you can see the exact one entry here so here also you can see one logs for the get call now let's add directly here one more object employee I'm keeping this as a blank array now save this here you could see one more endpoints generated now I'm going to use these endpoints now let's create Service First let me rename this as Json server let me add one more let's rename this as CLI and keep this running now let's come to the CLI and here let me generate one service NG generate service inside service says folder employee so Services created successfully now let's import one more module because we are going to use HTTP client for that we need to import http client module first now let's go to inside the service file here I'm going to inject one service private underscore http client perfect now let's create first service add Chloe it will take as argument data or payload type will be any return this dot HTTP dot post and here we need to pass the URL and if you remember guys so this is our URL and the second parameter we need to pass the data and this will return observable so here we could also specify if you want type return type observable and the data type would be any now let's call this service method from our component now inside this Constructor let's inject our newly created service private underscore EMP service EMP service inject this and let's use this so now here they start EMP service let's call this method add and pass the value this Dot EMP form dot value so we'll pass the value of the form so this and let's subscribe and inside the Subscribe object Define an object like next if it is success let's get the result here if there is any error I'll get here now if we get the error let's do the console.log error and whatever the error object will receive so let's receive the error here and what would be any okay now if it is Success now first thing we want to show the message as of now uh what I'm going to use I'm just going to use alert later on I'll replace this alert with snack bar employee added successfully simply added successfully and then what we will do so here we need a reference of the dialog for that we need to inject one more service private School dialogue ref I'm giving name dialog ref and in type you need to pass this class name this one okay pass here we got the reference and now we can close the model so this dot dialogue ref Dot close perfect now let's save this and check everything is compiled successfully now let's check in the browser first clear the log enter admin at the rate gmail.com date of birth let's choose 4chan Maybe postgraduate company Google experience four Mac h2l let's click on Save so once I click here you could see the message employee edit successfully once I click on OK you could see dialog box is closed now let's check our Json file db.json file so here you could see inside this employee array uh we got one object okay and Json server generated ID so this ID is generated by Json server they generated id1 if I'll add another object it will show two and we could also get this value using this URL employee if I call this URL now here you could see the data sorry API is working fine now let's try to add one more record here just to verify it test user test at the rate gmail.com date of birth one gen education math diploma company fake four and packages 12. let's click on Save employee added successfully now let's check this URL let's hit it again now here you could see two objects are coming now let's verify it again clear check db.json file here you could see there is two objects inside this employee array and the ID is 2. perfectly fine so it is working fine now let's build a table so now what I want I want to show a table where I'll list all the employee detail now for showing the data inside a table we need to First fetch all the list of employees then we can show all the data inside the table so now let's first Define a service for getting all the employee list so inside our service file let's define one more service okay employee list you don't need to send any parameter here we're not going to use post method we are going to use get and on the same URL now let's use this method inside our component so this time I'm going to work on app.component.ts file here inside the Constructor let's first inject our service underscore EMP service EMP service inject here now let's create one method inside here get employee list and here let's call service method EMP service dot get employee list so this will return an observable so last subscribe to this observable subscribe and handle this next and here we will get the response and let's handle the error if we get any error error now as of now we can do the console DOT log error so instead of writing like this we could write in shorthand so just do console.log and pass the reference of console.log so it is same as it is so instead of writing this much of line you could also write like this okay now as of now just do the console.log just to check that we are getting the data or not let's go here now we are not getting data because we haven't called this so the best place is to inside NG on in it so let's Implement NG on units on in it okay now let's define engine in it just after the Constructor and here let's call the gate employee list that's all now let's go back to the UI again if I come here so here you can see two items inside an array so we are getting the data from the servers now let's show all this detail inside a table so for that I'm going to use Mac table mat table let's first import this Mac table module inside our module app module matte table module now let's copy the code so inside the example I'm going to use our example table which has filter pagination and also table with multiple headers data table with sorting pagination and filters I'm looking for this table let me copy this table code here from here okay let's come to our components in our case appcomponent.html so inside the toolbar let's paste this code so we are going to get a lot of Errors so I'm going to fix one by one all these error so let's go back to comp example code let's copy all the import first and we will also import view child go to the TS file paste all the Imports and also import view child let's go back again and import these four line from here and before Constructor let's paste it here let's delete this one we are not using anywhere now let's make all the field optional by putting exclamation so that we won't get any error now we are not going to Define any interfaces so let's make type any as of now perfect now let's define all the display columns name so now try to keep all the columns name whichever you get from the apis and you want to display that so in our case if you see the console.log if you remember we got two two arrays and let's copy one by one all the fields from here so first name last name email everything okay first name last name sorry I haven't written first name and try to match this with your API keys so in our case it should match with all these Keys like first name it should be exactly same the last name we have here email DOB gender education save this so I'll write the bottom education company experience package fine so we defined all this now let's go to get employee list instead of console.log here these dot data source new mat table data source and here we need to pass the response so it will create the data source for us and now these dot data source Dot chart assign R shot this Dot short so this shot we are getting from view child here we are getting the reference here so we are assigning this to our table data source so this will work now in the same way let's do this dot data source dot resonator equal to this Dot paginator nice now little bit work is done still we are getting error because we have to Define this apply filter method as well now let's go to the definition of material table and copy the definition of apply filter this one and paste in our component .ts file perfect I still we have error because at the end we use paginator so we need to import this module let's import matte paginator module paginator module and also we need to import matte short module these two fine now it's compiled successfully now let's check the output in the browser still we are getting error column first name didn't match so we are getting this kind of Errors because we haven't mapped all the data source display columns so let me tell you guys now one by one we need to Define all the fields whatever we mentioned here it should be in our UI we need to map this so let's go here and delete all the existing one like ID column it's perfectly fine we have ID we need to also mention first name here this name and this name here you mentioned this should match and this is the name which we display in the UI so you can change this like first name and here you can use this dot let row we use here so let row that first name in the same way uh there must be two okay first name let's remove this percentage sign from here first name in the same way we'll do for the SEC last name and let's delete all these other definition okay multiple select at the same time last name for doing the multiple select as I said we need to press first select this and press Ctrl D it will do the multiple select last name email DOB date of birth gender Ctrl d education Ctrl d company control plus d experience and finally package now we need to also update the name which we want to display in the UI so every field will display like first name first name first name so let's make it like last name this is used for displaying in the UI always remember not last name this one actually let's start from here last name I'm writing here email here I'm writing DOB here I am writing Jane gender here I'm writing education company C on capital letter now experience just let's write in short form experience package that's all now let's check the UI perfect so it's working fine now we have few issues so we will resolve that as well so if you see datas are coming now the first thing dates are coming on UTC format let's convert using date pipe date that's all it will show in this format if you want to make it format you can pass the parameter using colon here also so you can pass the parameter so let's leave as of now now we will also want to show this package as in currency form so before that I want to show the rupee sign so I'll use the currency pipe before the package here currency now let's see so it will show in dollar form but I want in rupees so let's pass the parameter using colon foreign so it will show in Indian Rupee form here you could see perfect now I want to show L after this number so it will show in lags so let's put the L in capital letter after this double curly braces so it will append that perfect fine now let's make this uh filter to stretch to the full width and I don't want table to be stretched till the infinity so I'll make the width Max width will be 12 48 something now let's work on this UI issue so here if you see mat table let's use this class let's define our own class math table container table container perfect now we VIs for filter what we used oh okay so this is the filter is before this table so don't use this one table container let's use one more div before this I'll wrap this with the thing inside the div okay now let's use a class here mean party and we have bat form field okay so let's go inside this CSS go here Define this class Max width 12 48 PX and also matte form field let's copy the name from here come here inside this matte function width hundred percent and also I want to give padding from top or margin we could say let's add padding margin top adding top okay perfect 20px now let's look at the design now it's coming perfectly fine but it's not coming in the center so for making this Center what we will do we'll add margin 0 comma Auto now let's see it's coming in the center now let's add one more column action there I'll add two button edit and delete so let's jump on code first go to HTML let's add one more row but uh before that let's go to the app component and here at display columns display columns just add one more name here action copy this and here let's add action and displayed name will be action on UI let's delete this let's add button and this button will be matte icon button let's add icon inside here Matt icon edit in the same way let's add one more button this will be the delete this is icon name actually okay now this icon color will be one so it will appear on red and this icon color would be primary now let's check on the UI so here you can see two icons are coming side by side now let's add the functionality for edit and delete so deletes functionalities are very simple so let's add for this let's jump into the code so first of all we need to define a service which will delete the data from the server so let's Chloe it will receive ID type would be number it will reserves an observable type would be any now return this dot HTTP Dot delete and here we need to pass the URL we're going to use the same URL but this time I'll use back take so that we could do string interpolation here I could add ID you can also use like plus to concatenate a string now it will receive an observable once the employees deleted successfully now let's call this from our component so this time we have to go into app component dot TS file here let's create a delete delete employee it will receive ID number type and then it will call this Dot Employee Service Dot delete employee and here we need to pass the ID which will receive in this function now let's do subscribe let's call next so once it is success get the response here and if we get any error we'll get here so again we'll do console.log that's all now once delete is successful we will show an alert as of now later on as I said I'll replace with snack bar so employee deleted that's all now let's check this is it working or not so let's delete this second user this one did I get anything no because on click of delete button I haven't bind this function so let's call this from that delete icon button now let's go here on delete let's bind with click event click call this delete and here we need to pass row dot ID y row because we are receiving here row okay row dot ID now let's save it now click on delete here you could see employee deleted successfully but you see still we are getting this data actually once we refresh you will see that the second row is deleted now let's write the logic to refresh the UI once we delete let's go to the code let's go inside delete employee method and just after the alert let's refresh the UI this dot get employee list so it's it will automatically refresh the list now let's check it again now let's add one more user final user final at the rate of gmail.com one Jan others intermediate company fake experience one package 23. now let's click on Save employee added successfully model kit closed but still rui is not replaced at the time of add as well so we will write the logic for ADD but right now just check for the delete it's refreshing our UI or not if I click on delete employee deleted successfully once I click on OK you can see it's automatically refresh now let's write the logic when we click on ADD means once we add the employee successfully our list should also be refreshed automatically but here is a little bit trick like we are using two different components for inside the dialog we are showing this component and the list is showing in in app component so how we could connect these two so this list should automatically get refreshed and this should be notified you can refresh the list now for that let's first work on here like when and we are opening our dialog so we need to ref we need to store the reference of this first const dialog ref and we need to listen dot after after closed it returns an observable so let's subscribe for it and what I will do get a value here so what I'll do whenever I'll close the dialog I'll return either true or false so if it's written true we'll refresh the list if it falls we will not refresh the list so if true then we'll call this dot get employee list here as well fine so from where we'll pass the this true and false from this component so whenever we close this dialog will pass true from here true why we are getting this error it's not authorized let's go here okay so this should be matte dialog not dialog ref I made a mistake here guys it should be mad dialogue mad dialogue ref okay actually I imported from this package this shouldn't be there it should be matte dialog here you could say and it should be a part of dialogue now you can see I could pass through here now let's see if I pass through our list would get refreshed let me add final user again final date of birth anything will be okay others intermediate company blah blah and package now let's click on Save if I click OK you can see let's automatically get refreshed still guys its refresh is working fine but we have one more issue here if we click on cancel button if we click on cancel button you can see employee added successfully is calling why let me explain you why and it's adding a blank record let's delete this and now let me explain why we are getting this because if you see we haven't added the type so by default if we don't add type button type then this button treat itself as a submit button so let's add the type here and it should be button okay so if it treats itself as a submit button it triggers NG submit event that's why if you have seen that even after clicking on cancel button it's calling to the submit event now let's check again now if I click on cancel it's not calling to the submit event but still it's not working it's not closing the UI so here what we could use we could use one thing matte dialog close attribute and here we could pass false let's make it as input sorry like this okay so it will close the dialog and it will pass the value false and from here we are passing the value true once we close the dialog and here we are listening to that reference so once it is closed we are getting the value here so if it's true it will refresh the lifts it's it's false it will not refresh the list now let's check it again if we click on cancel perfect now if you add the employee detail Santos Tas task Android gmail.com date of birth others not others let's make it mail postgraduate company big company big company just for fun I'm writing this one package 123 let's save it add it now here you could see the third entry is coming here now we could delete this final user from The Middle let's delete it perfectly so everything is working fine even we could search by anything fine now let's work on edit functionality so likewise we do the code for the open dialog box we'll do the same for the edit but we have little bit of differences we don't need to subscribe it again because we already did at the time of our pin so uh we don't need the reference variable and let's change the name open edit form and not only will open the EMP add edit component but also will pass the data inside it so let's pass the second parameter and here we'll pass the data and what data whatever we will receive in this method data type any and we'll pass here data fine instead of writing two times data data we could just write data this is same as we write data column data so let's write the data okay now let's call this from the template so like we did on click of delete icon let's create one more click here we'll paste this open edit but this time we will pass complete row not only row dot ID will pass complete row so we'll receive here and we'll pass this to the dialog box now how we will receive this data inside a dialog box let's go and jump here we'll use injection token so add the rate in check and here we will use mat dialog data and either we could use private or public data and type I'll give any now in this way we could receive the data whichever is passed to the dialog box if nothing then we'll get the undefined here and private or public if you want to access the data inside template then you have to make this public otherwise this variable isn't accessible inside a template so now let's patch this value inside a form so the best place is to do inside from the NG on init so let's first Implement NGO unit implements on in it and let's define just after the Constructor NG on init and here what I will do this dot EMP form dot patch value and we'll pass the value this dot data now let's save it now let's check it if I click on edit it's not working because we haven't call this edit open edit form from on click off or we didn't save this form I think yeah we didn't save this let's save this let's go back here here you could see form is coming with all the data right now let's write the logic to update this form whenever we click on save so instead of save we need to show update here at the time of edit so let's first work on changing the name of the save button here inside this added form here save so let's use double tick here so like now we want to use the data here as well so we need to make this public then only we could access public okay hi every data so here we could access Theta if you have data then we will show update EU Capital update otherwise we will so save or ADD now let's check it if we click on edit so save if we click on here it shows update fine now in the same way we will write the logic so whenever user clicks on Save then this on form submit methods get triggered so inside this after the validations as of now we haven't added any validations but if you have validations after the validation will put one more condition if this dot data if we have data then else if we don't have the data so this part if we don't have the data then we will add so let's keep this inside and else part and in the same way let's do for update but we need to First Define the services because we only defined as of now add employee service we don't have any service for update so let's write for the update in update we will receive two things ID each row is uniquely identified by the ID so which ID we want to update and what is the data we want to update so here we need to change this to put and let's add the ID so if I want to add the ID then single code will not work we need to use the back tick to concatenate this string here so let's pass the ID and whatever the data we receive from the form okay let's change the method name here update employee now let's call this first save this let's go back here and now this time I will call this update employee we are getting the error here because we are sending the form value updated form value and we need to also pass the ID so this Dot data dot ID pass ID from here and whatever the updated value will pass here fine so this will update now let's change the matches message updated let's remove this successfully also employee updated employee detail updated let's make it detail updated fine and also I'm passing through here so once I pass the true it will automatically refresh the list in app component fine everything is fine select good now let's check it if I click on edit I get the detail let's add it to Santosh Das so I'll change this postgraduate to graduate big company to new company Also let's experience 12 and packages 125 125 let's update this at the time of update or any operations you do I always highly recommend to check your console and network tab if you are doing any work so let's clear it if I click on update employee details updated here you could see successfully also the API and if I click on OK so here you could see the details get updated still it shows postgres with big company I think I updated to graduate right still it's saying post graduates do we have any issue on education variable graduate I think I have updated right let's check it is it working or not graduate big company so okay I think our list didn't get refreshed now let's change to postgraduate update updated successfully but list didn't get refreshed why okay so we need to keep the reference here as well I I got the issue actually uh yeah we open this dialog from here as well so we need to keep the reference here as well like we did previously here right so let's copy this code let's go to the bottom because this returns a new reference so we need to store the reference as well const of we have to do this actually we don't need to write these toys we can we can do at once only I I will optimize this code at the end of this video let's first work on it now let's check it if I click on edit postgraduate to graduate new company to okay let's make it 12 and update if I click on ok now here you could see its update on real time right so it's working fine so everything as of now we work successfully everything is working successfully now let's work on snack bar first so let's go here and search for snack bar snack bar with snack bar here so if you see the example so something like this I want to use instead of alert okay now let's copy this module first so we need to import this model inside our module let's go to app module import here sniper imported this in our module now let's create a separate folder actually in real project I create a separate module core module there we keep the snack bar but as of now let's create a folder core there I will add service let's go to the CLI NG generate service inside core folder slash core service core service created successfully now inside this service let's first import snack bar now let's jump on the example code of snack bar if you don't remember the syntax so you can jump here and look at the snack bar so we need to First import the snack bar service so let's let's copy from here we already imported the modules this will work now let's import this class now in the same way let's open snack bar let's define this so here you could see uh open from component we don't want to open from the component open just open and will pass the message here open that's it and whatever the message we will receive here so for the durations we'll give one second 1000 millisecond is equal to one second duration and message so we'll pass the message here message and second action action is like okay done whatever you want to pass here so action second parameter lets me pass to action and third one is optional and we could pass the configuration how much time it will be visible so let's first give the type here we are getting some issues any any or will give string for both string fine so configuration so this is optional so we need to pass configurations here just click so you can see many options we have like vertical position I want to make it on top not in the bottom so by default it's showing the bottom right so that's all now we need to inject this service core service and we can use this everywhere so let's inject a core service in first like app component we already imported a lot of service private core service core service we injected this now let's replace the alert wherever we use alert here we use right so they start course core service dot open snack bar here we will pass employee deleted first this one and then we'll pass action as okay or done or done let's make the second variable optional if option is not passed action is not passed by default it would be okay if it's passed then it will be done now in the same way let's call in another places as well let's so we replace it let's delete this now then okay this is done now let's go to add employee here here also we need to inject this service so after this we'll inject private underscore core service core service and then let's replace wherever we use so let's change the message second one become optional if you don't pass by default it would be okay now let's copy this from here also use alert here let's change this to alert it's very simple guys now save this so hope we have removed all the alerts now let's check it first check in the console is compiled successfully or not yes it's compiled successfully now let's go here first add prabhat behera prabhat at the rate gmail.com date of birth mail education postgraduate company fan experience three package 34 now let's click on Save so here you could see we see the snack bar on top now let's edit it and see this instead of postgraded just change it to graduate and update oh so we haven't removed from the update one play updated I think it's double alert is here still so we place the alert successfully and let's check at the time of delete yes employee deleted successfully now we can add one more thing guys we cannot do the delete operation directly we instead of that we need to show and dialog box where user need to confirm do you really want to delete with a warning icon because delete is a little sensitive uh operation so you cannot directly like if someone accidentally click on then still your row will be deleted so make sure we don't do this but this is a task for you guys you can do that like I did so thank you guys for watching this video hope you enjoyed and don't forget to like share and subscribe my video I Really Work hard to make this video

Channel: Technical Babaji

Views: 220,641

Keywords: technical babaji, angular 15 crud, angular crud, angular crud operation, angular crud with json server, angular crud fake json server, angular tutorial, angular latest video, angular crud tutorial, angular 15, learn angular, crud in angular, angular forms, reactive forms, angular project, angular material, angular material ui, angular material crud operation, crud using material ui, Angular crud app, angular crud application, angular project from scratch

Id: 4mKY_yDq64g

Length: 86min 26sec (5186 seconds)

Published: Wed Jan 04 2023