Angular 14 Full Course with real time example 2022 ( angular crud + authentication + Material UI)

14 complete end-to-end tutorial so in this video I am going to cover all the features in angular with some practical examples and the main advantages of the video is I am going to cover on Real Time application with the complete authentication feature it will be more helpful in our projects and this video is mainly created for beginners and experience people so before going to start our session one thing I can say confidently that if you completely watched this video you will be familiar on angular and also you can contribute any real-time projects okay now let me provide some overview of this angular application so the angular is here typescript based framework it is used to create the single page web application and the second one is this angler is an open source there is no cost involved and it's maintained by Google they are providing the long term support the latest version of angular is 14 it is released 2nd June 2022. and if you're talking about the history of this angular so initially they have started with an angle of JS it is work like a just our normal jQuery or a JavaScript so after this angular 2 there comes up with them Standalone framework for creating this web application for any version update they are including some new features and but fixing some performance Improvement so now we are in this angle of 14. now let me share some advantage of angular angular provides crash platform support the performance of the angular application is highly improved and it provides this faster development process because we are using this component based architecture online so simultaneously multiple developers can work in the same component and also we have to reuse the component and it's providing the wonderful support for the unit testing so we can use the different Frameworks like a Karma or Jasmine and this is a single page lightweight application and also it can support this bootstrap and also this material away so in order to we can get the better UI also so now let me move on the system requirements for developing this angular application you can use any of the operating systems it could be Windows or Mac or Linux you can use it the first thing is you should have the latest version of node.js in your machine so just go to the browser and type like a download load.js so open the first link so if you see here uh basically we have two options the first one is recommended for most uses and the next one is the second one is current latest features so you have to use the first one is recommended foremost uses So based on your operating system you have to download this package if you are using Windows you have to click this one so if you are having this Mac OS then you have to click and download it in case it's Linux then you have to click this link and download the package then you have to install it so let me go to the download folder okay you just right click and install so it's saying the preparing for the installation so then you have to click this next so it's showing the three options the first one is change repair and remove so I am already installed this node.js in my machine that's what it's saying like this otherwise the next option should be enabled you have to click this next add a complete the installation once the installation is completed the node.js and also the npms both are get installed in your mission for verifying this one just go to the command prompt and a type like node so it is saying version 16.16 is installed and also for verifying the npm npm hyphen B okay the npm version is 8.1 okay now we have to install our angular CLA in our machine so installing angular Clan or machine you have to use this command so npm install after that we are providing this G because we are going to install this angular CLA for globally and then you have to provide this angular slash CLA so it will install the latest version of angular CLA in our mission so let me copy it so the installation gets completed so once the installation gets completed if you want verify the version of angular then you have to use this command NG version so see the angular CLA angular CLA version is 14.0.6 add the node version is 16.16 and this npm version is 8.1 and also our OS is Windows 32 cross 64. so the basic installation gets completed now our system is ready for developing this angular application so before going to create new application let me provide two more information so in case if you want uninstall this angular CLA then you have to use this command so instead of this install you have to use this uninstall in some case for the particular project requirement so you have to install the specific version of angular CLA so in this case first you have to uninstall the existing angular CLI so then you have to use this command npm install Global H angler CLI then you have to mention this version like that so you know the exact version means then you have to specify like that also other ways you have to provide like 11 or 12 what's the version you are expecting then you have to provide it so now let me create my first project for creating the project we have the angular CLA commands the CLA commands are nothing but command line interface so using this we can initialize or develop scaffold or creating Guinea files in this angular application for creating this angular application the command is NG new then you have to provide our application name so let me go to the command prompt once again actually I'm going to create the application in the folder of EF and I am having the path already so the command is NG new my application name is angular 14. so first it's asking like would you like to add angular routing yes and the second one is CSS what type of CSS you are going to use the normal CSS are ACS acass l e s s so I am going to use this CSS only so now it's adding the required files and also installing the required packages in our application so basically it will take some time once the installation gets completed uh we can open this application in the any of the source code editor so there we have to do our development changes so I would suggest to use the editories visual studio code if you don't have the visual studio code you have to download and install it in the Google you have to type like a BS code download so the first link so the link is loaded so based on your operating system you have to download the package and you have to install it so in my mission I am already installed it okay the vs code is opened so previously I used some project it's loaded defaultly so once our project is created we can open our project okay great our application is created so let me open in our vs code go to the file and open the folder this is our project angular 14 so let me select it and now let me go to the terminal okay so in this angular CLA we use the first requirement for creating the application so we may have the N number of commands so for getting the all command information you have to use this NG help NC health so NG build NG catch NG completion so mainly we are going to use this part NG generate for generating all the files like component Services models Etc and for running the application you have to use the command is NG server okay let me run our application first in this server so basically we can use two options one is NG sir and another one is npm start so even if you are using this npm starter also so it will run this CNG server command online so our application is running now you hope to see this command angular live development server is listening on localhost 420 so then you have to click this link so our application is loaded this is the basic template provided by angular for getting the more documentation you have to use these commands like a lan angular so it will redirect the official website of angular so here also you can prefer there is any doubt and for getting the CLA commence information see now for installing this angular CLA and for creating the application and opening the application for running the application in G server the same way we have the different commands definitely we will see everything in the detail and the third one is angular material so it will redirect the official site of material UI so it will provide the wonderful and Rich look and feel so this UA also we can use in our application so now I'm going to do my first change in our angular application so let me go to the application so here I'm going to do the changes under this source so in the source we have this app component okay here you have to see some default style and HTML tags so let me remove everything so I'm going to save this one see the output currently we have this menu section only other than that we have removed all the changes here I am going to provide one h2 tag angular 14 tutorial see now the text is coming so this is our first change now let me explain the folder structure of angular so if you clearly noticed you have the source folder and also we have some other folders and files also so I see developer you are going to do over most of the changes like more than 95 percentage of changes inside this Source folder only but you should know why we have these files and what are the functionalities okay the first one is angular so basically it contains this way back information and the second one is vs code so it contains the information of launching so what is the command what is the URL basic URL and what is the test URL that information only configured in this vs code and the third one is node models and this node models it contains the packages so even there is any changes in the packages you don't do here way because we have the package information are stored in our package.json file so even if I'm deleted this node model if I'm trying to give this npm install this folder and packages are gets recreated so that time if you are do any manual changes it will be removed so you don't touch this folder add the next one is source so we are going to do more changes here only so I will explain each and every file here and the next one is browser list track so this is a kind of just a note so it's not going to affect in your application so it's just telling our application going to support below browsers like a chrome Firebox Edge Safari iOS and the next one is angular.json this is the very very important file why because the application gets started from this file online let me explain a little later now coming to this karma.config.json so this is the file basically configuring our testing related things so for the testing we can use any of the shoot but we are defaultly we are going to use this Jasmine so it contains the launcher related information and this package hyphenlock.json okay so initially I mentioned this package.json contains the all package information so in this log Json it contains the detailed information like for the single package may have a number of dependencies so the whole informations and the result URL and what is the registry these all the informations are included in this package lot.json okay so the final three are TS configuration files so this one is for handling this TS configuration I mean this typescript configuration this application Level and the next one is tesconfig.json so it is handling the global configuration of typescript file so the final one is to use config spec.json so this is the configuration file for our testing typescript files so now let me move on the source folder so inside the source folder the first one is app so the app folder contains three important sections the first one is model and another one is app routing model and another one is component so the component is nothing but the combination of one TS file and one HTML file and another one is CSS file so this CSS file is responsible for handling the style and this HTML file is responsible for handling this design and this TS file mostly handling the logics and the spec file is for testing purpose currently if it's not required you have to remove it and this model okay the model so basically grouping the multiple components and the services in order to complete the big functionality like you just consider one authentication is one of the model so it may condense the features of like registration login so these are the features for the individual features we have to create the separate components but everything is get grouped in this model itself and this app routing model so this is the base routing model so it is used for the routing purpose so when I'm explaining this routing you will be get more okay and this asset folder in this asset folder basically we can keep some files like images and this environments so it contains the environmental variable it is for the releasing time so the next one is index.html this is the startup file let me explain this later and this main.ts file so it's also loading for the typescript files and the next one is file refills.ts file so this is mainly used for this compatibility of the browser so in the angular we are using the latest features it may not going to support for some of the browsers so for reselling that kind of misuses we are going to use this polyfill.ts file now the next one is styles.css so if you have any Global Styles then you have to include in this style.css file and the next one is test.ts so this is the entry point of any test so now let me explain the workflow so whenever your request is started it directly comes to this angular.json file so here only we are just a configured like what is the index add main file fill and the typescript file mentioned this icon and other assist Styles we have mapped everything in this place only if you have any scripts also you have to include it's here so mostly we are not going to include any scripts here but definitely we have to include some Styles in these areas okay so after that the request is directly goes to this index.html so the index.html is the very basic HTML file unlike here you have to see like a header and a body so in the body section we have to see this approved this approach is nothing but our app components so in this app component we have the section is selector so the selector only be just used in our HTML file in case if I am trying to change this one see now we are not getting any screen basically it will show some error only see now we don't have the selector like app robo so let me go to the index.html here also I am going to change it foreign so now it's working fine okay but anyway let me keep in the standard way okay it's working fine so let me check what are the topics I have completed we have completed the configuration and installation and we have created the first application the folder structure and the CLA commands so we are going to see more CLA commands as soon as possible so let me Mark this one also gets completed okay now let me move on this component once it's done we have to move on the models so the components are the primary building blocks of our angular application so basically we have four types of components the first one is basic component and the second one is components with inline Style and the third one is components with the inline template the final one is Standalone component for creating all types of components we have the CLA command so first let me create one basic component for generating the components we have to use this command NG generate for the generate short form we have to use this G and this component short form we have to use the C so finally we have to use the component name so let me create it so I am going to the new terminal NC generate component so my common name is home okay see now our component is created it's created four files so the first one is HTML and spec file on TS file and the CSS file and also it's updated our app.model.ts okay so basically when you are creating the components it's created for the particular model only so and also it's updated over app.model.ts file so let me go to the component so in the home folder we can see the four files okay and in our app dot model side so it's just imported here and also it's included in the Declaration side so if you are adding any models you are supposed to include in this import side and if it is the component then you have to mention in this declaration side so this is the basic concept so let me make some changes here press two and welcome to nihiratakis now let me try to call this component in our app component the first thing is we have to copy this selector now let me go to our app component so in the app component I am going to use this tag so let me save it and we have to see the output see now the welcome to negara Tech is it's coming from our home component so this is the very basic component the second one is components with an inline style it will create the components but it's don't have any style file that means it's don't have the CSS file instead of that any Styles we have to include in our typescript file itself so let me create it and see generate component component name is about for the inline style so let me provide the syntax like this in line Style okay great it's created now see it's generated three files only on HTML file one spec file and another one is TS value it's not generated the Cs file and also it's updated in our model.ts file so let me open the command here if you noted in the TS file so we how this section is called styles so in case if you want to include any cases I mean the classes you have to mention in this place so if you are noted in our home component here we have the Styles URL so there we have mapped the file path so instead of that we have this this style section the same way I am going to create my next component components with inline template so this is nothing but it's not going to create the HTML file so instead of that we have to handle our htmls in our typescript file so let me create it NC generate component so my component name is conduct inline template okay this is created this is the conduct and see here also it's generated three files we have this big file TS file and the CSS but we don't have the HTML file so let me open in the folder see now so let me go to the TS file here we have the template section so in this template section what are the changes you hold so you have to change accordingly so let me call these two components also in our app component so the contact so before that we have one more component app about H3 see now so this is coming from our contact component and the final one is coming from our about component now you may have the questions so can we create this inline style and inline template with the same component yes so in this scenario we will have only TS file if there is any CSS or in HTML both we have to handle in our typescript file itself so let me create that also NC generate components and status commoner name is okay inline Style then inline template okay see now it's just created the two files one is for testing file and another one is the TS file and there is any changes so we can handle everything in our typescript file itself let me do it so instead of this P tag I am going to provide H4 and let me change the text also angular so in the style section I am going to provide one class the color is green and let me copy this selector also I am going to include in our app component see now the text is coming and also I provided the color is green it's coming so if I'm trying to give some other styles also it will work see now so the font also gets increased so the final one is Standalone components so this is also not the new feature it's introduced in angular 14. so basically when you are creating the component it is created for the particular model only currently we don't have any model I mean we have only one default model so that's what the all the components are created for this particular model in case if I have created any new models so that time we have to create the command for the particular specific models so this Standalone component is not depending upon any model so it will work Standalone only so let me create it NG generate component so my common name is login this is the stand alone component okay great if you see here there are four files are generated even here also we have to use this inline style or inline template so so as of now I am trying to explain the Standalone concept so let me go to the folder login so in this TS file if you noted here we have one new Option Standalone it should be true and also we have one more section Imports so defaultly the common model is imported in case if you want include some other models also so you have to include in this place so in case if you are using this two-way banding you have to import this Farm model and in case if you are using like a what is called the material where you have to import many models so that we supposed to handle in this place only so other than that we have the same like a template URL and the style URL and whatever changes also we have to modify accordingly so now let me try to call this one also in our app component so basically it won't allow so this is saying it's the app login is an angular components then verify that is the part of the models so our model name is app model but it's not included in our app models that's what it's showing an error so let me include it so initially I said there is any command we have to include this declaration side but this Standalone component so we have to include in this import section only so let me include it login component see now the error got result so you have to see the text is login its works okay so now what I am going to do I am going to create one new model so the model I am already provided the descriptions like so model is the place for grouping the so many components and pipes in order to complete the whole functionality so in our application also I am going to create one model is access model so in this access model contains uh the login and registration from sureties so everything we will see little later first I am going to create the model and its components for generating the components the CLA command is n Chief generate the short form of model is model m so my model name is success so when I'm creating the model I should have this routing file also so if required the routing file then I have to specify like this okay our access model is generated so if you noted any model it should be declared within this NG model decorator and also it contains the section is declaration Imports the finally we should have this export so if you are not using this export we cannot call this class in some other models okay and also this uploading model so it contains the same information when I'm explaining this routing so you will get more information so now let me try to create one component for this access model so the syntax is almost the same NG generate component and I am going to create this common for this axis so let me provide access slash so my common name is register see now my component is created so if I'm checked in the TS file so the syntax is almost the same there is no changes but in this access.model.ts file I am able to see this register components in the Declaration part it's included but this component is not included in our app dot model see here it's not available because this component is mainly created for the particular model only so okay we have seen about different types of components I hope you got some better idea about this angular components so now let me move on this routing so the routing is nothing but navigating to one page into another page so in this angular application so we have three types of routing so the first one is basic routing the second one is child routing it just another name is group routing and the final one is model routing so every road consists of three important sections the first one is routes and the second one is router link the file one is router Outlet so first let me consider this one so this route is in class so this is the place for mapping path and component so let me show you so the first we have to use our base our routing file app routing model so this is the class I just specified here we have to path with specific component so basically we have to include everything in the object format my first part is home and the 11th component is home component the similar way I am going to include some other components also the second one is about us so the common name is about as component so the third one is conduct okay we have included the three routes so the second one is router link so this is the directory for navigating the different routes so it is just access like our hrf in our Ang attack so let me explain from our code so in our app component so let me remove all the things so even this HD tag also and I am going to copy this router Outlet I am going to include in the content section so in the top of that we have the text is welcome so let me remove it so instead of that I am going to provide an anger link so the first one is home and the second one is about and the third one is contact so let me refresh it okay we have the text but it's not visible properly so when I'm overring it's showing so let me include some styles so in the app component.cs file color should be white important and also the padding 5 pixel see now we have the menus right now but we don't have any link now I am going to include this router link here the important thing is start from small letter the router and the link first letter should be caps so please note it and here you have to mention the route path the first one is home so let me save so if I'm trying to click this home I am getting this text so it's coming from our home commandant so similar way I am going to include other routes also about conduct so if I'm clicking this about us so it's saying about words so the text basically coming from the about component the same way for the contact also the text is coming from the component itself online so I hope you got some idea about this routes and router link the same with the router Outlet so basically we have included this router Outlet in the app component already so this router Outlet is nothing but this is also one of the direct View so when I'm clicking the link so it will match the particular path and it will find out the particular components make sure it should be displayed in this router Outlet so that's what I mentioned like so this is the place for display the match the route in case if I don't have this section so let me command it see now nothing is loaded so if I'm clicking this about us the URL has changed but the display nothing has happened even if I'm clicking the home also the same thing so let me uncomment it okay now we have completed the basic routing so let me move on this child routing so the child routing is nothing but the route inside the another route so let me go to the routing file so here we have this contact this is the main route so inside the route I am going to have some child routes for adding this one we have the option is called the children so here also we have to pass in the array format so let me take in the next line everything okay great so inside the array I am going to create my routes it's the first path the path name should be added and the component I don't have any common so let me create it NG generate component add contact okay the component is created so let me include it add contact component okay this is great so let me add one more path also I mean one more route also edit for the edit also I am going to use the same component only so anytime basically we have some parameter so let me include it ID so now we have done and what I'm going to do in this contacts I am going to provide two links so let me go to the contact component okay in the template so actually we are maintaining everything from our TS file itself here first I am going to change the tag should be H2 conduct here I am going to provide the first Lingus add contact so the router link should be added the second one is need it here the path value should be edit also I am going to pass one parameter so let me re-run it once again see now be how the two links one is for add contact and another one is for edit contacts so when I'm clicking this add contact you see the URL has changed but in the display there is no change okay maybe guess I just added the link but I'm not provided the router Outlet so let me copy and use it here so the router Outlet I am going to create the separate due okay this is done so you know the add contact works so if I'm clicking this edit contact so here also the text is same but the URL you have to see the additional parameters so now you have the scenario like when I'm clicking this edit contact you are passing the key value in our URL but how to get this value so for getting this one B how the option is called activated route so let me go to the add contact component so this is the real-time scenario when you are working the real-time application uh definitely you will face this kind of scenarios so that's what I explaining this one so let me inject the activated route when class was there activated route okay so after that let me declare one variable throughout ID equal to so this dot a route Dot snapshot parameters map then get here you have to provide the ID so this ID is nothing but we have mapped in our app routing dot model in case if you are providing some other name you have to change accordingly so once I got the value so let me include in our console.log so let me go to the console Let me refresh it so here I am getting the values one way because the URL it's written in the very best one so if I'm clicking this add context there is no value so it's returning a signal again if I'm trying to click this edit contact I am getting the same value as one so in case if I am trying to give some other values so in the conductor TS file instead of this one I am trying to give two naught one so let me refresh this contact once again so if I'm clicking this edit contact see I am getting this to another one so same way if I'm clicking this add I am getting the null value so that's what I have mentioned at this point get the route values actually we have completed and this basic routing also we have done and this style routing that also we have completed so now let me come to this model routing so in the application B already created one separate model that is called our register model so when I'm creating the model I have to created one routing model also so in this routing model I am going to register my register component the path I'm going to provide register and the component should be register command okay we have done now I am going to create one more Link in our app component so in the top of that you have to see in the right corner UT band uh this Twitter line so let me remove only first I am going to remove this Twitter link so here I'm going to provide the value as a register and this router link okay it's fine so when I am clicking this register I will get the error like so I cannot match the routes for the register because I have included in my access routing dot model but I'm not included in the app routing model so what I'm supposed to do I have to include this access routing model also in our app model so let me refer it access routing model okay so now we are in the contact page so let me go to the home so now I am trying to click this register see it's saying the register is worse so in this way won't leave we have to call the different models also in our main routing model okay now we have done this model routing also finally let me move on this lazy loading so the lazy loading is nothing but loading this model or component or some other files when there is required so until it's not required you do not load the particular command that's all about the concept so let me explain here currently I am in the home page okay I am not even clicked this register or some other links so if I am going to the source inside the webpack if you noted here this access model also loaded the register component everything is loaded at the same time so the lazy loading concept says until I am not clicking this link you do not load this model or else this component so first we have to do this lazy loading for the model so after that we have to move on the common level so let me remove this one access a routing model it's not required now let me go to the app routing model so in the app routing model I am going to create one more path so the path name is success are the next instead of the component I am going to use this load children here I am going to use this import option so inside the import I am going to specify the path of our model axis and our model name is access model then okay we have done it now let me change the link also I am just copying this axis instead of just register I am going to provide the model name first because we have registered this model in the Lacy loading format so inside that only we have this particular link so let me show you so when I'm clicking this register it's working fine okay so working point of it's fine now we have to verify our lazy loading concept so let me go to the source side again this webpack so inside the source you are not able to see the access folder okay now I am trying to click this register see now the access folder is coming and also our register component also loaded fine okay so this is all about doing the lazy loading for the model wise the similar way we have to do the lazy loading for the component for doing the command we should have the Standalone component so in our application I am already created one Standalone component so the Standalone component name is login yes it's done I think I have called directly so let me remove it first so the input side I'm already included so I removed both the places so let me refresh it so if I see here the login is not loaded and we don't have any link also first let me create the link so before this registration I am going to provide the link as login so now let me go to the app routing model here I am going to create a new route so the path name is login so instead of this load children I'm going to use load component so other steps are almost the same I am going to use this input option only so inside the import I am going to provide the path of our component then our class name login component so before that let me verify it so here the login folder is not opened so when I'm trying to click this login button see the login folder is coming and also it's working fine so this is all about the Lacy loading of component so let me Mark this on also completed and the final one is redirect 4.4 page so let me explain the scenario So currently I'm in the about us page so it's working fine there is no issue so I am trying to give one wrong URL instead of about I am trying to give about us so what will happen there is nothing is loaded so if you noted in the error side the URL segments about s is not found that's what the error is showing so in this scenario we have to redirect in the format for page and we have to provide the messages the particular route is not found so let me do it for doing this one I have to create one more command so instead of that I am going to use the existing command status so let me change the text four not four error requested page not font so the color I am trying to give red and the size also I'm going to give 50 because we don't have any text at all okay so in the outside we have one small change at the end you have to include this one first one is path so the path should be double star and the component should be our component so I am going to use the status command so let me go to the home so in the about page it's fine how about us so it's redirecting the 4.4 page so instead of that other something login one again it's in the 4.4 error so if I'm trying to give the correct URL so it will be working fine so now we have completed our redirect 4.4 page that also it's done so let me go to the topics So currently we have done this model components routing DC loading so let me Mark everything as green so our next topic is bindings so the bindings basically we have the five types of binding the first one is interpolation so the interpolation is nothing but our data binding for doing this one we are so the interpolation is nothing but the data binding for doing this one the syntax we supposed to use this one the double curly braces and the second one is even binding used to bind any of the events the syntax is like this and the third one is property binding it is used to bind any property dynamically then we have to use this option so the syntax is the rectangular basis the fourth one is two-way binding so the two-way binding means it's binding the data center simultaneously if there is any change in the binded component so it will be reflected automatically in the model so if there is any changes in the model that IM also its reflected in the components it's a kind of waste first operation or else you can do see it's a combination of even binding plus property binding so the syntax also like this one like so the final one is style binding the style binding is basically used for binding the Styles in the dynamic manner so let me explain you one by one for doing this all the things we can use our home component itself so in the home camera and currently the how the hard-coded text so let me remove it so here I am going to bind in this using our interpolation so we have some text so let me Define on text here header name angular tutorial so let me copy it I just added so if I'm in the Chrome components so it's binded like this so if I am trying to change the value here angular 14 tutorial so once I'm saved so it's automatically gets reflected so in the inter position basically we have to use One More Concept is called pipes so the pipes are nothing but doing the transformation of our text or else formatting the type into one type to another format So currently we have some text okay so I'm just binded here so I am trying to make this is the lowercase so the syntax is like this so let me provide the pipe name lowercase now see so everything is changed into lowercase the similar way if you want an upper case so you have to see the text are changed into the uppercase so that's what we have some text we are transferring into some other format so this is not only for their string we can do this for the numbers also let me do it salary thousand here I am going to provide one more hashtag I am saying my salary is so after that I am using this interpolation so let me see saying my salary is thousand here I am trying to apply the pipes so we have one default pipe is called currency pipe so see now so the currency value is simply formatted and also it's added the symbol of the currency so default it should be a dollar if required you have to change it for changing this one B how to pass some parameters to our pipes so let me do it so I won't get the Indian currency so that's what I'm provided this INR see now the currency symbol has changed in case if I'm trying to give Europe UR the symbol is changed so if I am trying to give USD for American currency so this is all about the pipes if you want get more details about the pipes you just search like angular pipes so the first link this is the official link of angler angler.io if you noted here they have provided the different types like a date pipe uppercase lowercase currency we have seen the same way percentage decimal so we have the different things so let me use the passengers also instead of this currency see now one big value is coming so let me change the value like this 0.35 now it should be a 35 percentage okay this is all about the pipes and hope you got some better idea about this interpolation as well as the pipes so let me Mark both or gets completed and using this interpolation you have to bind any value so the value should be binded in the string format only you may have the values in the numeric or decimal whatever it is so when it's binding time it's converting into the string format now let me move on this even binding for doing this event I am going to create one button first click me so mostly we are going to use the even days click event so let me give that like here I am going to write on function also function click so let me Define the function so inside the function I am going to provide one alert test string function so now our button is coming maybe the design not looks good once we are included this material where a bootstrap it will be fine definitely I will include So currently I'm trying to explain the concept only so let me click it so when I'm clicking I am able to get this value okay so now let me try to pass some parameters here name then I have to mention the data type if I don't know the data type I supposed to provide ene so I know I'm going to pass some string values only so let me give this string so in the home command done so click here so instead of this hardcore text I am going to pass the dynamic text now so let me refresh it now I am trying to click so I am getting this click here alert okay so this even binding is not only for the button uh even we can use for some what is called the input and select whatever HTML tag we have so we can use it so I am going to use one input tag also for this input I am going to use unchanged so even name is change so let me call the same function only so the input is input test so when I'm changing I am able to get this input test so otherwise whatever value I am typing in the text bus I supposed to take and I have to return means so let me include the identifier text okay after that text Dot value angular so the LED is coming angular then testing so I am getting this angular testing so in that way we have to bind the any of the event so now we have completed this even binding so let me Mark this one also gets completed and the third one is property binding for doing this one I have to use the same input tag only so let me use disable this is one of the property so here I am going to declare one value also yes is disabled false so let me copy the value see now currently the text box is not disabled so if I'm trying to give true see the text box should be disabled okay so this is not only for the disabled the same way we have to use first checked our selected value even in the input box so we have the property is called value so let me add it I'm going to provide the same value only see now it's disabled also and the value is true now I am trying to make the system files now the text box also it's editable and the value also should be False only okay this is fine so this is all about the property binding so let me Mark this one also gets completed and now the next one is very important one or two-way binding for doing these two way binding I am going to create one more text box so input so the text box is created and very important thing is if you are using this two-way bending you have to import this Farm model so let me include it so in this import section I am going to use for model okay now what I'm going to do in C model so let me take this header name so now it's fine so let me show you one more thing I'm trying to give some invalid syntax okay so see it's you're providing this Burning so it's saying like you are trying to use this two-way binding but this index pattern this should be inside the brackets so this feature also it's introduced in this angular 14 only if there is any suggestion it will show that's it so let me make it is the normal one I mean the correct one okay I am able to see the text angular 14 tutorial I am going to change the value path one so whenever I am changing value in the text box it should be reflected in the top of that also you can see like now I am going to give tutorial so even I am trying to change something in my header okay angular 14 that's it see now it's reflected in in my controls so whatever changes in the model it should be reflected in the controls the same time the changes in the control it should be reflected in our model so that's all about this two-way banding so the syntax is this one please don't forget it so let me Mark this one also gets completed now let me move on the style binding so as I mentioned if you want bind uh any style dynamically then you have to use this option so I am going to provide one of the style okay so the color name red this is my Dynamic value okay you may say this is the hard code value yes the real time the value maybe comes from the databases now let me bind it here I just consider this h2 tag Style dot color so this is also look like our similar of our property binding online it's you know the color is changed okay so if I'm trying to give green let's change it into green now let me try to change the fund value also 40 pixel so let me copy it here I am going to include one more section again style Dot font size equal to see the font is completely changed so this is all about the style binding so let me Mark this one also gets completed okay we have completed The Binding successfully let me move on this directives so the directories or classes that add the additional Behavior to elements in our angular replications so the angular we have n number of inbuilt directives if required we can create some custom Diaries also so basically we can classify our directives in the three forms the first one is components so the components we already see the next one is attribute directives and the pattern is structural narratives for the example of this attribute I reduce this NG class CNG style and dng model so this NG model we already seen it's used in the two-way binding and the NG style this one also used for binding the Styles okay and the second one is the NG class so this one is used for binding the classes in the dynamic manner so let me show you so let me remove these two things and this one also it's not required here I am going to create one class first hit class okay so here the colors should be blue and this find bit also world so in my ts file let me Define this is the class name we have done it so let me bind using this NG class so you cannot bind to the CNG class so let me remove it NG class okay this is the correct syntax so you have to provide the CNS the small letter okay see now the class is supplied for this particular HD element okay the same way I am trying to bind the Styles in this way so instead of this class I am going to use NG Style so if I am trying to save it will throw an error so basically this NJ style will accept only the objects not on string okay so let me Define my style style value so let me Define the object so the property is color and the value is yellow so the same way I am going to provide one more property font size fonts it should be 60 pixel then only I know the difference so let me copy it okay I'm already added so let me add one second and I'm just added here so see now we have the big text the color of yellow so let me change it so this is all about the NG class and dng style hope you got the difference so now let me move on the structural directories so in the structural direct use we have three options the ngf ng4 and NG switch so first we have to take this ngf so based on some conditions it will show the particular element okay so we can apply this CNG for this H2 element so the syntax is star Ng if the salary should have more than zero I have to I should have this H2 time this is my condition see now it's coming okay now what I'm going to do so I am trying to make this is the zero see the text is gone if you think the value is loaded from dynamically not like that actually we are providing this is the static value only this salary only we are downloading dynamically so now let me give some values here okay this is loaded fine the next one is ng4 so basically this ng4 we can use for the table data binding or else drop down data binding and lists so in that scenarios uh we have to use this what is called in the NG file for doing this one let me Define on array so colors so green right yellow black I have included four colors okay so let me try to bind one of our list so the syntax is star NC for here the f is the capsule let's item of or object name so whatever balance is coming the item using this interpolition concept let me bind it here see now my list is loaded so a green red yellow and black so in case if I am trying to add one more property like a weight so see now the white also gets included so in this way only we supposed to use this CNG for so we have completed this ngf and Eng for the CNG switch also same so when we are implementing the real-time application I will showcase how to use this NG switch also now we have to check the topics so now we have completed this interpolation and pipes also two-way binding property binding given handling directives we have done so the remaining topics are Services data transfer between the components angular route card consuming this external API interceptor so after that the firms material UI the farm types template driven form reactive forms RX GS State Management unit testing these all the topics are still remaining now I am going to implement the login page it will cover most of our topics so let me go to the application now I am going to start my change here so let me include one is to tag and the name is user login so the name is added now let me start the design of our login page for providing the better UI you can use bootstrav or else the material way so now I am going to explain with an materially way so this is the official site for angular material UI so let me click this get started so the first thing is we have to install this material UA package so let me copy this one so I'm just installing so it's found like we have the compatible package version angular material 14.1 would you like to proceed yes so it is installing the required packages the package get installed now we have to choose the theme so let me go with an indigo slash pin and the second one is set up the global angular material typography style yes include and enable the animation yes okay great the installation gets completed if you checked in the package.json you have to see the information so you can see like angular slash midi release installed okay the very important thing is if you are having any changes in your package you have to rerun your application okay so before re-running I am going to install one more package this is for the electrified.js for showing the traditional notification so the command is npm install alert face Js so then I am providing this save option so let me install this one also okay this solidified.js also gets installed so let me stop under here and one second terminate the batch up yes so I'm going to run once again npm start so even if I'm using this npm chart so it will execute the command of NG server online is loaded so let me go to the components in the components so we have n number of components so when I come to the center complete they have provided the complete information so let me take this one of the basic one so that our cards are loaded if I want check the code so you have to click this view code option so it will show the HTML what HTML is supposed to use what are the TS changes and what are the style changes it will condense all the information it's not only for the autocomplete so we have the form controls like input text area date picker and form field and the tables and the bay generator with the search options so let me complete my login screen using this component so the first thing is I am going to take one of the card so if I need to use this card option so let me click this view code so in the view code we have only one small section so let me copy it so where is my login component okay I'm just included and also be how to include this APA APS nothing but models so in the material you weigh all the components have their own models so let me create one common model for this material UI so inside the source I am going to create one TS file the name is material model that yes so inside that export class material model so next important thing is every model should be defined with the NC model decorator okay this is done and here I'm going to use this exports option so in this export I am going to use this math card model so if it is not coming we have to include it manually so import angular slash material slack card so our model name is matte card model okay this is done so let me copy and used here okay we have completed in our material model now let me go to the component so in the component we have the input section here I am going to include this model material model so actually our component is Standalone common that's what I'm including in this import section so in case it's not stand alone then we have to include in the model section so in the model we have the input in this import only we supposed to include so here I have included let me save it now we have to see our output okay we have one small sample card so in the card we have some sections so let me check the note so if you noted here the card how the section is matte heart title and this content footer we have the different section so let me copy this card title I am going to remove this one so instead of that I'm just added this title and also let me copy this user login okay it's somewhat it looks fine so then we have to include two Fields one is for username and another one is for the password so let me go to the input side so we can use this basic one so let me copy the full HTML code so I am going to include this section in this matte card content okay here actually I'm used to this matte form field and the mat label and this matte input so we have to include this our model in our metal dot model so first I'm going to add the farm model matte form field so this one also not coming so let me copy and I have to input manually so this one is for Farm field and the next one is for input and the third one is for button and the next one is per table because we are going to definitely use this all the models so that's what I'm including like this model this one actually we already included so anyway but the next one is matte form field model and the third one is Mac input model fourth one is matte button model and the final one is matte table model okay so now let me include everything in our export section Mac card model the second one is matte form model the second one is matte form model so then matte input then matte button because these are the one time change so let me include everything so we can see the output okay loaded two Farm Fields so let me make some changes in our design point of view so the first one is username and this value also not required so in the placeholder I'm going to give username and the name again it should be username only so the second one is text area defaultly they have provided but I am going to use the input because the password we supposed to use this input online and the type should be password under the name is password again this text name also password okay now we have our username password but both are in the same line so let me inspect this one actually we need to apply some Style okay this class NG star inserted so let me take this one I am going to include in our login.css file the bit I am going to give 100 percentage okay now let me see I hope it's fine and then we have to include the login button so the button also we have the components we already added the model also so we can use this button so let me go to the code so let me take both of the things because one I can use for the login and other one I supposed to use for our registration purpose here I'm going to give one more do section so in the duo I'm added both the buttons the first one should be login and the second one is register and the first one type also should be submit okay for the registration basically we have to navigate for our registration page instead of this button I am going to provide the anchor tag so let me see the design okay it looks fine anyway I am going to include some margin so design you have to manage based on your requirements okay now it looks much better and if we could you have to give the border and some other things also so as of now I am not going to concentrate more on the designing part so let me concentrate on the function okay we have completed our design so let me implement the functionality for implementing the functionality uh there are two things are required the first one is service and the second one is we have to choose the farm type so in the angular basically we have two types of forms the first one is template driven form and another one is reactive form so now you may have the doubt so which form is better whether it's a template driven firm or else this reactive form so it's all about the requirement so you just consider this TD of so using this template return Form B how to manage everything from our HTML set most of the changes we can handle from our HTML site but it is suitable for small firms like our login screen and the second one is reactive forms in this reactive forms are the Logics and the validations everything we have to handle from our TS file so this one is suitable for mainly handling this complex Logics or else if you have more than n number of controls so then you have to go within this creative form so for explaining this template uniform I am going to use this login page for explaining this reactive form I am going to use our registration base that's all about my plan so before going to implement this form I am going to implement these Services because this service also one of the Standalone feature in the angular so using the services we can call our external services and we can handle the HTTP request so let me create it for generating any services our CLI command is NG generate and service short form is yes I am going to create the service in one of the folder so let me create the folder also service slash so my service name is user okay our service gets generated so let me go to the service folder so here we have the spec file and another one is our TS file the spec file is not required so we can remove it so this is for implementing the unit testing okay these services so the every service is defined using this at injectable decorator okay and also if you are using the services for handling this HTTP Services then you have to include the HTTP client model in our app dot model so let me include it http client model okay this one also it's not coming if it is not coming we have to include it manually so let me include it import from at angular slash common slash http so our model name is http client model let me include in this import section also okay this is done so now let me go to the series Once Again so in the service I am going to inject this HTTP client so now our service is ready so here we have to create our functions so using the functions we can call our external services so the first function is proceed login so basically our input is a username and password it should come in the object format so let me provide the input also input data and the data type is the object so let me provide us the any because we have not created the model class that's what I'm providing like this okay so now let me explain my service so I am already how the created.net core services so it's in running mode so here we have the services user slash authenticate so it is expecting the parameters username and password so my username is admin user and the password is admin so basically it will validate my credentials if it's valid then it will generate the token and it will return so this token we have to use in our application that's all about the concept okay great it's working fine only so let me take this URL so in the proceed login function I'm going to return this dot http and our method type so our method type is post method online let me show you this is the first method then we have to choose as the post so the post method basically expecting two parameters the first one is our URL add the second one is we have to pass the data that's it now we have completed in our service side so let me go to the component here I am going to complete the changes for our firms so as I mentioned our farm is template driven form for the login functionality so here we have the HTML element of forms here I am going to apply my changes so my form is login form and this is the NC form okay and if you are using form you should import the for model in our component RLS the model so this is the Standalone common so let me include in the command itself so the first step is done and here I am going to write the event also so the even disk click event start and click even it's a submit form submit so here I am going to include the function name proceed login and in this proceed login I am going to pass the form value so this is my form identifier dot value so let me Define this function also in our component so whatever value is coming so let me add in the console then we have to verify so now we just completed in the form so similar way we have to include some changes in our input also so the first change is will be how to include NG model the same way I'm going to include in this password also and both the fields are required so let me include this required property also most of the changes we have done so let me save it and I'm just also console also So currently we don't have any data now let me click this login button okay nothing has happened way because we have included this button section is out of the farm so let me cut and everything I'm going to include inside the phone now let me try once again so when I'm clicking I am able to get the values the username password both are empty at the same time we have applied this record field validation that's what it the red color is gaming and also you have to see this star symbol now let me try to give some values admin and this password also admin so when I'm clicking so now I am able to get this username and password values okay but before that I need to check the validation so what I'm going to do so instead of this form dot value I am going to pass the complete form so in the console side I am going to add the first one is the form dot valid so it will return whether the value whether the form contains the validator or not and the second one is value so let me click this login see it's saying false and also it's saying the data also empty if I am providing the valid data at me now it's saying true and also it's returning the data So currently we have our farm and the design and also services so let me integrate everything so in order to we can complete the functionality first I am going to check whether it's valid or not so if it is valid then only I am going to allow otherwise nothing has happened so actually I need to call these services in our login.com so let me inject the service first private service so our services user services okay this is fine here I am going to call our method so this dot service so our method name is proceed login the same here I am going to pass this data login dot value so the next thing is we have to subscribe it because whatever values in this HTTP request all are in the observable format online so without a subscription this absurable is won't work so basically this absolute list belongs to the RX Js so let me explain it later before that I am going to complete this functionality so inside the subscription I am going to use this callback function so this step is very common for calling any services so just subscribe it then you have to use the Callback function so in this item basically whatever response we are getting from our APA it will come so let me show you console.log dot item I'm not going to add directly so let me initiate one more variable trust data data type is CNE for the first time going to assign this First Data this dot respirator equal to item now I am going to include this one in the console so we can pass some data here admin user so this is my valid record and password is happening so it's returning the object so it contains two sections so one is jwd token and another one is the refresh token so in case if I'm providing some invalid password so it's returning this for not only error or else we are getting some other errors only okay so let me take this valid scenario if this Dot response data not equal to null and the next one is sales scenario something else I'm going to give basic color then we have to modify into alertified.js so the login failed that's it so once I got this value I am going to include in this local storage or system storage so in the angular we can handle the State Management in different ways we can use this in grx cookie or else we can go within local storage or system storage so let me use this local storage local storage dot set item token so this is the key name and the value I'm going to use the JWT token so this dot response data Dot JWT token okay before done so now let me clear if there is any values in this what is called the local storage so already I am having some value so let me remove it okay I have removed all the datas and also in this login component startup time itself I am going to clear the complete local storage okay this one also done now let me try to login admin user and admin okay it's just a succeeded look like because we are not getting any error so let me check in this local storage yes in the local storage it's added so basically our login is Success means we have to redirect our home page that's all about the concept so let me do the navigation also for doing the navigation be how to inject our router private route and router so once I am added in the local storage I am going to navigate into home page so this start a route dot navigate here I have to provide our path name so the path name is home so let me try one second admin user and admin so it's just a redirected into our home page so Hereafter we should have the links are only log out only we supposed to have in this area so the register we already moved in this login page itself so let me change it so in this app component I just removed this register so instead of this login I'm going to use logout so now let me try to click this lagot okay now it comes to our login page so now let me going to provide this link for this registration so in the login page the registration I am going to provide one of the event The Click so here redirect register so let me copy the function I am going to define it so already we defined this route.navigator so let me take this one so after that I need to check the path okay access last register okay just to save it so I'm going to click this register so it's just a redirected to our register page so now let me log out once again so actually we have implemented our login So currently I'm not logged in okay but still the menu is showing this is not the correct way so let me disable this menu until I am logged in for doing this one let me go to our app component so in the app component so in this Banner side I am going to use one of the directive ngif so the value is is menu visible and I have to declare the property also so initially I am going to provide the value versus true okay so actually our login component is loaded top of our app component so we have to check after our all the components are get loaded so here I am going to implement one of the lightsaber cook do check so let me implement it okay so my idea is I'm going to check currently I am in the which page if I'm in the login page I don't show the header if I'm not in the login page I will show the header that's all about my plan so for getting the current activated route so I have to use the router option so let me create the Constructor here so let me inject the router here and also let me inject the router okay great here I am going to check the router value constant current route or else route URL so this Dot Dot so the URL so let me include this one in the console okay we have done let me go to the console okay ncid actually it's a NG if I think I made a spelling mistake okay it's saying underscore login so if I go to the home it will show slash com so let me copy this slash login so let me implement the function here if current route is doubly culture login then I have link so this dot is visible menu equal to false else I have to make this also true so we can verify once again So currently I'm in the home page I am able to see this complete menu so when I'm going to the login page so the menu gets gone I can see only the login content only So currently I'm not logged in if I'm trying to go to the home page it's allowing basically what is the expected output if I'm not logged in if I am trying to give this home URL so it should be directed in our login page that's our expected result for implementing this functionality angular provide the wonderful option is curled the angular card so card also is a kind of service only so let me create and I will explain how to implement in our application for creating this one the command is NG generate and this is the card so the short name is G I'm going to create one of the folder also and my card is okay it's asking which option we supposed to choose so let me choose this can activate that is more than fine so let me go to this card folder here also we have one spec file it's not required so let me remove it okay so basically it's returning true only so in this place only we're supposed to implement our Logics let me copy my auth card now I am going to our routing model so in the routing model first I am going to apply this is for our home can activate Heart Card so the idea is so if this add card is returning true then only it will activate this link otherwise it's won't download that's all about the concept so if required we have some custom implementation that also we can do in our card itself so defaulty it's returning true so let's make it as the false okay currently I'm in the login page if I'm trying to give the home also so nothing will be loaded it's just redirected in the normal page and trying to click this home that also it's not working okay so in case if I'm trying to give true now it's working fine so I'm click the home it's working so here I am going to implement my logic so first I am going to check whether I am logged in or not if I'm not logged in I'm going to redirect in our login page that's all about my plan so first let me go to our services so in this service I am going to write one function it's called is logged in so inside that I'm going to check this local storage value local storage dot get item off so our key value is token return not equal to null so this function basically it will check this local storage which is having this token value it will return the true if it's don't have any value it will return the false that's all about the concept and also I am going to create one more function get token so let me copy the same thing here which is having the token I am going to return the token we just don't have any value then let me return as the empty that's it so now let me implement this is logged in in our art card so let me remove this one and here I'm going to create one Constructor so in the Constructor I am going to inject the services and if service name is user services and also I am going to inject our router also because we need to navigate in our login page okay first I am going to check so this Dot service dot is logged in so if it's returning true I am also going to return as the true only the else scenario I am going to return false let's show in some error okay this is fine and as I mentioned I need to redirect in our login page so if required we have to provide some messages also please login and access it so now in the error page so let me go to the login page okay login page is working fine I am trying to give the homepage so it's saying please log in and access it from clicking this alert so it's just redirected in our login page so let me remove this alert it's not looks good so let me give this what is called our home link once again so it's not allowing so in case if I'm trying to give the contact it will allow y because we have implemented this Art card for our home only so now let me include this is for our all the parts I am added for this uh card and also I am going to include this is for our contact also yeah this is the correct Place only okay fine and this axis and login it's not required because these are the open functionalities so anyone can access okay now let me provide this report it's simply redirecting to our login page so if I'm trying to give the valid credential admin user admin so it's just a redirect into our home page so now I am able to access these borders and the contact okay great this is all about our login now I am going to implement this registration for implementing this registration I am going to use this reactive forms okay first let me complete this registration I'm in this design so after that uh we have to complete our services and also our farm related changes so where is my component registration so it's available inside this access okay let me copy something from our login page for the design purpose so the design only I just copied so it's a user registration and I am going to remove this all the things because in the reactive forms it's something different and here so the first one is username it's fine and this NC model required and the name these all the things are not required and the next one is password that I supposed to keep it a required type yeah type let me keep it name NC model is not required so instead of this login I am going to the button name is register and the next button is basically it's not required so other ways I can give like a close okay this one also fine redirect it to login so let me complete this one here already we have the Constructor and let me inject our router here okay this Dot router dot navigate login okay and what else we have we don't have any function and let me check the service also okay it's showing a lot of error first let me resolve this error way because uh in this material model I need to import in our main model so my model name is access model so let me import it then only the issue get resolved material model okay great it's loaded fine and we have to apply one of the style also okay fine we have some other fields also let me check in the services okay let me check this one okay great we have the six Fields the user ID the name password email so let me provide these four values online the role and effective currently I'm not going to provide because I have some thread process let me explain a little later so first we have to complete this registration using these fields So currently we have the user name before that I am going to include the user ID also so user ID file and the username password finally we have the email also email for this email this is not required and yeah this one also email okay this is my registration page so there are four Fields I'm having so here I am going to apply for the reactive so in the reactive forms as I mentioned we can mostly handle from our TS file itself so first I am going to Define my reactive form using the farm group so the reactive form equal to new form group so inside the form group I am going to Define my controls so my first field is user ID new Form controller so if there is any default value we have to provide so I am going to provide the M2 online and the second field is name again the procedure is same so the default value is empty so let me copy the same thing so this one is for password and the final one is for email so let me format it and the next step is we have to include the validations so the user ID is the required field only for adding the validator we have the class is validators so using that we have to include dot required and the second one also required field and this password also find the email so the email I am going to include true validation so should not be an empty and also it should match in the correct email format okay so let me show you actually we have the different validation options so they email the maximum and the minimum length so if you have any pattern that also we have to include here and for this scenario I'm going to include this email and also the required for including more than one validation B how to use the email.compose option so email.com post option so instead that we can have an array first I am going to use this validators dot recovered and the second one is validators dot email okay great our validation is also added so now I am going to integrate this reactive form with our design so let me copy it so in this form I am going to use form group equal to and also the event I am going to use the NG submit save user so here I am going to define the function also and we have done for our form next we have to add the connection for our controls for doing this one form control name so please note it start from small letter this Ctrl C's caps and also the name is enes caps so here you have to provide the names the name should be what actually we have mentioned in our reactive form so both are should be same so the first one is yeah this is the user ID only and the second one is username the username is nothing but the name and they are doing this password and the final on this email so let me save it okay it's saying the form group okay so the first thing is if you are using this reactive forms you should import this reactive form model in our model page so let me do it reactive for model if you are using template driven form you have to include this form model so the reactive form then you have to include this reactive format okay see now the issue got resolved so if I'm clicking this register without any value so it's simply saying it's complete an error so what are the required Fields so you have to see this star symbol also now let me try to get all the values from these forms so in the TS file I am going to add this console the steps almost are same because I am using the same pattern for the template driven form and also this reactive form for the understanding purpose so this Dot our reactive form dot value okay so this is done so let me go to the console no value access for the form control with the name of email okay yeah I made a mistake actually I have included in this farm feed I supposed to include this in our input control only so this is the copy paste mistake okay it's fine now see there is no error I am going to provide the user ID so NT user so one user one and the password is test one two three so whatever it is so if I'm clicking this register so see whatever value it's coming user ID is CNT user one under the name the password remedy whatever value I have to provide it it's coming so in case if I'm trying to get this name only I am able to get so after the value I'm just clicking so see here I am getting all the values like email or name or password or user ID so this feature also introduced in our angular 14 only this is called this word type deforms okay so previously this option was not available but you have to use like this or the name so in case if I'm providing this wrong name okay so currently it's showing the error and also it's giving some suggestions so do you want to use this name and using this quick fix option change the spelling to name its result so in the previous version we don't have the options like that so in case if I'm providing this name on also it will take it when I'm running time it will throw the error so it's uh this type deform feature is completely saving our developer time okay so anyway we are getting this value and here we have to call our services and if you have to complete our registration from salty also so for doing this one we need the services so let me create my services so already we have one service yes a user service so I can use the same service also so let me create the function registration so here also steps are almost same because the input is anyway the object only so let me copy the same line okay so this dot HTTP so our method is post method that's what I am provided to the Post in case if you haven't get method so we have the Optimus call to get the put method we have the foot and post the patch option also there so the delete you have to use the delete so definitely I will complete on credit operation also at that time I will explain with an correct data so now let me complete this registration option okay so I need this URL also so let me go to the Swagger okay I just copied and I'm going to change the value here okay so this one also done now let me come to our registration component so in the common already I'm injected this router now I am going to inject our service also so our service is user service only here also first I am going to check the datas are valid or not so this dot reactive form Dot valid so if it is valid I am going to call the services so this dot service start registration and our input so we don't have any parameter we're supposed to take from our form itself so this dot reactive form dot value and again it also the observable only so let me subscribe it for the subscription procedure is same for all the methods whether you are using this post to put get delete whatever it is the procedure is same and here also I am going to declare one of the property in this dot or respect I call to item so let me format it so once our registration is completed I am planning to redirect in our uh what is called our login page so before that I need to give some Millet that's my plan if this Dot so response data so first let me check the response what isolate is coming so based on that we have to proceed so console.log okay fine now let me try to click this one this register so nothing is coming in this console okay the validation is blocking and I'm going to give end user review name and password also ready so basically we can apply more validations for the landing purpose I am just to promoting the basic values okay I'm getting the result is passed and the key value is CMT so anyway I'm getting this password result online so let me open the SQL Server okay it will take some time meanwhile we can complete our functionality anyway we have the field is a result so if it is fast then we have to give this success scenario otherwise it should be failed so double equal to pass so positive scenario other ways I have to show the alert message failed try again so the past scenario I am going to redirect into our login page so this dot route okay router I'm not injected here yeah actually injected okay router Dot maybe get a so anyway we have the function also I am going to just reuse it predirect.com and before that I need to show the alert message registered successfully please contact admin for activation so the idea is I'm trying to allow all the user to register it but the admin can see all the records so admin only assign their roles and also he will activate the user then only the user can access our application that's all about my concept so look like a skills already loaded so let me exceed the query so here we have to see the records so the user ID and the name the password the email also there the role is not assigned and this reset you also currently null so if I am trying to access you using this credential basically it's not going to allow okay so we have to insert one more record and we have to verify whether the alert also working fine or not so NT user 2 user 2 .nt atin.com and this password and the email is nt18.com okay so when I'm clicking this registration it's saying registered successfully please contact admin for the activation but this alert is not fine so we have to use the selectify.js so it will give some rich look and feel so let me Implement that a lot also because we already installed the package so we have some steps so the steps are in the list so first we have installed these packages then we have to include the CSS in our style.cs file so let me go to the style.css here I am going to include one more style also so that their default Dot main.css so once it's done we have to import this in our component so let me copy it so let me go to our registration components I just included it will show in some error then we have to create one file I'll Rectify dot d dot TS in the source I am creating a new frame okay it's created so inside I am going to declare this model we need to include this type root section so in the type roots we have to mention this path and also this node model slash types for doing this one let me go to the ts.config here I'm going to use the type root okay the configuration is done here after we can use the feature of the selectified Js so now let me go to the registration component so instead of this direct alert I am going to use the selectify so I'll let you free dot success so inside that I am going to provide the same message in case it's failed then we have to give the error okay now let me go to the registration page once again here I'm going to give this ready and to use three and Ramesh or a machine.com okay the password I supposed to give and our Aba itin.com so if I'm clicking this registration see the notification is coming the registered successfully please count the admin for the validation and also it's just redirected our login page now let me show you the one more scenario for showing the error I am trying to give the same ID into user1 when trying to register it won't allow because we not included other fields that means so I'm expecting some error see now failed to try again actually I'm not providing the excite error message even my service also it's not returning but I'm providing the duplicate user ID that's what I'm getting this error so let me show you once again see failed to try again if required you have to provide your own messages also so now we have completed our registration also so let me check the topics so here we have completed our services and this our route card we have seen on basic example and continue the sectional API we have consumed two Services one is for registration and another one is for our login what are the post method only I will show you this get method also a little later so anyway I'm going to Mark both our computer so the Interceptor asafulla have been not used the forms we have used for both the firms the template even form and also the relative form the material UI so let me Mark both our computer and this rxjs so we use the feature of rxjs but I'm not explained properly and the next one is State Management so we used this local storage anyway let me keep it is not completed so we will see a little later and this notification using this alertified JS it's already done add this unit testing also bending so the real-time implementation we have completed this Lagoon and the sign of both the functionalities so my next plan is I am going to create one more page the page name is user so in this user page I am going to load all the uses so when I am trying to register some of the uses it will be loaded in my user page but it has one restriction the admin only can access the particular page once all the users are loaded the admin Health option for the activating the user so admin will click the activation button it will show one pop-up in the pop-up we have the options for Activation or deactivation and also we have the option for assigning the role So based on the role user can access our complete application that's all about my plan first I am going to create the component here foreign component my common name is user okay look like our component is created I am going to add this component in our route model after the about I am going to include it just a user and the component is user component so I am going to add in the menu also so after this contact so let me log in first admin user admin here I am going to load the user details so for loading this details I am going to use the common entities table so first let me consider this basic one okay what I'm going to do I am just copying the complete HTML section from here so user details so let me remove this one okay this is added so definitely it will show some error I think it's fine okay I just added the HTML the same way I am going to include the style and the TS will changes also so in the style point of view we have only one small change so let me include it now this TS so in the TS file if you noted uh they have one array the datas are hard coded only so anyway I'm going to copy then we will make it as the dynamic okay this one is added and also I'm going to take these two things okay we have added and the final one is we have to include the model so actually this user communities belongs to our app model only so let me import it so the model is material model so if you checked this material model already I have included this math table model okay now see the error also got resolved so we can see this default output okay the datas are loaded but the decision is not good so let me do some changes here I'm going to create some View so the bit I'm going to give some fix it okay and also I'm going to cut this glass okay now it's somewhat good let me keep this user detail in the outside of our dude that is fine okay it's fine so as of now we have the one hardcore data only now I'm going to load the data dynamically from our services so let me explain our service here for loading the complete user information our services APA slash user master so actually I'm getting this 4.1 error because the service is completely secured one we have to pass the authentication token then only we are able to access let me copy this URL now I am going to the postman here I am going to open the new tab and our method is get method only so I just pasted the URL also and as I mentioned this is the secured service then we have to pass the authorization header here so the key is authorization and my token is very token so let me provide the area some small face so here we need to provide our token so let me generate my token for generating the token we have the method already here I am going to copy this JWT token only see now it's returning the data so the entity how the fields are user ID name password email role and effective so what I'm going to do let me create one model first because this creating model I am not explained previously so we can complete that also so inside the app I'm going to create the folders model and this model is for the user so I am going to create one file also I mean the class file user model that TS so the model is Creator here I'm going to Define my interface so the name is user model and we have to export it then only we can use so here we have to Define our properties just copied all the properties the first one is user ID and the type is string the second one is name for this type also it's just string only then this password email and roll the final one is effective so for Effective the data type is Boolean and this role this is the string only again the other tools also string foreign next I am going to create the service so NG generate service the folder of service so my service name is user master so our service is generated let me go to the service folder so this file is not required so in the service first I am going to inject the HTTP client and let me Define my AP URL now I am going to create the function for getting all the user restart HTTP dot gets so only one parameter that is our app I mean apur okay we have done our first method and the second method also not the git method only so this is for getting the individual user details get user by ID so the input is user ID type pcne so inside the URL we have to pass the user ID also so that method is for delete so this one also looks similar only and get not a get renew user and here also we need to pass this user ID so instead of I am going to change into delete so we have two more methods one is for a save I'm not going to use the save instead of that I'm going to use the update status method so let me check the service here or Canada the user master be how this activate user so let me copy this one and the final method is for updating the status complete user and the input is object basically I am going to pass the user ID and also the status and the rule based on the user ID the APA will update the status and this role that's all about my plan so input data so the type is post the first method basically expecting two parameters one is our URL yeah this is our URL then we have to pass our data also so let me format it so we have completed our changes from our services so in the previous one the user Services there is no authentication okay so this is the completely public service so anyone can access but this user Master is completely secured services that mean we have to pass the authorization header so passing the authorization header we can do it from our service itself but the traditional way uh basically we have to use this HTTP interceptor so that is the one time change it will work for all the services so let me complete that also so the HTTP Interceptor also one of the service so let me create the service first NC generate service and I'm going to provide the name is token interceptor because we are going to pass the token okay the service is generated so in this token Interceptor class I am going to implement the HTTP interceptor so let me implement it okay this one also done so let me remove this throw section here I am going to implement my logic okay so let JWT token so the request dot clone of here I am going to written next dot Handler JWT token so inside the Clone I am going to pass our heads so the set header which here I'm going to pass the object so token type is authorization token and my token type is b error then small space so here we need to pass our token okay this is fine so actually our token is available in the local storage so let me take this one first local storage dot get item off and our key name is token okay now we have done and the second step is once we completed our HTTP interceptor B how to register in our model class so my model is app model so in the app model we have this section is called the provider here I am going to use one object so the first one is provided provide is HTTP interceptor and the second one is use class the class is token insert Interceptor class that's what we have created and finally we are going to use this class for multiple places so the multi also true okay now we have a computer so let me go to the our user command so in the user component first I am going to inject the services yeah this is the user Master service and also I am going to create one function get all user and let me Define one object also user detail here I am going to get the data so this dot service Dot get all user so let me subscribe it so what our data is coming I am going to set in the offset so let me format it I am going to put all the values in the console then we have to verify the details are coming or not once it's fine we have to bind in our table that's all about my plan so let me go to the console okay there is no value Yes actually I have created the function but I'm not called anywhere actually I'm getting this 4.4 error so let me try to log out and log in once again so in the console I am able to see this array so the array contains all the user information okay and also I have created a model class so let me Implement that answer so if you have the model class then you have to do it from our service itself where it is our services the Master Series so this is our method if you not provide anything it will just reconsider as the normal observable only so let me Define it so observe love and our model is user model so this is the array and here also okay this is fine so let me check once again so again I am getting the same value that is fine okay so let me go to the user component so the first thing is we have to Define what are the columns we are going to display so our first column is user ID and the second one is name and the third one is email and the fourth one is active I mean is active and the final one is role okay I have defined the columns now let me go to the HTML side so if we consider about this HTML section first we have to define the columns one by one so the First Column is user ID and this is the display name section so we can provide like this at what element I'm going to find that is a user ID unit and the second one is name so name we have to keep the same and the third one is so let me check one second I think this is the email and here also it's a email and this one is effective so display name and provided the Stacked you and the final one is role so if you don't have you have to copy and then we got to create it a role and this row okay we have done one change and the second thing is as of now in this data source we are having the hard-coded data so let me remove it so then let me go to our get all user method so once we got the details I'm going to include it if it is not defined top of that I am going to Define it that's it so the data type we can give any let me check once again okay if you noted here so we are getting the values so the user ID name and email that you said there is no data and this role also comes fine so let me check why the values is not coming for this effective the year should be caps so let me change it and we have to change in this column section and also our model yeah here actually we Define the correct way so let me check once again okay the datas are loaded so let me rebind this active column so instead of this active I'm going to give the status and also if it is true I'm going to provide a stack to you if it is false then I'm going to give us the inactive so let me complete that also the spam Act 2. and the another span is inactive here I am going to use the NG if okay let me check now yeah this is more than fine and finally I am going to provide one more column this is for action so the first thing is uh we have to provide in our display section active now tied to its action so now let me go to the HTML side so instead of the role I am going to use this action and this one the header should be action that is fine and the detail side so instead of this data binding I am going to use two buttons for adding the buttons let me go through our button component here so let me take these two the first name is change and the second one is for delete okay see now it's fine but we have to provide some space okay now it's almost good okay here we loaded all the user details now we have to implement this change functionality so before that I am going to include this page nation that also a very very important thing let me take this example matte Bay generator I am going to include in the table or the table once the table is completed I think we have to include one of the model by generator yes so let me go to the material model Bay generator matte Bay generator model okay now it's fine so let me check okay we have the base Nation so the item for page we have to see the file 10 25 and 100 so if you required you have to change this one also so let me show you so whatever value we have provided in this array it will come automatically and also the page size so the default value is 10 so in case if I'm trying to Q3 and the page size is if I am providing 5 so then it's supposed to load five records for the page but I just included this page enter I am not yet integrated with our table recorder for doing this one we have to do some changes in our TS file so in the TS file we have to use this math table data source so let me do it so here I am going to pass our array data and if you know the model then we can mentioned that also user model okay this is the one stop and also I am going to get the page generator using this view child option at mute sailed off math bassinator okay defend this paginator I'm going to include this for our data source so this dot data source.paginator called our defined page Network so we have done it admin user and admin okay so now the records are loaded so only five records only loaded so if I'm changing into three it's loaded only the three records and the next button is enabled so if I'm selecting 10 records so these two options are get disabled so this is all about the page generator and in the similar way we can include this uh sharding also starting at the search functionality we can include so for the time consumption I am going to move on this implementing this change from schulting so in the buttons I'm going to include two functions first so the event is Click event only function update and here I am going to pass one value so the value is nothing but our use ready kind of the same way I'm going to include a more button this is delete and also I'm going to Define both the functions otherwise it will throw some error okay one function is created the similar way I am going to create one more function for our delete so first I am going to complete this delete functionality because this is the very easiest one so this Dot service remove user and user ID subscribe so once it's deleted I'm going to reload the table and also we can provide the success message we already implemented the sanity phase.js in our one of the model uh this is a registration model so let me copy the import section yes so other than the configuration we already done remove okay this is completed so we can verify now so if I'm clicking this end user1 so it's just removed and also the record also gone so let me load all the records okay now I am trying to delete this end user too so it's removed so basically if you are implementing this remove functionality you have to use this confirm box so directly deleting the user it's not the correct way so in this electrified JS we have the confirm box also I am going to use this one first so let me use this selective icon from here so the first parameter is header remove user and the second one is confirmation message do you want remove this user at the title miss one of the Callback function so this is our OK button and the final one is for close button so in the close button we are not going to write anything but in the OK button click we have to include our delete function So currently I'm having just two records only I'm going to register the button let me register it so user won't test user test okay it's register now I am going to login administer admin okay so whatever record I have just registered it's loaded here so it's in the inactive state so if I'm trying to delete so it will ask the headeries remove user do you want remove this user if I'm clicking this cancel nothing will happen so in case if I'm clicking this ok it will delete and it will say removed successfully so now our change from salty so when I'm clicking this change I am going to open the model pop-up so in the material view I we have the option is dialog okay for implementing this one uh we supposed to create one model first so in C generate component model pop-up okay the pop-up is created I mean the pop-up component is created so now let me go to our user component so I already defined one function so if I need to use this dialog then I have to include the model for the dialog so let me copy this one I'm going to provide this dialog mat dialog model so once this step is completed in our user component in the constructed side I am going to inject matte dialog now in this function I am going to open this pop-up so this dot dialogue dot open so here I'm going to pass the component first so the mod will pop up so after that if you have any properties then we have to include it so the width I am going to provide 400 pixel and the height also I'm going to provide just to 400 so if required we have to increase little later and for the animation duration I am going to provide 1000 milliseconds again the Ender animation duration also I am going to provide 1000 milliseconds and also we need to pass the data so user ID called our user ID okay we have completed our stuff so let me open the pop-up see now the pop-up is opened currently we don't have any design now let me go to the pop-up component so here I am going to provide the heading is update user so as I mentioned I'm going to use the two controls one is for the destination update I mean the role update and the second one is for the checkbox for select we have to include this what is called the select model and the checkbox we need to include the checkbox model so let me do that first select and the second one is checkbox and the model name is Mac select model and another same match checkbox model so basically when you are starting the development within this material UI you have to include all the models that means what are the components you possibly going to use so you have to add in the starting itself okay I have done okay let me copy this basic Okay so our label name should be role so binding this value basically we will get from our databases and let me complete the design first and the second one is checkbox I just taken the basic one so the name is is active okay the two controls are loaded so let me increase the size of the control 100 pixel and this height also it's not required finally I am going to add the buttons so let me copy the both the buttons so in this model pop-up I am going to include one more due so this one is for close and the second one is for update okay the design is somewhat fine and the second thing is uh when you are implementing this say functionality you should have to use any of the form so I am going to use this reactive form so let me Define the form here so update form new form group so it contains only two Fields the first one is a roll new user I mean new form control it's don't have any default value and the validation I'm going to give us the required okay my next control is is active so here I am going to provide the default value is true okay we have completed a variety from initialization so let me integrate our HTML site so the first thing is I am going to create one Farm I'm in the HTML form so inside the form I'm going to use the farm group and our event NG Summit save user so now we have completed for our form so let me complete for the individual controls form control name the first one is role and the second one is effective this is kind of update so we should have the user ID so let me declare it so user ID new form control name so here also the default value is empty user ID this placeholder and other things are not required because I am going to disable this field okay so let me check unexpected closing tag so can't bind these form groups since this is not a known property okay in our app model I think I'm not included our reactive model so initially we have included that is for our access model so model pop-up component Save You shall not exist okay we are getting errors one by one so that also is fine because we are getting something okay great now we have completed our design and also the farm integration now there are three things are bending so the first thing is we have to load all the roles and the second thing is we need to load the existing data like if I am trying to update this demo user then I have to load the existing status and also the existing role so once this is completed we have to complete our update functionality so let me do one by one so first I am going to my services so in this user Master services I am going to write one function bar get all the roles and this also one of the get method only start http.get so here I need to pass the AP URL so let me check from my services so this is the method it will return all the existing roles okay this is done uh now let me go to my component send this component I am going to declare one variable Control Data the data type is ene okay and also I'm going to declare one more variable this is for edit data so that also the data type is CNA so here I am going to create two functions first one is get all role and the second one is get exist data so first we can complete this get all role so this dots service okay actually I'm not integrated I mean not it injected our services so let me do that so user Master services this is done get all roll and let me subscribe it so this Dot roll data equal to item now I am going to call this function in our unload So currently our complete role information is available in this role data so let me copy this one I am going to bind in our HTML side so let me uncomment it so in the same three options Let's Roll so the entities on this row lady and another one is name so let me copy this role ID and another one is name so let me refresh and we can verify now I am clicking this Change option see another role so the admin staff and user the three records are loaded now I am going to load the existing record for the particular user so here also the procedure is same let me copy the whole content so instead of this get 12 rolls I'm going to give get user by ID it's the expecting one parameter that is user ID so whatever response is coming I am going to include in this edit data 4K this is fine now I'm going to call this method also in our unload itself actually here I need to pass the user ID so let me give some empty values of now otherwise it will throw some error for getting this value I am going to use this inject option inject of mat dialog data data because we have added and it should be public and this variable and the data type is CNE okay so basically whatever value you have passed it will come in this data so let me include in the console we can verify okay this is fine I am going to refresh the screen one second so now let me click this Change option okay see I am getting this object so this is the key value user ID in the user ID I'm having the value as admin user okay so let me copy this one I'm going to pass this value so this Dot data Dot user ID okay now let me go to this get existing data so the data is available in this uh edit data section I am going to check it is having data or not equal to null then I am going to update the values for our form so this Dot update form dot set values of so the first one is user ID so the user ID value is the same name the second one is role so again the value base this dot edit data dot role and the final one is is active so again the value is they start and edit data okay we have completed now I am trying to click this what is called the demo user so see now the user ID is loaded and this user I mean the role also it's loaded it's the user so let me see yes we have the user only even the status the current status is exactly only okay it's loaded fine uh but we are going to change either this role or else we are going to change this effective field only but this one the user idvr are going to change so it should be in this disabled mode for doing the disable so in the HTML we are supposed to use this disable option so in this reactive form we can handle from our farm itself here I am going to pass one object so first the value value is default value is empty the similar way I am going to use disabled but true so we can check once again see now the field got disabled okay now we have to complete our update functionality here what I am going to do first time checking this dot this update form dot valid so if it is valid only we are proceeding further so inside that I am going to call our services okay the function is subdate user here I am going to pass this form value this Dot so basically we have to pass like this the value but currently I'm use the disabled option so in this case we supposed to use this get raw value okay this is done so let me subscribe it so whatever value is coming I am going to add in one of the parameter so let me Define it so this dot save data equal to item here I am going to check so this start save data Dot result double equal to pass from the yellow scenario here I am going to provide the outlet so alert is saved successfully for doing the traditional alert I am going to use this solidified JS we already used two places so let me take it yes this import section we're supposed to use so I'll Rectify dot success updated successfully so in the CL scenario alert to free dot error failed try again so let me format it so in this past year scenario we need to close the pop-up also for doing this one we have the option is matte dialogue graph so let me import it so private so the ref matte dialogue here I supposed to pass over component class so once it's succeeded so this dot drifted close pop-up I think this close so we can check okay now I am your not the new user I'm going to register it so anti-user 2. and the password is test so my email ID is NT user to at nt.com okay the registration gets succeeded now that mean user is coming and admin oh he's going to the user section so he is able to see the entity user 2 is now registered the status is inactive so I'm just to open the power buff first I am going to select this role as the staff and I am changing the Status also is active okay it's updated successfully but the pop-up is not closed I think I have to include like this see now the status got changed back to you and the role stuff okay see the pop-up is closed okay now let me change the role once again I'm going to change the rollers user I'm updating so the power-up is closed but the data is not refreshed ok so that also we can do so initially our pop-up is opened from our user component here I am going to declare on variable bar pop-up RLS I'm going to select so in the same function I'm going to use so popular Dot after closed so this is the absurable so let me subscribe it here I am going to refresh our table so okay the changes are fine now the user in I mean the role of user so let me change the role the staff frame updating see the role also got changed even if I am trying to queue user so I'll change it into the user now I am trying to login with this user ID so let me log out this one and my password is test say I'm able to login but the problem is currently I am coming as the one of the staff user even I am able to access this user even I am able to change the uh what is called the role or status of that menu sir this is not the fair way so I am going to provide some restriction for doing this restriction we should know the current role okay so let me create one function for getting the current role so already I'm having the token so for extracting this token basically I am able to get this value so bar token equal to so already I have created one function okay great we are getting our token here so once we got the token we can extract and we will get our role information so before that let me provide some detail about our jwd token so let me create the token once again admin user find the admin so let me copy this one big how the website is called Beauty dot IO so here I am going to provide my docker basically the token has three sections the three sections are splitted using this dot separator and the first section contains only the header what is the type of the algorithm we used and the what is the type of the token so this is not required and the second section is payload so basically we are going to use this payload online so it is having the information of the login user and the role the expiration time now let me go to our application I am going to split this one bar extract data equal to okay we have added some code so before that I am going to check it's not equal to null so let me format it okay so after that we will get an object foreign data dot role in case else I am going to return as the empty so this is all about My Control Function now I am going to use this Control Function in our app command because here only we have defined our menu foreign so let me format it so first here I am going to inject our services private service and our user services okay this is the one here I am going to check so this dot service Dot get role doubly culture admin is admin so initially this variable should be false if this is admin only I am going to make this is the true send the else scenario it should be false now I am going to apply the condition so in the user menu I am going to use this ngf now I am going to log out first I am going to log in with an admin user so the user menu is enabled so I am able to access the particular menu now I am going to log out and trying to log in with an NT user so see now we have the home about us contact but this user menu is not coming so but in case if I know the URL I am trying to give like this it will allow once again so this one also not a fair way for doing this restriction we have to manage in our arcad for doing this one let me create one more new card NG generate card be how the Fortress card to Ard okay and my card name is roll okay here also I am going to use the scan activate only so the card gets generated so let me go to the folder okay great first thing is I'm going to create the Constructor then let me inject our service so service is user Services yes here first I am going to check so this dot service Dot get roll off it should be an admin else I am going to return files and the alert is you are not authorized to access okay and also we can redirect to our home page so that is the Fairway private and router so this start route Navigator and our route name is home so okay we can verify now so let me log out once again I'm coming with an anti-user I just logged in okay actually I created this roll card as of now I'm not included so let me complete that stuff otherwise it won't work so in this app routing model so instead of this Earth card I am going to use the roll card okay now I'm going to give the URL user so it's saying you are not authorized to access if you click this okay it simply redirect your home page currently I'm in the about us page here also I am going to give this user it won't allow now I am trying to come with an administer so now I am able to access this user base and everything so let me provide on last demo so I'm your first user I don't have any access so let me go to the registration screen even this registration screen also this menu is supposed to not come let me include one more change here okay this is my okay let me restart my demo once again okay currently I don't have the credentials okay so let me try to register it NT user NT user okay password so when I'm click the register so the registration got successfully you have to contact our administrator so now administer coming to login admin user under the password so the home page is coming the admin is coming to our user base so here he is able to see our user NT user okay this is in the inactive model now I'm going to the Change option first I am just ascending the roller staff and also I'm activated okay now I am going to log out using this NT user so if I am able to log in and here I am able to access all the menus okay now the admin user trying to make the particular users in active mode okay updated successfully now the NT accessor status is in active mode now I'm going to log in one second so it is one dollar basically I have to provide the alert unfortunately my service is not working it is it is returning the 420 error so let me clear my service then we have to provide the exact message so when I'm uploading the source code I will fix this issue okay so this is all about the demo now let me go to the topics so most of the things we have completed for this real-time implementation activate and deactivate user by the Admin user so this is done so the customer credit operation so B already completed the credit operation okay actually I'm not used the customer credit operation instead of that in the user menu itself we have completed when I am trying to register I am creating the new record so I loaded all the records in the user base so admin user trying to update so the update operation also done so the delete also we have implemented so that means we have completed our current operation using this user menu okay the role based authentication this won't actually be completed this Dynamic manage generation and implementing refresh token logic these are the big topics so already I made some videos so let me share the link so if you go to the YouTube Once you got my channel so in the playlist section you can see like the authentication in angular 13. so it contains just three videos so most of our things we have covered in the first video but the second tour I am not covered in this video if you watched this one you will get more information so based on the role we can generate the menus dynamically and even this role-based authentication I just hard coded for the admin so in case if you have a number of rules we cannot card code like that so we have to handle everything in the dynamic manner so if you completely watch this video you will get all the details so I will share this link also in the description you can watch it and I'm going to mark this one also gets completed and the final one is new feature in angular 14. so these are the features like so the first feature is Standalone component so in this video also I am used the our login feature is completely developed using this Standalone component here I have imported some forms and this material UI so most of the things we have covered and the second one is type the form so when I am explaining this reactive form we use this typed form concept so basically it will identify the issue in the developing time itself it will save the uh user type so other than that we have five more features these are not that much important so anyway just to keep in the node the streamlined page title accessibility extended developer Diagnostics that also I shown like so when you are typing mistakenly some what is called our syntax the system will check and it will show okay and the bind to protect component members optional injectors in the embedded views NC model on first these are the new feature in angular 14. okay we have covered these new features in angular 14 the so the final one is indirect questions and answers so before that I am going to share some topic links because we already crossed three hours so we cannot spend more time in the single video so let me show the URLs and also I will add in the description you can use these all the links the first one is for authentication this one is already we discussed and the second one is rxjs so basically this rxj system are reactive programs it's mainly supporting for the synchronous programming Concepts in our video also we have used this observable and subscription so in this rxgs playlist also having three videos the first video is explaining about the subscribable with deeply and the second one is a subject the final one it will explain the complete operators in our rxjs so in our application we have consumed on.net core services so the service is created with the framework of document core 3.1 so that also I have made a separate video so you can watch this video you will get more details and we're transferring data between the components so basically we can transfer the data between the components we can do in the three ways the first one is using input decorator so using the input we can transfer the data from our parent component to child component and for doing the vice versa operation cell the component to parent component we can use an at output degrader at the final loan is attribute data so using this view data we can do the data transfer simultaneously that actually I explained in this video you have to watch it okay and the next one is angular unit testing so the unit testing see in our angular application if you are creating any files using this angle CLA command it will generate One spec file also that file actually it's for the unit testing you have to refer this video you will get more details add this state management the State Management we can use local storage and efficient storage other than that ngrx cookie also we can use so I will share both the videos you can watch and you will get more details and in our video also already we use this local storage and the next one is angular complete tutorial playlist okay so this is actually one of the playlist so let me copy this one okay this playlist also very interesting one why because so in this video we covered all the topics but in this playlist I have created this separate video for each and every topics you have to refer this playlist and you can watch it okay see what are the topics are there that also I have listed out in this playlist so actually the final one is I am just providing us the information so I have created the video for dotnet core 6.0 this one also a playlist so basic installation to up to the deployment everything we have covered and for the development also I use the visual studio code instead of the visual studio this is also one of the interesting Series so you have to watch it okay now we are in the end of the video still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel and we covered most of the topics still in case if you are looking for any special topics in angular 14s or dot net core please mention in the comment box definitely I am going to create the video on that and also I request you to if possible try to join our membership thank you thanks for watching

Channel: Nihira Techiees

Views: 91,485

Keywords: Angular 14 full course, angular full tutorial, angular complete tutorial, angular 14 standalone components, angular 14 features, angular 14 end to end tutorial, angular 14 complete tutorial for begginers, angular 14 tutorial with real time examples, angular 14 interview questions and answers, authentication in angular 14, consume .NET Core service in angular 14, angular crud operations with reactive forms, Registration in angular 14, login using angular 14, angular 14 full 2022

Id: rZCQiMdQsxE

Length: 239min 28sec (14368 seconds)

Published: Tue Jul 26 2022