Angular Course with NgRx - Building Angular Project From Scratch

in this video we will dive into creating real application using angular and engineerix with newest features like Standalone components or create feature inside ngrx and this video is a part of my full course angular endangerix building Rail Project from scratch this is why if you want to get a full course don't forget to check a link 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 Angela and danger Rick's building drill projects from scratch and in this course we will use these two technologies to build a real production application we will start with the empty folder and finish with the fully functional application we will create most typical features of every project like for example authentication pagination fetching data from API likened and disliking articles implementing feed and much much more we will use angular together within Shear rigs which is the most popular solution to build scalable applications and manage State on the front end obviously all our code will be dry reusable easy to understand and fully covered with typescript by the end of this course you will for sure be able to create your own angular projects of any complexity who am I my name is Alexander kocherhin and I'm a web developer with more than 10 years of experience as well as a professional instructor with address 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 we will install everything that we need in order to create our angular application and here we must start with installing known shares on your machine and as you can see I am on the website node.js.org and here we have two versions LTS version 18 and current version 19. and actually I always recommend my students to install LTS version it supports everything that you need but it is much more stable this is where you can simply download and archive here and install it like an application on your machine after installation in order to test that you install successfully node.js on your machine you can write node minus V or minus minus version as you can see here I am getting version 16 so I have a node version which is a little bit older than here but still angular will work with any version quite fine if it is at least 14 or bigger which actually means note 16 is fine 18 and 19 are also find in so after you successfully installed node.js on your machine we must install angular CLI to create an angular project what is angular CLI this is a terminal tool which allows us to do some angular commands and the most popular command here is generate new angular project with the whole folder structure and as you can see here the recommended version is to install it with npm install globally and glaciali and we can do that because we already installed node and we haven't PM together with it and after this we have NG inside terminal and we can use like NG help and degenerate or for example generate a new project with NG new and the name of the project this is totally fine you can install angular CLI like this but I really like another method to buy that because it is more flexible I like to use it like this and Peaks and you also have npx if you installed no on chairs on your machine and here we can provide minus p and then add angular slash CLI 15 and as you understand here we're defining what command we want to use and here we say okay I really want to install this package which is angle sli15 this is exactly this stuff but we will always use it through this npx command so it will never be Global like here in G and then some command we will always use it like this within G and then here will be a command for example generate environments like you can see here what is the point of using command like this in this case we can easily switch to any version of angular that you need because here we're defining what exactly CLI version we want to use let's say tomorrow angular 16 or 17 is coming out you don't need to have any hassle with reinstalling and glass CLI which will be Global on your machine you can simply write npx minus P angular CLI version 17 and G and D are good to go this is why here I can write NG minus minus version and I'm getting here a question do I really want to install this package I'm hitting here yes and I'm waiting for its installation as you can see here we are getting an error you need to specify a command before moving on and we can use minus minus help so here we have NG help but actually in G minus minus version command does not exist we can write here in G version and then it will work just fine as you can see here that we have a version angular CLI 15 we have node 16 this is what I have installed and these are our packages so on the next step here will be to generate our angular project and as you can see here the command is engine you and the name of the project so in my case here it will be just in G then you and here is the name and as we're implementing a clone of medium let's name it medium clone underscore angular I'm hitting here enter and we're getting some questions do we want to add angular routing yes sure we need that what style sheet format we want to use I will take here CSS because it doesn't really matter we won't write any CSS at all we will take already existing CSS and use already existing API and our full Focus will be on learning angular as you can see here all packages were installed successfully at the end I'm getting a hint regarding a master Branch but it is not interesting for us at all but now what we can do we can jump inside medium clone angular and as you can see here are all files that were generated and here we have all our files and inside our package Json we can see what command we must use in order to start our project this is by here will be npm run style and we're good to go as you can see we didn't get any errors and we can open now our project on localhost for 1200 and here is how it looks in browser we have here a top bar and some content regarding documentation and what to do next which means our project was generated just fine but we must clean the whole project because we need all that stuff that you can see here this is where let's jump inside our project and here I want to open source app and here we have quite a lot of files like routine component CSS HTML spec and we don't need a lot of that for example here I want to remove app components back completely because we don't need it also we don't need app component CSS but now we must jump inside a component yes and here remove our style URLs because we removed the CSS file also we don't need here this title so let's remove this and let's jump inside our app component HTML as you can see here we have lots of styles and lots of markup I really want to remove everything except of the last line and the last line is router Outlet this is exactly where all our routing will be rendered we will talk about it later what we can do here on the top we can create just a simple div and right hand side app is running so we can see that we are clean let's check if it's working I'm reloading the page and we're getting app is running which means we successfully cleaned our application but it is still not enough as you can see here we have app module and depth component and if you don't know inside angular we have two different ways of creating projects previously we always have just modules and components this is where here we have a module and depth component and if we are creating new feature you will typically create some module for example hours module and then you will render inside some components maybe register component or login component but not so long ago inside angular Standalone components were introduced what does it mean now modules and G modules are optional which actually means we can create new features just with components without using modules and it takes much less code to create features this is why we will fully omit modules that were previously inside angular and just create the whole project with Standalone components which brings us back to our project our project is still generated with engine modules in mind this is why here we have this app module where we have a declaration of app component but what we want to do now we want to remove app module completely because we don't want to have any modules inside our application instead we will have two different things first of all we must update our main tiers because here we used platform browser Dynamic bootstrap module this is exactly what we used previously to create an application and provide here a module but now we are creating things differently with Standalone components so I want to remove everything from here and write bootstrap application and as you can see now we're providing result component inside and not a module and our root component will be our app component and the second parameter we will provide a lot of options but most often we will provide here just providers I will leave it as an empty array and we will write lots of stuff here later our next step will be to update our app component so I'm jumping inside source app and here we have app component this is totally fine but to make it Standalone we must have just a single property which is called Standalone and we must set it to true now this component can exist without a module this is exactly the purpose as you can see here inside console we're getting an error inside the component HTML we used router Outlet just to remind here inside HTML will left router outlet and we're getting an error that this element is not included and angular doesn't know what is it this is why in order to fix it we must jump back inside app and component yes and here we're adding Imports and inside an array we just create router Outlet as you can see now we don't have any errors inside console because we injected here router outlet and if you worked with angular previously you can't remember that we have modules and components and inside modules we defined inputs there were all our dependencies of the module now we have the Standalone components which are playing the same row Standalone component is simply a mix of module and component this is why here we're writing some stuff which is related to component but we also write inverse which were related previously to the module which actually means by writing all dependencies of our component inside Imports property and in this case here it is just router Outlet as you can see in browser we don't have any errors and our application is still running but now it is fully prepared to start developing in the new angular way [Music] in this video you will learn why we must choose NG rigs for our project as a state management tool I am sorry for Interruption but I just want to let you know that I have lots of advanced courses on different web Technologies where we create real applications and prepare for the interviews you can find the link in the description box below and just to remind you inside the angular we doesn't have a lot of things to manage our state we have just components or we have Services if we want to share some stuff between the services for example here in the official angular IO we can see the example of hero service we can store there are some variables we can inject inside different things and we can create methods that we can use from any place just because our service is shareable the main problem here is that all our services don't have any strict rules but we're writing inside or how they are working which essentially means all our angular code is just some properties inside components some Properties or methods inside services and then somehow we're reusing this stuff across the application it is not scalable it is not suitable for a big team and it is really hard to develop angular project of medium or large size this way this is where we have a solution which is called Redux and this is a predictable State container for JavaScript applications it is not super clear line but essentially this is a global state of data which is outside of your framework and you can just in a strict way use it it is suitable for any framework like react angular or view doesn't matter what even playing JavaScript would go and it is extremely popular nowadays and essentially every single framework we're using with it but inside angular we are not using redex directly as it is we're using NG rigs here is an official website to implement it correctly for angular it simplifies our life a lot and it is implementing Redux in angular Bay so here essentially is everything that you need to know regarding and share risks it is the framework or a bunch of libraries to build reactive applications in angular we can create Global State local state we can make side effects with clear component architecture we have entity collection manager it works with angular router and we can easily debug our state which actually means in geurx is a must for medium or huge applications but actually previously I got lots of comments I don't need NJ rigs I am quite fine with just components and Services I can just call HTTP and it works you're totally fine and it will work if you're working alone on a small project but for teams of several people it is not that suitable and if we are talking about big companies where you want to hire new people which must understand angular and obviously your State Management it is much easier to work if everything is strict and is written in the same way the main problem with Redux and danger rigs it is quite a lot of boilerplate to ride but it is a price that you must pay in order to get all its benefits [Music] in this video I want to talk about project structure for our application so what we are implementing here is a project which is called real world and you can see it here on the GitHub go things to real world the main idea is that people are building the same projects with different Technologies on the back end and on the front end they are using different Frameworks and here we get out of the box prepared CSS files and we're just focusing on building our project with angular the most important page first here is an API spec we can open it and check here on the left you can see different endpoints that we can use in order to communicate with all of the prepared fast API on the public server and we will talk about API in the later videos but here you can see some requests for example we will do a request to log in a user with Slash API users login and this is our body so if you don't know what format to provide or what you will get back here it is all written down the response format error handling and all that we need additionally to that here is the project where on the example of the project angular real world layer and here first of all we see global feed this is the list of our items here we have pagination on the bottom we can jump between Pages we have popular tags on the right these are predefined tags they are not text that you can create yourself here we can click on some popular tags and get in this section additionally to that we can like a post we can jump inside this post to check it we can also create a new post here we can click new article provide some information and if we don't provide information then we get some error messages and our article was created so we have lots of features like in real project for example registration login authentication of the user with local storage token making a pair request routing creating feed creating pagination like in disliking articles and much much more the question is how we can organize all this stuff correctly to make it scalable and here let's try to Define our structure on a basic level so it will be easier to understand how we will accomplish everything first of all we have main TS this is our entry point and we also have an app folder and I Mark all folders with Slash so you can understand it better if by implementing some feature for example a global feed then here will be slash Global feed folder you can name it a feature folder a module folder but essentially this is some component which is going together with routing and inside here we will have globalfeit dot rounds and it is important to understand previously inside angular we had modules and entry point in our feature or module was always modules of globalfeit dot module and then additionally here we will create a folder with components and here we will render all components that we need but here we are creating Standalone components and we want to make all our routes lazy loaded this is why here we will define global feed routes and just from the beginning I want to tell you if you don't understand everything that I am telling you in this video this is totally fine you can later return when you progress with the course and check if you understood everything correctly so we created here a global feed feature here is our Global feed route and here inside we can generate some components for example here we create a component Global feed and we can create here more components if we need to now let's say that we want to create a single article page this is by here we will create an article folder and here we must Define article dot rounds because we are writing everything in the same way now inside here we will have components just like inside Global field it but additionally here we may have a store folder and this is a part which is related to ngrex it may be possible that we have just a feature with components without store and it may be more complex with the store inside and here on the bottom we will have app routes which will manage all our routes across the application and here we can create as many features as we want but additionally to that we want to share some stuff between different features this is why here we will create shared and here we can create something which is shareable for example let's say between different features we have a shared data type then here we will create a types folder and create here A type for example article Dot interface.ts and additionally here we can create inside article also types and then here we put all our types which are not shared they are just used inside our article and the same goes with services for example here are some shareable services and maybe article dot service dot yes but if we have some Services which are not shareable then here we will create Services folder and we can put any service that we want here for example article service dot yes this service won't be shareable this service will be shareable because it is in shared folder additionally to that we will have a shareable components this is by here inside shed we're creating components so for example here we can say that we have a backend Azure messages component and what does it mean this is just a component so backend error message is Dot component.ts and also HTML the entry point inside this backend error messages is not a route it is a component by that because it is shareable it is not tied to the route like features here these features can't exist without routing they can can be initialized only through the routing but additionally to that we can create our component more complex for example let's say we have a shareable component popular tanks and here we can Define popular text stored component.ts but also we can Define here types which are not shareable they are just for popular tags then slash store this is into your rigs for popular text and maybe Services which are services for popular tags so this structure is extremely flexible for medium and even large applications and this is exactly what we will use inside the scores [Music] in this video you will learn what is prettier and why do you need to install it at all and actually pretty is not a mandatory tool to start developing angular application but this is a tool that I am using more than 5 years already and it simplifies writing code a lot so what is prettier as you can see here on the official website this is an opinionated code formatted which essentially means you simply install it you almost can't configure it and you are getting prettified code out of the box every single time when you are saving your file which actually means you don't spend time to intend your code you simply write it how you know it and then you just click command s and the whole code is pretty fine it is even more important when you are working with several developers and you want to see the code in the same way and here is a playground on the website you can see on the left not prettified code and on the right prettified code and obviously it is much easier to read now the question is how to install pretier you must install it together with your editor I highly recommend you if you don't have a preferable Editor to use vs code or Visual Studio code this is the most popular editor in the world for writing JavaScript and typescript and there you can install a plugin which is called prettier and it will prettify your code automatically I am not using this code myself but veeam but I also installed protea plugin what we want to do now we want to create a configuration file for pre-tier this is by in the root of our folder I am creating dot protea RC and inside I am paste in such config as you can see this is the object tablets means that we want to intend our code with two spaces at the beginning single quote means that all our strings will be written in a single quote and not in double quotes print width is the maximum width on the screen after which your code will be intended it 80 is a default preference to make it treatable on a smaller screens bracket spacing false means that you won't have spacing inside the object and the last one is semi-false which means semicolon false I prefer in my projects to not use semicolon at the end of every single line it makes code more readable but if you want to put semicolons this is totally fine simply change this configuration to true and you're good to go now let's have a look how pretty is working I want to jump in Source app and here we have our app component as you can see the whole code is already intended but here we have for example spaces inside our objects I'm just saving this file and as you can see this space is again now our objects don't have spaces additionally to that if I will break an intendation inside my file and for example here inside array and then after this just save a file as you can see voila everything is nicely intended and we don't need to spend time on Indonesian [Music] in this video I want to talk about language server what does it mean essentially when we're writing angular we're writing typescript and it is not comfortable to work with typescript without Auto Import autocomplete and type checking this is why in order to have all the stuff you must have a language server if you are using my recommendation and your editor is vs code which you can see here you have Auto Import and autocomplete and checking of the typings out of the box you don't even need to install anything but if you have some other editor then you must install some plugin which is typically code like typescript server or maybe language server for typescript in order to bring this support to your editor and this is how it looks like as you can see here I am back inside app component yes and let's say that we're removing here import app component and we just showed component as you can see this thread message is exactly the error from language server which actually means language survey is just a typescript server which is running additionally for our project and it shows all messages for us inside the editor in this case here where Gaden cannot find name component did you mean app component obviously we didn't but what we want to do we want to Auto input here component on the top and it is extremely useful because we will import lots and lots of stuff but don't want to type every single input by hand because in this case we must remember from what package this simple is coming is it really angular core or is it angular router or something different in case without the import you don't have such problem secondly is obviously autocomplete if we don't have here input and I'm just typing here component I am getting a huge auto complete list but what I can do I can select some stuff here and highlight it for example here I am selection component I didn't hit enter but on the right you can see the description what is component from what package it is coming and what it does and it helps tremendously during development so here I am hitting enter again and we're getting this autocomplete and the last thing that we want to use from typescript server is type checking which actually means here we can hover on the component and check what it does and as you can see here we see that this is a component and how it works if we will Define here a variable for example foom which is a full inside our app component you can also highlight here our property and we see that this is a property full inside our app component and the data type is stream this is also extremely important to know with what types you are working and why you get some error [Music] in this video I want to talk about our API and as I already told you we're using real world project and the main idea is that inside we already get an API and CSS which means we won't spend any time on implementing this stuff as you can see here I opened the link https api.trailworld.io API articles and hear query parameters limit end of set and we are getting back a list of articles in the format which is specified inside real world IO the main point is that this is a public API which we will use for the whole application but here are some problems with public API which my students had first of all the list of the posts is being cleaned every single day but even until we Implement something inside our application you can simply jump to any public project like for example angular.trailworld.io and here you can sign up to create a new user and after this you can create for example a post or maybe you need to follow some other user you can simply jump here click on the user and follow this user this is totally doable until we will implement this functionality in our project another problem that a lot of students have they tried to register some email but it was already taken inside this public API they don't check your emails which actually means verification is not needed this is why any person can type any email and obviously when you will try to use their email it may be taken this is completely normal you can just take any email that you want and it will work and the last problem which is the biggest sometimes this public API is down which actually can happen because lots of different projects I use in the CPI and sometimes it just returns 500 or it is too slow or there is some problem but obviously you should not be stopped to do this course this is where you can set set up this API locally obviously this is more difficult than just use a perial world layer directly which is the public API but it is certainly doable because I prepared all files for you so first of all you must take an archive under this video there you have an additional repository with the API this is exactly this API that here we're getting as a public API the Second Step that you must do you must install on your machine Docker desktop and if you think now okay but it is really getting complicated I don't know what is stock this is totally fine it is just the easiest way to isolate project on your machine and make sure that it will run smoothly without any problems before docking lots of students had problems with installations with different dependencies but after Docker everything is running smoothly so here you just need to install Docker desktop it is working on any operational system and this is how it looks like when it is running the most important but here it must be green on the left it means that your docky is working and here obviously you will have the empty list and not like my list so here is the project that you must download from the source code of this video if you want to set up a locally type obviously you only need to set up a local API if you have some problems with public API and you can't proceed with the course so here is this repository and we just need to run two commands first of all Docker Dash compose build and this command Docker compose is available for you after you install Docker desktop I'm hitting here and and I must wait until Docker downloads all dependencies and prepares the container as you can see everything is finished and now we must run one more command which is stalker compose not build but up and it will be a hanging process of your API and you should not stop it which actually means you must run your API in power parallel with developing front-end as you can see here we're getting an answer that everything is started and our server is there this is right here inside browser you can open now localhost 3000 slash API slash articles and we're getting here a list of Articles which were generated for us and the whole API is exactly the same API like the public API and you can use it if something is not working inside public API [Music] and the last thing that I want to tell you before we will start implementing our project is the importance of strict rules as you can see here inside our project we have this config.json and we have lots of different rules here the most important rule here is strict true it makes how a typescript strict and this is a good thing because you will find problems in transpiling time and not in runtime or in production running website additionally to that you can disable quite a lot of stuff if it will go after strict room actually strict true is a group of rules which makes your application strict and you can disable every single row obviously I highly recommend you to never disable these rules because it doesn't make any sense typically beginner developers just liken the knowledge to fix their typescript problem and then they simply disable the error but it won't fix your problem if you will just disable the error you will simply not see the error and your website will kind of work but then at some point you will have a problem which actually means strict false is bad disabling of strict rules is also bad using typescript with any is also bad if you are writing it all over the place you should never fix your typescript code just by removing the data type and referring to it as any then your typescript won't be bulletproof like it was before it will be just like a house with holes in it [Music] in this video we start implementing our project and first of all we will do a register page what is it as you can see here I can jump inside angular real world your slash register and this is how a page will look like so we have standard markup with three inputs username email password as you can see the button is disabled but if we will type something doesn't matter if it is correct or not we will just sign up if for example email is already registered or username is already used we will get here validation on the top as you can see here I clicked sign up and I'm getting a message username has already been taken so let's change this out click sign up and now we're redirected inside our feed and we are logged in so the goal of this video is to create our register component and bind the router correctly and in order to do that I want to remind you how we structure our application inside source app we have just an app component here would want to create a register page which essentially means by creating a new feature we could create just register folder here but later we will also have login and a lot of stuff which is related to the current user like for example authentication are we authorized or not log out and much much more this is why here I want to register a new feature house where inside we will create everything so here I want to create new folder house and inside I want to create house Dot routes.ts and just to remind you how throughout is an entry point to access register and login page why is that because essentially our features can't exist without a route now inside our app Shard I want to create new folder and name it components this is where all our components which are related to outs feature will be situated and in our case it is register and Later login this is why here I want to create new folder register and inside we just need two files register Dot component.ts and register.component.html so let's write inside HTML file just register page without any markup so we can check if it's working at all now inside our register component we want to register in your component decorator and we must provide Insight first of all our selector and actually here you typically would write something like register but actually it makes a lot of sense to prefix all our components somehow uniquely because if you are using some Library maybe material then you will get ml prefix inside your application and to distinguish easily between different libraries and your own components it makes a lot of sense to prefix all your selectors and we're creating the project which is named medium clone this is why all my prefixes will be MC Dash and then the name of the selector in this case we can see okay we have MC prefix this is our own selector after this we must provide here template here row which we just created and it is register component HTML and here we can export our new class which is a register component but it is not all we must in every single component write property Standalone True by that because we want to use all our components without modules so we successfully created our component now we must register it inside our our route this is by here what I want to do I want to export our register routes and in our case we will have just a single route but it may happen that your application is bigger and then you have more than one route and actually here I want to export to things register routes and login routes later but for now we have just registered routes and what is this this is a route array this is why here we are creating array and inside we want to register just a single object and here I want to provide path empty string and here a component in our case it will be register component now you might ask okay does this make any sense why the path here is an empty string but it is not register and actually this register route is our local isolated Insider feature routing this is not lazy loaded routing this is exactly what we want to load for our lazy loaded routing but our routing will be specified inside app shout yes this is why we must create Now app routes yes and they will be inside source app and hereby creating app routes as you can see previously we had app routing module TS I will remove this file completely we don't need it anymore this is our only source of Truth where we're registering all our routes what we wanted to hear we want just to export our app routes and this is our show Ray and here inside we're providing exactly objects with our pages and in our case here we will create a path register and here now we want to use lower children not a component but lower children why is that law children means that we want to Lazy load it so Lord children is a property and here we must return a function and here we are using word input and inside we must provide a lazy loaded path in our case it is Source app here we have house and then our shrouds but inside here we want to resolve correct routes after we lower this this is why here then and essentially we're getting a module back and we can read m dot register routes what this line is doing we are saying okay we want to Lazy load this ours routes and in our case our route is like previously we had a module and inside the South route we're reading register routes that we just created just to remember mind you here the path is empty because here we specified a path outside and this code must load for us register out let's check this out we must jump inside main TS and as you can see here we have providers but we didn't use routes at all so what we want to write inside providers is provide router and inside we want to provide our app shouts that we just created which actually means this code will load our app shout and after this approach we'll list your load all our links as you can see here we don't have any errors so let's check it in browser here we are in app shining everything is fine but I want to write here slash register and as you can see here we still have app is running this is our layout but also we can see here register page this is exactly the text that we wrote here inside register component which actually means our register page is successfully loaded and what is more important it is laser lighted here inside Network we can check exactly that as you can see I am here again on the home page and then clicking on register link and here what was loaded is this file Source app out routes and this is exactly our routing where inside everything is bundled only in this file which actually means lazy loading out of the box helps us to split our application and make every single chunk smaller and our application faster [Music] in this video we will Implement markup for our register page I am sorry for Interruption but I just wanted to let you know that only 20 of the people who watch my videos are subscribed to the channel if you really want to continue getting videos and support my channel consider subscribing it helps a lot and as you can see here I am again on angular real world dios slash register and here inside you can see all the elements of this page so we have class like hours page containing page row and so on and so on and essentially these are all prepared classes and prepared markup so we are focusing on the framework like angular and not on writing markup or css and a lot of students asked me why the CSS and HTML are not written in a perfect way because we are getting it out of the box and we are not creating it from scratch with that being said let's create markup for our register page this is why I'm Champion inside app house components register register component yes here we don't need this text but we are starting with Steve class house page then inside we're creating div with class container Space page after this we have a div with class row and inside row we have a div with last column md6 offset md3 and column access 12. this is exactly our centered form now here we must create H1 tag with class text excess Center and inside I am writing sign up after our H1 we have a P tag with class text excess Center and here inside we have a link to our login page this is why here will be a router link slash login and inside we will write have an account after our P tag we must render our validation errors but we didn't Implement them yet this is why I will simply write backend errors here and later in exactly this placeboop will add them after our backend errors we must create our form and inside the form for every single input we have a field set with class form group let's close this field set and inside we will have an input with type text and class form control and form control large additionally to that we have a placeholder which is a username so this is exactly one field now I want to copy paste it twice because we also need not only username but email and password this is why the second field set will have a placeholder email and the last one here will be password but it is not enough that type here must also be password after all our field sets we want to create a submit button and here the type will be submit and the class will be button button large button primary and pull access right and inside this button we will write sign up as you can see in browser our markup is there but we don't have any CSS and this is totally normal because we didn't add CSS to our project in order to fix that I want to jump inside source and here we have index.html and here on the top in our head I want to paste these three links as you can see here first of all we have a link for demo production radio your slash main CSS this is the whole CSS for this project secondly we're adding here icon fund to have nice icons inside our application and the last one here is the font which is City Loom and this is the font which is used inside CSS of this project as you can see now in browser it looks completely different by getting all the Styles and we're getting exactly the same form like you saw inside angular real world they are so our markup is ready but now I want to create a form for our registration this is why let's jump back inside app house components register component TS and here what I want to do I want to use reactive forms in order to create a form and if you don't know reactive forms is the best possible variant to create forms inside angular but in order to create a form we must inject inside this component from Builder this is right here inside Constructor we're defining our form Builder or FB and this is our form Builder now here on the top I want to create our form and here we can use this dot FB dot non-nullable which means all our Fields inside form will always be defined dot group and here inside we must provide all our controls in our case it will be first of all username and this is an empty string after this we have an email it is also an empty string and the last one is password it is also an empty string this is totally fine but we can do better by that because actually inside reactive forms we are getting client validation and actually here instead of just a string we can set some validation rules for this field this is why here I am providing an array and initial value of the username will be an empty screen but as a second parameter I will write here validators Dot and here we have lots of different validators I want to use here required just like this and this is totally enough in this case here we are saying okay username field is required now we're doing exactly the same for email and password now let's bind this form to our markup this is right here inside our HTML we have a form and here we want to use form group and here inside from group we are providing our form but it is not all we also must create here on submit this is right here in G submit and here will be our function on submit which will be triggered when we're submit in our form so let's create here inside our TS file a new function on submit and what I want to do inside I want just to console log the value of our form this is by here let's try it form and we want to read here this form get row value but it is not all we must bind every single input to this object this is by here we must jump inside our markup and for the first input I will write here form control name and here we will have username and exactly the same we must do for every single field in this case here it will be an email and here it will be password so now all our inputs are binded correctly to our form we created this submit function which means we should not get any errors but we are getting them we're getting an error cannot bind to form group since it is not a known property of form and it happens because we didn't import here reactive forms and form group does not exist here this is why we must Define imports inside our register and here is our reactive forms module as you can see here the error is gone let's look in browser here is our form now let's try to write something inside this form I will type something in all three fields and hit sign up as you can see here inside console we're getting our form and all these values which actually means we successfully wrote markup for our registered page and also we created a form and binded it to all our inputs and we can read the value from the form [Music] in this video we will install and configure NJ rigs as you can see here I open the visual website of ngrx and now the main question is it really worth it to using gear rigs when we have in angular things like component HTTP service why do we need an additional library and actually the most basic code that you would write inside register component to register user is something like this this dot HTTP then maybe this is a post request on some slash register URL and you are provided inside this form dot getra value and after this you are using subscribe to make something when your request is successful why this code is problematic first of all it is super low level we're just using HTTP directly inside our component which means this request is tightly binded to our register component we can't reuse it in other places this is where you typically we're using Services inside angular and we can write here not this HTTP post but maybe just this dot register service and we are providing inside our form value this is totally fine and this is shareable but the main problem with Services is that they are still low level but the service this is just some object with properties and different methods and all developers can write it differently which actually means you don't have a solid structure you don't really know how all this data are working together you are just throw inside your services a bunch of functions a bunch of properties and you are just reusing them everywhere what we're getting from Redux or NGO rigs we're getting a strict structure of how all this stuff is working together additionally to that we're getting all our data in a single Global place which we can always see and debug with ease so let's look on this diagram sure it is looking difficult but let's start with the component so hereby inside hours register component and when we want to do some changes for example users submitted our form we typically want to trigger an action which actually means action is exactly what is happening this is one of the terms of ngrex what action does it changes the state and this reducer and store is exactly our Global State and when our state is changed then all our components who are subscribed to this state will be notified about State changes this is this part if you don't understand it fully don't worry you will see it on the real example this is the synchronous part we didn't talk about a pair toe but essentially our register action is an API code this is why we are getting here to effects and service and this service will trigger an API call to the API in a strict way which actually means we're using engineer rigs to have a strict way of implementing things and as you can see here on the left we have a lot lot of different libraries like in jurik store effect router store and so on and so on the core library is in jurik store and this is exactly what we want to install this is why I want to jump inside console and right here npm install and gear rigs store and I'm hitting enter so our package is successfully installed now let's look on the documentation here inside architecture of ngrx we have actions and you already know what is action this is something what happened for example use the started registration process and as you can see here the action interface is just a type inside which means this is just a string with some name like maybe registration or registration success this is how the object is typically looking like we have here type and this is our theipi login success from this we can know okay this sounds like a namespace for hours API and here this action is actually login success but this is just a string you can write here just four and it will work and here how we're creating actions we have a special function create action which helps us to create an action as you can see here we are providing a string inside this is the name of our action but additionally if we need to we can provide additional properties and we are providing them with props so in order to understand on the real example let's jump back to our code and we're here inside our feature and here I want to create the store folder and inside actions.ts now here inside we want to create our first action which will be registered this is where here we can write export const and as you can see here it is login in our case it will be register and we are calling here create action function from in Greek store now here inside SFS parameter we can just provide the name and here I want to write it like this in square bracket's house then space and and then register why I'm writing like this because essentially all our actions Furniture rigs are Global which means the whole application has the list of all the sections this is why they are unique which means if your name in your action like submit then you can't really use the same name in another feature this is where here we are using something like namespaces this is still just a string but we are prefixing it with this square bracket and the name of our feature and as I'm here now inside source app out so house feature I am writing inside out which actually means all actions which were writing for hours feature we need to prefix without now the question is how do we trigger our action and in order to do that we must jump in our component register component and here we want to trigger and submit our registration and in order to do that inside our Constructor we must inject store and this is exactly what we're getting from engineering store now here after our console log we can write at this store dot this page and this is exactly how we are doing it we're dispatching our actions and as you can see here we must provide an action inside in our case it will be registered that we just created inside the store and we should not forget route brackets as you can see here we are getting okay register is a typed action house register so this is exactly how you dispatch action so you notify NG risks that you made some changes or something happened but when we're looking in browser we're getting an error no provider for stop and this is completely valid we must register provider for NGO Rec store and we didn't do that this is why I will jump back inside our main TS inside source and here we have our providers now here we want to add one more which will be provide store without any parameters and this is exactly what we master in order to register store inside our NG rigs as you can see in browser we are not getting any errors now now let's jump on our slash register page and click here sign up as you can see we don't have any errors which means we triggered something but the main problem is that we don't see what we triggered because we didn't configure development tools yet in order to see all our actions but before we will do that I want to show you how to provide props inside our actions so as you can see here inside our register component we dispatched our register action but it doesn't make a lot of sense because we want to provide our form information inside our register action but the main problem is that we want to type it strictly and actually our register action is something which will be related to our API call because our registration must trigger an API call but if we will check our endpoint here we can see that for registration we will call literally baseless users with this body and as you can see this body is not looking like our form because we are packing all our form Fields inside user property this is why actually I want to create an additional interface exactly to Define how we're sending our register request this is why I will jump inside our house and create here types and here we can create a new file register request Dot interface.ts and actually this postfix request means that this is exactly the body of our request that we will provide for the API and here I want to create an interface register request interface and again for clarity we are post-fixing all our entities like component with work component service was worth service and the interface with word interface and now as you can see in documentation we must create user here is a user and we have inside three properties first of all email it is string then password it is also a string and the username is also a string so our register request is ready now I want to use it inside our actions so here we defined our action create action register but here now I want to provide props and props is the only way to provide some data inside our action but here we want to Define it correctly this is why we must Define props as an object and here we can create request which actually means we must pass an object with the property request and this is exactly our register request interface that we just created what does it mean we created an action with this name register and this section must get as a property an object with field request and it must be this register request interface if we're not providing it correctly then we will get a typescript error let's check this out inside our components register now this does doesn't work by that because expected one argument and I will try to write here just full and we will get an error argument of type string is not assignable to perimeter of type request register request interface and it is extremely important to write good typescript code because it will help us to make our application safe so now we know okay in this section we must provide this register request interface for our API this is by here we can prepare it we're preparing here request and we know that this is a register request interface now in order to get that we must create an object with property user and here we can just set this form get your value and in this case it is completely valid now here inside our register I can provide an object with request property and now we are not getting any errors because here we defined OK we're really giving this request in the correct format and we don't have any Earth as you can see here we don't have any errors anymore so now what we need to do we need to configure Dev tools for our NG rigs so we can see our action and all its props [Music] in this video we will install redex devtools which will help us to debug engineering store but before we will jump on installing it I want to show you one problem that we have as you can see here I opened our register page and as you can see here we have a link have an account but here it is not a link and actually this is not clear why because here we can see we used a router link and typically this is how we're creating links inside angular and we are not getting any errors which is super confusing and actually this is one of the problems with Standalone components in case with router link we're not getting any errors if we didn't inject it this is frustrating but in order to fix that we must inject it inside our component this is where here inside our inputs we can add router link as a module and this is the input which is needed to have a link as you can see here this is not just a text this is now a normal link which is working this is important to remember if you want to enable links inside your component you must inject trouter link to your component with that being said let's install now Redux devtools so why do we need it at all as we're working with NGO Rigs and Redux we want to see all our actions our state in a comfortable ways also read the devtools helps a lot to debug your application and even fix bugs without opening your code you can simply trigger some actions and see how they are changing your state so the first step that you must do you must Google Redix devtools and jump to Chrome extension because what you want to install first is Redux Chrome extension after installation we want to jump inside into your rigs to another library and here inside developer tools we have NG rigs store devtools this is exactly what we want to install as you can see here is the installation line this is just an additional Library so here I want to write npm installment style and Griggs store devtools now our package is successfully installed so let's look in the documentation here inside store devtools we have a setup that we need to but most importantly inside ngrx you always have two different sections you have a section with module approach and you have a section with Standalone approach here on the bottom as you can see we are interested in using the Standalone API because we don't have any modules and in order to use our Redux toolkit we must jump back inside source main TS and here add one more provider and here we want to create provide store devtools and inside we must write our configuration first of all max age as you can see this is the maximum amount of actions that we are storing we need this limitation for performance after this log only and by using log only if we're in production this is where here we're using is not development mode after this it is nice to use Auto pause true to avoid too many actions Trace Falls and Trace limit 75 so essentially this configuration is how I am using redox devtools in all my applications after this in browser we must hit this redx tab and you are getting this tab after you successfully installed this Chrome extension and here you will get the content only if you made this configuration for your application and here we see lots of stuff first of all we see here State and we can click on it and this is the state of our application as you can see we don't have any stage at all because we did not create it yet on the left here we see actions and here we can see just a single action in jiric store in it this is an automatic action of engineerix itself but here on the bottom now I want to click sign up and as you can see voila we're getting our action our register so we must click on it and here here on the right we can debug it by clicking on action here we can see that type this is the string that we're providing and here is our request and we can directly see all our properties that we are providing inside action and as you can see our action is looking exactly like we planned we have inside the request which is an object with user property and three Fields username email and password so this is exactly how we want to debug our Redux actions by using Redux Dev tools [Music] in this video I want to talk more regarding authentication interfaces just to remind you we already created an interface inside app house types register request and this is exactly our request for registration and why we created it at all we could just throw a bunch of data in the API and it would work but most importantly with the interface all developers can see what data we're writing inside why we're doing that at all additionally to that interface helps us to Define what data we have for example here I can write just request without an interface but it means that I can throw whatever inside this request it is not validated in this case but just in case with our action but why it is being validated inside our action only because we specified it as an interface for our request and we could write all these fields on the left just here it would work but it will be difficult to support this is my I highly recommend you always think about your application as a group of interfaces you must Define all your entities the relations between these entities this is why the next thing that I want to do is to create the interface for the current user and here as you can see in recommendation our registration returns for us a user and our get current user also returns fast the user and update current user also Returns the user which actually means it makes a lot of sense to create an interface because it will be reusable now the question is where we will created we could essentially create all our interfaces which are related to ours Inside Out types and simply reuse them everywhere but as I already said we want to make stuff shareable this is why here I want to create Source app shared folder because we want to put shared stuff inside our shared folder and here I want to create types folder and inside new interface current user interface yes and here what we can do we can jump inside our user to see all its properties so here let's define our interface and it is our current user interface don't forget a post fix so first of all here we are getting an email and it is a string after this we are getting a token this is also a string this is what we will use later follows indication then username it is also a stream we're getting biography it can be streamed on now by default and image it can also be streamed or now so we successfully created our current user interface and it is line now inside app share because we want to use it across the whole application [Music] in this video we must talk about engineering State and as I already told you injurick state is just a global object where we have all our data and inside our application we created a feature house this is by all properties which are related to authentication I want to store in a slice of this global object how we are doing that inside stop we are creating a new file and we can name it reducers dot yes but before we will start to write our reducer I want to create an additional interface for our state so I want to jump Inside Out types and create here our house State interface test which essentially means for every single slice of data or every single feature we will create a slice of State this is exactly it so here I want to create an interface out State interface and for now we will create here just a single property is submitting Boolean while do we need is submitting at all here we have the sign up button and we want to disable it at the moment when we're making an API call and where setting is submitting to true and when it is finished we're setting it back to false and by default it must be in false now let's jump back inside our store reducers so what is reducer talk this is just a function where inside we're defining how actions are changing our state as you can see here is the example we create here a reducer scoreboard and we are reacting here on different actions in this application we are getting an action home score a racecore reset score set score and so on and here we're updating our state with new data and additionally to that as you can see we are providing inside initial state so this is how we typically create reducers inside NG rigs but we can use a little bit of sugar to make it easier and write less boilerplate instead of create reducer we can use here create feature and here inside reducer I want to create alt feature and by using here a function create feature essentially this is just a sugar a round reducer and you will see it in a second but it allows us to write less code and first of all here we must provide a name typically it will be just a string which is the name of our feature in our case it will be out after this we must create reducer property and here we are writing exactly create reducer that you saw in documentation previously and inside here we must provide our initial state but we don't have one yet we must create it here on the top so here I want to Define property initial State and here we can use our interface that we just created this is our state interface and as you can see we're directly getting an error properties submitting is missing so we're fully covered with typescript we must set here default property is submitting to false now here in side or create reducer we are providing initial state that we just created and after this we're writing a bunch of on functions so on and something happened then we are doing something and just to remind you in our case we have just a single register action this is why here we can write on and provide inside register and this is our action and here is a second parameter we are getting access to our state and we want to update it so what we want to do here is spread State and update is submitting property and set it to true now let's talk about this code so you already understand we're defining here our feature with the name out and here we are Define and reduce them so here inside we're providing our initial State this is exactly the slice of data for our hours feature and here we are defining all possible ways to change our state and our first action here was register this is why we are writing here register action and this is the function how our register action will update our state now here is a super important part we can't mutate state that we're writing here so we can't write here state DOT property equals something this is strong because inside we have Redux and Redux and Redux devtools are working in a way where we're always returning the new state because this is how Redux Compares our All State and new state and understands that our state was changed which actually means here we will always write code in such way this construction simply returns a new state because here we returned a new object what we're doing inside we're spreading all properties of our state and here we are updating just a single property is submitting and don't worry if you are not understanding this code fully we will write it a lot of times and you will get a grasp on it so our feature is ready now I want to export some stuff from it this is why here on the bottom I will write expert const and I want to get some properties from our house feature and first of all here what we can get is a name and essentially name is our auth name and we want to export it to use it everywhere because this is our unique name to Define this slice of state and I want to name it out feature key because the expert name globally is not unique but ALS feature key is really unique and I want to name all our names of the features with the name of the feature then feature key and after this we want to export our reducer it was also created automatically but I want it without the name ALS reduce it by that because we want everything unique we don't want an input reducer this is not clear we want to see it as out reducer and the last thing that we need to do we want to register our reducer inside our project and for this I want to jump in Source main TS and here for example after provide so we can write provide State and inside provides State we're right into things first of all feature name in our case it will be ours feature key that we just get and here will be ours reducing and as you can see out feature key is just a constant out and those reduce is our function that we just created now let's jump in browser and check our state here we must click and Redux devtools on the state and as you can see it is not empty anymore here we are getting object out and this is exactly this reducer this slice of data that we created and inside we have we submit in false now here I want to click sign up and here as you can see we're getting our register action after this you can see that our state changed we're getting here is submitting true which actually means after every single action we can see changes in our state and additionally to that we can click on the difference and it shows what this section changes exactly inside of a global State and here we are changing is submitting from false to true and the last thing that I want to clarify is why we provided State here and essentially we have two different ways to create our state we're either created here by default like out for example or we are creating state only when we jump into that specific route which needs some slice of State for example let's say that we have a slice for a single article we won't have it here by default when we're on the register page because it is needed only on our single article and as our single article is lazy loaded we won't have engineering store by default there we will register it only when we're jumping to that specific route but it is not true about authentication because authentication is a shareable module which we will use everywhere across every single page because essentially every single page each wants to know if we're logged in or not this is why we're registering this feature in the main TS [Music] in this video we want to talk about selectors why is that because actually we already created actions and we created reducer for our state now we want somehow to get this data inside our component and inside engine rigs were typically doing it with the help of selectors this is why I want to jump inside app house store and here I want to create new file and call it selectors.ts first of all here we want to create a feature selector so we want to get all properties of our house feature this is by here I will write expert const select feature and here we know that we're getting State and this is the object with property out and the south is ALS State interface and here we want to return state DOT out so essentially this state is our Global State inside engineer Rigs and this select feature simply gets our out slice and now we want to create specific selector for our e-submitting property that we already have this is by here I will Define select is submitting and we're using here a function which is called create selector and it gets our property from the feature this is right here the first function will be select feature and secondly where I get an access to our state and we can get here state DOT is submitted and as you can see we are getting nice autocomplete so here we created selector to select a single property from our state how we can use it now we can jump back inside our component register register component and here we can get it so I want to Define here is submitting with dollar because we are getting our data as a stream and here I simply assign this dot store select and we want to right here select is submitting this is exactly the selector that we created but as you can see here we are now getting an error property as his mission in type empty object and we want to get ours our state interface and it happens because here inside our store we didn't Define our state so here we can write our object without property and it will be out State interface so now in Greeks knows what properties do we have inside our Global Engineering State this is where here this line is working and we can use a submitting now so what is a submitting dollar this is an observable of Boolean this is not simply a Boolean this is an observable which actually means we can subscribe to it and every single change that will happen in state will change this property this is why we can jump inside HTML and here on the top I want to Simply render this property where writing here is submitting with dollar and after this I want to resolve it with the usage of a sync we're getting an error no pipe found with the name async and you will get this error Lord because it means that you didn't inject common module inside your Standalone component this is why I want to jump inside our register component and here inside inputs I want to add common module as you can see here we are not getting an error anymore and here on the top you can see this app running and then false and this false is exactly this property that you can see inside State Inside Out is submitting false what we can do now we can click on our sign up and this will change this property inside state to true and as you can see here on the top this property was also updated inside our markup which actually means we can directly use it and in order to do that I can remove a submitting here and use it inside our button so I want to write here disabled when our is submitting with dollar a sync pipe is resolved to true as you can see it is green now I am clicking on this button and it is grayed out because it's submitting is true now and it is never coming back to false so this is exactly how selectors are working we are creating a selector and then in any place of our application we can select through the select or some data from the state and then use it inside our markup because this is just an observable with some data so this is how we're creating selectors but I don't recommend you to write selectors At All by that because we wrote lots of code which we can omit just because in Griggs is smart enough to generate for us this code which essentially means I showed you this just that you know how we're creating selectors but then you rigs can do it fast let's remove completely selectors TS and jump inside our reducer Cs and here we import it reducer out reducer but now what I want to input is Select and as you can see we are getting autocomplete with two things we can select the whole house State and we can select a submitted property and what I want to do I want to re-expert select is submitting and as you can see this is exactly the same selector that we just created but we're getting it out of the box if we're using not just create reducer but create feature because this create feature creates for us as fishy key a reducer and a bunch of selectors for all properties that we are getting in the state this is why we removed our selectors but inside components we can directly use it we don't need to import select the submitting from store selectors but from our reducers and it will still work in as it is because nothing is changing here the selector is simply already there as you can see by default our button is green I am clicking and the button is straight out so now you know how selectors are working inside in Greeks [Music] in this video we want to talk about Services why is that because we are talking about register page and register request and in order to register user we must make an API call with our firm data and essentially we have everything except of the service this is why in this video Let's create it and where we will put our service if we're talking about our hours feature we can create a folder with Services here and for now we have just a single service which will be ours service.ts and in order to register a service we're using a decorator injectable and after this we want to export our new class our service but it is not all we want to provide inside injectable and object which provided in root and this is the recommended approach from angular to register service directly inside root of our project in this case it will be available everywhere and essentially we already created everything that we need in order to create a registration method inside our types we have our register request and we have a current user this is exactly what we need for this this is by here I want to create a register method but what we want to use inside is HTTP this is why we must inject it here inside our Constructor with private HTTP and here we have HTTP client and as you can see here on the top HTTP client is being imported from angular common HTTP so our HTTP client there now we can create a register function so we're getting some data inside and this is exactly our register request interface and just to remind you inside our component register register component here we haven't submit and where dispatching here our register request with this data essentially this is just an object with field user and inside we have our form data this is exactly what we are getting here and backward to get observable of our current user interface and just to remind you here in the documentation we are making for registration a post request to slash API slash users with this data this is exactly what we specified no authentication required and it returns a user this is where here we wrote that we're returning an observable of current user by an observable because in HTTP request is always on task and it returns fast and observable so inside we must prepare a URL that we want to call this is by here let's create a URL and here we have https API real world iOS API and just to remind you here it is slash API slash users so here at the end we will have slash users just to remind you this is a public API if for some reason you set it up your local API then here you should not write a parallel wall layer but HTTP localhost 3000 slash API slash users so here we have our URL now here we can return this dot HTTP and we must make a post request and inside first of all we're providing our URL and secondly we're providing our data but as you can see we are getting an error because we must specify what we're getting back if we don't specify anything then HTTP says that we are getting back an object but our function here said that we are getting current user interface this is why here for the Post inside we must specify what we are getting back and actually we didn't create such interface here this is why I want to jump Inside Out types so the type that we want to create here is ours response dot interface dot TS and here you might ask okay but why we didn't create here a register response interface and it makes a lot of sense because in this case we have our body which is register request interface and our response which is register response interface but then main point is that all these requests like register login getting current user updating current user will return fast the same response this is why here I created it like auth response and this is the same response that we will get back everywhere not just for register this is by here I want to create a new interface and it is our auth response interface and what we're getting inside is a property user which is our current user interface that we already created which means our response is just a property user which is a current user now we can jump back inside our services our service and here we can Define that we are getting back our house response interface that we just created but we're still getting an error here that we are getting back our response interface and not current user as you can see here we Define that we want to get back a current user but our response is an object with property user which is the current user which essentially means that we must transform the result to get correct data back this is why here I will write pipe and inside map and this is exactly what we are using to transform the data in the Stream and here we have access for our response and I just want to return here response dot user as you can see here response is our auth response interface and user is our current user interface and we don't have any errors now because after we got our HTTP request we are mapping data inside with the pipe map construction so this is all good but we can make it better as you can see here we have recorded here the base URL inside register method which actually means we're creating a new method like login and we also will have code the URL there this is not cool and we might want to use different API URL for local development and for staging or production this is why this should go out of here to environment variables but unfortunately inside angular environment variables files were removed but as a lot of people were saying that they want some generator to generate them back we have it now this is why here we can use the command npx minus P again angular CLI 15 NG generate environments and what it does it creates just two files for production and local development and also update our angular Json as you can see here what it does it created first two files first of all Source environments environment yes and secondly Source environments environment development yes and also it updated angularjson to replace for production build this development file with production file now what we can do we can move this construction to our environment variable this is why here I want to jump back inside our source environments environment yes and in the both of this file I will create an API URL and just assign there this string so if for some reason you need later to update your URL for example for production you can just update it in this file and it will be automatically replaced by angular now we can jump back in our service and instead of this URL we can now use environment variable this is why here I can write environment dot API URL and we're concatenating it with Slash users in this case in every single method we can use our base URL from environment and not just her coded now the last thing that we need to do is check if our register method is working so we can jump back in our component register and here on submit I want to import inside our Constructor our house service and this is our our service that we just created and now here on submit we can use this dot our service dot register and we must provide side data and what is data this is our request this is by here we can just use request and just to test it I can write subscribe and here we're getting some response that I want to console log so here we will have our response that we can check and just to remind you we won't use our service like this we will use it latest range your rigs this is just for testing so we know that our service is working as you can see we don't have any errors let's jump to the browser and check if it's working so we must jump to slash register and we are getting an error no provider for HTTP client and it happens because we didn't configure HTTP inside our application we must jump inside source main TS and here we must create one more provider and it is provide HTTP client and we don't need to provide anything inside for now let's check again I am jumping to slash register and it works now we're not getting any error now I will type something which for sure does not exist in all three fields and hit sign up and as you can see here we are getting response and this is the response from the public API we are getting back an email image token and username and inside our Network you can see that we successfully made a request for API real world that your slushy Priceless users it was successful and here is our response which actually means our service is working just fine and we can use it the only thing that I want to do first of all I want to remove this service from here because we should not use it directly and secondly just to remind you when we were testing selectors we wrote here store and inside store out as we are now using selectors from the feature that was generated by NGO rigs we don't need to write this stuff even if we will remove this construction and just trade store our e-submitting selector is still working which actually means you can rate your code like this [Music] so you already understand the stand part of this diagram we have our component our component dispatches some action it goes to reduce it it updates our store and through selectors we are getting updates to all our components this is the part of ngrx which is synchronous and it works without effects essentially effects is not needed for synchronous actions inside NG rigs effects is an additional library for NG rigs in order to make for example API calls essentially you need effects when you have some long-term side effect operation like for example an API call so the example of typical usage would be a registration request which takes some time this is why we need three actions start success and failure and all these sections are still synchronous but some of the sections are being dispatched through effect later when our service is being called in inside effect and it may sound overwhelming this is why let's try to implement it on our own and our first step here will be to install effects library and we can do it with npm install and georex effect this is why I'm jumping in the console and I'm installing here NG rigs effects our next step here would be to jump and change our actions just to remind you inside store actions we have register action this is not enough for effects we typically need three actions as I already said start success and failure so our register is start we also want to create register success and register failure so you typically would need to copy paste this create action three times and right here register success and you are changing here stream to register success and then register failure and here register failure the main point is that this code can be a little bit better with some engineering sugar so instead of all this stuff what we can do we can create a group so here I want to create a new property and call it house actions and here inside we will have all our authentication actions at once and in order to do that we are using Create Action Group and inside we must provide an object first of all we have here source and the source is our house and what is this Source this is exactly this part this namespace that we showed in every single string now we don't need to do it by our own second Loop we want to create events and this is also an object and our first event here will be register and this is exactly what we wrote previously here so what we have here the key register this is this string that we wrote here and our value is props this is right here on the right we can just copy paste what we had here with props so this code is exactly the same like this code and now what we can do we can write out actions.register and this is exactly the same and when I check it here you can see that our action Creator is our register and inside we have our props with request but the main point is that we're writing a little bit less and all our actions are being organized in the same object for example here now we want to create our register success but the main problem is that we must write it as a string because we want to use a space inside and here is a value boom must Define what our register success will return fast just to remind you we are making an API call to register user and back we're getting current user this is why here we can Define our props and say that we will get back our current user let's try it current user and this is current user interface and here don't forget round brackets and the last one here is our register failure and for now we don't want to get anything back this is why I will write here empty props it means that we don't have any properties but just a type stream as you can see here we showed significantly less than we wrote here on the bottom this is why in the whole project we will always use create Action Group and not create action so here we have three our actions now we want to create an effect so here let's create a new file which will be effects TS and here we want to export a new effect which will be register effect and in order to create effect we are using Create effect function so just from the start I want to tell you that effects are extremely difficult to understand because they are written with Rick's chess and there are quite a lot of methods and calls inside to understand it from the first time but we will do it again and again and dollar effects will be written super similar this is by which time you will grasp how it works so inside effect we are getting several properties and here were assigned into them some default values first of all here we are getting access to our actions with staller and this is the stream with all actions that are happening in our application and here we are using word inject to inject them here and these are actions property the second thing that we need here is our our service and we need it here because we want to call our API service and register function with effect this is by here we can write our service and here we want to inject our our service that we created now inside our register effect we want to return actions with dollar dot pipe and just to remind you we're using pipe to group all our actions and now you must really pay attention to the round bracket as you can see here I have round brackets for effect and the first argument inside this effect is a function so all this stuff that we wrote here is the first argument so this is a function where inside we have different parameters like actions service and this function is returning fast and observable the second parameter here will be our options and here we always have an object with functional true because by writing our effect in a functional way now we use here actions pipe because with the pipe we can throw inside several ericsgis functions which will be applied to this stream and first of all here we want to apply of type y of type because we want to limit this action stream to just actions that we need and inside of type what we want to provide is our sections that we just created Dot and here we have access to all our actions register register failure register success but here we want to react to register which is the start of our registration process after this we're using switch map function which allows us to return a new observable and inside switch map were providing a function and inside the candy structure directly our property that we are getting which consists of type and request to get a request now what we want to do inside we want to call our our service this is why here I am returning our our service Dot and here we have our register function that we created previously and inside we must provide exactly the request from our action and here we also use pipe because we want to do some Transformations and inside pipe first of all we will have map because we want to map our data and as a result of successful registration we are getting our current user back and this is our current user interface and we want to return here house actions.register success and we want to provide inside an object with current user after our map we want to catch an error for now we are not interested but we're getting back because our failure was empty but later for sure to Implement backend errors we will use it this is by inside cachero what I want to do I want to return off and inside we're provided all sections dot register failure and we're just calling it and I know that for sure if you are seeing effects for the first time this code is mind-blowing for you but stay calm you will see this code again and again and now I just want to go through this code one more time so what is register effect this is some listener which listens to some action in our case here we're listening for Action register and when it happens somewhere inside our application so it was dispatched then we are doing all this stuff in order to use here actions we must inject them and also the same with our service when this register action happens we are coming to the switch map and what we're doing inside were calling our service register to make a registration call to they type if it was successful where come in here to map if it was fail then we're coming to catch inside map we're getting current user as a result and here we're returning our sections register success which is our action and you might say okay but why we didn't dispatch the section and actually effect will dispatch this action fast this is why we simply return it and the fact will call it inside our kachera in order to return our request we must wrap it with off and we're doing it always inside catch now let's check if we have some errors I'm jumping here and for sure we are getting errors inside our house storage users and here we are getting our errors from module action and it happens because our register is not there anymore because we used there a create Action Group this is why what we must do we must jump inside our reducers and instead of this code we want to get all the actions that we have now and now instead of register here were using out actions.register and this code stays exactly the same as you can see here we are getting exactly the same error inside our component this is where let's jump in component register and change it also so here on the top I want to write out actions from our actions and now here on the bottom we're dispatching our sections dot register as you can see now everything is green and we can proceed but essentially nothing will happen inside our application because we didn't register our effects and in the same way like without State we must register our effects in Source main TS why is that because this is something which must be available for us in the whole application because we are talking about our feature this is why in order to do that we must try it here provide effects and inside we're providing some effects so what we want to do here we want to import Star as house effects from and here we must write path to house store and here we have effects and now here inside our provide effects we must write out effects and this simple test STAR is extremely important if you will try to import here with the structure in register effect and just throw it inside it won't work it will work only with this syntax with star as effects that were providing inside inside provide effects so this line will initialize our listener at the beginning and now our effect will listen to our actions let's check this out we don't have any errors let's jump inside browser and check our application so what I want to do here I want to open our Redux because we want to see our actions I am now hitting sign up and as you can see here we are getting not just register action but also register failure action and it happens because our effect didn't API call and we are getting some warnings because they didn't provide any data and this is our HTTP call where we're getting that email can be blank so essentially effects now are using our service to make an API call and then dispatch some action later for us and now let's check if success is also working here I want to provide some username which does not exist and some email which does not exist and also some password I am hitting Here sign up and as you can see we are getting register and register success which is exactly what we wanted because we are making an API call it was successful and our effect dispatched for us and register success [Music] in this video we must make some updates to our NG Rec store Inside Out by that first of all as I already said we will get back in tears when we're just making a request and we're getting an error back as you can see here when we're getting an error it is 42 request you can see it here and inside preview we're getting our errors inside the object with Fields like email can be blank so what I want to do now I want to create an interface for our backend errors and I can say even more we will get back in theirs in exactly the same format for all creation of entities like for example creating of the article or log in in a user this is where we must go inside our project Source app shared types and here I want to create back-end errors dot interface.ts now inside we want to create an interface and it will be our backend errors interface and what it is this is just an object with some keys we don't know exactly what the skis are but we know they are strings and then as you can see here the values are an array of strings this is why here it will be key string and the value here will be array of string this is exactly what you can see here but without this errors property because we want to store backenders without it our next step here is to update our action because as you remember Inside Out store actions we didn't tell what we are getting inside failure action we're getting here empty props and this is not correct actually we want to get here back our validation errors this is why here let's say that we're getting back in errors and this is our backend errors interface that we just created which actually means we can't remove empty props here on the top additionally to that I want to update our state inside reducer we must jump inside types I'll State and for now we have just a submitted property and it is not enough when we are getting successful a user we want to store it inside this is why here we can write current user and it is our current user interface that we already have but by default it will be now or undefine it and we must talk about it why I'm writing here it like this at the beginning we don't have user at all this is why we will set it to undefine it but then after we will make an API call to know if we are logged in or not we either get back a current user interface or we don't get anything back and we know that we are not logged in this is why we want to distinguish between we didn't make a request yet this is undefined and we already made a request but we didn't get a user back and then it will be now this is why we have three states here and not two also here we need is loading property and the central group will need it later when we will have getting of the user and last one here is validation errors and this is exactly backenders that we just created in interface for and we want to store them inside state so we can render them inside component so what is validation errors this is either our backenders interface or now why now because by default we will set it to now as we don't have any validation errors and now we must update our reducer let's jump inside store reducers and first of all as you can see here our initial state is not correct where missing here is loading which we can set with false current user and by default it will be undefined and validation errors it will be now now just to remind you here we have just a single on Section which reacts on register and what is register this is starting of our API call to make a register request and here we are changing our state to is submitting true this is totally fine but I want to add here also validation errors Now by that because essentially when we have some validation errors and we are rendering them and after this we're clicking submit we want to remove them completely so they will be null and then later we will fill them with new validation errors now we must write exactly the same on but for our success when we're getting current user this is why I will copy paste fully this one and just change it here we want to react on alt actions.register success and we're not getting here only a state which is our current state but also an action and inside our action just to remind you you can see here we are getting register success and we're getting inside our current user this is by here what we want to do we want to set our isab meeting back to false and our current user that we have we want to set inside and this is action dot current user which actually means when we successfully registered we're setting is submitting to false and current user inside a current user property now let's do the same with our register failure this is why I will copy paste this code again we also need an action here and we want to set this submitting to false this is totally fine here must be register fail and here we want to save our validation errors and we will get them from action dot errors that were already defined and this is our backend errors interface additionally to that we can improve our experts here we're just exporting is submitting but we can also select here is loading select current user and select validation errors all this stuff we will use later in different components and last but not least we have an error as you can see here we are getting an error inside our effect because we did not provide anything inside register failure and this is run our register failure action wants to get back an errors property this is why we must go inside effects and as you can see here inside were getting an error so what we must do here we must get a natural response this is exactly what we are getting from the back end and this is HTTP Azure response and here inside register failure we want to set errors property and it will be error response door Azure dot errors and these dot errors is exactly that key that you saw in backend validation when we are making an API call let's check if it's working here what I want to do is jump inside our Redux this is our only source of check and what I want to do here I want just to sign up first of all as you can see here our sign up is not disabled anymore and it happens because here register failure happened and what it does here you can see the div which changed is submitting from True to false and we added here our validation errors with email can be blank this is by here inside our estate now we have a submitting false is loading false and we are getting here our validation errors where inside we have just an email with array can't be blank now let's try to register user correctly so here we are providing username then email that does not exist and some password I'm hitting Here sign up and we're getting register and register success and as you can see after register success we filled our property current user and now inside we have all needed information that we can use later across the whole application [Music] in this video we must Implement our backend error messages so how we can do that I am sorry for Interruption but I just want to let you know that I have a membership here on the channel that you can join to support me it will give you access to the new videos earlier emojis and prayer to replies to your comments just to remind you here on the top of our form we want to display our backend error messages and we'll do this saved them to our NG rigs so we can render them now but first of all how we can get them inside our component we can jump inside our register component and you already know how to do that the road here is submitting line like this to select select is submitting we can just copy paste it and write here backend errors with solar and select here not select the submitting but select validation errors after this we can simply get back in theirs with the sync and render them inside our component but just imagine if you have here not two properties but you are selecting like 10 or 20 of them then you are writing 20 lines of code and you must create 20 different properties and it is even worse inside the HTML because you have everywhere this is sync pipes that you are using for different things this is why it makes a lot of sense to to group all these selects with combine latest and it helps tremendously to scale your code indefinitely this is why what we want to do here we want to create a new data property with dollar and where sign here combined latest and if you don't know what combined latest does it simply resolves every single stream with the value which actually means we will have every single value from every single observable inside this data property directly like a local property and you will see it in a second first of all here I want to Define key is submitting and here what we want to do we want to paste this to select that we wrote here before after this we want to Define here backend errors and here we want to assign this to select select validation errors and now we don't need is submitting and backend errors at all because we're storing everything inside data dollar and as you can see here we are getting our data this is an an observable of the object with this submitting which is Boolean and backenders which is back in their interface or now and now we can easily use it inside our HTML here I want to jump in our HTML and I want to wrap the whole project within G container and actually this is exactly what we will do in every single component we're right in here in gef and here we're resolving data dollar with the sync pipe and by using keyword as data and what it does for this whole engine container block it will create a local property data which is our object and this is exactly the local property which is being resolved from our observable which actually means we are writing just a single async pipe for the whole component we won't have like hundreds of them and just to remind you here on the bottom where road is submitting dollar I think we don't need to do that anymore we can simply write here data Dot is submitting and this is it this is just a local property of data the same stuff is going with backend errors here what I want to do I want to create an additional component which will render backend errors because we want to render them in different places and it is for sure shareable this is where here we can create MC backend error messages and let's close it here it is MC backend error messages so first of all here we want to render this component only when our backend error messages are there which actually means they are not now this is why we must write here ngiv and check for data dot backend errors and if we have them then we want to pass them inside this is by here I want to create an input backend errors and this is data dot backend errors you can already see how easy we can use combine latest with a sync pipe to use all our observables as a local property now let's create our shareable error messages component so I will copy paste this selector and jump inside source app share and we don't have here components here this is why here we are creating components and here we will have all our shareable components and our first component here will be backend Azure messages and inside we will create two files backend error messages Dot component.ts and backend error messages dot component dot HTML now let's jump to the TS file and create our component and here first of all we must provide here the selector that we just created it is in see backend error messages and after this template URL it will be back in their messages component HTML and we should not forget that all our components as Standalone this is why we're providing Standalone true now here let's export our new class which will be backend error messages and inside this class as you already saw where getting our backend error messages this is why here we must Define an input and we are getting back-end errors and what is backenders this is backend errors interface that we created previously but here is the huge problem where getting an error that property backenders has no initialize and is not definitely assigned and essentially this is correct because this component can't really know if we provided some data to it or not which actually means this component is air option it will break if we didn't provide backend errors but here is an easy fix we can simply assign here as default value an empty object which actually means it won't break if we don't provide inside errors now what I want to do I want to convert our object with errors to the readable format now we have an object with keys like for example email and there's a value we have in Array with some errors like full or bar this is not comfortable to render this is where we want to convert this stuff to array with different strings for example here will be email and then the error message for example full space bar then we will have an error for example for username then here will be username and some Azure regarding username in this case it is much easier to render and this is exactly what user wants to see on the screen this is why in order to do that we must convert this backend errors this is by here I want to create error messages and this is exactly what we want to create this is an array of strings and by default it is an empty array now here we can Implement on init where inside we will make this conversion so here is in your needed and we want to create our error messages this is why we want to set inside this error messages object keys and what is object keys this is every single property that we are getting like for example email username or password and and here we are getting keys of this dot back and errors and we want to map through every single key and get access to the name and our name is a string now inside we want to join all our messages this is by here let's create a new property messages and just read these backenders name and it will give us back an array of strings and here we just want to make a join with the space so our messages as you can see here is just a string now here we want to return our name this is our field space and then our messages in this case inside error messages we're getting an array of strings now let's render our error messages we must jump inside HTML and simply create here UL with class error Dash messages and let's close this ul and inside we heavily where we want to have a loop this is by ng4 and we are looping to get an error message of our error messages that we just created and error message is just a string this is why we can simply render it on the screen let's check if we have any errors here as you can see we are getting them because MC backender messages is not a known element inside register component this is why we must jump back to our app house components register register component and here inside import we want to add our backend error messages that we just created and this is our component additionally to that as you can see I have several Imports which are not being used and I can remove them as you can see now we are getting an error regarding ng4 we used NG for Loop but we didn't import common module inside our backend messages component this is why we must jump back to our backend messages component and here we must make an import and inside import we are providing our common module as you can see now everything is green and we don't have any errors now let's click sign up and not fill anything and as you can see here on the top email can be blank was rendered and this is exactly our backend error messages because we read them from the state and just to remind you inside Redux we have the state and now inside our state we have this validation errors then we converted this object to array of strings and we rendered them here on the top now we just need to remove the string backend error messages we don't need it anymore so here I am removing backender messages and now our backend errors are rendered there [Music] in this video we want to save our token inside local storage what I am even talking about when we are making a register or login request we're getting back a Target and we can easily see it inside our interface inside types auth response we are getting back a user current user interface and inside here we have such string which is called token the main point is that after we logged in between page reloads Boop want to be locked in how we can do that we must save our token for example to local storage and then every single time when we are reloading the page and we are making new request we must attach this token to headers which actually means every single time when backend gets our API call it knows to which user our request belongs and then it understands okay we really can get this feed for example or we can create this article which actually means the goal of this video is to store the token after we got it from the back end so we can reuse it later and now you might ask okay what is the best place to do that and you should never do this inside reducers just to remind you our reducers is just changing of the state which is pure we don't have any side effects here and we should never make here some API calls or local storage usage and so on we must do all our side effects inside effects this is why we have effects and here we have our register effect and as you can see here we're returning our register success which actually means directly here before we return register success we can set our token to local storage and essentially we could just write here window dot local storage dot set item and here we want to set it to access token and as a value here we can provide current user dot token this is already enough but this is not not really reusable and this is why I want to create a shareable service which will be a persistent service that we can use across the whole application and it can work correctly with local storage even if we have some objects or some invalid data this is why here let's remove this line and create this persistent storage and that this service will be shareable and we can use it in different places to work with local storage I want to create it inside app shared and here I want to create services and inside here we want a new file persistence dot service dot yes and here inside as always we must provide an injectable and inside we want to add provided in root now here we must export our class which is persistence service and inside our class we need two methods set and get but we want to write track cage in each of them so they are bulletproof so here is our set and typically we have a key which is a string and we have some data and our data is unknown and we could essentially write here any but any is not that good in this case we don't know what data we're talking about this is why we're writing here unknown and it will return void now here we want to wrap our code with try and catch and if vacation and error we can simply log it inside this is by here console error Azure saving to local storage and here we want to see this error and inside try we want to set it by using local storage dot set item and here we are providing a key and there's a value we want to use Json stringify and data while we are doing that because sometimes our data can be an object a string a number we want to stringify it because in local storage we can save only strings so our set method is ready now let's create get method so here is get and we're getting typically something by key and here back we are getting unknown and inside we're doing just the same stuff we have tried and we have cage and here we want to catch an error and if we have an error then we can write console error error getting from local storage and inside our drive we want first of all to get a local storage item this is why here I will create a property local storage item and it is localstorage dot get item by the key that we provided and after this we want to check okay do we have a local storage item if yes then we want to parse it so here I will use Json parse and I'm providing inside our local storage item in another case I am returning now and you might ask okay why I created this additional property because essentially we must check if we have local storage item and if we're done then we don't need to apply Json Paris but we simply return now and as you can see here we are getting a warning that not all code paths return a value this is why here inside catch we must try to return and now in this case if we're getting an error we will still get a null back and our code won't break now let's use this persistent service Insider effect so I'm jumping back to store effects and now here we must inject it and in order to do that we just write comma persistence service equals and here will be inject and we're right in our persistent service that we just created now inside our map we can write persistent service dot set and our key will be access token and our data will be current user dot token and now exactly like this we can reuse persistent service across the whole application and it is bulletproof let's check if we have any errors everything is Green Let's jump to the browser and try to register user correctly so here is the username then some email and then password I'm hitting here say nap and we are getting successful registration now here we must jump to application and hear local storage and as you can see our access token was set to the local storage and now after page reload it is still set there and we can reuse it and the last thing that we are missing is redirect to the home page after successful registration and we can do it directly inside our effect so what we want to write here is one more effect this is where here I want to export const and here will be ready react after register effect and here we want to create effect just like we did previously so here we have our function and there's a second parameter we're providing functional true but also dispatch false and this dispatch false is important in this case while that because we don't want this effect to this page anything just to remind you here we returned register success and it was dispatched automatically but here we just want to make a redirect we don't need to dispatch anything so here inside round brackets we want to get access to our actions and here is previously we're using inject actions to get access to them after this we also need access to our router because we will use router to make redirect and here I will inject router and inside we want to return our stream this is by here actions pipe and here just like before we want off type and we are waiting here for Success this is by Aus action stored register success and after this we're using Tab and if you don't know what is step inside strip it simply means make me something this is kind of side effect inside the stream and here inside tab we can create a function which will make a router navigation so router Dot and here will be navigate by URL and we're providing inside slash which is our home URL and as you can see here I am getting an error cannot find name router and it happens because here I didn't put equal sign but just colon so now we are not getting any errors and what this effect does it listens for register success and when it happens it makes redirect to the home page and just to remind you this effect will be Auto registered while that because inside our source main we imported all our house effects here and we provided them inside provide effects this is why they all are registered out of the box let's jump in browser and try to register again I'm providing user email and password and I'm hitting sign up and as you can see username is already taken let's try again and we are being redirected to the home page which means our effect is working correctly and this was the end of the first chapter if you want to dive deeper in learning angular and injurex make sure to check the full course in the description box below

Channel: Monsterlessons Academy

Views: 22,818

Keywords:

Id: vcfZ0EQpYTA

Length: 130min 42sec (7842 seconds)

Published: Tue Aug 08 2023