Angular 13 complete tutorial with CRUD operations ( Reactive forms + bootstrap + .NET CORE Web API)

hello everyone welcome to inira techies in this video we are going to talk about angular 13 complete tutorial including the card operations bootstrap and reactive forms finally we are going to consume the external dotnet course qbb so here i have mentioned what are the topics today i'm going to cover the first one is introduction of angular application next we are going to see the setup and installation then angular cla commands finally we are going to create our own applications once the application gets created i am going to install the bootstrap for that one so as i mentioned we are going to cover the third operations so i have the service with employee so based on that i'm going to create the components once the components are get created i'm going to implement the logic of routing so after that we are going to consume the the external services in order to we can complete our third operations so basically we will use the forms so two types of forms was there one is reactive forms and another one is template driven form so in our logic we are going to use the reactive forms once the code operations are completed we are going to implement the authentication logic at the end we are going to deploy everything in the ies server that is the whole concept we are going to see so our first attack is angular 13 introduction so angular trust mini versions so the current version is 13 so it's much upgraded so commonly angular is an open source front-end framework for building the single-page client applications using html and typescript the main advantages what i noted in the angular applications very effective class platform development the performance is very high and long term google support and especially ui for we can use the material ui also the bootstrap the multiple hosting options also available so the topic to you is setup and installation so there are three things first one is we have to install the node.js when you are installing the node.js it automatically installing the node.js also the npm the second thing is angular cli it's very important one so for installing the angular cla you have to use this command once the angular cla is installed in your machine if you want to verify the actual version you have to use one command ng version see this is our current angular cla version 13.1.2 and our node version is 16.13 the npm version is 8.1.2 so it will give all the details and one more thing is this will studio code this is the code editor you can use your own code editor i recommend to use the usual studio code so now we are completed the setup and installation part let me move on the angular cla commands so as i mentioned the angular cla provide more scli commands so instead of creating the manual files using the command prompt we can generate all the required files so first if you want create one project you have to use this command ng new after that you have to provide your project name the same way next the component ng generate short form is g then c c means component and your component name similarly the model ng generate then m the short form is m then our model name then service ng generate as our service name the same way for the direct use and auth card finally for running the application you have to give the command ng serve creating the bulldog how to use the ansi bulldog so anyway we are going to use all the commands in our application so you will get better understanding let me create my first application for creating the application ng new then project name so nc new project name is project 5. so the first question is would you like to add angular routing yes then css the default css is enough so it will take some time to create the dependency files so why i am provide the routing is required if i provide years it will generate the files otherwise we have to create manually now look like our application was installed we can open it just to go to the file and open folder and go to the respected path don't say okay now our application is ready so next we are going to install the bootstrap there are two options was available for installing the bootstrap one is custom and another one is the manual we can use this custom option it's very easiest way because it will generate all required files also it will update what are the places it's supposed to update now the bootstrap get installed it affects some files like a package.json and package.log.json and also our angular.json file now i am going to run our application ng serve the command is so now the bullet is getting generated it will take some time okay the build is completed now we can see our output here this is the existing template provided by the angler now we are going to modify everything so if you want to check the flow means the any flow it start from the angular.json the starting point we mentioned our startup file uh it's a index.html so it was there yeah here so inside the index.html we have the app root so after this nothing but our app component if you see here the component is so in the component we have the selector name app the same thing only we have used in our index.html so the everything comes from this app.component now i'm going to remove everything from here so already we have the app component and also we are going to create some new components so let me create all the components first for creating the component we have the command ng g then c c for the component at the end we have to provide our component name let me mark it also green ng generate component our component name is first one is home so see the component is created it created four files and it's updated in one file so let me go to the component inside the app if you see the home folder was there so the component consists of one main ts file it's controlling everything and the cs file for the css writer changes then this html here only we are going to implement all the design related things at the end we have one spec file basically it's not required it's for the testing online so we can remove this the same way we can create the other component also meanwhile i have to explain one thing the component basically we have one more option inline style and inline template first i'm going to create one more component with end line style then i will explain what is actually that login inline style okay it's created now see there are three files only generated the particular css is not generated okay if you see the component side styles section was there instead of creating one new file we can mention our changes in the particular block the same way we can do the template url also instead of creating one html file the required htmls we can add in the particular area if you want to create component like this you have to provide inline hyphen then you have to replace the style to template so you have to provide online template okay fine but in our case we are going to use the inline style only and i have to create one more component for employee so the same inline style only so this employee only we are going to create the uh what is called the card operations and everything so i'm going to create separate components for listing and adding new screens so it's for m listing and also ng generic list m add this is for add and edit now we have created all the required components now i am going to map every components in the routing side for that i'm going to the app rooting model if you see here the routes this is the empty array here only we have to add all the menus so first we have to mention the path default is empty so component component is home component okay fine and next one is employee so employee for employee component we have already then login for that we have the login component so i'm going to make this is this one in the bottom why because this employee component have the child components for ad and listings so let me add both the things in the children section so the children also contains the array format so here also path the initial is empty only when the page is loaded the automatically listing page is supposed to open so i'm going to give the component this m listing i am going to give for the create the employ add component last i'm going to give for the edit so edit basically we will pass some unique values so that's fine so let me do some changes in the component first i'm going for the app component here i am going to add some styles so if you see some due only so here the three links was there one is home and another one is employee and final one is log out so in the router link i have provided the various first one is empty then employee and login so whatever the name path name we have provided in the routing side we supposed to use the same name in the router link okay this is done we can see the output how it's coming okay some links was coming but the edition is not enough and in the global style i am going to add some css now see the menu is coming and one more thing is here i need to add the router outlet it's a mandatory thing the part of the routing okay fine let me see the output it's showing the home words if i click the employee employee words again if i click the log out it says login words the texts all coming from the component so now we have to modify the components so i'm coming to the home component the home component also i'm going to add some styles so see the welcome tech is angular 13 complete tutorial so next for login page for the login page i have the component called login component okay here also i'm adding some html style this is a normal html style online uh the style you how to write your own style i'm not going to concentrate more about styles that's what whatever the html content i have i have just copy and pasted here so i will explain uh while implementing the reactive forms i will explain very clearly now i'm just a copy and paste it okay i just want to see the output that's it so this is our basic login page so it has two inputs one is username and another one is password and the last to the employee so employee we have two components two child components so the implementation is little bit diffic so here is nothing required we can just add the router outlet that's enough this is the one change we are doing here now i am going to the listing page so the listing page only we are going to have the table signed the button so here i am also i'm going to add some styles if you see here it contains two steps first one is the top section if you see here one link for add new and the next one is the tables it's showing the existing data okay we see in the screen so just one button and the required things so in the button if you see the router link i'm added the create okay creator we already have the path so create mean server m add component so let me click this add new so it's saying m ad works so here so ember component so here also we need to add our required designs so next all about our ad employee page so here i am added one farm and one due inside the do we have the farm and our header is add and edit employee so okay let me add the required fields okay first one is the text code and next we have the name just these these things see enough and this is for email and this one is for phone number so finally destination destination so the destination we have to use the select control so the select control we can use this class that's not on problem so default it have one option select so the value is also empty so at the end we have to add the button so now we have completed our design let me see the output so see here the code name email phone at the end we have the destination now the code field is not and not required to enable it defaultly it should be disabled and also the destination we have to load the data so for that everything we have the required services was there so let me open the screen for services so i have prepared the service using the.net core and if you are new for the dotnet core i provided one separate video for that one i will provide the url in the description you how to get it so this is our actual service so we have the service name is called designation is supposed to populate in the drop down and this employee here we have the code operations all the things get from the first delete so we're supposed to use this service and for the login time we supposed to use this user services okay first let me check in the destination okay it returns three values developer manager under tester and so this is the required url also so let me come to the angular application for consuming any external service is supposed to create the services in our application so let me create our service first ng generate services yes for creating all the service i'm going to create one common folder service and our service name is employee so the service is generated in the folder name called service sorry s2 file sony spec file and another one is normal file the spec file is not required so we can remove it the same time i'm going to create one more service that is for login later things okay great so here also this spec file is not required first in the employee services so i'm going to inject this http line here and also i'm going to mention url this is for designation so i'm going to copy this particular url okay great now i'm going to create the method so load designation so it don't have any parameters so let me return whatever values is coming this dot http dot this is a get method so here i apa url description okay fine and whenever uh you are using the http client you're supposed to import in the http model so in the bottle the same wave from angular that common dot http here you how to use http client model stupid line model so the same thing you have to use here also in the import side and again i'm going to the employer page and here also i'm create the same method load designation and i have to declare it here destination data and here i have to inject our service why wait so our service name is employee service okay it's fine and here this dot service start so only one method the load destination now we have to subscribe here okay it's done so the value whatever is is coming we have to ascend to the destination data so the value coming in the result aside so okay if you want to verify whether the values is coming or not we can add in the console.log okay fine and also i am going to call this method in the constructor the page load so application number and mode only let me go to the console in the array it can contains the three records developer manager and the tester so let me bind in the uh what is called our drop down list so if i coming to the design side the default thing was there i am going to create the additional things for that i'm going to create the ng far let item off this is the syntax actually okay fine now the value is coming in the item so i'm going to bind in the for value item dot zone is called underneath only name so first i'm going to add this code here at the end item dot name let me format the document it's fine now see the output screen if you see the destination so that our developer and manager tested three records was loaded successfully now our next thing is we have to populate the employee table if you see the employee so we have all the services so first i want to take this base url now i have the url i need to implement the service site first so apa url equal to okay fine load all ambly this is the first method and this will return all the records of employee start http dot get ap war that's fine next one is employee by code by code so now we have one input and we need to pass it here the same way we have to write that delete methods remove employee by code so i need to change the method i will delete the last one is first method this is for creating and updating the record save so it will swear to us input data data type is any and method type also the first method so you always find so whenever the post method is coming we have to pass some input data also okay done the service side we have completed now i am going to the employee side so employee said true component was there first one is listing we can close it so in the listing i have the load all so this method basically load all the employees so i need to inject the employee service here employee services okay so this dot service dot load all imply the same procedure we are called a method we have to subscribe the method so the common variable is i supposed to declare here employee data so now i am going to set value for this employee data equal to result so the procedure is common for all again i am going to call in the constructor side so the now so the actual data is available in the employee data side now i am going to the employee listing side so this is the far left syntax the tdd so item.code next to name and for then email at last the destination and also the action packages was there so let me remove here and this second is name that one is email then form designation so let me see the output first oh great the all the records was loaded successfully those for the action side we need to add edit and delete option so there are two buttons one is for edit so i added in the router link just edit so the code values is coming so i'm going to pass it here the same way i added for the delete so here also the input is item.code so before going to see our output i need to add this delete function here otherwise it will throw the error okay fine why not it's not loaded save the screen once again okay now see the edit and delete option was there i am trying to click the edit so if you see here the url is changed also the screen also changed but the data was not loaded okay first we are going to implement the add screen so once it's done similar way we have to populate the data also so initially we have the on basic html only so if you see here the forms was there as i mentioned in the angular reactive form only we are going to implement for using the reactive forms first we need to import in the our app model so import something from at angular slash forms so the reactive form model the same thing you how to apply in the import side also this is fine and in the actual component side we have to use the farm group and farm control and also validators for the validation purpose so all comes from the angular forms a triangular so it's available here fine let me add the farm group then farm control at last validators okay fine now i am going to create our reactive form here so employee form equal to new fab group of so our first control name is code so new form controller the similar way we can add other controls also so next one is name after the name we have the email then the email we have the phone at the end we have the designation okay we have added so now i'm going to add this form in the html file so the form so the form group equal to here we need to add the event also ng submit and submit save employee i am going to declare this av imply also here now we added the form next we supposed to add the codes not of course the controls we supposed to edit for that we have the option form control name here the important thing is the form starts from the smaller this control capsulator and also name is capsulator the two things was capital the same code we can copy paste for some other controls also let me do my changes little quickly then name and email here phone at the end is destination okay so there is no changes now this code field is supposed to disable it so we can do from our ts file itself for that i'm going to add the value values default is empty disabled equal to true so the thing is disabled now i am going to add the validations so all the fields are required except the code because the code is altered generator so adding the validators so i'm going to add validators dot required so so many types of validations was there so based on the requirement we are going to use the required validator so i am going to copy and paste the same code for all the things so we added for all the controls but in the email we have to validate for the email format also so we need to add one more validators so here the possibility was not there if you want use two validators we supposed to use the validators.combos dot combos and insert we have used the array so one is added the same way we can add validators dot email also okay create now we have done the validation part let me check whether the values are coming or not by clicking the summit so i'm going to check whether the datas are valid or not first this dot employee form dot valid it's a valid only we are going to use and if it's valid i want to see the right data console.log this dot employee form value okay great wilson so destination is the developer i'm trying to summit if i go to the console i can get the values like name is wilson and email phone number and the destination so the values is coming so now i need to call the service for this one and also pass the data so let me command it first so this dot service dot so we already injected the service so the same thing we can use so the datas is this dot employee form dot value the subscribe is common for everything okay great so this start save responsible day result once the values is comes you can add in the console and we can check once again okay fine so this is all about the save from swalti and one more thing we have missed we have added the validation in the reactive forms but we have to provide the uh required messages so then only user can identify what are the field sites we missing so for that we are going to use the getter property so the cater is name this dot imply for the get name so let's get this we are going to use other fields also this one is for phone and another one is email the last one is designation okay we have done for showing the error message we can use the span here okay if you see here matter the ng if so the name whatever or getter name is same as name if name was there your checking is invalid and also the test why we are adding the test means if you are not adding the test it's always showing the message so the class is here so and please enter the name the same way we can add for other fields the second field is email so i'm going to change for the error messages so please enter valid email so we have two more fields one is for last one is destination so this one is for center phone destination at the last we have the error message so i need to declare this message class and the message also here so both are string only these things for just showing the messages okay great so if i'm not entering the value it will show like this email now if i selected the values it will curve for the email so we need to give the exact format then we need little go you so what so other ways it will display the data even if i'm submitting also okay it's supposed to give some messages here i need to implement that also so first i try to create one record with the user one so what's the value is coming here one is key code and another one is result result is pass so that is success and if it's yells we have to show the error message so far that this dot message failed same time this dot message class also error okay great so here also same please enter valid data so if it is the success saved successfully and the message also success so the class is available here so i can copy and paste also so let me try with some valid records once again so i'm going to give user to user2 gmail.com for number something and i'm trying to save it's showing please enter the valid record so now i'm selecting the destination is the manager so saved successfully if i go to the employee side i can see the user1 and user2 both are recently created okay so once the save option is completed now i am going to work for the edit so the url is changed but the same time i have to load the data here now i am going to create one new function update employee so our input is employee code so data type is any so let me call the service this dot service dot employee by code here we need to pass the input and finally i'm going to subscribe okay this all fine and now this dot edit data code result once it's done if this dot edit data not equal to null then we can bind the value in the respective controls okay fine employee from ecuador this is actually our reactive form we defined here the same content we can copy here i am going to paste it now we are going to set only the values so other things is not required so let me remove it so we have the values in edit data so this dot edit data dot code the same way we can apply for all the controls the second one is name so i'm going to change this your name this is only email and phone final one is destination okay we have done the changes now i'm going to the constructor this is our page load actually so here we need to get the url value in the constructor we have to find the employee id so if you see the url the one is the employee id is supposed to find it for that we have one option activated route so let me inject the activator out here activated route okay great and i'm going to declare employee id globally fine now this dot employee id equal to this dot route snapshot parameter map get id why i am providing id means initially we have declared in the app routing so the edit url so i provided the value as id the same name i supposed to use in the component also okay great now i'm going to check if i having the employee id value not equal to null and this dot imply id not equal to zero basically the page load time is a normal uh create scenario there is no values so in the edit time only the actual value coming in the employee id so here only we need to call the update method so update employee here the input this dot employee id so now we have done our changes let me verify from the browser see now the datas are loaded code 1 ramesh and email id phone number destination so let me go to the listing once again i am trying to edit the fifth record after that record the id is five so now i'm going to change some changes i'm trying to sum it once again so saved successfully particular value get updated it's not created new record so at the end we have to implement the delete so for the delete we have to implement in the listing component so let me go to the listing component so here we have the method so i am going to use the basic confirm here do you want and here i am going to call the or delete method also so remove employee and i need to pass the code as the input at the end we supposed to subscribe this is a common procedure for all okay great we have done if it's all success i'm not going to check anything so i'm just going to call the load listing method load on so i am just a formatter okay it's loaded fine now i'm trying to delete one record so do you want remo yes so the particular record is deleted i'm trying to delete one more record okay great we have completed our third operations next we are going to implement the login concept so at the same time so i have the service the employee service i make it as the public service here after i'm going to make it as the authorized service so if you are providing the token the valid token only we can access here after so once we implemented our login functionality we will get actual token also that's not a problem so in the login form also we are going to use the same reactive forms it's not a difficult task we already die page the employee page so the same thing we can do here also so let me import the required things angular forms yes so the one more thing farm group then farm control and validators so the validator is fine and also i'm this is just a revision whatever we have done in the employ page so here actually only two fields one is username new farm control the field is required okay great the same way we can add for the password also okay we have added our reactive form let me go to the html side so if i see the html side so i have the farm so i'm going to add the farm group so farm group is login form and the same way we have to add the event ng submit so proceed login okay great now i need to add the form control name so there are two field form control name username and the next field is password okay great we have done the changes okay then i'm going to implement the lagging from schwalte logan from valid if it's valid i need to call the services so still the service is not it imported not i'm imported and also it's not injector let me inject the service first so our service name is login service okay great so this set this so i think the login method also i'm not implemented yet so let me complete this one the service side so services we need to import the http client so in the constructor also i need to inject this one http http client okay this is done and the function proceed lagging so use credential as the input so i'm just going to return this dot http dot this is the post method so i have the apa url so log new release user slash authentication so here the input is one is our url and another one is the input data the credential okay great and let me go to the component side so now the common inside the proceed login so the input is login form not a login form this dot login form dot value okay we have done that medicare declare response data okay let me subscribe the service first okay it's done now this dot response data equal to result this dot response data not equal to null this is the past scenario see yells login failed so i'm going to you just tell it login failed okay this login is fine we need to set this token value in the local storage so the name is we can provide our own name i am giving the token and this output is okay okay this dot response data dot jw t token if you want check the service i can show you how the service is working okay this is our authenticated service the username the input is username and password so admin user and admin for executed see this is our response one is jwt token another one is a refresh token this jwt token is nfrs so that's what i'm added here and also one more thing we are in the login page once the login is fine we have to navigate in the home page for this navigation i need to use the router option so i'm going to insert the router here router okay this is the one and here this dot route dot navigate here the nt value so empty value always targeting the home page so our login so our lag information is completed let me verify this one first if i without login i'm trying to go to the employee page there is no record is loaded because it's now the service is expecting the token so okay create so admin user and admin so it's more to the login page if you see in the application you can see the actual token value so the token so the recently generated token and if i'm trying to log out i supposed to clear the token so in the constructor side i'm going to write the logic for that one clear so this is fine now i am in the login page i am not it logged in i am trying to access the employ page i can move the employ page it's not the correct way so after login only i have to access any of the pages so i need to implement the authentication here for that i am going to use the angular card option here so the angular card for creating that card also we have the cla commands ng generate card our card name is earth card so that card we have the option can activate connect with child can deactivate and load so we can use this can activate the files are generated so here also the spec file is not required let me open the card here the so many things was there it's all not required so let me remove so basically this method will return true or false before that we have to implement our logic okay let me go to the our actual service here i'm going to return true methods first one is far is logged in and another one is for get token so our actual token is available in the local storage if you want to check whether logged in or not let me check in the local storage dot get item of token and not equal to mel if it is in null it's not logged in if it is contains data it's logged in and also talk we need to return the same thing with yes the data we have to return the data if it's not having we have to return us the empty okay two methods we have implemented now let me go to the our card page here i am going to create one constructor in the constructor i am going to inject our login service and also router so here i am going to check whether it's logged in or not this dot service dot is logged in if it's locked in it's your positive scenario else we need to return the false and also we need to redirect the login page so let me do that navigate so login login page name is just login so we have completed our art card now let me add this art card into our routing file so first i'm going to add for the home so here we have the can activate option and services art card okay great the same way i am going to add for the employee okay we are good to go the login base it's a default page it's not required so let me see the output now now i'm trying to access the employee page i am unable to access i am trying to give the url also but it's simply redirecting to the login page so admin user and admin now it's coming to the home page i'm able to access the employ and also delete all the pages i can access but still the data's are not loaded so now we need to pass the jwt token so currently we have the jwt token in our local storage but in the every request we supposed to pass for doing these operations we have the http interceptor option so let me implement the http interceptors for that also i'm need to create one service so i'm going to make the name is token in interceptor so enter so the service is created here also the spec file is not repaired let me delete it and this is our service it need to implements http interceptor okay great at how one function intercept okay great and now i'm going to use the injector option why because i am need to access your login services here now both are services and the basic way i am trying to import in the top of that if i calling means some conflict will come so avoiding that i am going to use this injector option so let us serve this decoder this dot so let me inject the injector vibrate insert injector okay great this dot insect dot get so login service okay then now let's jwt token a cold so here recta clone here set headers authorization a cult here we need to pass our token so token is available in the service so art service dot get token also we need to pass the barrier here bearer some space okay great this one is completed it's still it's returning some error so we need to return next dot handle of the jwt token so the interceptor service is completed we need to call in the model so the model we have the provider option the provider we supposed to call this functionality we have to use the provide option so provided is http intercept okay fine next use class so here we need to use our class token interceptor at last multi multi is true because this interceptor is going to use the multiple classes so now we have done our changes let me verify here am trying to log out and give the credential once again admin user and admin so now see our employees records are loaded fine the edit method is working fine and i'll save and if you want delete delete also working fine the only thing is bending is or deployments in ies server let me explain that also first i'm going to open the ies server in my local mission here i'm going to add on new website portal and our physical path let me do the physical path setup and portal i'm going to q82 so the service is created employee portal now i'm going to the app pool here if i see the dartmouth clr version is 4.0 but this is unmanaged one so i need to change the no managed code it's fine so if you see here some existing codes was there i need to remove everything except the web config basically we don't have any web config in the angular application let me explain why this config is before that i need to create the bold file creating the world we have the command nc bold it will create the required packages so the build is completed so the bold is basically available in the dsd folder if you see here so it's generated some required files so let me go to the actual path so in the project file i have the disto folder inside the files are generated let me copy and i am going through the deployment folder so i'm just pasted everything now i'm coming to the is part let me just to restart and run it so if you see here our application is running fine i am trying to access the employ page it's not delivering i'm trying to change the url also it's not allowing so here i'm giving the credential admin user and admin so our home page is loaded now i'm going to the employ page all the records are loaded fine so this is our create page so if i am not giving any values it will give the required alert messages so wilson class wrim.com mobile number and the destination is manager so i'm going to create a saved successfully so decent way is actually not concentrated more you can use your better design option and also you can provide the pop-ups and showing the messages so i'm just use the basic things now the id is generated let me go to the listing once again they will centralize was there and trying to edit if i want to change this the designation is the test lead just updated and if you see here i can see the tester the data was available at the end if the record is not required i am going to remove it so all the operations are working fine without any issue still if you have any doubts or clarification please post in the comment box and also i am going to create the separate playlist for explaining each and every topics of angular 13 so i will add that also in the description the most important thing is don't forget to subscribe my channel if you are subscribed only you will get all the notifications so if you like this video please like and also share to your friends thanks for watching thank you

Channel: Nihira Techiees

Views: 17,965

Keywords: Angular13, Angular A to Z, Anglar for begginers, angular 13 tutorial complete tutorial, how to consume api in angular, angular 13 curd operations, angular curd operations, angular curd operations with reactive forms, angular curd operations with .net core web api, angular deployment in iis server, authentication in angular, how to pass token in angular, how to use auth guard, how to use httpinterceptor, angular validations with reactive forms, how to install bootstrap in angular

Id: DnVRlQBprBs

Length: 84min 24sec (5064 seconds)

Published: Sun Jan 23 2022