Angular Course 2021 - Building Real Project From Scratch

in this video you will dive in the basics of angular and this video is a part of the full course and glendon grx building real project from scratch where we start from the empty folder and finish with the fully functional application and you can find the link to the full course in the description box below but if you just want to start with the basics let's jump right into it [Music] welcome to my course england in geo rigs building real projects from scratch and in this course we will use these two technologies to create a real world project we will start with the empty folder and finish with fully functional application we will create most typical features of every project like for example authentication pagination fetching data from api liking or disliking articles working with articles working with forms with typescript and much much more we will use angular together with engineer rx which is the most popular solution to build a scalable application and manage state on the frontend of course all our code will be dry reusable and easy to understand and we will cover everything with typescript typings by the end of this course you will for sure be able to use angular and engineer rigs for your own projects of any complexity who am i my name is alexander kahrin and i am a web developer with more than 10 years of experience as well as a professional instructor with various courses regarding web technologies i did my best to put all my knowledge inside this course and i want to share it with you so welcome on board and let's get started [Music] in this video i want to talk about things that we need to install in order to start developing our project first thing that you need to install on your machine is node.js maybe you already have it and to check if you have it or not you can just write in the console node minus version and as you can see i have known version 12 and also we can check with npm i have npm version 6. it actually doesn't matter what node version do you have if it is for example greater than at least 10. so basically we need an old version where we can start running angular and angular cli and angular cli is a tool to start generating new project and to run some angular commands and basically here this is official website cli.angular.io and here i can click on github and if you will open this link this is the github link for angular cli and here in the description you can see we have an installation and here says that make sure that you have at least now 10 or later so basically you can just check this page and know what version do you need to run angular so if you don't have node.js on your machine just simply jump to nodejs.org and download version i prefer to use always ltc version which means long term support because it's more stable than current and it is still supported for example by angular and this is the only thing that we need for now so after your node is installed and you can see the version of the node in the console you need to install angular cli so basically here you can check how to install angular cli on your machine you can basically copy here npm install minus g which means global and if i will run this command it will install this package globally after this i can check if i have angular or not if i will just write ng and then minus minus version so basically as you can see i already have installed ng angel angular cli because here you can see the output after the command and g minus minus version so here it says that i have version and glacial i8 and they have now 12 and so on and they have some angular packages which are already installed which basically mean if you run this command and you get something like this after running in g minus minus version this means that you are on the safe side and you successfully installed angular cli now it is time to generate new project i will name my project medium clone because this is exactly what we are going to do this is the clone of the medium.com which will have like post pagination authentication likes dislikes following users comments and so on so basically here you can see the next command to generate new project is in geneview and the name so basically here i can simply copy paste engine u and then the name will be for example medium clone and then dash angular after running this command as you can see angular asks us several questions and the first question is do we need angular routing or not and of course we do because we want to create routes and to switch between pages so basically here we are answering yes and then which style sheet format do we want to use i prefer to use scss because basically we need at least nested rules sometimes and some things like variables from a css is also quite sufficient so i am using scss and now angular will install all packages and prepare the empty project after angular generated a project files we can just go to this directory medium clone angular and start the project and the command to start a web server for angular is ng-serve so basically here we just started the first run can take quite some time but now it's compiled successfully and as you can see we can open it on localhost 4200 so basically here it is localhost 4000 and as you can see this is the default page which was generated by angular so here is medium clone angular is running and here are some resources and next steps which means if you see this page everything was installed correctly and you are good to go so let's clean a little bit now the code so we don't have this generated stuff because we don't need it in any case so here is the project this is medium clone angular and this is everything what angular generated for us and basically we want to change everything in source folder and in the app so here you can see index.html this is not interested for us for now and in app folder we have app component html css spec and app component yes basically this is the first component which is rendered here and we want to empty it so basically if we open here html you can see that here there are some comments that this content is a placeholder and it can be replaced here you can see some inline css and after this at the end we have router outlet where our router is rendered basically let's just delete everything in this file and just open write something like allow angular because we don't need any other code and basically if we look in browser everything is is already removed and now we also want to remove this spec file because we won't write tests and also in app component scss this is already empty and now we need to clean appcomponent.ts it is actually really clean and the only thing that is here is title property which we don't need so basically we can remove it and now we have simply the empty component now our project is completely clean and we can start developing [Music] in this video i want to talk about tools that we will use with angular additionally and we have a lot of stuff in angular for us like components services dependency injections also routine and scoped styles and so on but basically what is not in angular is managing a state basically we need to store somehow the data in front end and structure them and use them in some way and angular does not have something like this basically the only thing that angular has is services and components and basically if we open just documentation with http and basically the most often we are working with http so we fetch some data from some api and we render them and as you can see here this is the basic example of working in angular so here we have some service like app config and config service and here is some config url and this is just api url where we fetch our data and we have some get config method where we have this http get and then the url so basically this is just get request for some data and the point is that we can only get the data through this service in our component so basically we have a component like app config config component and inside we have a method something like show config and basically here we just set some data inside our component through this this config service and subscribe which basically means the only thing how we can fetch data and save them are services and this is really low level where we just have services that we just throw some data in services or we just get the data through the services in components and this is of course not enough for us if we want to build big and scalable applications where all code is looking in the same way and is easily supported the most common solution to this problem is to use redux and baby you already know about redux if you worked for example with react because there is the most popular and basically redux it's just a predictable state container for all js applications basically it doesn't have anything to do with react or angular or some other framework this is just a way like a high level way to structure applications and to say how our data will change our state basically why do we need it we want our components to not know anything about like services or getting data and so on we want components to communicate with our state containers and then to subscribe to some changes in this state so redux is just a library and we won't use exactly it but an angular wrapper for this library and it is called ngrix so basically this is exactly the implementation of redux in angular which means we can just install it here there is an official website ngrix.io and here is an introduction which basically ensures is a framework actually it's just a library which wraps redux to make it work with angular and here we will use it for state management it is type save because it has typescript inside it is easily testable and here we will install it and use it so this is basically the only huge dependency which we will use except angular and with ngrix we will write like 90 of our code so basically of course we will use it like routine from angular and components but basically all business logic and all structure of our application will be with ngrix this is really the scalable and good solution which a lot of people are using in a huge application which means all people are writing code in the same in the same way and this code is easily maintainable and supportable but of course it's not a silver bullet and as you remember in angular you will write a lot of code just because it's angular so basically in comparison to for example react you need to write a lot more because you use typescript and you need to describe all typings then you need to describe your dependency injection between modules and within geo rigs you will write much more boilerplate which means you also need to describe everything with your business logic within share rigs and yes we will write a lot but this code will be easily maintainable and easily understandable so basically angular it's not about writing less code it's about writing understandable code and maybe sometimes quite a lot like more in java way [Music] in this video i want to roughly talk about our project structure maybe you already saw a lot of applications with angular in internet and basically all of them or most of them are written in a very simple way so basically a lot of applications are simple like to-do list or some small blog with several pages and so on and of course we don't want to build something like this i want to show you the structure that is scalable which means it won't work only with like five pages for example like authentication a single page then the list and so on but it will scale to work with the team so basically you can make with this structure small applications like maybe 10 or 15 modules and then scale it to 100 or even thousands modules and it will be easy because with our structure we will plan where we need to put what so basically angular as a framework doesn't give us any structure and they just say you can just structure your application whatever you want and the problem is of course that all people are structuring their applications differently which means you just come in a team and you get a new project and you can't say how the structure will look like at all because basically you can put modules and modules in modules or you can just group all components inside one module and so on and also you can share services or not share and we want to have a structure which will be easily maintainable and easily adjustable so let's check roughly what it will look like and why it is so so basically inside our angular app we are starting inside source and app folder and inside we have our app module and also near we have our app component which is our root component and inside this component we start to render all our other components with routing and so on i prefer to create a module for each page which means i just create a module for example for article page and i put it directly inside app i don't create some additional folder like pages or maybe folder modules because this will just give us additional step to go through the folder which we don't need so basically we have several pages like for example 10 of them and then this means that we just create 10 folders inside our app folder and we just simply name them as the page for example like article or authentication or global feed and so on now the question is what do we have inside single module let's talk for example about article module so basically we know okay article module means that we have article page which means a single article which we render there and of course every module is starting with article.module.ts and this is another important moment as you can see from the naming we have really strict naming and angular doesn't say anything about naming of all files and especially like entities for example which are not specified in angular and we want to name everything really strictly so we can know how we need to name things and how we need to create new things so basically if we have a module we just name it as a name of the folder for example article and then dot module dot tears then inside our article we have a components folder and basically there we will throw all components which we need to render on this page for example let's say we need to render an article which is obviously our root component for article page then we put new folder article inside our components and the naming of the files will be article.component.ts component scss for styling and of course html just this is important to understand that all naming with all entities is going in the name which means for example if we create service then it will be the name of the service then dot service dot yes and with such naming we can easily understand was what this file is doing at all so we created a bunch of components for example article and comments inside our article module then we want to fetch some data or do some business logic and for this we need services normally 99 of the code inside our services is just api calls which means we name our services normally starting with the name of the module which means in this case our name will be article.service.ts this doesn't of course mean that we need to always name things like this basically if our module is really big then of course we have like several big services with difficult logic inside but if our module is not big one service is enough for us and we just pack everything inside it and we name it with the name of the module after that we have a folder which is called store i won't go deep inside now because i want to talk more about ngrix later but basically all stuff which is related to managing state and ngrx things will go in this folder and they will belong exactly to this module the last thing that we have inside module is types inside types folder we store all interfaces or types which we are using only inside this module for example if we store article interface and we use it only inside this module it makes sense to store it inside this folder types basically all our modules for pages will look exactly like we discussed inside article now let's talk what we should do if we have some shareable stuff normally we have at least some components which are shareable for example some follow button which we can use in several pages is shareable so this means that we can't just put it inside one page because we need to split it between two pages for example article and global feed for this we create inside app folder special folder which is called shared and all shared stuff we will store there basically the main shared stuff are modules and as you know in angular you can't just store components without modules basically components are just part of the modules and you need to declare them somewhere which means either you create some magic shared module where you just throw inside everything that you have and this is really bad approach because then it's not really shareable but some huge code module where you have all components basically exactly for this we create inside shared modules our module for example let's say we have a module feed where we have the list of items which we are rendering like for example the articles that we created and this feed we want to share between different pages this is exactly the case inside shared modules we create new folder which is called feed and this is feed module which we want to share everywhere it can have different things inside for example the most basic thing is of course components and we make inside this module the same structure like for example inside pages basically we have also inside components services store types and of course the name of the module to register this module at the beginning we have for example for feed only component which means we just render some plain stuff and we reuse this component through the module everywhere but then of course later we can make this module smart and add services inside with logic within grix and some types if we need to the last thing what we want to share is services and types basically services should not be exactly injected in some shareable module we can just say okay we have shareable services for example we have some article service which we use between several modules for example article module need an article service and exactly the same methods we need in our global feed for this we can throw this service inside shared services and then we simply register two places like for example in article module and in global fit module this service so basically these services are just lying there but they are unregistered and of course at the end we have types which means if we have shareable types or interfaces between several modules we just throw them inside shared types this is my scalable version of file structure for angular applications it works really well with the small projects and i already checked it with the teams like 10 or 15 people where the structure shines also really well because you can scale it almost indefinitely [Music] in this video i want to talk about prettier and of course you can write javascript or typescript code or css for example without preteen but basically i can't imagine writing fast and efficient code without it at all and basically i am using it for everyday life almost every time so basically what is preteem it's optionated code formatter which means this tool just for much code nothing more why it is so popular and why do you need to use it basically before preteer for example people formatted code with linting tools like eslint for example but the problem was always that different people have different opinions and the point of pretty is that you almost can't configure it which means you can't say okay i want brackets to look like this and to be formatted in this way which means all code in all project is looking exactly the same which means for example you are working alone or in the team of 5 or 10 people and you don't need even to speak about code formatting you speak about code itself but not about indentation or some rules which just should work out of the box let's check how it is look like on the example so here i'm in our folder source app and here i'm for example in app component yes and here everything is formatted somehow and for example i'm just giving some incorrect indentation in my file and then i'm just saving it as you can see everything jumped exactly in the place where it should be so intendation inside our object is correct and let's say that for example here i put also not correct indentation some strange spaces or for example here inside brackets i just put some empty space and some indentation here so basically this side this file is looking completely broken then we just save and as you can see here it was fixed but here it is not because this is invalid code and basically invalid code pretty can't fix which means if the code is valid it will be intended and it's not working only here in typescript but basically in almost all popular web languages so here on the main website you can see that prettier works with a lot of different things for for us is important that we can work with typescript of course javascript css scss html angular markup and so on there are also other community plugins for example for php or elm or other languages like ruby basically you can use prettier from console but it doesn't make that much sense what we want to do is we want to implement pretty in editor so when we just save files they will be correctly formatted which means we don't need to think about indentation and everything will be working out of the box so here is usage and in this link you can check how you can install it in your editor so here you can read about it if you want and here is configuring pretty and editors the first thing is of course editor integration you can just click here and check your editor let's say you are using for example visual studio code which is really popular editor and here you can simply install extension pretervs code and you just search for it you install it and then it should work out of the box so basically here is repository for this package and here you can see some default formattings and some issues that you have and you can simply fix them by checking this wrapper the next thing when you successfully installed prettier to your editor is to write a config you basically almost can't configure printer but there are several several rules that you can configure and here you can see options inside configure printer and configuration file so basically here are options there are not that much of them like only four and here is configuration file so basically we want to create in our application in angular in root file dot pre-trc and then right there our configuration and here you can see basic configuration and let's just create inside our project new file and name it dot prettier rc and then open this file and i will just paste inside my configuration so basically it's really small so here i am saying okay i want indentation of two symbols and i like single quotes everywhere and not double quotes my maximum reads of lines should be 80 symbols then my code is really good intended and bracket spacing is false which means when you have something like import and you have some destructuring full you don't have here spaces for me this looks not really nice that's why i always set bracket space into false and semicolon false is really tricky option some people like it some people don't i really don't use semicolons in javascript and typescript at all in a lot of projects a lot of years and everything is working fine there are only three cases in javascript when your code won't compile sorry transpile when you are not using semicolons and basically in normal projects normal people never write these cases which means semicolons if you have them to false you have something like const foo equals two and this semicolon will be deleted by prettier on save which means i don't have in my k in my code semicolons at all basically let's save this configuration and restart an editor and check how it will look like so here we are in source app and let's open the same app component ts as previously but now our correct printer configuration configuration is loaded and let's just save the file so basically as you can see the only difference is that we have here indentation with spaces inside square brackets and we also have here double quotes and after save it's single quotes which means our configuration is working correctly and we don't have also any indentation so basically here if we try to create a variable foo and say 1 and then we put here semicolon and then we save it just goes away which means pretty is working correctly and we are good to go [Music] in this video i want to talk about language server protocol basically this is the tool that allow you to get such features like for example autocomplete auto imports and so on for different languages basically it's really difficult to implement such things like for example go to definition or documentation on horror and so on just directly in the editor this is why in microsoft they created language server protocol and basically the idea you can read on the official website like on microsoft github io language server protocol here it is written that the idea is that you have like a server which is completely agnostic to your editor which means this is just some protocol and between your server like for example typescript server and your editor there is a bindings so basically some events where you give some information to this language server and get some information back in this case you get such things like go to definition auto imports auto completes out of the box and i can imagine developing applications in javascript without language servers but not in typescript the point is that you always want to check what type you have what interface do you have what do you import and basically in angular with typescript we are writing quite a lot of code which means we want auto imports to resolve everything fast and to get auto imports faster than we will type by ourselves so let's check how it's look like when we're using it for example let's say that i am now in app component and i just deleted one symbol here and here i have ts server and basically this is exactly a language server which just runs near the ide and tells me what is wrong basically it tries to transpile code with typescript and the results of this transpiling i'm getting back in my editor in this case i'm getting like cannot find name a component because it's not written correctly and here we're importing component but here the name is not correct basically this is like errors from the compiler directly in your editor and it's not only this for example let's assume that we don't have import and we just wrote okay add component and basically typescript is same cannot find name component and now i can just click on the keybind and you can see that we get directly import on the top which basically means i save a lot of time because i don't need to check okay from where do i need to import a now component from angular or angular core or whatever i just click like import and then i get this import on the top of course it's not always 100 correct but it works really good in 90 and we want to save a lot of time to get this imports because when you have like in one file maybe 50 or 100 imports writing them and managing them by hand it's really time consuming and we want to avoid this for example i don't know what editor are you using now but i would say for example for the most popular editor this is visual studio code the support of the typescript with this language server is directly inside so you don't need to install anything you just write code and you have these things like autocompletes you see here the special window where when you import some methods or just with dot write them you see what parameters you need to throw inside and so on and so on basically almost for every popular editor you can find language servers and sometimes you need to configure something sometimes not but basically i would highly recommend you if you want to avoid like typing all code by yourself and to use this language servers to avoid errors and to get on the fly these messages and ability to import things [Music] in this video we will start with implementing register module basically here you can see that i opened a website called angular.realworld.ion and this is the example of application this is not the application that we will build from the code perspective but this is the angular application and basically you can click here like check pages what we want to implement and so on so basically here in this lesson for us is interesting the sign up page you can jump here on the top in top bar and now we are on register page and we will use the same fonts and css like this project is using so basically the idea of real world example is to implement the same application in different languages or in different frameworks so here we can open a network for example and check the requests that we are doing let's say here we want to know what requests are happening when we are registering so we're clicking on sign up and then here we something in all fields and now we click sign up and we know that this is the request for url conduit production ready ion and this is the public api that we will use so basically we won't create our own backend but we will use this public api and we know that we can register new users here when in slash api slash users are posting the data like this so basically it's a user object with email password and username and as a response we are getting some errors for example if the data are not correct for example in this case the password is too short that's why we can't register user so basically we won't write any css because we will reuse it because it's public and we won't write any fonts because they are also public and we will use this public api to make all requests so basically the whole focus on the course will be only on angular code on front and side now let's start coding so basically we know okay this is the sign up so this is the register page and this is the first page that we will implement so as we discussed in file structure let's check the code so basically we are in source app and here is our app module and app component and routing so here we will just create the pages just like folders and then we will also additionally add shade later if we have some shared stuff so let's start here i would prefer to group these two components so basically this is the component register and near you can see the component login so these two components are really similar they are about authentication so i prefer to create then one folder we can call it out and basically here we will put all our routes so pages about authentication in our case it will be register and login and we will start here with create a new file and we can name it als.module.ts so as i already said in file structure we always name our modules the same like a folder which means our folder is ours we are creating ours module and the name is with small letters of module ts and never the name will be different in this case we can really structure our application in the same way everywhere and people will know how we're writing the code now let's check that we want to create a module and in angular to create a module we just export class and the name will be ours module so basically the class names are with big letter and now we need to provide ng module here and as you can see i'm getting autocomplete while i'm typing and when i will hover on one of the elements i am getting this nice window where i see what i get so in this case i see okay this is ng-module this is angular module which is the decorator and i see from where i will import this module or function in this case when i click enter you can see that i get auto import ng module from angular core which is completely fine and this is exactly language server about it i was talking in previous video so basically here we have an ng module with empty object and we provide something inside by default we always provide only imports and here need to go common module this is standard module of angular and we always provide it for every module and as you can see also you could see here the jumping because here the indentation was not how pretty i wanted it and when i click save then everything is intended correctly i don't have spaces here and here the code looks much better so our house module is created this is like the super raw basic version of the module and we need to create new components inside this module so as we discussed previously we create our components inside ours in components folder and now inside these components we can pack as many components as we want but we always put them in additional folder which means here just in components we don't have files we have only folders and in our case the first page that we create will be register so we create here the folder register and now of course with the same name as we discussed we name it register.component.ts register.component.html and for css register dot component dot scss actually for this project we won't write any css because it is already prepared and we will just use it but i will always create these files in this way just for the sake of simplicity because at the moment when you need to add styles it's much easier to see the same structure everywhere and you just know okay my every component has styles and i can just roll them inside so everything is already prepared now let's create a basic component for register page basically this is our page register and we want to just create simple layout here and all components in angular we're registering with special component decorator so basically just to remind you modules will register with ng module decorator and components with component decorator so here we have also class register component and just to say once again our file name is register dot component and classes will always name camel case but we never say just class register because in this case it's not clear for us what entity it is if we're writing register component it's clear for everybody that this is component so it's just empty and we want here to import component decorator and as you can see i have auto import and here is the object and inside we want to give a selection and this will be the tag with which we will use this component and basically we also want to do this strictly and the guideline of angular says that in the application we need to prefix everything all tags in our application the same basically in our case we can practically see it with m c which means medium clone in this way we know this that these tags belong to this application why it is good just imagine we are in hatml and we have in katama something like mc top bar and we know that this tag comes from our application and we also installed like five different libraries with different components inside and then we import some library with name top bar and at least we can understand here that this tag comes from us and these tags come from somewhere else if we name our tags also top bar then we can't distinguish between libraries and our code that's why i always recommend to prefix all our selectors with some prefix of the project you can just check what prefix do you want i think mc is nice prefix and it's not a lot to write so in our case this is mc register because the name is register component also then we need to write here template url and this is the path for the template and also of course style urls and style urls is our css and it will be register component as css now our component is ready but when i hover you can see the message that component is not included in module and won't be available and this is of course true because we didn't inject this component inside our module so we need to jump back to our auth module and here we need to register it so basically how we register modules we just have a declarations property here and we throw all components inside in our case it will be register component and as you can see typescript and my angular language server already understands that we created a new component and we can just auto import it and i just click enter and you can see that the whole path is here basically this is one more thing about angular itself we just installed angular project and angular created a lot of files for us for example the config for typescript and in this config it is said that we can just write absolute path so of course path can't start with source and basically through the typescript config angular says okay we say with read source folder as our root folder which means we can import everything starting from source for example in our case it's source then add then auth then components register and this component so we're here in module this is our path of course we write it without dot ts in the end but we want to import everything when it is possible with absolute path and not related of course we could write here something like this so basically we just remove this part and we're saying okay this is relative path inside our component this will work but i highly recommend you not to do it because at some point you want to just copy this line and put it in another place and if you have relative path it won't work and you just need to adjust all places by yourself in every file and this is of course time consuming we don't want this the second point is at the moment when you just change the place of this file you can simply copy this file this absolute path you know that this absolute path is everywhere the same and then we just simply want to find this path and change it in all places at once if we have a relative path for this file then we can't do it because it's not everywhere the same so absolute path for the win here we declared our component for our module which means our component is ready and now let's write something in our register page for example register component now our html is ready our file with component is also ready and our module we also created now we need somehow to go here and jump to slash register to see our component and here of course is one more important thing to remember we of course could here go to source app and here we have a protein and basically here we write all routes for our application so you can see okay we have app routing and we are using this approaching inside appmodule so here we import a protein and then use it which means angular says okay just right here all your routes and everything will work but this approach is not good why it's not good because if we write here some routes let's say that we say here okay we have path register which is path that we want and then we want here component and here will be register component this is fine it will work we can even check that it is working actually not yet because we forget to inject our register module inside appmodule so basically everything is starting with appmodule here and a module doesn't know anything about our house module so we need to register this auth module and for this in imports we can simply say here our module and we just click and here is our import and this means we registered our module inside our app module so here there are no errors inside our web server and when we reload the page everything seems to work then we try to jump to register and you can see here nothing and this is the error here because we didn't put route tag inside basically here you can see in app component html we have here hello angular so basically we have not a single word about routing here we need to add special code which will trigger routine which means there is a tag from router inside this tag router will work so all information will be rendered inside this tag and this tag is called router outlet so basically here is our router outlet and we close router outlet and now we reload the page and as you can see here here is hello angular and here we can see a register component so everything is working let's just wrap this code in some h1 so here is hello angular and then our register component our module works but there is a problem here inside a protein we says that we have a route register component now just imagine that we develop develop application and then at some point our product owner is saying to us we don't need this module anymore and we need to remove auth module completely and we just remove this folder and it's not there anymore but we never updated this file which means we just get some errors about that component is not there because this path obviously doesn't exist anymore and this code won't work basically the idea of modules is to scope things inside this module this means that we want to put everything regarding house module inside our module which means this is not right we register routes outside of the module basically we need to remove it from here and we need to remove this import because we don't need it here so here we don't have any routes then we need to go in our app house module and register routes so basically we can do this here just create routes for this particular module and we write the same code here this is just an array with object and here the path is register and component is our register component and even we have already this component inside this file so we even don't need to invert it now we just need to use these routes that we created inside our ng module so here to do this we have in imports special thing from route module so we can say router module and as you can see auto import already imported it we can save for child and this is exactly the theme as you can see in the description it creates a module with all the router directives and providers registering routes which means when you want to register some routes for the module you are using router module dot for child and inside it you simply need to throw routes in our case we have routes we just save it and basically this code says okay please register this route for this module which means only when we import these modules this module is imported in app module then this routes will be applied and before we won't have any routes about register now let's check if it's working no errors in the console we just reload the page and here we're on home page we just jump to register and our code work exactly the same but now the main difference we just need to remove this auth folder and everything is not there and routes are also of course obviously unregistered because we just removed this folder with this module so everything is coped and we are good to go [Music] in previous video we created our basic auth module and register component now it's time to add markup to our register component so here let's jump in register basically i will just write the same markup as we have here inside this angular dot real world dot io so basically we start from the house page and we throw everything inside so let's go to our html and here we will have div with class auth page with the dash and then we close this div and as you can see on save prettier also covers html files so basically we don't need to intend it correctly and inside out page we will have container and class page and inside container page we will have div with class row and inside this row it will be column basically as you can see this is all classes from bootstrap so it's nothing new it's just plain bootstrap so here we have call md6 with offset md3 and call xs 12. basically this means that when we have a small device for example a mobile then we will have our column a full width which means basically here we have this sign up form and this is our column and on small devices it will take full bits and on medium devices like for example desktop or tablet it will have only six columns from 12 which means half of this screen and we have here offset to put it on the center so here we close our column and inside column we have h1 and inside this h1 we will have text so here we will have class text access center and inside h1 it will be sign up and we can simply save it now and check how it looks like and as you can see it does not look styled at all but we will fix it after whole markup so here is h1 tag and then we have p with class and here we'll go text excess center and inside this p tag we want to have a link basically as you can see here in an example after this h1 we have a link and this link goes to login page basically it is asking do you have an account and if yes then we simply need to show the link for the login page so basically links in angular we're doing with a graph as always but instead of graph we have a special attribute which is called router link and here we can simply use it and we can write our routes in two ways like normal for example slash login and like array i prefer always to write them like array just because at the moment when you need to change it it's easier to convert because in the array you just simply need to throw new argument inside and when it is simple string then you need to do more in this case i am writing here this string as array so basically here we close a tag and inside a we have text have an account and question mark so as you can see we have ahref and graph is router link basically this is the directive of angular and here we have an array not a string but array and inside just a string slash login after this we will have our backend error messages what is this here as you can see we just throw something inside which is not valid and we just click sign up and you can see that here we get some backend errors and we also want to implement something like this so basically in this place here we want to render backend errors are here so for for now we don't have this component we will implement this component later but to not forget we just write here that backend errors we will render at this place after this we start our form and here is form and inside our form we have our elements so basically each element will grab in field set field set and we close field set and inside first fill set we will have the second and the second field set will have class form group and this is the class for single input in our case and we close here fill set and write inside an input so this is input with type text and then class form control and form control lg to make it big and then of course placeholder and placeholder for the first field will be username now we close it and save oops and save pretty prettified it and after first fill set we can just copy paste this filled set because we will have a lot of them so we have a second field and this is also text the same classes but in this case it will be email and we can copy this fill set once again and paste it underneath and it will be password so here type will be not text but password and in placeholder we will have password so basically our form is almost ready after the last field set we need a button to submit this form so basically here we open close button and in here we will have class and class will be button button lg button primary and pull xs right and inside and also we will have type submit of course because this is a form and inside button we want to have sign up text now let's save it as you can see unexpected close tag is happening here which means we forget to do something and here as you can see i forget to put slash in the button this is why markup is broken and basically this is the example when a typescript language server works really well because like we see just in line some error and we don't need to transpile it to check what is here in the server do we have problem or not we just see it and we directly can fix it so our form is ready we can reload the page and it looks of course really ugly because we don't have any css so now we want to put inside our project some css and also fonts and icons and for this we need to go back in our source so here i am in source folder and here you can see index.html and this is index.html which is created by angular and all angular app is going here inside approach so basically here in head we can throw something inside and here is what i will show so first of all it's a link for css and here this graph is this public css what i already mentioned so here is demo production ready io main css basically you can simply use this css to build the project with which will look exactly like this now the second is icons from ionic framework and the third is font for logo basically we need just these three things and then everything should work so we just throw them in head and reload our page and as you can see already everything is looking much much better and basically my page is really zoomed a lot and now i have zoom 100 and this is looking exactly like in this example so if i here make also 100 zoom then it is exactly the same form with the same styles now we want to bind all these inputs to our form and we have really nice tool in angular which is called reactive forms if you know about it this is really good for you if not i will talk about it in a second basically we can use from angular such thing as form groups to write our forms basically we can say okay this is my input and i can bind this input to my form group and then this input and this input and then i am saying that these three fields these three inputs is my form which means my this dot form knows if this form is valid for example and if i change some values they are directly changed in this form which means i can read them at any point and i can write validators there or i can for example know if my form was changed or not so basically we need here for this to say okay we have new property form in our component and this is form group and here i don't get autocomplete for some reason and we need to write it by hands so here we import form group from angular forms and basically angular forms is already installed we can check it basically if we open package.json which is in root of our folder here you can see independencies we have angular common and for us now is interesting angular forms basically we create this form and now we need to add reactive forms in our auth module so basically here in imports we have different stuff and now we need to import one more additional module and this is reactive forms module so it comes from angular forms and now we are saying okay our auth module needs to have access to reactive forms module from angular so now we have this form group and we need to create the form so basically here first we need to create form builder and basically what is form builder it is the thing which help us to create form groups and you will see it in a second to inject something inside our component we normally write in constructor everything like arguments with word private and we're saying here that we have new property in this which is named fb and this is form builder and now i have autocomplete i think because i injected reactive forms in the module so now i just click here and i have form builder and now we need ng on init just to remind you only need happens when we initialize our component so here we're saying implements on init which means that our component needs to create function and g on init and here exactly this error we don't have ng on innate function inside our component so here after constructor i create ng on init function and as you can see here we can simply write it like this ngon in it but i prefer for all functions always write return value even it is if it's not needed because then it's clear for all people what is it about and you never make a mistake when you return some value now the next point we can of course simply write some code here like this foo equals one and then we write more more and more and we have in ngon you need a lot of code which is normally really different that's why i prefer to make ngo in it clean and group things together for example here we want to create form if i'm creating forms i always name my function initialize form and just like that so basically in the whole project or in every project that i'm making i'm naming it like this then i know that is it is named like this it's no it's not this generate form or something like that this is some stable names there are like several of them and i just used them everywhere to make things consistent so here we have initialize form method and we're calling this method on ng unit so basically here we can just write console.log to check if it's working initialize form we just reload the page and open the console and here on reload so we need to jump to register page you can see we get an error control container not found and this is happening because we created this form group but we didn't register it in html so to fix this we need in our html to add this form that we created to our markup so basically we have here on the top form this is form and basically here you can see already the error of the typescript no provider for control container so here we're saying that we need form group and this is exactly what we created inside our typescript file and here we are throwing form inside so now once again this form this form group element is binded directly to this form in our template now we jump back and if we load the page we don't have an error hopefully now we have this a form group expects a form group instance and we need to edit and basically here is an example so we have some forum group element and we did it but we never wrote this form control name for every input and basically we need now to add for every input this property then angular will know that we want to bind these inputs to this form so basically in this case in input we simply need to write form control name and inside we're saying okay this is username property and we can copy this line and then inside next input it will be form control name email and in the third input it will be form control name password now the only problem is that we created this form but we never initialized this form so basically here you can see actually that our initialize form is there because this method is called and now we need to fill this form property and to do this we simply assign this fb dot group and this fb comes from this import so fb is form builder and we use from builder here to build a group and inside we need to pass an object and basically this object is fields that we need in our case username we can simply pass empty string email also empty string and password empty string basically here we are setting initial values of our form now as you can see we can reload the page everything is working and we don't have any errors but we can make better basically this is just reactive forms and here we can write instead of just string an array and the first element of this array will be initial value empty string and then the second can be validator and we can say here okay we need a validator from validators and this validator is required and basically we don't need to pass control so it looks like this so here we are saying okay we have username property inside our form and the initial value is empty string and inside we say that this for this field is required and we can do the same for other two and they think it makes sense so here is email and the last one is password and all three are empty by default and we have these three validators as you can see in browser our form is working we don't have any errors but it would be really nice to have some submit method where we can get values of our form so basically it's really easy to add we have here form with form group and we need here to add an event and every form in angular has an event in g submit and here for example we can name it onsubmit and basically this is our event we need to create in in typescript file here on the end for example and on submit it's just void and we're saying here console log submit and here we want this form and actually to get value in this form as you can see we have hundreds of properties and for us is interesting is value so basically value will give us the value of the form back so we just reload the page no errors and now let's just write something inside and we click sign up and as you can see in console we have here submit and inside we get an object which basically means we don't need to do anything by hand like reading the value from input or having some unchanged event in input and so on we simply need to write here in html this form group then here this form control name and then we magically get in this form everything that we need in our case we just need these properties and we also know if our form is valid or not let's say for example we want here to know if the form is valid so it will be this form is no it's just valid and we just reload the page here and we click sign up and as you can see three properties are empty and then form is not valid this is really nice approach to work with forms it's really flexible and angular gives a lot of possibilities to work with forms and configure everything that we need just out of the box as you can see we prepared our layout for register page [Music] in previous video we already created our sign up form and on sign up we get information from our inputs so basically our form is ready and we already created a layout now it's time to install ngrix to start working with state and data so just to remind you here is interrex io this is official website and basically this is a wrapper around redux for angular to manage state and simplify working with components and services so basically let's say we have a register component and we need to make some http request on submit to just store user in our database and speak with api so we could for example inject here http something like this http client and then client and then we just say post and here is some url foo and we just put here this form value and this is of course a subscription and we just have subscribe and then here we get some result and we do something with results like for example console log or showing the errors and so on this is like the super basic approach and of course it's not recommended even in angular the idea is that our components then it knows too much about logic so they know something about state they know how to speak to api and basically this code is not reusable at all because it is coupled with our register component and if we need to call this method in other place we just can't because it's now sticked here second approach of course which is allowed by angular is to use services so basically instead of this http and post we are writing here something like this and then some service that we created for example register service and this is the service that helps us to work with register or for example we can name it authentication service so this is all service and inside is method register where we throw inside this form value it's actually not bad approach but in this case this is a little bit low level because people can write services in different ways and there is no such thing like a strict guideline in angular about how to do things and obviously we want to write things really strictly so that all people must write things in the same way then we can easily support the code so basically here we don't know at all what is inside register what our service is doing and how some person implemented this service also yes we can share the method from here but basically it's not that flexible that's why we need ng rigs and in this video we will install it so basically let's look on the examples here there are different parts of ngrix and we will start with ingerix store and this is basically get started here you can check the concepts and basically we can look on this diagram and at the beginning it can be a little bit complicated but we will go through it step by step and later you will understand it so basically let's check roughly how it is working so here on the left you can see our component for example in our case this is register component and basically this component can trigger some actions basically the action can be for example register so components say please make register in this case component does not know anything and register is just some function from some place so component triggered action and then this action goes in our reducer and basically we have such thing as store and this is the whole state of our application like the huge object where we store all properties that we need for our application for example there is a property articles where we store all articles and property is submitting or is loading and we can use all properties through the whole application and exactly to get some parts of this store like for example one property for example articles we are writing selectors so basically we need selectors to select a part of the straw this is like the first part and basically we can live with this part like the left part of this diagram and then we have the right part and basically at the left part we can use just to make synchronous actions this means for example our component can say okay we want to open some bar or we want to show this div we want to do something in front end basically this part is working only on client side but at some point of course very quickly we want to talk to api and to dock the api in ngrix you have such thing as effects basically the idea is that effects are a bunch of actions that we can run asynchronously and we will check it later much more deeply and the idea is that effect can say for example we want to fetch an article then inside effect we can write several actions for example article fetch start and article fetch success when it successfully happened and a failure if it's happened with error and additionally of course we have a service and all our services will be like super dumb we'll write zero logic in our services and there will be only uh methods for talking with api basically each method will be just http get opposed with some data that we need that's it if you don't understand this diagram now it's not a problem because we will go through all steps really deeply so let's check the installation so let's jump here in installation and as i prefer to use yarn we can install it with yarn basically it doesn't matter if you will install it with npm or yarn and basically the difference you can check on yarn website so yarn is just a package manager which also use npm registry but it is much more stable and a little bit faster that's why i prefer it if you don't have it you can just simply install it with for example package manager or just directly from the website here you can just click getting started and installation and here how you can install it on your machine it's just plain package and you need to check in cli if you have a yarn installed so on my machine i have yarn already installed that's why i get a version and basically if you don't have yarn you can simply use npm because it will just install the package in the same way i will install it with yarn here in the our application and we just wait for installation and we can check here the architecture and basically architecture is starting with actions so basically if you remember diagram we dispatched actions from our component so basically here is how action is looking like so here is action is like nothing but just the object with the type string so basically it can look like this so it's an object with type and this is what we are doing so basically action means that we are doing something for example we are having here login success so we dispatch the action login success and this means for our application that we log it in the user successfully and you can see here brackets basically we use this notation this is just a string so this is nothing more but this notation is shown to understand of which module this action belongs in this case we are saying okay we dispatch this action and this section is described inside authentication module in this case we can easily understand which actions goes where and find from where they were called so here as you can see we can also give inside action some params for example like username or password and here is the action with login so let's now get to the code and you will see how it looks like so here is the basic example how to write an action basically an action is just a function and we are calling special helper create action to create it and we pass here the type this is exactly what you saw on the top and then props for example username and password so basically props is additional data so let's see here i already installed this package in george store so we can use it and to start using it let's create several files so i'm here now in app auth so ours module and as we said everything about nga rigs will go to the new folder which is called store basically it will be like this in every module and the first thing that i want to install is to create these types basically as you can see here in documentation they just throw strings inside action but i find that it's not that comfortable because for me it's easier when these action types these strings are unique and they see all action types that i have for my module that's why in our store i want to create new file and call it action types dot yes and this type will be just an enum so i will export it so this is expert enum and it is called action types and inside it we can write several enums for example we can say that we have action login but in our case we are on register page so we need for sure an action register and as you remember in enums we can just write like this so register and here will be our string and as we said we want in square brackets to write the name of the module so it will be ours and here will be text register so basically this is an enum and i know that some people prefer to just create action types like const so here expert const action types and then this is just the object and it looks like this what's the difference and why in them is better so when you create a lot of action types you basically normally copy paste them and then you just rename some parts of it like for example this is register success and this is register failure but at some point you just forget to rename it and then you can't have the same name and enum says for us that all properties need to be unique so in this case if we will rename this to enum like this and just remove commas here and save and i don't need here equal sign duplicate identifier register as you can see i directly have an error that duplicate identify is not possible that's why enum is better because enum says that all properties of enum should be unique in this case we directly see okay we have one problem and we have a duplicate and then we will rename it to register failure for example and then save and it should work and it's not working i think because we need commas in enum yes now i save it and as you can see you can always understand if your code working or not because if it is correct code prettier will format it so basically if i save and pretty fixes my code and indentation this means this code is correct so basically we will later need another action types so let's just leave here these three action types and just say this is register success and this is will be action types when we will successfully register a user and we have failure when we can't successfully register user and we have some failures so basically this code doesn't have anything to do with ngrx this is just a plain enum from typescript the next point is to create an action so basically here we can create a new file and we can call it actionsts and then we will create something like this so basically we need to create new function and this will be register because we want to register user this is our action and here we're saying create action and basically i don't have auto complete for some reason so we can just copy paste this code from the example and just save it so create action from engineering store and we also have props but basically yes we need a props because we need to give inside some information and as you remember here in component we can see that we are given username email and password and just for now let's create it like three plain variables so username password and it will be email and email should also be string so basically this is specification of properties that we need to give inside login now the question is how we can dispatch this action in our component and of course there is also an example in documentation for example we are in login page component and this is on submit and we can write store dispatch and dispatches the method to dispatch actions and then login is the action that we created here and we give an object inside so basically props is always an object and in this case with user name and password so let's do something like this we jump to our component and here we need star so basically to have store we will write here private store and this comes from store so here as you can see i imported from nga rig store so we have access to a store here and now after console log we can write this store and here will be this page and here i need to give an action and our action will be register and inside register we need to give an object and this object actually will be this form value as you can see we have an error that register is not found so let's check we have an action login and it's not correct and we wrote here incorrect string because we could be pasted it from document basically we want here to have our action types so basically here i will write action types and they have auto import and dot register this is what we want to call and our action will be called register as you can see they also name things in documentation just like this so login or for example register i prefer to always name things strictly and in this case we know that this is action that's why we name it not register but register action i recommend this approach to understand what types of data we have for example then we can understand okay this is interface this is action and this is component so this is now clear we have register action and let's jump back in the component and here we have register action and as you can see i even see in typescript what is it about so basically we have inside props with username password and string and email string and when we just hit enter here we have a register action and on the top it was auto imported from store actions and this is exactly correct and one more small thing i always try to separate imports which are coming from libraries for example ngrix or angular from my own imports in this case it's easier to check and see what we imported where so what once again here this store dispatch we're dispatching something and for this we're using store from ngrx and we are saying that we are dispatching action register action and we are given inside this value let's try to give here some bad value for example just a string and we directly have an error that strain is not assignable to a parameter of object username password and email we already wrote almost all code that we need from interior rigs like a basic example but we didn't import the module from ngrx itself and here in doco you can see that inside our app module we need a store module so this line here this is store module this is a module from ng rigs here is storm module from ingerix store and here we just need to write for root and register it basically we can just copy this line or write it here ourselves so we jump to app module ts and here at the end of our inverse we can write store module and we need to write for root and inside we just we can just write it with empty array for now we won't pass anything inside so as you can see imports to module and as i already mentioned i want to always write my library imports on the top and my own of the bottom so basically here at the end in the imports we have store module for root and this is to register in george store in our app module now let's jump in our application and as you can see we don't have any errors at all and now let's jump back to our component and we already have here this store dispatch so when we go here to register it should work without any errors so let's write here something and just click sign up and as you can see we don't have any errors but we don't see anything happening that's why we need to install some tool which will show us what actions are triggered and help us to debug this code really efficient [Music] previous video we already created an action and dispatched it in our component but we can't see the results of our work and it's of course frustrating so that's why in this video we will install such thing as stored if tools to see all our actions and our state and to work with it so basically start-up tools is a special module which we can install and additionally we need to install for example in google chrome extension to see in this extension everything regarding our reducer store and actions so basically here as you can see in installation there is in geo rig stored if tools you can just copy it and install in the console so yarn add ngrixtor devtools or you can use npm also basically it is installed and there are some steps to configure it so basically here we can jump in overview and there is a setup so first of all you need to download redux chrome extension you can jump here and then it will be opened in github and there is a link for chrome firefox and for electron basically i am using chrome and you can simply install it from chrome web store i already installed it extension so i don't need to do this step and the second step is to add store dev tools module dot instrument and as you can see here in the example in where in app module and we already did this first line with store module for root and the next line will be stored f tools instrument this is to register dev tools and inside we are given two properties max age 25 which means that we see only 25 last states we're using this option to make devtools more performant because normally we don't need to store a lot of old states inside and log only environment production this means that it will work in log only mode in production which is fine and we can simply do the same in our app module so let's jump to add module here we have store module for root and the next thing will be store dev tools and my autocomplete don't get it so i will just copy it here so this is oops it should be like this so here is store devtools and i just copy the import from the top so it is import store the tools module from store devtools and here just on your line we import it and here we have stored a tools module and here is instrument and max age we just remove comments because we don't need them and here we remove comment also as you can see here in example they used environment production and we have this variable already here you can see if we jump in root inside source we have a folder which is called environments and inside environments we have environment for dev this is environment ts and environment for production environment protease basically if we will open this file we see a lot of comments but here there is a property production false and exactly this property is used here so basically all what we need is just do auto import for example or write it by hand here i have import environment from source environments environment and basically environment this is as you can see an object and there is a property production which says if we are in production mode or not so basically these three lines are everything that you need to do regarding installing of dev tools and of course don't forget you need to install an extension now let's check as you can see i don't have any errors here in my web server so let's jump in our project and reload the page now errors in the console and here there is a redux tab this redux tab is here from this redux to lift extension if for example you installed extension by but here instead of this thing that you see now here you see some a label like uh cannot find a state this means that you did something wrong in these lines so basically if i will just remove this code and reload the page then you see no store found and make sure to follow instructions which means basically the one thing is to install extension and the second thing is to configure store dev tools module so now we successfully installed ngo rig store devtools which means we can see our state actions and so on basically let's talk a little bit about these devtools what is this and how we can use it so the main point is here on the left and this is our actions so here we have one action and george store in it the section is filed automatically when we start an application and we have ngrix store basically here on the right there are three tabs action state and div basically when we click action we see information regarding the action which is active on the left so in this case this action is active and as you remember we have inside action for sure type in this case we don't have additional data but just type where we have a string a store and geo rigs in need we also have here a state and this part is saying regarding what state do we have as you can you can see it's completely empty because we didn't create any state yet we will create it later for now this is empty and div is the difference between the state and the state after changes with the action basically this means that we have a state like some big object with some properties and then some action is filed and we change our state to show the changes for user and indeed we can see the difference between the all state and the new state now let's check what we did with our action so basically here is our sign up and here we can write something in all fields and click sign up and bam as you can see on the left we have new action without register and this is exactly the action that we created by ourselves in previous lesson and when we click on action we see a lot of information so let's make it bigger it doesn't work so basically as you can see here in the tree there are all properties which we have in this action of course there is a property type without this property action cannot exist so type is always there this is the name of our action and this is actually from enum and then we have three additional properties password in email email and username and this all are fields from our form and this is exactly here when we in register pass this information from this from form value inside our action and now we can jump to action this is action type register is the name and here are props that we throw inside our action basically as you can see now our component doesn't know anything about registration or state or whatever it can just dispatch action nothing more so basically we don't have in our component services or some subscriptions or some fetch logic we just dispatch actions to communicate with our state basically in this case our components are completely pure and they just communicate with state with this this store dispatch so as you can see we successfully started to using grx we created our own action we dispatched the section and we installed redux devtools to see information about our action and our state and in the next lesson we will start with creating our state [Music] in this video i wanted to start with creating state but we are missing quite a lot of interfaces for our authentication to make things more understandable basically we are using typescript with angular and of course we want to type everything and never use any and they saw a lot of projects where people were not aware that we they need to invest a lot of time and effort in writing types and interfaces to structure their application and this is even more important than to write code because if you write some constants or things or properties in this and you just say that this is any type then nobody after and you can't first of all use the power of typescript to see compiling errors and secondly it's really not understandable what it is about basically here you can for example see we have construals and we are in ours module i can just click here to see the hover effect here is the example about what is routes so we understand okay there is a path stream and the component which is type of register component which means we for sure know what routes is we could also type it strictly here and write some interface like full interface if we need and i prefer to always write interface because it brings clarification for people who are seeing this code and they don't need to hover and check what is it inside that's why let's create several interfaces for our current user and our register interfaces because we need to use them later and it will bring us more clarification so let's check this example angular real world ion we're on register page and first thing which is interesting for us what happened when we are registering so here we just register user we click sign up and here as you can see in console there is a request in api users post request and then we get in preview our user basically this is the information of current user now as you can see i'm logged in and now let's reload the page and as you can see on reload there was a request in this case it was get request because obviously we are registered and we're logged in so basically on every reload we are making an api call for getting our current user to know if we are correctly logged in and if we have power to do something in this system and basically as you can see the response in is exactly the same like it was on register which means this is the information of current user and basically here we can see it only in the network so basically when person opens our application he doesn't know how current user is looking like that's why we want to create an interface for current user at the beginning of course we need it only inside auth component but basically you can imagine that almost every module will need current user let's say here on the top there is a top bar module here we will implement it later and here you can see information about current user at least username which means this with this component but will also use information about current user which means actually we can create this type for current user not inside auth module but in shared folder we will create it in a second because we will use this interface in a lot of places so basically here what we need to do in our app inside we just create a folder which is called shared and as we already talked in file structure here we can just create new folder which is called types and here we will create all our types in our case we want to create current user dot interface dot ts and just to remind you this is an entity interface that's why we're writing the name of the entity in the file so now let's write export interface and this is current user interface and once again a lot of people are writing interfaces just like this so just current user and then in code it's not that clear when you can see user current user interface because in this case you know for sure okay this is interface inside this interface we want to just write all properties that we see inside api response so basically we can just go here check the network and copy all properties from here in our interface and then every person who will come in our application will know how current user should look like so basically here we have id and this is a number and then we have email this is stream and we have created add when user was created and updated ad it is actually doesn't matter if we use this properties unfronted or not we just specify how current user is looking like and basically it should look for sure the same like an api then we have much less collisions and problems while speaking with api so here we also have username and username is also string and we have biography and biography can be there but it's not mandatory that's why we're writing string or now and this is one more important point to know of course we could write like this this is a string and we say that this string is not mandatory and we are saying okay biography can be undefined but as you know in javascript it's not only new it's undefined and now which are two different things and i prefer to stick to the one of them and i prefer to use null everywhere that's why i almost never are writing this optional types i'm writing like this it is biography with string or now basically you can do another approach but at least i know that in all my applications i don't have undefined but they have only nulls or some type so basically biography can be string or now and we also have image it can also be string now and then we have token and this token is string and let's check we have all fields here and i just created a current user interface now every person just come in our project open this interface and know what is it about the other interface that i want to create you can see here in our auth store actions that we just in probes wrote this object and this is all good but this object we can't reuse at all and basically when person look at this props he doesn't understand what is it about basically when you need to write more than two props it makes sense to create an interface but of course it should be a logical interface and not just some random so this interface is of course about registering and actually this is a request so basically this is the data that we are giving in api to register user basically when we give some information we are saying that this is the request and when we get some information we get a response that's why we name these things the same and as you can understand this register action belongs to authentication module and maybe later we will use it in other places but for now it's only here that's why we will create here a folder types and we will put here new type and name it register request interface ts and now let's write interface fade and basically now every person which will see this interface will understand what information we need to give an api to make it working basically here we can check once again so i'm in this example project and if we click in settings we can log out here on the bottom so i'm now logged out now i click on sign up i just fill everything and email should be valid now i click sign up and here we have some error email is already taken once again so we register the user and here you can see the request the request is a user object with fields inside email password and username that's where we just write user and here email stream and then password also stream and here user name stream now our interface is ready and we can use it inside our action so basically here instead of all this stuff we can just use our interface and we can say that this is the request so let's delete everything here and write request and this is our register request interface and we just imported here and now it's much more clear what is it about so basically here action type register and here props request and we see register request interface actually interface should be with big e and we need to change it here and inside the file so basically here should be big e and then it is working correctly so here we have interface we already created several of them for our authentication and we will create even more and you need to understand that it's really important not only in angular world but when you use typescript to sync in interfaces and to build architecture from interfaces [Music] in this video we will continue to work with ingear rigs and we will talk about reducers so basically what do we need reducers for and what is the state so here inside redux devtools you can see that we have a state now it is empty and of course we want to store something in our state so let's basically talk about register page we can say that our application consists from different pages and we want for some pages to store some information in our state then we can reduce this information from any place we can see it in our dev tools and it is quite convenient and straightforward to work with it so let's start with sample simple we already dispatched our action register and we can see it in our redux tab here so here is our action register and now we want to create a reducer and reducer is a part of our state basically we can register reducer inside module for example in our case we have module house we want to register here in your reducer and then we will have access to the part of the state you will see how it works in a second basically for sure in this page we will submit in something like our form and when we are submitting it we want at least to disable this button so basically we can store in reducer a property like is submitting which will be true when we are submitting something or false when we are not and then we can use this property to react in this component so first of all of course we start with interface basically we want to create an interface for the state of our authentication component so basically here in our house types we can create new file and call it auth state interface so basically here is also naming convention normally we have a pro module one interface for state of course we can have more if the comp the module is too big but almost always it will be one interface with one reducer so in our case it's our state so we name everything with word state and here we export our interface and this is our state interface now the question is what do we have inside as we discussed for now we have only one property so it will be is submitting and it can be true or false so it's boolean now our state is finished of course later we will create here additional properties but at least we can use this interface and create now reducer so we are creating everything related to ngrix inside store so here we are we have here actions action types and now we create new file which is called reducers.ts so first thing for our reducer is to create initial state which means the state that our application will have at the beginning of the initializing of our application so basically here is just an object initial state and here exactly in this place we want to use our state interface so this is our state interface and this is an object and as you can see here we already get a message that we need here property is submitting which is really nice because we can directly see if all properties are implemented so here we are saying that is submitting by default is false and now interface is now correct as you can see also i have imports in my editor directly with a relative path i am trying to avoid relative path always and use absolute path because it just helps for understanding application and copy pasting links easier so we have here a source then app where in house and here are types so this path is correct and now we created initial state and now it's time to create our reducer basically here everything what i am discussing now is in documentation so here in engineering store there is an architecture and here is the point reducer and here you can copy paste some code about how to create reducers so basically here it's time to create our reducer function and reduce a function is the function which will change our state somehow and to create a reducer there is a special helper from ngrix which is called create reducer and inside we need first to give initial state and then we are giving a argument with on helper where we throw our action and how this action will change the state let's see it in action so initial state is clear this is our initial state for this reducer now we say here on and on is a special thing from ngrx storm and as you can see here there are two parameters the first one is creator basically creator means the action so on what action do we want to react and we have now only one action register so here we can say on and here is register action and as you can see my action is auto imported now we have a reducer and here we get as an argument you can see here a highlight in my editor this is a special function on reducer and we get here as a first argument state in our case it's our state interface and then an action and you can see that inside an action here there is a request basically this request register request interface we specified in previous lecture that's why here we can simply say that we know that this is state this is what we want to modify and this function should give us back also our state interface now we can do something inside this function so here we want this state that you can see here this state is our old state so basically this is state that we have here at the beginning so here we can write then state so we're spreading the whole state and spreading means that we just take all properties from the all state and we are merging it with is submitting true let's save this so here is an error i put here round bracket we don't need it here and as you can see now we don't have any errors let's make it a little bit more clear and pretty so here is initial state and then here will be on and let's save this and actually one more bracket is expected this is from on and then this is from create reducer so i save this now pre-tier can prettify it so basically once again this is create reducer to create a reducer at the as the first argument we have initial state as a second argument there is a on function and this function comes from ngstore and we say on which means basically when this action happens when this register action happens and we import it from the actions then we do this function this reliance and in this function we get as a first parameter the state that we created so basically current state of our reducer and now here we're saying okay this is state this is our state interface and of course we want to get the same state back and we modify it somehow and you can ask me why i'm writing here this interface what i return back basically we could of course just remove it and then it will be looking better but the problem is when i write here 4 equals 1 i don't get any mistakes because here basically we don't say what uh state what interface do we want to get back and basically if i will try with such approach writing like foo equals one and then save it as you can see we have an error because here we say that we want back our state interface but we gave a full one which does not exist now we already created our thread user and we even used our actions i also want to fix my path to absolute path so it will be like this here will be source auth and then store and actions and i also want to move it on the first line so we separate our third-party inputs and our imports and now we need to import correctly this auth reducer basically the problem is that we can't just write here export const and then reduce it because it will work in just in time compilation which means in dev process but it won't work in our tab build so basically when we're building angular this is ahead of time compilation and it is quite tricky and we need to prepare sometimes our code to be working in production so basically in this case for ahead of time compilation we need to export here not with const but export function and we name it for example reducers and here we know that we get state and this is our all state interface and we get an action and basically action is an action from ngrx so i am importing it here from ngrx and inside we want to return our alpha reducer that we created and given site state and action basically this code is almost always like this so we create function reducers here we return our user with state and action and state is our state of reducer and action is what we change in our state and then we write some on functions here basically we can write like a lot of functions on one by one here and we specify how do we change our state basically in this case it's clear when register action happens where update is submitting to true now the only question is how can we use this reducer basically we need to register it correctly first of all i want to change one small mistake in here in app module we wrote here store module for root and empty array which is not bad and it will work actually but for the point of correctness here is an empty object basically in for root of store module we are giving an object and not an array now let's jump back in our house in auth module and basically in the module we want to register our reducer and you can ask why here because this is the same approach like with routes when we just destroy this house module we want to destroy everything like all ng rigs actions reducers and so on so basically if we will register these actions not in this auth module but outside then it's much more difficult to clean the project to register our reducer we need to write here in imports store module and this is imported from ngrx store dot for feature basically this is the feature that we register and the first argument is feature name in our case this is ours so basically normally we use the name of the module and then reducers and this reducers property we can import now here and here is autocomplete from source so it should look like this store module for future house and reducers and these reducers are imported from source app house store reducers and of course i want to move import of store module on the top to make it clear so basically this line imports our reducers with the name out inside the state tree and now let's check we don't have any errors here in web server so basically maybe we successfully implemented a reducer so as you can see here we click on state and now it's not empty anymore it's ours property so basically with this line for feature when this module is loaded we put our property inside our state and as you can see here there is is submitting false and now let's try to click sign up button as you can see there is ours register and now our state is submitting true which means with this action we changed our state and which is of course good we always see all properties from the state everywhere and it's super easy to understand what action changes your state so it's not like you have some magic properties in this inside each component and you need to debug it with console.log you just go here in redux devtools and you just click ok what changed my state is submitting and you just click on the actions and then at some point you click on the action and you see okay my action is register changed is submitting to true and what is even more better you can click here on div and then you see here the difference in state basically the whole state tree here will be shown with differences so in this case we see that property is submitted was changed from false to true which is really convenient for debugging so basically once again what is happening so here we first register reducers to create our state in our case we registered reducer auth and we described somehow how our user will react on actions in this case we wrote only one case for register action and we are saying that here we change our state and we get here only the part of the state this house property and how we change is submitting property basically then in our component here like we did previously here we have onsubmit method and here is this store dispatch register actions where we give some properties basically we just see here the action that we dispatched we can debug it when we see what properties are here and we see how this action changes our state so we successfully created a reducer [Music] in previous video we already created a reducer and we already dispatched some information from our component now it's time to somehow get data from our reducer in our register component basically it would be nice to have in our component this is submitting property to show on the button on this submit button when we submitting the request to the backend and for example disable this button so let's check how we can do it for this in ng rigs a special term is called selectors and basically selectors is a function which help us to create or get a part of our state and let's check how it is working so inside store we want to create new file which is called selectors.ts and first of all we want to create here feature selectors if you remember here in our module we registered here our reducers with a special function called for feature and basically this is the idea the each property when we register reducer is a feature that's why here we can say that first of all we want to somehow get this house feature selector and let's check how it will look like so basically here we need to have our feature selector and with the help of this function we will get this property from our state so basically here we have create feature selector and this is a special function which is coming from ngrx store and here you have a name for example auth now here as you can see we created our feature selector and this is special mmi selector and you see object unknown default projector function unknown basically it's too much unknown and we want to know about what we are writing so basically here in create feature selector would be nice to specify what interface this house feature selector is giving us and what is our global state so first of all we want to create global state basically global state means all properties that we have here inside our state so basically then each developer can just go to code and see what global state is here for us and as this state is global and we will use it actually in every selector in every module we want to create it in our shared folder so we have here types and we can create here app state dot interface dot ts so basically this is the whole state of our redux and people can see it directly here so this is app state interface and we already know that we have inside auth and auth is our state interface expert const not expert const but expert interface of course and now we want to import our state interface from source app house types our state interface basically this is what we created with is submitting and here we know okay we just click here we know that abstain is ours with this is submitting property inside now we already created appstate and we can continue creating our feature selector basically here everything is working but of course you can provide in this create feature selector some gener some types types by default as you can see unknown and this is not what we want so basically here we can provide a generic with two arguments and the first one will be our global state so up state interface and the second will be the state of aust so it will be ours state interface so once again uh we are talking here about typescript so here there is a function create feature selector and we can jump here to definition maybe it can be a little bit complicated for you but the idea is that here you can see create feature selector and here we can give two things and the first thing is t and t actually it's our global state and there is the part of the state that we want to get basically here we specify create feature selector abstain is our global state and our state is what we are getting here inside ours now if we inspect this house feature selector you can see that this is now not unknown and there is no just object here but it's mmi selector from upstate our state and we have a default projector function for our state so basically these things help people and typescript to understand what are we writing at all so basically this is actually one of the problems that i see in angular there are too many things that a person need to know to write good angular code it's for example also angular and you need to know typescript and you also need to understand ng-riggs for example so this means redux and you know you need to know such things from typescript as generics and then you need to know rxjs to write streams because the whole angular is built on streams and so on and so on so basically it's quite a lot to learn but in this course we will cover a lot of things and you will understand the most parts of it so basically here we created our feature selector to select this feature but this is just a helper function and we can't just directly use it we created here it to create all other selectors for the properties inside this house function house property sorry so now here we want to create a new function with expert const and here we name it is submitting so this is exactly function to get this is submitting property so here is is submitting and of course as always we prefix everything with the entities and we are writing selectors here so it will be is submitting selector and now we are using a special function which is called not create feature selector but create selector so here it is also from rickshares in ng rig store and here as the first parameter we are giving our house feature selector what we created previously and as a second parameter we give a function how we will get the needed property so inside this function as you can see the argument is our state and this is our state interface and now we want to return our state dot is submitting basically this is how it looks like so this is a special function that we can use later in component to get a submitting property like in every place where we want from this our feature selector and basically we can just copy this function and write function for some other property and other and we can also have some different difficult logic here but the basic example how to get property is like this so basically we're creating selector with create selector and here we throw our feature selector and then we write a function here how we get something from this state part and one more thing that maybe you are curious about as you can see i am always writing interfaces even if they are not needed so basically here we can just remove the interface and leave it like this and it will work and basically here we can inspect an interface and you can see the typescript understands that this is our state interface so basically it actually doesn't make any sense to write here an interface because it doesn't make any effect typescript understands this interface already without this word and of course the question is why i'm writing interfaces everywhere because then it's much more clearer for other developers and for you yourself what are we talking about when you have something like this let's just imagine you have here our state and then you have something like this you have several functions which are doing something and you can't really know so here you have full and then here you have bar and here you have bars and here something else and here something else basically you have a bunch of functions which are making some transformations and actually without inspecting every function here and every argument you can't say at all what is it about but basically if we say here that foo is full interface and bar is bar interface and so on later we can first of all jump to every definition just directly here like i can jump to definition here for example and see exactly what this definition is about i am understanding much better what code we're writing at all that's why i always suggest to not be lazy and always define the types first of all somehow sometimes you will see that types are not what you expected and secondly you always will understand what is it about that's why here we're writing that our state is our state interface now our submitting selector is ready and we can use it in our component let's jump now back in our component and subscribe to our state on basically what does it mean subscribing so here we want to create new property which is called is submitting with dollar at the end and basically if you don't know this dollar means that we are talking about streams and just two words about streams if you don't know what is it angular basically it is built with the help of eric's chairs and eric's js here i can open the documentation this is the official site and introduction here you can read this is basically a library to work with streams and basically there are of course procs and cons to work with streams but with angular we don't have so much as a choice basically we are doing everything with streams and in geo rigs library which we are using to work with state basically implement everything with streams which means we are just doing everything with streams so here is the property and dollar means that this is observable and what is observable this means that we observe some value and here is an observable it comes from a risk.js as you can see here and of course we want to move it on the top and inside observable here you can see we have an error that generic type observable requires one argument so here in our generic we need to provide a value a basically value means what value do we have inside this observable and we know that our is submitting is boolean that's why we just write here that this is boolean so basically we created a variable is submitting and we know that it will be an observable now the question is how we can create this observable we already have here this initialize form and i have also one more naming which i use everywhere and this is initialize values so in every component where i need to assign some properties at the beginning i create the function initialize values so let's just create here and it returns just void and inside we want to set this is submitting and as you can see here we just inspect this property and you see that this is observable of boolean now what do we assign we have access to this store as we already used here for this store dispatch but in this case we want this top pipe and y pipe i will say in a second and inside pipe we want a select and select comes also from ngrix and inside select we just need to put our selector that we already created so is submitting selector i just hit enter and basically this is it so with this line we are subscribing to the part of our state where we select and this is submitting property and after this here we get an observable is submitting and basically let's just console.log what is it about is submitting and this is submitting and we can see in browser in console that is submitting dollar is store and this is actually observable so here you can see actions observer and so on and this color which means that this is an observer and when some value is observable and this is actually a stream this means that all changes to what we are observing will just come directly in here and we can read them so let's check this is submitting and let's try to render it for example somewhere on the top let's just put here this variable is submitting and basically if we will just render it like normal variable it won't work let's check so here is on the top you can see object object and of course it doesn't work because this is an observable and it doesn't matter that this is boolean we need to get a value from observable and luckily in angular there is a special pipe which is called a sink so we can write like this pipe a sink and we are using a sink when we need to get a valley from observable so here let's reload the page as you can see that we have here false and now let's just click on signup and as you can see here we have true which means at the moment when we start registering this property was changed to true but of course we never change it back to false because we never implemented a register success or register failure we'll implement it later but for now you know that we can get with this is submitting observable this data directly from store so basically what you see now on the screen is here from this redux store this property from the state house is submitting true so now as you can see we can render it when reload the page is false by default how it should be when we click our action it's true now we can use this property to disable our button so basically here we want disabled class and we want to be disabled when is submitting and don't forget a sync pipe is true basically this button will be disabled when is submitting observable is resolved to true let's reload the page and here we click on sign up and as you can see our signup is disabled because the property in reducer is in true as you can see our selectors and our subscriptions here is working but let's talk once again how does it working so first of all we created selectors first of all it was feature selector to create to get this feature out from the state and we will use this our feature selector a lot here because we already need other properties like for example current user or is loading and so on and for now we have only is submitting and we are getting it with create selector where we throw this house feature selector and the function with our state and from this our state we're getting is submitting after that we jump to our component and we create a property observable and we're saying that this is boolean because obviously is submitting is boolean and here we subscribe to these changes with this store select and is submitting selector basically you can write it without pipe like this so this store select and it will be just the same logic but you should not and the question is of course why it will work we can check that it is working in browser we reload we click and it's working the problem is with this approach is in ng rig in riggs jazz the old version of riggs jazz was just a bunch of functions so basically we could write things like this so here we have this store select and here after this we write something like filter and then it will be filtered from rick's chess and then something else like map also from rxjs and it will work in the newer versions of rxjs it was changed and now the approach is to have a pipe function like everywhere when you work with observables and now inside pipe you have a bunch of functions one by one which will modify the stream which means this is a stream and then after this we can do something with value for example we want to map it then we use map from rxjs and then we can access this is submitting property and change it somehow for example submitting then is boolean and we can do something like return string foo and basically the idea is that we always write pipe first of all because sometimes we want to do something after select so basically select is not enough for us and we want to do something more if we want right pipe we can't do some other operations afterwards and secondly it's the default best practice in rxjs to write everything with pipe so in this case this is pipe and then select to select a value and inside throwing selector and of course the most popular mistake that people who just start to work with eric ngrx are making is that they forget right here select function and they write something like this like pipe and then is submitting selector and it just doesn't work so basically don't forget to select a value we need select and selector [Music] in previous video we created reducer and started to working with our state now before we start to work with effects from ngrix we need to prepare our our service so basically we have announced service here in house module and at least for register we have an api call to register user so basically we already created several interfaces we have a register request we created it previously basically this is data that we need to give to api to register a user and also in shared we have in types current user this is already good but we need to go further so first let's start with creating service for ours module so basically as we talked in the lesson about file structure we put all our services in services folder basically this means that all these services belong in ours module so here in services we create the first service with name house service ts basically i always start with this first service and then split it later if the service becomes too big it doesn't need to be at the beginning like several services with just one function so basically for now we put everything in our service what we need for this module so here is our service so we name it like this because this is the same name like the module and now we need to export class and this will be our service and just to remind you a lot of people and i also forget to put here injectable decreator and if you just forget to put injectable decorator you will get quite strange messages from angular and it's not hundred percent fast clear what are we doing wrong so basically always if we have service injectable decorator is needed now we are in our service and we want to create a function to register our user basically as i already said all our functions inside services when we're working with api will be stateless so basically this function of register will just take our data that we prepared and give us observable back so basically let's check how it will look like so we have register and we put data inside and we know that data is register request interface we already created this interface this interface we can jump here inside this is user and stream password username now what do we want back obviously we're render registering a user and we will get some response and let's check in this conduit example of angular what do we get in response if we register user so here i will just log out now open the console with network tab now i am in signup and i am registering a user and as you can see here we have a request with post and as a return we have here an object with user and here we have all fields of current user so basically it would be nice to have an additional interface which says what are we getting in return so basically here we know that this is user and current user but from our code it's not clear so basically let's say here that we get current user interface because basically this is what we want to get so we register user with some data and back we need a current user basically for us this user property is not interesting and we really just want to get current user and just to remind you current user is looking like this this is just a plain object so now we need to return here http and to start working with http we need here to add constructor and inside constructor private http and this is http client and http client we need to import from another library http client from angular angular and now it will be common and slash http so it is already there but my editor doesn't understand this yet and now we imported http as you can see and also i want to move observable on the top and also i don't like this relative path so it should be source app out types register request so now here we want to return this http and we know that it will be post request and now here we need a url basically here we can specify what url do we need and as you can understand here the url is like this http conduit production ready io and obviously for every url we will use this base path so basically here for example you can see we are also fetching tags from the same url with conduit production ready io and at the end we have api tags which means it doesn't make any sense to copy this url and put like this here in this function like here we know okay this is api users because then we will copy this base path in every function and of course this doesn't make any sense so for this i recommend you to move this url inside environment variables so basically we already talked about it we have here in source environments and in this folder we have environments for development and production and here is production falls and we can just create additional property for example api url and it will be our string and we now can copy this string for example until slash so here is our api url https conduit production ready ion we also need to copy it for production environment because it will be the same now we have here also api url and now we can use this url not like this but with environment url so basically here it will be url and from environment here api url we take it and concatenate with slash users in this case this is used only once and in each function we can use it like this and not copy paste this base url so now back to our post we have http post here goes url and data and as you can see here we have now an narrow so basically we are saying in this function that we want to get back observable of current user and we get back an object and obviously this is an object because we have here http post and we didn't provide any type and post by default thinks that this is an object so basically we need to fix it so in this case we need to modify our post so here we need to know what we are getting back and for this we need to create new type so basically let's jump to our types and create new file which will be what we are getting back so we can name it auth response interface and i am saying here house and not actually register because the same interface will be when we will be logining so basically this is the same interface and we can take it like this and not copy it twice for register and login so we already saw here that in as a response we have here a user property so it will be export interface and als response interface and inside it will be user and we know that this is current user interface so this is our interface now we can use it in our service so here we can say that back we are getting out response interface and obviously it helps now it's not object but still we want here to get back current user which basically is fine because from all places from our application of course when we make register we just need back a user we don't need some additional property data which we then need to additionally handle so for this here as you know we are getting a code like this so we get an object with property user but we want to get rid of this additional property for this we can just use map here and as i said in previous lecture we can't use directly map but we're using all from eric's chest with pipes which means here we have pipe and inside pipe we have a map function and this map function have as an argument response for example let's name it response and we know that this is our response interface and now here we simply say that this is response dot user so this is the data that we want to get back and here we just need to import map from rxjs operators so basically once again what is it about we have here this http post and we are saying that we are getting back our response interface because this is what we are actually getting the user way inside is current user this http post gives us back an observable with ours response interface and we are mapping it with the help of pipe and map inside and we map response to response user and as you can see response user is current user interface that's why our register function now give us current user interface back our service is completely ready and we successfully created register function the only thing that we need to do is to inject this out service in our module so here we jump in our modules ts and then inside we need to add providers and this is an array where inside we register our service so here our service comes from services house and i don't want relative path so it will be source app auth services or service so here we successfully registered it and let's try if it's working so we won't do such approach in real life but just to test the service for now we will inject it directly in our component so once again we won't do it like in normal project and we will remove this code in the next lecture but here i will just inject our service from our service and here we can try our register so instead of this page actually we can make this page that doesn't matter we just have this alt service then register and the throw inside this form value so everything seems to work and let's check if it is compiling so we don't have any errors here in web server and now when i reload the page and jump to register and then we have an error here that http client is not available and no provider is found for http client and this happens because we didn't register http client module but we tried to use http client inside our service so basically we need to go to app module ts and here inside impurse we can just write http client module and we just import it like this so as you can see this is from angular common http i will move it on the top and now when we reload the page and jump to register we don't have any errors now let's check if it's working so we click on sign up and as you can see here in the network that and nothing happens and this does not work because by default in angular any call for http client doesn't make anything if we don't write subscribe here so basically we can subscribe for the data from observable and here this code won't work this is like observable but we need to subscribe in order to this for this call to be made so here we can say that we get back current user and this is current user interface and here let's just console log current user and check what we get so here we reload the page click on sign up and as you can see now we have 404 because here post for users does not exist and this happens because we forget here to write slash api so basically let's jump back to environments and here we should have at the end slash api and the same we should do for production so here will be slash api now let's try once again we click sign up the request is there and as you can see we get an errors so basically this is fine because all data here are empty so we just throw them as it is and here we get an errors that email can't be blank password can be blank and username can be blank and so on which means our service is working we can do requests now obviously we won't do them directly from our component so we can remove this code safely and on the next lecture we will start with effects so here i'm removing the call and our service from our component and then we don't need this to import with our service and current user [Music] in previous video we successfully created the service for our register page now it's time to start with effects effects is apart from ngo rigs and basically the idea is that with actions we can just dispatch something like we did previously so here we can click we dispatch an action and we change our state this is all fine and this is called synchronous action which means this is just for frontend the question is what should we do when we need to make for example api call in this case one action is not enough because api call can be quite long and we want to show one action on the start of api call and another action on the finish of api call basically effect solves this problem with the help of a rig chest so basically effects is heavy rickshaws code and we need to learn how to write them so let's get started here we need to jump in out in our service and let's check first what do we have in our types we already created here three types register register success and register failure which is completely fine and actually the idea is when we start registering we dispatch register then when the register is successfully finished we dispatch success and if our service says ok we have an error from backend then we dispatch failure and our frontend can react for these changes now let's talk about actions first of all i thought once again about our actions and i think it would be better if we create additional folder for actions and split actions because for example if we will write everything in one file like all register actions then all login actions maybe log out actions and something again then it will be quite a big file so let's move these actions to additional folder and let's name this then not actions but we can rename it to maybe register and then action.ts basically as you can see the same notation as always this is the action type that's why it's dot action now let's create a new folder which is called actions and we will just move our register action here inside our actions so we have here action types reducer selectors this is fine and our actions we have here so this is register action and we give here register request and now we need to create success action and failure action and let's start with success it will be register success action create action and here is our action types dot register success and the question is what do we get back and we already know that our service with register give us back current user so this is what we want to dispatch so when we successfully registered a person we get back current user and we dispatch this data so here is current user interface this is fine and we don't need to forget here round brackets let's just save here and something is not correct i forget here brackets because in props we give an object so here it will be current user inside an object and here we imported our source current user interface i also separate as always imports and our action is created now we want to create also register failure action and basically obviously you already saw that sometimes we get an errors for example when the user is not registered successfully for example we didn't provide correct data so here will be create action and actually we want here to create an interface for backend errors and so on but for now let's skip this step and just say okay we failed but we don't know why and we will talk about backend errors later when we will implement them so for now it will be just action type register failure and nothing else no probs so we just say ok we failed now our three actions are ready and we can start with effect and with the same approach like with actions folder we can create new folder for effects and here will be our first effect for register so register.effect.ts now what is a register and register effect at all this is a service so basically we start with writing as a service this is expert class and it will be register effect and we don't write that this is a service because actually we want to treat it as a fact and this is of course injectable so we should not forget injectable also and now our effect is almost ready and we just need to create inside the property and we can just create the property register actually this property does not matter how we will name it because it won't be used anywhere and it will just work and you will see in a second so here we want to create effect and as you can see i don't have any autocomplete because we didn't install library for effects so if we will open in g rigs are your docs we have here ngrix effects and this is the part of ngrix but you need to install it additionally so here is yarn add ng-rig's effects i just throw it in console and install it here and now we can use create effect and for this we need to import it this is create effect from ng rigs effects so create effect is there and we need to provide a function inside now the question is what do we have at the function and we need here this actions pipe and inside we throw of type and here will be register action and i will show you what we are doing in a second so here these actions is something that we need to inject in this effect so these actions come from ngrix and this is all actions that we have at all so basically all actions that we dispatch will be in this observable so basically this is observable from eric's jazz so to inject this we need here to create constructor and here we can write private and it will be actions so this is an observable and this is actions and actions is coming from ng riggs effects so here we successfully injected actions and now the question is what does pipe of type do first of all we need to inject here of type of type comes also from ngrx effects and obviously we are using pipe to start writing functions inside for actions and the idea is that we want to subscribe for changes on the specific action so these actions are all actions that we could trigger so here what you see for example auth register or ng rig store init or update reducers these are all actions and we can have like thousands of actions and here we say okay we want from this stream of actions to subscribe only on type register actions which means everything that we will write after will happen only on this action let's now make it easier to read so basically uh prettier will do it correctly but for now we don't have enough for one this is why pretty makes it in one line and this is not really readable so here we have off type and this is pipe so basically pipe will go here and then we have of type inside and after of type we're having switch map and basically switch map is what we have in riggs js to map our stream and to get back another stream so here we switch map and we get data from of type register action and we know that this will be action where inside we have request that's why we can directly here get request by destructuring and here we switch map we want to operate with our service so basically here we write return and now we need our service so we need to inject here additionally our service so this is our service and service and this is our service and now we can use it here we say return and this our service has inside register that we created previously and we throw inside request now this register request of course can fail or can be successful that's why we have here pipe and inside pipe we can have map and catch arrow so basically if we write here map we want to map and get back current user and this current user is current user interface and after this so map means successful we want to return successful action so here the successful action is register success action and inside register success section withdraw this current user so once again what we are doing here we already get here register action we know that inside register action as you can see in props we have property request and this request is register request interface which means the data that we pass inside for example in our register function to make an http call now here inside switch map we are calling register from our service and we are giving request inside then this is an observable so this is an observable and with pipe we can write here map to map what we are getting back and basically we are getting back a current user this is for sure because this is what we wrote in the interface this is the observable with current user and we want here to dispatch register success action and we don't write this dispatch by hand like we did in components and ngrix will do it automatically for us and we just need to return here our action so here the action is register success action and we know that we need to pass inside current user and this is current user that we get from this service so this is how it's working but it's not the end we also have failure that's why after map we need a catch error and cachero this is what happens that when request won't successful so here we have some data but for now we won't write any code regarding this data because we said that we will make backend errors later and here we need to return an observable and to return here an observable we need to wrap it in off so off is from ngrix and inside off you can just throw the data and this data will be converted to observable so in our case this is off and here is register failure action and here we don't pass anything inside because we don't need to now the only question is why it is red so actually i forget to round brackets here and here inside switch map because basically we are passing inside switch map a function and this is a function that we are passing inside switch map so basically here this function ends and this is one of the points that i don't like about a rxjs it's really easy to make a mistake because we write a lot of brackets and basically to remember how many brackets you put on the correct line can be sometimes a little bit tricky so once again what we did here so we have an effect we registered this effect with create effect we have here the subscription of all our actions with of type register action we got from this observable on the register action and then we read in the switch map the request from this action and this is the code of switch map inside here switch in switch map we just need to return an observable so basically here we have this our service register to register the user and we know that this is a synchronous process and this is why we have here pipe map and cage arrow and basically we are coming here when our request is successful and we are coming in cage error when it's not successful so here we know that we get current user and we return our success action with current user and if we have a catch error then we return here a failure now your question maybe is why we need to write here off to wrap our action in observable and here not and the difference is that here we have this our service register so this is an observable and we are running pipe on the observable which means back we will also get an observable and here we have a map on observable and here we are doing some things inside map where which are not observable so for example we can filter something or map something and so on so basically inside map we have not observable code but after running a map function we get an observable back and inside catch error we just need to return observable and we don't have here some pipe on the observable that's why we need here to wrap just our function our action with off as you can see it is quite complicated especially if you don't have a deep knowledge in rxjs because basically all these things like switch map and observables is a risk js thingy but basically this code that you see here will copy paste it like for every module and it won't be that different in most of the cases yes it can have tricky business logic sometimes but like in ninety percent of the cases you will just copy paste these and you will have just different action different service different method and different action on success on failure but basically the code actually will stay the same now we need to register with this effect inside our module so basically the same logic with for likewise for feature we want to register an effect only for this module and this effect will be created only when we register this module and to register an effect we write here effects module and this comes from ngrx effects and then dot for feature so exactly the same like always and inside we're providing an array of effects and our first effect will be register effect which is coming from source house our store evacs effects and register effect so basically with this line we are registering all our effects now let's just move eric's chest effects on the top and check if we have any errors and yes we have because we moved our actions from register from actions to additional file and now our store actions does not exist so we need to jump inside our component and here on the top fix this and now it's not store but store actions and register action so we fixed one place and there is another in reducers let's jump in our reducers and here we also don't have store actions but actions register action as you can see in our web server now we don't have any errors but when we jump in our page we get an error that we didn't register effects in the root and basically this is the same story like with for feature we need to register effects root module in order to be working with effects so for this we need to jump in f module ts and here we registered already a store module for root and then devtools and here we also can register our effects module so it is effects module and we simply write for root and inside it will be empty array so this means that we will just register all effects inside every module and we don't have what to do inside our app module now as you can see when we reload the page we don't have any errors and now the moment of truth we're in redux tab here i will make it bigger and now we just simply click sign up and as you can see now there was not only one action register but also action register failure and in the network you can see that we tried to mate to make a request with epi users and obviously it was bad request because we didn't provide any data it was empty and this is all just blank and the problem here is that we don't give our data correctly so as you can see here we have ours register action and here we have type and just three properties and this is of course not correct and let's check what we are trying to achieve so here we have our components register and here with this page is in on submit register action what's the problem we have here in redux and error and an error says that we don't get correct properties when we pass here register because all our properties should be in request but we just throw them in the root and the problem is that we don't get any typescript error and obviously we don't want to have any runtime errors or errors related to business logic that we can handle with typescript and here our problem is that when we inspect this form value here you can see that property abstract control dot value is any which means this is not what we want and there are several approaches to do this but basically the easiest approach here we know that in request we should get register request interface and basically register request interface let's check what is it register request interface is user with email password and username so here we can say okay here is our request and we know that inside should be user with inside these three properties so this form value and now here we can say okay this request is register request interface and now we need to import it of course and now this request here is valid because request says that this is register request interface and not just some um not correct data because basically in this case here the problem is that we don't have an error from typescript because value is any if here we pass some not correct value and not any like string for example we get an error that argument of type string is not assignable to the type request register interface so basically here what we want to give inside is an object with property request and now it is valid because inside request we are given register request interface which is the correct thing that's why you should always be really careful because from some parts of your code or not your code but libraries you can get any and then at that moment you won't get any error because you can pass any anywhere in any function and you won't get any error message so let's check if it's working now when we reload the page and here we click sign up now let's check what we are giving so this is register this is type and request and here is user with three values which should be correct and of course we get register failure because here we didn't provide any information but here we see that our request is correct we have an object with property user and three fields inside now let's try to register user with correct data so just throw something valid data inside and click sign up we can't do this because we disabled a button inside reducer after sign-in we need to fix it later but for now we can just reload the page and here our user our email and password we click register and as you can see we don't get any error here post was successful we get back our current user and here in redux you can see that we have register and register success so here there is a request and inside register success we have a type and current user as expected and this is the data that we get after registration and we can use this data inside reducer to use current user and to show that we are logged in successfully [Music] in previous video we already created an effect for our reducers and now we need to change this data in our state after success and failure but first we need to create additional interface for the backend errors as you can see here in our example where we check everything when we register user and we don't give really correct data here we get here backend errors like email is invalid and password is to short and here as you can see in preview this is how our errors look like and we want to have an interface for typescript because basically all over our application we will get errors from back-end and they will be always in such format that's why it makes sense to add additional shareable interface for back-end errors and use it everywhere so let's jump back in our application and we can go to app shared types and create here a new file and call it backend errors interface dot ts as you can see i have here back and errors interface and not back and error interface we could create that but it doesn't make that much sense because we always use this interface for all errors and we don't benefit if we create the interface for just one error so that's why export interface and here is backend error su interface and what do we have inside as you can see here we have errors is an object with keys and these keys are our fields and as a value we have an array of strings so here when we say that this is keys which are strings we can say key is string and value is array of strings so basically this is our simple backend errors interface now we can jump back in our actions in house store actions and here we said previously that our register failure actions does not have any props and now we can add these props using our backend errors interface so here inside create action as a second parameter where probes and inside it we say okay in props we have an object obviously and we have errors which is backend errors interface and don't forget round brackets afterwards so this is how it looks like so we already imported back in the error interface and now here we create three actions and we need to change our state accordingly in our reducer so let's jump to our reducer now we have only one field is submitting we need to have more and we need to cover these two additional actions here so first of all we need to improve our our state interface so here i am jumping to the interface it is located in types of state so we are inside app house types our state and here we need another properties and not only is submitting first of all we will get current user we already did that but we didn't save the current user data so we want here to save them and here we're saying that this is current user interface or now and you can ask why now because by default we need to have an initial state you can see it here our initial state is submitting false and we also now need initial state for current user and obviously we don't have at the beginning current user we need in any case to fetch current user that's why it is now and after fetch this is current user what else do we need of course we want to know if user is logged in or not so that's why is logitin property would be nice to have it is boolean order now and here i'm making it now also for such reason so basically if the value inside our reducer is now that means that we didn't fetch information about current user if we fetched information it can be either true or false in this case we have is logitine which can be in three states null means that we don't know yet and true or false means that we are log it in or not log it in and last but not least we have our validation errors and this is exactly our backend errors interface or now so basically if we don't have any errors and here is validation errors then by default it will be now and if we get any errors it will be backend errors interface now let's jump back to our reducer and here we need to change our initial state so here as you can see already we have some properties and error from typescript and typescript says okay you should fulfill your interface for our state interface so when missing current user is logged in and validation errors so basically here we have current user and it is now we have validation errors it's also now and we have is log it in also now so our initial state is ready and now we need to create and update our actions so basically the first action is our register action and here we're changing all only is submitting i would also recommend to change validation errors to now just because when you click here once you feel here validation errors and then when you click once again you want to remove this validation errors that's why when we start register actions we want to set validation errors to now so our register action is covered and now we want to add one more on and in this case it will be success action and here on success we need to have access to state and action basically state is our current state action is the action register success action with props inside and we are saying that we want our state interface back and here we want to merge state also so here is state and what do we want to do on success so first of all we want to change is submitting to false because we know we are not in submitting phase also is logitine will be true because we know that we logged in user and we want to set current user and cover user current user we want to read from action dot current user and as you see autocomplete works fine and here we understand that this is current user interface and it comes as a parameter from our action the next case will be on failure so here we have register failure action and the second parameter would be state and action and here we want also to return our state interface and it will be an object and we want to spread state and we want to override here is submitting also to false and we want here to set validation errors because basically if failure happens this means we have some errors and here we will set errors from action dot errors so this is what we set if we have any errors now we need to a little bit update our effect because here in effect previously as you can see here it is red because our failure now expects error messages and previously we just said that we won't use our errors at the beginning but now we of course want to read them from our response and set them inside our user so here we're in catch error which means that as an argument we have here error response and this is error response from our backend so this is http error response and as you can see http error response comes from angular http so here it's on the top and we have here error response and we can simply throw inside as a parameter errors this is error response dot and here we even have autocomplete error dot errors so this is errors as you can see here it is any because basically we don't specify in any case what http error response is giving us and this is actually fine because we know that here from the back end we get errors as a property and everything that we see here as a body will be inside error so basically errors is fine for us and we throw it in our register failure action now let's check what did we do so here hopefully it is compiled successfully let's reload the page we don't have any runtime issues and now let's click on sign up and let's check our redux and you can also see that something is already working previously our button after submitting was staying disabled because we didn't revert is submitting now it's green back which means is submitting is already working now let's check what we are doing we have here register and indeed we can see that we change is submitting from false to true but we don't see changes regarding our validation errors because they are staying now and then we have register failure and here it's more interesting we said is submitting back from true to false and we set validation errors now in our state we can see what we have and as you can see we have house validation errors and email password and username so basically now we can read this validation errors from the state and render them on the screen let's check what will happen if we register user successfully so here some valid data and valid email and valid password now we have register success and as you can see is submitting is false is logged in is true and current user is set which means everything is fine and we can use now current user data [Music] in previous video we already saved our validation errors to reducer which means we can render them on the page we already said we need the same interface in different pages with with backend message errors but also we need in different pages this validation message component so basically it would make sense to create this component in shareable because we will render it on different pages but first of all let's start with selector basically here we have in our selector only is submitting and we also want to get validation errors in our component so basically with the same approach like we did previously we can write here validation errors selector and this is create selector where we throw inside our feature selector and now we have here our state which is our state interface and we want to get back our state dot validation errors this is it basically we just copy paste the same with different name now our selector is ready and we can use it inside our register component so here i am in register component ts and we have here observable for is submitting we just need additional observable for our validation errors so let's name it backend errors so it's clear and this is observable for back-end errors interface and this is now so as we already discussed in store backend errors by default is now this is why here we don't say that this is observable of back-end errors interface it can also be null by default and we don't want to lie to typescript about values now here we are in initialize values and we need to do the same so here is backend errors with dollar and here we write the store pipe inside pipe there is a select and inside will be validation error selector so i already auto inverted it here we have validation errors so basically our backend errors property is ready and we can use this property inside our component so let's jump to html and here you see backend errors are here and basically here we want to render our shareable component for backend errors that we will create in a second and as we already discussed we prefixed this component with mc which means medium clone and then backend error messages so basically i think this is fine name for our component and here we close it with backend error message or messages i think messages is better so here is backend error messages now we want to render this component actually we don't need this text here anymore we want to render this component only when we have backend errors which means here we can write ngev and we have here backend errors with dollar which is observable and we can say here a sync and basically this code means that this component will be rendered only when backend errors with observable is resolved and not now also we want somehow to pass these backend errors to this shareable component because in every different place we will render different texts and we want to pass them inside so here we have for example backend errors property and here we want to throw the same backend errors with async so basically this would be exactly our backend errors interface and now we already used this component but we need to implement it in in shared so let's jump to shared here we are in shared and we have here only types as we already discussed every component which is shareable we will put inside module then we need just to inject the module and everything will work so here we need new folder which is called modules and inside we will create a folder with name backend error messages and this is exactly the component that we want to create inside it we need a module so backend error messages dot module dot yes and here as always export class and here we will have backend errors error messages module and we of course want here in g module declaration so here inside we need to import and here at least we need a common module from angular and maybe something else later for now we don't need anything also we need to create a component so here we create components folder as always and inside it we create new folder which we can name backend errors error messages so basically we name this component the same like we named our module and we are doing it uh over and over again because it doesn't make sense to name the component which will be actually our root component for this module with any other name so here inside we need three files backend error messages.component.ts then backend error messages.component.html and actually we won't need scsl but i will create it in any case just for the sake of that all our components look the same and now we are in ts so what do we need here we need to register a component so here we need component and inside it will be selector and as a selector we already said it's mc backend error messages and we also want here template url and our template url will be backend error messages component html and style urls will be an array with backend error messages as css now we need expert class with back-end error messages back-end azure messages component and our empty component is ready so first of all we should not forget to register it in our module so here we need declarations and inside will be our backend error messages component and we also need here experts and just to remind you why do we need experts in angular if we want to use some component outside in other modules we need to export this component and of course we want to do this with this component that's why i add this component in export declaration so now our component is ready and we can start to create it so as we already mentioned we want to give inside as an input the property backend errors and now i need to discuss something with you just to remind you for components we use inputs and outputs to describe how this component will work outside in parents and normally you can see in all guides that people are writing like this so here you have an input and then you have backend error messages or actually we say that this is backend errors property and the type is backend errors interface which is fine and it is written like this in all projects and basically i am not using it like this and why it is like that let's imagine that we have here some full method where we use these and then backend errors and let's also assume that here we have some property which is called bar and this is string and let's assume that we also use here this foo or this bar so basically we're using info two different properties and here one of this property is an input and another of this property is the property of the component and we can't distinguish at all components properties and component inputs and of course i would like to distinguish it and for example if we compare angular with react in react you can easily understand when you get properties like inputs and when you work with properties inside the component and from my experience of making a big project it really makes a difference if you know if it's input or not because basically inputs you won't modify and you will thread them actually like read-only properties and this is what i recommend you to do and with this bar you can do whatever because this is just a property inside the component so the question is what do we want to do and actually in angular it is possible to create an input with alias and i don't know for what reason but they say that this is not the good approach and in linting for some angular packages not angular itself you can see that they don't recommend to use aliases i use aliases in a lot of projects in quite big teams and it works really well so the idea is that here we're writing back in errors and here this string is how we are saying that this component should work in parent so basically in parent we passed this backend errors inside back and errors input and this is exactly the string and here this word after these round brackets is in alias this is how we want to use and assign it inside this so basically here i prefer to write or after the variable itself always word props and now here we have these backend error props and this bar and you can directly see the difference and you can understand that the word that ends with props will be the input and the word this the don't is just the local variable i think that this is really important approach but if you don't like it of course you can just write everything as in all guides without word props and to nothing can stop you so here we passed the input we don't need all this code and now we know that this input is backend errors interface so we have some keys and we have some strings and actually we want to render it in such format like here so basically this is just the concatenation for every key of values which means here if we just don't pass anything we can't submit them but basically the idea is that if you have more than one error like an array then we will just separate them with comma so like password is to short and comma password is not correct or maybe this empty string will be better so basically here we need to transform somehow these backend errors to human readable error messages so let's create here error messages and this is just an array of strings so this is just one string second string and we want to render them with for each we can actually already do this inside our template so here it will be ooh with class error messages and we close here our all and inside we want to have lee and for this leave we want to have a loop so it will be in g for loop and here will be error message of error messages so just inside here we render error message so this is like nothing magic the standard ng for loop from angular where we go through array of strings and we just render a string actually this is the whole html that we will have for this component now oops this is css and now we just need to create this error messages property here somehow on initialize of this component so we need here implements on init and i will write directly in ngon in it because we won't have here any other code except of this and we need somehow to transform these error messages and actually it's quite easy here we can read all keys and then for each key make a map so basically object keys will give us back this as array email password and so on and we throw inside this and here is backend errors probes and then we make a map and here inside the map we have name stream and the each name is just for example email a password and then inside this map we want to get messages so we want to take this array and concatenate it so we want to join it so messages here will be these backend errors props and here is the name which basically means we take for example email and then we make it join with empty string now our messages is ready and we need to concatenate it with our key so here will be a name for example email and then it will be messages so we already created our property these error messages and as you can see we get then back error messages as array of strings so this is basically our shareable component where we can throw back-end errors inside and we will just transform them and render so our component is already ready and module also but here we get an errors we can see them better inside console here actually we can't okay but here we get an error that mc backend error messages that we have inside register component html is not registered which means our register component and register module doesn't know anything about this mc backend error messages module and what we need to do is go in house and then our module and here in imports we can just import our backend error messages module so just like this all shareable modules we just simply inject in imports and bam we don't have any errors now let's reload the page and try what will happen so here we click sign up we get an errors and nothing is rendered let's just try to start our web server new maybe angular didn't get what files we created now let's reload the page and check what happens so here as you can see on signup our errors was rendered here so everything is working so one small notice if something is not working for you even if it's saying that compiled successfully just try to reload angular web server because sometimes angular can't get what changes we made especially when we create new files so once again how this is working so first of all we need to look in redux tab we have here register failure then in our state appears validation errors and in our component in register component in ts we have here observable exactly for this property validation errors so in this observable we get directly data when we update our state and then we simply with the help of this component which is now shareable we render these backend errors and as you can see here the key is backend errors and not the backend errors props and only inside components it's with world props so here all our errors are rendered and we are good to go [Music] we almost finished our register page we already made a request to our api we saved the data from the user to our redux at store and now we only need to save access token to local storage and redirect user on success login so let's start with saving the token of user so basically what is it about when we try to log in and basically we register a user here and it is successfully so you can see here in the response we have a property which is called token and actually for us is just a string but with this string if we will store it and make a request our backend will know the binding between our data like for example this email and password with this token so basically token is a representative of your user and with this token when we make a request our backend knows that we are this user so basically our goal now is to save this token somewhere and we will save it in local storage so that we can use it later to read from local storage and add to every request and then our server knows if we are logged in or not what user we are and so on and if i allow it to do some request or not basically we can simply open here our store effects and register and as you can see here we're doing success and we could simply write here something that will that will store our token like for example window dot local storage dot set item and for example here it will be access token and here will be our current user dot token basically that's it this is one line but i would recommend you another approach why is it this approach is not good it's actually not bad but here we're using directly window and basically when you are working with local storage there is also local storage set and cad and we want to transform a data when we are making set and get so basically we said it is fine to write it like this but basically when we are making get in local storage we can store things only like a string but basically it would be nice to store an objects also so for us window dot local storage dot get item and if we say here for example let's say we saved current user inside we want this to be an object with id and so on so basically we want to stringify things when we use set item and we want to parse our objects or like any structures when we make get item obviously we don't want to write here like jsonparse jsonstringify each time when we just need to save or read one property so we can create additional service like persistent service which will work with saving to local storage and reading from it and this is of course shareable service so in our app shared folder we can create new folder services and create here persistence dot service dot yes and now this is expert class persistence service and we need of course to make it injectable and now inside we will have two methods first of all is set and we're setting here a key for example access token so the key will be string and the data will be any and this is the one of small cases where any is allowed because basically we don't know what type of data we want to save it can be number string or an object that's why data here is fine and we're returning void because we won't return anything and here we want a try cage condition so this is just a plain javascript no magic here and this is just try catch and we want to try and make local storage dot set item and here will be key as the value we want json stringify and inside we want to straw data so basically we are running set which means we want to write in local storage and we are trying to make that item and if it will happen so basically we won't get any error then we will stringify this data and save it to local storage if we will fail so basically we can't stringify or something like that we want at least to console maybe error and here will be error saying to local storage and here will be our error so our set function is ready now we need a get function of course we get just by key and our result will be also any because we can it after parse it can be a string a number or an object for example so here the same time try catch experience so in case we get an error and then try we try to return and here will be json bars and here we want to parse local storage get item and here will be key so basically if we can parse a key from the local storage everything is fine if not we want to return now and it would be nice to say that we couldn't parse it so console error and here error getting data from local storage and this is e which means actually if we just get some data and we can't parse it we return now so we are on the safe side and this is it this is our small persistent service that we can use everywhere and just use set and cad to work with local storage not directly now we want to inject this persistent storage in our app house component or module and then use it inside our effect so here we have providers of service and we want to add here persistent service so basically this is important we register all services from shared only in modules when we need this so basically we don't have some global shared module where we register everything and just inject so we inject only things that we need now persistent service is allowed here and we need to go in our register effects and here in constructor edit so we can use it so it's private persistence service and this is persistent service now we have it here this is imported and now we want to use it so here inside a map we can do this persistent service and here we want to make a set and let's name it access token and we will write inside current user dot talking as you can see we don't have any errors we don't have errors in our web server and let's check if it's working so basically here in local storage i will delete all my local storage keys so my local storage is clean and now let's reload the page and try to register a user so we click on signup and as you can see we get an error password is too short which is also good so our back-end validation is working and now with the second try here we get a user and here in local storage you can see that we have access token and here we saved this string so basically we get this current user and we saved with this one string this line in local storage so now we can everywhere access this access token from local storage through persistence service and use it for our request the last thing that we can do with our register page is successful redirect so basically we want after success redirect to redirect user to the home page and actually effect is a nice place to do this why because we can subscribe to specific action so here we subscribe to of type register action and we can do the same and subscribe to for example success action and let's try this here so here is the end of our register and after register we can create new observable redirect after submit and this will also create effect and inside we want here of course a function and inside this function we want these actions pipe and inside pipe will be of type and in this case we want register success action so basically when success action happens and here we want not switch map but tab and you can ask what is tab and this is the thing from riggs.js obviously and here in tab we can write a function and tab means we just need to do something so basically if switch map or map should or must return something the tab should not return something it's just a function that will be called after of type and that's it so basically if we just write here console.log 1 it means so when register success action happens we will console log 1 that's it of course we need to do more and we want to do here redirect so to make redirect we need route access here so we want to inject router and let's create a variable router from router so here is router from angular router and now we can use it here and write this router and then navigate by url and navigate by url means that we just throw url inside and navigate will happen if we will just call it like this your page will hang completely this happens because actually create effect want to dispatch something when we are calling it for example here in switch map we returned some action and here we didn't and basically that makes ngrix to hang and here actually when we use tab almost always we need to pass as a second parameter so the first parameter in create is a function here so this is this function now this function ends and we want here as a second parameter to put some options and the most popular option is this page false which means that we're saying for engineering please don't dispatch anything and now actually when we're using tab this means that we are not returning any action and we don't want to dispatch anything so we just do our thing here and that's it now let's check if it's working so let's reload the page here we provide some username email and password we click sign up and as you can see we are on home page so basically this create effect was triggered and after success we were redirected so basically our register page is fully working and here in redux we can see okay there was register register success and we were navigated to home page we also saved this access token to local storage so we can use it in on other pages and now in state we see information about current user so we are good to go and we can start with creating other pages if you have any comments or questions feel free to ask them and i will answer them for sure and this was the end of the first chapter if you want to dive deeper in learning angular then check the full course in the description box below

Channel: Monsterlessons Academy

Views: 7,787

Keywords: angular building real project, angular course 2021, angular tutorial 2021, learn angular in 3 hours, angular full course with project, angular tutorial, angular tutorial for beginners, angular crash course

Id: DyklxnC2XP0

Length: 239min 34sec (14374 seconds)

Published: Tue Aug 17 2021