Angular 14 full course 2022 for beginner

welcome to this amazing angular 14 full course this course is really amazing and we are going to create a normal bookshop it's not exactly fully functioning and everything it's just a demo thing which is going to help you to understand angular concepts easily we are focusing on the understanding concept not making our application perfect but what kind of application is this so we have a register button we have a login and we are using the firebase to store all our information about the users so if i go here on the firebase you can see get started i can go to our project angular project and on the authentication you can see we have new user sarthak bitfumes.com so let's use this user and the password and you can see the loading part and i am here on the bookshop i am logged in you can see the log out button and click on add to cart you can see the button change to remove from the cart and if i go on the cart these two books are here inside the cart i can click on log out and you can see i'm move redirected to login page and back with the login and register button not only that we have this form validation which is working absolutely fine and if something is not right that means form is invalid we are not submitting it a lot of other things we have a routing we can move from one page to another page like here login page bookshop this is all about routing and the best part is you can see this is actually deployed on firebase so firebase is hosting this application and i told you this is not 100 perfect but this is really 100 amazing application to learn the angular concepts so let's see what we have in this course concept by concept what's inside this course we are having a full list of amazing features of angular so we will start with what is angular and why we need it then we will start with a fresh application of angular and then understand the directory structure then we will delete some of the things and start with scratch and creating the module thing and everything manually then we will create the component from cli so first we learn how to create things manually then use the cli the command line thing then we will talk about the interpolation and after that we will talk about the property binding event binding and two-way binding after that we will see what is directives and what are the directives we are going to understand ngf ng4 and then we will understand about the pipes which is really great thing then we will use the style the css file to style the components and final amazing thing which is really really useful and you must learn it how to send the data from parent to child and how to send data from child to parent like i'm talking about the component the parent component to child component child component the parent component then we will see how we can listen for the custom event and what are the life cycle hooks of a component component created destroyed and other things after that we will also going to see how to create the service what is service what is dependency injection and how to create a custom module then we will see how to use the service to have the state management thing and finally we will add the routing to have different different page and navigate through the pages for better look we will use the tailwind css for the styling and after that we will going to see how we can login create a login route and register route and then we will use the angular form over that forms to create some angular connection between the login form and the data where we are going to have the form data okay after that we will see how to do some validations and very important firebase authentication firebase registration both we will do on this level but after that it's very important for checking if user is logged in or not and if user is really logged in then we we need to log out also we need to protect some up some of the route so that only authenticated or logged in user can visit that but no it's not the end because we will finish this application by deploying the angular application to firebase and then you will be able to see and you have already seen what is the url so you can check out that manually whoa so let's start with the first thing which is really great what is angular let's first talk about what is angular so for angular angular is a platform and framework for building single page client application using html and type script the real amazing thing is type script angular is written in typescript and it uses full power of typescript whether it is decorator types and every other higher level concept of typescript then we can also see that angular is a component based framework for building scalable web application everything is a component in angular so we work on the component and component related things like html thing like template styling services module everything it include form routing form management client side communication and much more things angular a suit of developer tool to help you develop build test update your good that means everything is included in angular you don't have to go anywhere else routing is available testing is available everything is available inside the angular so let's talk about why we need angular but why we choose angular okay so angular is supported by google that means a big company is using it developing it updating it so you will have no tension about the about the updates the new features everything will be managed by google it's using typescript which is the real power of javascript and typescript is the future remember this thing it's a declarative ui that means every ui is declared you can work on a specific ui point which is called components then we can see it's having support of pwa and spa what is spa single page application what is pwa progressive web app these are high-level concept of web application which is obviously included it's a simplified mvc pattern mvc means model view and controller so we create models we create views we create controller or in this case model view component the code consistency and easy testing i told you the angular is a package of everything so code consistency every where you are using a similar kind of code consistent cost code everywhere so you don't have to learn higher level concept every time and easy testing everything is there testing is also included so let's work on the new project now to get started with angular that means creating a new project we need to visit angular dot io this is a website for this angular and first you can go to the docs this is absolutely important and then go to the getting started inside this you will find this getting started but this is giving you another starting system which is from stack blitz but we are interested in setting up in local development so let's go to the setup from this you can see we have this tab called setup inside that we can see we have this command which is actually going to install the angular cli the command line interface in our local system so first let's click on this button to copy this and now it has copied go to your terminal and i am on the angular directory paste it and hit enter actually it doesn't matter where you are in which directory because it's saying that it is a global installation that means it's a global npm installation you can access it from anywhere just after installing this you will see that now you have this ng command working since we have nothing here it's giving you this kind of information which is saying the node.js version detected and some other information but we can search for version and it's still giving the same thing okay now what next we need to do a new project so just after having the ng installed in your system you can just say ng then new and then your project name so before doing the ng new let me give you this example so if you say n g help hyphen half and help you will get a lot of information about the ng commands you can use so we can see that we have a lot of other command but first one is ad collection analytics build caching compilation completion config deploy but we are interested in this new one so ng new and the name so it says that create a new angular workspace basically creating a new angular project okay so let's zoom out and now say ng new and project name is my app so let's hit enter and now it says that would you like to enable auto completion this will set up your terminal so processing tab pressing tab while angular cli will show the options obviously this looks like a good thing for me so i will say yes with a y capital y hit enter now another question it says would you like to share anonymous data obviously no so press n and now finally it says would you like to add angular routing i would say yes so have yes then it says which style sheet you want like css scss sas or less so in my opinion css is okay once you define all these things once you answer all these question you will see lot of things have created for you but after that it is now installing npm and this is a normal process if you are familiar with the javascript projects because javascript has a lot of dependencies and we actually install all these dependencies through npm now it is done and now it's for some reason it's asking for password which is uh in my case uh different thing not for you it is just for me so we have done that and now if i see my app is there this is the project we have just created so let's cd into my app and then open this with code like vs code vs code is the default editor i always use it's really amazing and you can see all of these things are here for us so what you have to do first whenever you have any javascript project whether it's a node or front end anything you have the package.json and you need to go on the scripts section because this tells you how you can get started with the server the local server now we have this start so we can use the npm and we can say npm run start to run the local start and then we can also use the build but all these things you can see is done with the n g and we already have the ng so if i once again get the help for ng we can see that we have this ng serve which is actually used here so you have two option you can say ng serve and now it's going to build your project the angular project and finally after successful compilation and building process it will going to start your server locally on localhost 4200 so let's copy this and go to here localhost 4200 and boom congratulation the first ever angular project you have created is here and this is the default page given by the angular i told you there are a lot of options so instead of ng serve you can say npm run start and this is exactly doing the same thing behind the scene it's using the ng and but why we have this ng here if we have the ng in our command line so everything is working same with the npm run start but you can see this ng is locally locally means on the project but we also have this on globally on our system so that's two different thing this is option given so that by chance if you don't have ng globally installed then it will use the ng from your node module and you can see on the development dependencies we have angular cli included this means it doesn't matter if you have ng in your system or not your project will going to started with this command npm run start cool so we have successfully started using the angular the first landing page of angular is there but the question comes from where all these things are coming and what these directory structures are there let's understand in the next episode so now let's understand the directory structure and the files in our newly created angular application the very first thing i can see at the bottom is ts config file and ts stands for typescript as we know the angular is based on the type of script it's written in typoscriptive so that's why we need the ts config file but what is this ts config file a ts config file holds all the information or settings for the type script like if we want to compile on save we have res strict mode enable or not and many other things related to just for the typescript similar to that we also have typescript.app.config where we have the application related information then we have spec which is for testing related information so this is just for the config this is type script configuration for the application this is typescript configuration for our testing then obviously readme is just for information package.json is really important we have seen that we have some scripts but we also need some other libraries to get started with angular the very important one is this angular core then we have the angular common and some of other angular related things so we will check each and every one and why they have in later episode but some animation and routing we can just understand by their name so because we need to create our application in the development mode first so we also have some dev dependency that means when you work on when you create your application so first we need the type script because you know tab risk type script is only for the development it's only for the developer helpness or it makes developers life easy at the end everything is javascript so we just need the type script for the development purpose then some of the karma related thing for the testing we have a jasmine core jasmine types once again for the testing and remember we also have the angular cli which we can use by this ng command so these are the things inside the package.json and when we do the npm install here it will go and install both dev dependencies and the normal dependencies so this is for the package.json and once everything is installed the exact version will be lock in the lock file but we never touch this lock file and we only see and change something inside the package.json then we have testing related karma so for that we have some configurations then angular.json this file is also useful for the cli this actually tells our cli that where you need to generate some things so if i see this ng ng has a lot of command for generate so if i get help for ng generate you can see ng generate can generate lot of other thing inceptor library module pipe resolver service worker services everything but when we generate a new file where it should put so this angular.json file is going to explain each and everything for the cli once again we don't have to touch these things get ignored you know this is for editor configuration if you want some configuration related for the editor and browser list c uh list rc uh this is you can ignore totally but the real important file or real directory is this source directory where all the development happens that means all our component all our module template styles each and everything will be available here the environment thing is also here but you know any javascript project start from either from index.js or if you are on typescript then index.ts or here in our case it is start from main.ts and what this is doing this is first checking for the environment what kind of environment you have so how we can get the environment environment is inside this environment directory so we can have two different environment because in development we need some things to be available but on the production we don't want suppose we you want to check for you want to debug something you want to explore that debug you want to enable that debug thing but not on the production so that's why we have two different file and we can first check for the environment then we say platform browser dynamic dot bootstrap module that means how we can initiate the angular project that start with the app module and remember this thing angular is a modular framework that means everything in angular is a module so that's why we first start with app module but where this app module is it says that in the same directory but inside the app directory so you can see we have this app directory once i open this we have a lot of files we don't care about that for now but we are interested in this app.module.ts great so let's close this main.ts and then go to the app.module.ts because this is the file which is first loaded seems like a little complicated but what i can see if i remove each and everything it's just a normal javascript class which is exported here and this is how we can go on the main.ts and it is imported right here it's using this bracket curly bracket to import because we have not exported it as a default one if we do that we can simply remove this and you can see type of script is doing its job it's giving error it says that hey it's not a different it's not exported number so this is we can do but we can basically see that app module is just a class now if i just undo this we get lot of other things so here to explain you i can just remove these things and i can show you that to make this class as a module and once again we will see what exactly module is but to make a normal javascript class as a module we have to add this decorator now this decorator adds some metadata information to this class and now what is meta data information so basically saying this decorator tells to the angular what is the role of this app module so if i once again undo it has some object and inside this object we have some information what are the information first it has some declaration then we have import then we have a providers and finally we have a bootstrap let us start with the declaration now we know we started with main.ts which include the app module now app module also includes some of other things what are this first is app component now where is this app component app component is in the same directory so let's close this app module file and open this app component.ts file and if i look on this file if i remove each and everything from here once again this is just a normal javascript class exported here and imported inside the app module like here okay once again with the curly braces because it's just a normal export not a default and here we have some title is equal to my app as a string but once again it's just a normal class to make this as a component to add some metadata to this class or in other word to tell to the angular what is the role of this class we add a decorator called component this component decorator add the metadata to tell to the angular what is the role of this app component now once again this component also have some configuration inside the object we are defining what is the selector app root we will see what it is then we have a template url app.component.html and style url where is the style now let's talk about these two first first it says style url that means some of the css thing because it's given here and which is imported directly right here so you can see we have this app.component.ts which is empty now we have a template which is app.component.html so see three files all having app.component name but with different extension app.component app.component.html and app.component.css now on the html if we can go we find lot of information and i think this is the file which we really need remember we have started this server and we were worrying about from where this is coming so see my app is running let's copy this and see if this is available somewhere maybe i can just say my app it's not available here but app is running there oh i remember in our component we have defined title and title is my app and you can see inside this template which is app.component.html we are using this title just like here it is just like using the value of the variable title and app is running and if i say app is running from from bitfumes just like this and save this file open here and you can see instantly it is updated and reflected here that means we got how that page is coming page is coming from this app.comprehend app.component.html so if i remove everything and if i have a normal html and h1 tag welcome to angular course and save this file and you can see that is here if you want to add some styling you can go to the app.component and say h1 is having color of blue and yeah it's blue so i think you got the point like how we are doing things in angular but we are not done yet let's go to the app.component.ts and we can see we have this app hyphen root what is the role of this app selector now we know this thing is coming from app.component.html so this is exactly same but how this is connecting and if i see here the title is document but the title here is my app you can see this is the one this means this html is not applicable so if i remove this body and html tag if i just have the h1 then also it's doing the same so if i go and view page source in this page source and search for welcome i can't find so where exactly this is if you explore this thing you have a body inside the body we have this app root huh remember i i think i can understand this i have seen this app hyphen root oh i got the point remember our app.component.ts whoa app root is here so what happened is remember on the root of the source directory we have this index.html and this is the index.html which is actually running and that's why we have this my app so if i say title hyphen my app and save this file you will find that this is now changed to title hyphen my app and we are sure that this exactly html is responsible but what is this app root this is the component we have here and that's why this is the name we have given on this component app root if i say app my root and save this file go here you can see i'm having nothing here if i open the terminal you can see there is no problem but it just says hey i don't know what this app root is doing so i don't know how to render this component so angular is confused that app root is not available so i cannot show anything in your browser so what we have to do we have to go to the index.html and just change the name app root to app my root save this file and now we will see after refreshing we are back on the same exact thing so this means whatever you define here is exactly the same thing which is here so you got the point like how component is used so this component is used by this way there is another way you can just say div with the id of my root and now after that inside here you just need to say hey this should be hash my root and hash defining the id is this working okay i think i have to use something like this it's declared some error is here it is successful oh so that should be app root here and it is my route here so let's just change to app root now reload and yes it is here similar to that you can change it to class and then we just say dot and it is working here so what basically we are doing we are saying that either you can directly use the component something like this or you can mount the component inside a div called app root class and we said that selector is this thing okay so you can use anything but this is the real good power and convention is just like this so app root is here now we got the point like what component is doing it's just naming the selector and just adding the component having the s having the css file defining any variable then we have template which is just for the html dot scs dot css file obviously for the css then we have this spec.ts which is for testing and app dot module which is extremely important for the routing system okay so we got the point like what are these things but let's get back to app module here we just not have the declaration of app component we have some imports import for browser module and app routing module now app routing module we have just seen this is the file and this is a normal once again a normal javascript class app routing module and to make this class as a module as we know we need to add the ng module decorator so we have imported this inside the app module like here then browser module is helpful when you want to use lot of other angular related helpful classes or directives or bindings then finally we need to focus on the bootstrap now every angular component must have a root app module which is here called app.module now this app module is a root module so we need to define the bootstrap that means from where which component is the first ever component of the angular project so that's why only in the app module only in the root module we define the bootstrap not on any other module okay so this is all the explanation of app.module.ts now let's close this app directory and we have some other files which is like style.cs scss style.css this file is a global css setting and remember we also have the app.component.css this is just for this component not globally that means you can have h1 information h1 is styling for one component and h1 is styling for other component differently on their their respective css class but if you want to have a global css then you can put it here similar to that we have the test.ts file which is for testing polyfill for the browser informations and favicon for just the icon so we understand that how the project gets start it start from main.ts by loading the app module which is available inside the app directory and extremely important which is the root module every module is decorated with an ng module decorator with some other information similar to this we can define a component which is another class decorated with a component decorator with some information and similar to that we have a routing decorated with ng module because it's a routing module and other things what i'm going to do right now is a really crazy thing i'm going to remove each and every file from this app directory because it's always good to create something by hand to understand it fully we have this error which simply says that can't resolve app dot at module because app module is the root module which is and very important file and we have deleted everything from our app directory let's start with app.module because that is the entry point because that is inside the app main.ts now we need this app module so we just create app dot module dot ts and we can do that with a ng command also but for now we will see how we can do everything by hand remember everything is just a normal class so export class app module that's it by doing this we are making angular happy on this app module class and now we have another error this says that module build failed because this module we have created is missing from type script con compilation this means it says that you have a file you have a app module class but it's not a really angular module and how we can make this as a angular module remember we need to add a decorator called n g module and we just need to have this parenthesis also okay let's go to the browser and see what's happening this time it's not doing anything okay so we have defined it maybe i can restart this server and see if we are getting the same error and yeah so everything is fine no problem and we are getting this blank white page now why we are getting this because in our app module we are not defining any other component we are not defining where is our app root so for that we need to define the component now first here we can simply say declaration and inside an array i will say app component now we don't have the app component also let's create it so say app dot component dot ts the component will be the app.component.ts now once again it's going to be exported as class and the class name is simply app component and that's it so let's import this inside the app module and we are good to go let's go here and this time it says that hey the class app module is listed in the declaration is not a component and how angular no because angular can't find the decorator for this component so we need to say hey this is a component and call this decorator now it says that hey whenever you define a component you need at least one thing and what is that one property we need to define which is the selector so selector we can say is app root and once you do this you will see that we are getting another error it says that hey yes you have the selector but i can't find any template remember last time we saw that we had app.component.html but this time i will say template is an inline template so i will just say hey h1 hello template and close this h1 tag right here right now just save this file and go and see nothing is there it should be available but it's missing why because if you go on this app module remember we need to import one very important module which is called the browser module to have all the browser related information for the angular now i can say imports and then browser module and that's it save this file and let's try once again still we are not having it because we need to do the last thing and which is extremely important just for the root module which is bootstrap which is the bootstrap component which is the first ever component to load and when i say app component and if i go to the to the browser here we can see we have this app template hello template as the text coming from our template right here and similar to inline template you can also do the inline css so i need to say style i can say styles is h1 with color of blue once again and it says uh is not a type of string of array i can say styles yeah hello template is there cool so this is the way we can have this template and style but remember we can also create our own dedicated file for template and style so app.component.comnent.html fall for the style let's move this from here to here and then we need to say hey i need on the same app dot component dot html you can just define like this and then you can have this one from here and say that hey i need app dot component component dot component.css this is the class we have to create once again the file we have to create app.component.css paste this one here [Music] like here and app.component.css so maybe this should be the style url actually a little difference should be here and app.comprehend.html once you have this kind of information you need to fix it just by doing this so we can fix this by making this template as a template url and that's it we can also remove this cool so we see how we can create each and everything by our hand app module component template and now it's time to move forward in the angular now let's create another component and with this component we will show some data and we will also talk about the interpolation thing so first i will go and create a new component but how we can create a new component yes we can do that by hand but we also have our command line so when i say ng generate with the help i can see i have generate application class but we have the component so we can use this and after that we can provide the name so ng generate component and component name is books so let's create a books component hit enter and now you will see that here we have a new directory inside the app folder which is extremely important this is now books and here we have different thing app book.component.html for the template book.component.css for styling book.combrain.ts for all the component related thing like the selector where is the template where is the style url and this component is actually registered automatically get registered in our app module.ts remember we always need to add the component name in the declaration for the module so we only have single module we have not talked about multiple module we will that we will see that later but we only have one module so we need to add this module here okay so component is created we know how to call this component but where we can call it when we were looking at the app component we use this component here in the index dot html so can we do here like books like here if we do this let's check this out reload and it's not working it should show us this book works but it's not doing so what we can do we can actually leave this with only one component so we never again touch this index.html but now we will go to the app.com after this hello template this is the app.component i will say app books and this is the component selector app books now let's go here and this time you can see book works is here so this is the way we can create new component through the ng cli command line interface and we use it in any other component why we have able to use it here inside the app component because the component or i can say both component are defined on the same module okay so this is the thing now let's talk about some interpolation thing let's talk about the interpolation now by definition interpolation refers to embedding expression into markup for text yes this is confusing but basically it says you have to add some variable values in your template then use the interpolation thing and what is interpolation interpolation uses double curly braces as the delimiter that means you can use the double curly braces and the variable name in between to have the value of that in your template simple let's try that in real life so we have this app book component which is just showing the book works how this is showing because now we have this template books.component.html here we are showing this book now instead of this what i can say i can say book list or i can say simply programming book list and i call this with h2 and you can see quickly it has changed that's good now i want to show the book name here so it should be like name and then i want to show the author name like here so if i do this this is a interpolation using double curly braces in between that we are using the variable name is this going to work no it says the property name does not exist on the book component it says that it's not available on book component where we are we are on the template so we need to define these two properties inside the component which component obviously the book component because this is a book template go to the book component and where we can define inside the class so inside this class we can say hey name is going to be clean code okay and then author will be author i think i have actually opened all these books in my amazon so by robert c martin uncle bob and here we are like this okay so we have defined these two and then i saved this file go once again and yes you can see we have these two things let's add this in a list so here we are and then i say ul then li inside this li i can first use the name and then i use once again one more li with the author and yeah clean code i can do in a very nice way like clean code by author yes so clean code by robert c martin but i also want to do the image thing like show the image of this book but where we have the url we can get the url from amazon so i can open this and i get this amazon book url copy that and now i want to show the image too so i say image tag source is this one and then i say size or maybe just the width is 100 pixel how it's looking looking good at least okay at least we have the image name but remember whenever you use image you need to define the alt tag so we don't want to hard code the things similar to that we need to we don't want hardcore this source url so what we can do we can use the name property here and go inside of this alt tag and just paste it and that's it this interpolation also works inside any value property value for html so if i go reload this page and check for alt tag and yeah alt tag is including this clean code as the name that's very nice but i told you i also don't want to add this source from like a hard-coded thing so i want to get it from the component so i say frc as the source but we know we don't have the src property in our component so open the books component and here say src is equal to this thing as the string now everything is working absolutely fine so you can see we have defined these three but angular is more of a type script thing so you can also define the type so you say that hey this is going to be a string this is also a string and the source is also a string this is just the sanitation work we can do just for the security and making type script happy cool so this is the thing we have done but remember we want a list of books so just like this we have a pragmatic programmer so let's copy the name from here and i want to add another book here so here i can define name as a string and the name is pragmatic programmer then author for the second which is going to be the string once again is equal to i can copy from here and paste it and finally source 2 is going to be the string for this image url like here cool let's go here and copy these things and just change source to source 2 name to name 2 author 2 and finally name 2. save this file go here and yes we have to image list to book list that's great and we have understand how to use interpolation not only just to show anything but also to bind any property in the html tag let's move forward now let's talk about the property binding so what is property binding by the definition property binding in angular help you set the value for properties of html event element and directive yeah so this is just a definition but it says that to use property binding to do such things as tool button functionality set path programmatically and share value between component in between that i am interested in this set path programmatically now remember here we have set the source path programmatically this is same so what is property binding so this source this alt is the property of this html tag or you call you can call it attribute now instead of doing this thing we can also do this connection of dynamic value with this property by making this source inside the square bracket and then just give the name of variable or dynamic value you have and you will be amazed that this is surely working if i reload you can see everything is fine we can do that for other places and like this and also for the alt so we can do the same we don't have to worry about that now so we have done that and everything is working fine but if we had this interpolation why we need the property binding so suppose i have a button here now this button says show books just like show i want to show books or not now if i want to disable this button how i can disable it yes in html i can just write disable and you will see that the button is really disabled but i want to make this dynamic or i want to make the decision of disable from the component so we have this books component where we have defined the definition of all the books let's create another variable or property simply called is showing this is going to be the boolean thing and initially it's false now i want to connect this property on the disable how one how i can correct connect so this is the thing where the property binding shines so first let's see what if we use interpolation so let's make this is showing to is disabled so is disable is false so it's not a disable now if i use the interpolation and i say is disabled what do you think what should be the status of this button is it going to be disabled or not from the definition it's looking like disable and what is the value of disable false so disable should be false but if i go you can see it is still disabled so that's the problem but why it is disabled if i inspect this you can find that it is having a disabled attribute only why because at this time it is treating false as a string now when you say something inside the disable it's going to be true anything is true that's why we need to use the interpolation and in the interpolation we just say is disabled and now you can see this is showing book and which is enabled and you can see disabled property is eliminated from the dom that document object model or simply from the html but if i go on the component and make this as true and go here now this is disabled and disable property is back on the html so this is the reason the interpolation is not recommended everywhere and you have to use the property binding whenever possible for the properties or attribute of any html event binding an angular is very important so what is event binding binding is like connecting something and when i say event event occurs when you have any keystoke mouse movement clicks or touches so event binding lets you listen for the response to the user action on any kind of event so how it looks if you have a click button then on that click button when you actually do the click then what's going to happen we call a function called on save and it's called template statement and click is the target event so remember we have this button on our list of books right here so what we can do we can actually work the click event on this button so generally on normal javascript we say on click but we are on angular so we need to say click but to make this click thing and event binding we need to move this inside the parenthesis and then inside this double quotes we can define what's going to happen so i'm just going to say handle click this is a function we are going to call but before that we can also do some console.log and hello let's see is this going to work and says hey console.log is not happening can we do alert it says no you cannot do that so at last we need to create a handle click function but finally it says that hey you don't have anything on your component so first let's open the books component and here anywhere you can create handle click function and now function is created so if i go you can see there is no error first to make this button clickable we need to first enable it so i say is disable to false okay and now this button is clickable but nothing is happening when i click on this button so let's first say alert of i am working so as soon as i did that if i click okay i need to reload but this is not working still so what happened here let's go to the template and here yes we have this function but we are not calling this function so on this click event we need to call this function by having the parenthesis at the end so this time if i reload this application and click on show book you can see now i have this alert so since you have the connection from your template to your component you can do anything so i want to make the button disable just by clicking it so i say disable and this dot is disable is equal to false so remove this alert part and what's going to happen is like whenever i click on this button this should is disable itself okay so if i click nothing happened because something is wrong it says is this dot is disabled to true so we make we have to make it true now once again if i click on show button show books you can see now this is permanently disabled and we don't have any way to make it enable but that's not an issue because this is just i'm showing you how you can connect your template with your controller component and here we are having this click event now you can have any event you want so suppose you just want to mouse over and we need to move this into the parenthesis and then we have to call the function we want to execute so handle click just when i hover over this button so you will see that the magic will be like as soon as i move it here you can see now this button is disabled so you can add any kind of event from your template to your component and this is really really amazing thing and finally very very important topic which is two-way binding in angular so what is two-way binding in angular so it says two-way binding gives component in your application a way to share data use two-way binding to listen for the event and update the value simultaneously between the parent and the child component this is very nice and let's now see this in action so here i'm going to create a symbol input field a text field and i want to actually first see how this is going to look so i'm here and you can see this is the text field okay now let me zoom this out whatever i'm typing here let's say i'm typing my name i want to show the name just after this so after this i want to show whatever i'm typing here this means when i type on this input field i want to store that information inside a variable and then we can show the value of that variable inside this p tag so when i say when i'm typing inside the input that means i'm talking about the on change event but remember in angular it's event binding you can do that with parentheses and just say change when i say change and then i call it handle input and we need to call this function so let's say i will go to the component book component after this handle click let's create a handle input function and now i'm going to say alert alert is just doing this thing so that i can see if this is working so when i'm typing nothing is happening so let's get back on the template and see what's happening here so let's change this to input from the change event and now when i say input you can see the alert is there but i just want to have whatever i'm writing so can we do the event or can we have the event here let's say any or i can actually say it's a change event change event which is not here is it like html input element okay and now i want to say console.log of event let's see what's going to happen now when i have this event accepting in this input then angular says that hey you said that you need some event in the handle input function but from the template you are not passing any event so how we can pass the in event system from here for that angular provide you event variable with a dollar sign this is extremely important to put the dollar sign before this event which is actually going to pass the event from this input field and now this is saying that hey event is missing from the type html input you are providing something else this means we are providing the event which is having a wrong type so maybe for now i can say any which is going to accept it open the console and say sarthak and you can see as i type i'm getting all these things now since i have the event i say event dot target dot value if i say that then with each key stroke you can see we are getting whatever we are typing and this is really we need so what next we need to put whatever we are typing into a variable or a property angular call that property so just above this or anywhere inside the component you can say name which is going to be the string and initially it's going to be null okay so duplicate identifier okay so i can say my name this is going to be the string so i need to say empty string initially and now when i call this i say this dot or before that let me let me show you if i say sarthak here and then i can just use the interpolation and say my name so you can see sarthak is now here okay let's make it a div so that it will be on the right side but still it's on the uh bottom so no worries sarthak is there because the value of this my name property is sarthak but let's make it empty string and then i say this dot my name is equal to whatever is the value coming from the input now this makes two-way binding very nice let's see what that mean if i say sarthak and you can see as soon as i am typing here that is reflecting here saratakshvasa but this is not the exact two-way binding because what we are doing we are one is listening and then we are showing that here and for that we need to create this function and in the function we are just doing one thing which is updating the value this is not good why because angular provide you two-way binding so what is two-way remember we have two kind of binding one is the event binding and in the event binding we use this parenthesis another is this attribute or property binding in the property binding we are saying this square brackets so here when you say hey i want to get two way binding so you need to use both of the ways one is a square bracket another is the parenthesis and then here instead of having any function you just define the variable or the property name you want to connect so i'll say my name as soon as i did that this this statement is doing this this two things at the same time this means it is updating this value and connecting that value here so now it says can't bind input this is not good so what we have to do we have to use a new thing which is called ng model now what this ng model will do ng model will combine two thing one is the value and another is the input thing at the same time and by doing that we will be able to do the two-way binding easily but before that we are getting this error it says hey can find this property on the input because this is not a normal property of input html tag we need to go on the app module and import a new module called form module form module because this ng module is inside this form module ng model actually so ng model is inside the form module and now you can see it is working fine and this is cool and we are we have done this with the ng model and you can see if i go here and now this ng reflect model is having this thing okay so ng model is really great thing and this means now we can go and simply remove this functions and that function is not needed and you can see without that function we are able to do that two-way binding right and now let's move now let's talk about the directives in angular now in angular the directives are the classes that add additional behavior to the element in your angular application and you we can use the built in directive to manage the form list style and whatever users see so it's like if something is in front of user we can use the directives to change it or to manipulate it so there are various built-in directives available in angular first is component the component is yes a directive so we know we can use the component with the template second is attribute directives so what are attribute directives like the classes and the styles and the values if we can manipulate this with some directives that is attribute directives and it changed the behavior or appearance of an element component and another directives then we have a structural directive this is really fun and we are going to focus on this one right now which is the changing the dom the dot document object model basically changing the html layout by adding and removing other element so what are some built-in attribute directives the ng class as the name suggests it is going to change or add and remove the html classes in the template then we have a style which is again for changing and manipulating the style and ng model which we have just seen which is going to help us on the two-way binding for input and input value and the input event the change event then we have some of the built in structural directives the ng if it's a if else condition if you want to show some uh name with a condition or if you want to show full page effect in a condition then you can use the ng if ng 4 is to loop over some of the targeted html or dom if you have something you want to repeat you can use the ng4 and similar to that we also have ng switch sounds really amazing and interesting so let's now start with this n g if now i want to use the ng if here how i can do that and what functionality i can add i have a button which says show books so when i click on this button i can toggle all the books showing here so let's just remove this input field and then put all these books inside the if condition so let's go here and we have this which is a list of the books we can move this inside the ng if so we can simply say ng if and then we can provide a property in the component so inside the component we can see we have is disabled because we want to disable the button but we don't need this so we can totally remove it similarly we don't need the handle click button for now and we can also remove this my name okay let's go to the template and here on this we can just remove everything and now let's get back here on the list when we have added ng if let's say is showing a variable which is for showing the books so let's create this property in the component so i will create the property somewhere here is showing is going to be boolean and initial value is true that means yes we want to show the book and this is a convention i follow whenever there is a boolean thing then i start with is so is showing yes it's true so let's go here on the here and now we have problem it says on the input field you have my name actually i don't need the input field and that's good and also this div i don't need finally we are here now what we need whenever we click on this show book button we want to change the value of this property and that will going to show the book but currently this is showing is true so why we are not able to see all the books so remember whenever you use the built-in directives here of especially for a structural directive you need to use asterisk and then you define the directive name so asterisk ngf is showing now if i go you can see we have the books now let's go to the button and create a click event on that yes i can change the is showing property from the com component which is by creating a function so let's create a function and i say to google books and we need to call it remember yeah now let's go to the component and create a function google book and this dot is showing is equal to not of this dot is showing and this seems like strange but what this is saying that if is showing is true then make it false or if is showing is false make it true basically just change whatever it is true to false or false to true good let's go here and show book it's not showing and then once again show book yes we are having this book now instead of show book let's change the name to toggle book so here we are and say toggle showing toggle show book ah toogle book is good yeah now this is good nice but one thing more i can do remember we are doing this this showing or not of this showing from here can we do directly here so what i want is showing is equal to not off is showing is this going to work let's try first click and yeah it's working and that is we don't need this function so let's remove this and this is the shorthand whatever we are doing on the component we just did here directly on the template now final thing is i want to change the tool book text once again to when the book is showing i want to say hide book when book is not showing i want to say show book how i can do that i can say inside this and span which is for show books and similar to that hard work now when i want to show when i want to have the button text as hide book when we are showing the book so once again use the ng if and i say if it is showing then say hide book and if it is not showing then say show book and you can see currently we are showing the books that means we can just hide book once we have the hide book we can say show book wow this is really great but you know we are doing this with the span we need a html tag to use the in ng if condition is there a way we can just ignore this because i don't want any span to be inside the button like this so what we can do for that we can go and just change this span tag to ng container and now what is this ng container is it a component or what think about this as a special angular tag which is just going to make sure that whatever you are using after that after doing all these things it will just remove this and you will just have the thing whatever it is inside it so yes now everything is good we can see show and hide is working but this time if i go inside this you see there is no span tag available here that's the great thing with this ng container okay that's all about ng if and now let's do one more amazing thing you can see we have these two images and these two images are coming from the component inside the component we have name one name two author one author two source one source two which is not good so what we can do we can create uh books array and this is going to be an array of object and this object will hold these details so i can cut and paste it and here i don't have to define the type also i can change the equal to to semicolon not the same color it's just a colon and inside this semicolon i can use the comma right here so this become a array of book with one book only but let's add the second book detail so cut paste and change like here and these all are just name author and source okay this is good but you know we always need to define the type for our property so at the top i can define um interface for book and what is the structure of this book the structure of this book is having a name which is a string then having an author detail which is also going to be an string and finally going to be an source image and i can call it image and this is also going to be the string so in that case this books is going to be an array of our book okay now since we have defined this type you can see this is complaining it says that hey there is no image there is no source in your interface or the type you have defined so let's change it to image right here now this has to be something like this and yeah so it's an array of book and we have done it that's it for the structure of the data but what exactly we can do to loop over that thing and now it says source is not available yes we know so let's open the template for the books and here we are having this source and we are having this as a normal property but what i'm going to do i'm going to delete one this ally tag and inside another ally tag which is the remaining one i'm going to use ng4 this is going to iterate over all the books we have and give us the iterated book and we can use that information here so how this is going to be available so now what we need to do so i will say let books book of books and this is just saying that create a variable called book and for every iteration on the books load the data inside this variable so for every iteration we will get book dot image then book dot name and book dot author and once again book dot name so let's see this and here we have these two books back amazing and this is for the iteration of any array we have and yeah it's very simple just use asterisk ng4 then let and define the variable of the array that's great but what if we also want to show the number here like one or two and three if we have then how this is going to work so with the ng for you can just have the semicolon and then define and say i is equal to index just this is actually going to be available in your loop or in your iteration and i just show the i and you can see it says zero and one but i want to show from starting from one so i will just add one here now you have one and two now this is very nice but you know remember we have used the ng container for ng if yes we can also use the ng container for our ng4 right now we are looping on the ally tag so we should have two ally tag you can see and behind the scene it is having see this ng content but we can use the ng container so we can say ng container like here and then we can have all these ng for iteration part on the ng container and that's also going to work and you can see it's having exactly same result but the benefit is we are having very clean html and this html doesn't know anything about the loop it just have to show the details wow that is called ng4 now let's talk about another amazing topic in angular called pipes so what are pipes types are simple function to use in template expression to accept an input value and return a transformed value now what is transformed value so pipes are useful because you can use them throughout your application while only declaring each pipe once that's really great only defined once and use it everywhere for example you can use a pipe to show a date as april 15 1988 rather than a raw string of the date so you can transform it accordingly you can uppercase or lapper you can uppercase and lowercase any string and do a lot of other things and you can also create your own pipe so you can use pipe to transform string currency amount date and other display things okay let's see this in action so here i am and the first thing i can see is this title for these two books is having this name with the author name with every character as lowercased but i want to make it uppercase because that's a normal thing or title case so how i can do that for that i need to go on our template and wherever i'm using the name i just use a pipe sign and that's why it's called pipe after that i can say hey it's a title case is this going to work i'm not sure let's see it says hey title case is not in your pipe list so how i know that which pipe is available go to the documentation and search for the pipes and interestingly you need to go on the api that's a really great thing so go to the api pipe or pipe api and here you will find a lot of information about the pipes so style guide a pipe transform yeah a lot of pipe is here and here you will find we have a title case pipe inside this it says that you need to use pipe sign but with a title case all lower case so here we have used it in a camel case so just convert this to all lowercase and yep you can see it's working c is capital by the author so author name also has to be title case title case and yeah you can see all these are now title case that's so great and not just title case pipe is useful you can have any kind of pipe the very nice one is currency pipe so currency pipe we can use because in our application we are creating we need the price for these books so i'm going to add a price field on our component for the books so this is going to be price or i just say amount is let's say 700 and i'm saying 700 in terms of indian rupees so let's say 800 not 1800 and we need to add this amount field here which is going to be a number that's good and now don't have any error okay so i also want to show the price so just after the name let's have the price so in a p tag i can say hey book dot amount okay so 700 is the amount now i want to use the currency pipe so in this you just need to say currency and that's going to convert into into the amount so here when i say currency you will see that now before that we have a dollar sign but as i told you this is not in dollar this is in rupees so how we can change something in this pipe so it says that if you want to change you can say currency code and you can define the code so there should be some example here how can i use it okay so currency and then colon and then currency code okay nice so currency code is inr for indian rupees inr and this time they are having this inr symbol or indian rupees symbol with 700 and that's great so easy so nice similar to this you can also have other pipes but you can play around that and that's not a big deal cool before moving forward into the component related things i just want to style this and where should i put styling obviously since these are related to the books we should have that here but before that let's have some uh checking from the browser i just inspect it and make it bigger for you and then i will see that ul this is the ul which is here where we are using if and it contain everything now i just want to make this as a display of flex and you can see all the books are inlined but i want to say that hey flex wrap is going to be a wrap that means if no space is available move to the new line and you can see something like that and that's the only thing we have to do on the ul so i just copy this thing and go to the style book.component.css i just say ul is having these two property so just after that if i reload you can see it is still that same now let's go to the li the first book and style that first book only and then we will move that styling to every other book so what we have inside the li see in the li we have one is the number then image then title and then amount i just want to make all these into a p tag this also in the p tag and now i just give a class of uh serial number okay and image is okay then comes title and then comes currency now that's good because we can use these classes to define what we want let's go once again and you can see this is li and because of list item we have this dot so first i just say list style is none so you can see on the first one only we don't have that black dot because we are just making changes in the first element and when we are happy with that we can move it for everyone good then we can see this is the number then we have the image then we have the title so the title should be truncated so text truncated is there any text truncate um i think that's not the thing so we can do one more thing we can use another pipe so we can use the pipe or let's use the css and we say text overflow is going to be the ellipsis and ellipsis means if no space is available use dot dot dot and we need to define the width of this li and this is going to be let's say uh 200 pixel and that's okay so yeah this is good for 200 pixel copy these two and go here for the li i want to do this thing and that's that should be available for everyone and we need to say ul and inside that ul we have li is this going to work it's not working something is wrong let's have the class of book here and then instead of this i can say book class should have these properties but still it's not doing anything so let's check here the book class text overflow width oh i forgot to add the list style as none and yeah that's good so on an average these are looking at least okay for now and we can make it 300 or i can just make it 25 that's going to be really nice see this is going to be 25 wow everything is good but i want everything at the center so now once again go to the li and text center text i can say align item to align text text align to center yeah this one is good so text align center text align center yeah it's working for everyone nice and this is how we do a little bit of styling in our application okay so this is done and what next we want to click on these images and open a new component or new page maybe and on that we can show more information about these books so first i want to say that whenever i hover over it i say cursor is going to be pointer so when i hover over these you can see these are having pointer good now let's work on really amazing thing i want to have a button here which says add to cart and then on the same page i will show a cart which will increment the amount or the books we are going to add on it so first let's remove this button let's remove this hello template remove this numbering and we will start from here so i don't need this button i don't need this numbering and that's it i don't need that template so i need to go to the app component.html i just want to have this app books and that should look good right now i let's add a add to cart button so here after that i say a button add to cart like here now whenever i click on this add to cart button i want to have that book in my cart but before that i just want to do another thing let me give you a real life example whenever you loop over anything and then you have a lot of code see slowly this single book detail is increasing we have added this button then maybe later on we need to do more of the things if we are going to have the cart system then we need to have the cart information but that's not good to have every information in same component so this is the time we need to create another component called single book not books we already have the books we just want to add a new component called book so ng generate component called book okay so we have added a book component and that is also registered here directly on our app module and now i want to move all these information from here to the new component template which is book.component.html like here okay and then here inside the books component template i just say app book and do this that's it and is it going to work let's see okay so we are having this app book so what if i just remove all these things and say book works and you can see we have four times book works how because on our books template we are using this ng for and we are looping through this thing we have four book so it's looping through four times iterating four times and every time it iterate it show whatever we have inside this book component but we want to show all these information and this template need some of the other thing what are the things like book information so book.image book.name all these things we need here but we don't have these information so how we can pass the information from one component to another basically from parent component to child component now what is parent component what is child component see this this is a component called books component now books component has inside the books component we have another component called book component app book so isn't it like the books component is bigger and book component is smaller yes that's why the bigger component is called parent and the smaller component called child so we have the information of each book in our parent component called books component we have to pass that book information into this child simple so how we can pass it we just need to say here hey i want to pass book inside this and that is going to be a value of book so the variable is going to be book and the value is also going to be the book this is the value and this is the variable name now whenever we need to connect from a variable then what we do we do this with this which is a square bracket square bracket is for binding we are going to bind this book property inside the book component with the value of this book object little bit confusing but don't worry we can call it single book single book and then we say like here so book property inside the book component is having the value of single book object is it clear now by doing this is this going to solve our problem let's see no because as i said this is going to be a property inside of this book component which we just have created the component let's open the book component.ts and here create a new object create a new property called book and that's going to be initially empty object now empty object is okay but is it going to work still it's not working and also we need to define the type it should be the type of book but the type is not inside the book component it's inside the books component like here so we can extract this into a new library and we can call it types or interface or whatever you want to call so i just going to call types inside the types i'm going to create a new file called book dot ts and move the interface which i have here to the file i have created and i need to export this export interface book and now i can import from import it on our books component also i have to import it on our book component okay now it says hey you don't have anything so can we do the null it says hey it cannot be null so we have to define it and it says you need the initial data that's not good so how we can actually accept the prop or the data from the parent for that let's go to the documentation in the documentation we just need to search for component data and here you can see sharing data between child and parent directive and component so here it says you need a parent then data flow to child so from the parent we can all only do a data transfer to the child and to have that when we need to create the property in the in the component we always need to say that hey this is going to have a input input from any other component so right now here we have to say hey this is going to be an input which is coming from angular core and call it but finally it says hey you need to define its initial value and i don't know what is the initial value so i said it's going to be empty object but if it's an empty object type is mismatching so i'm forcing typescript that treat this empty object as the book type okay and finally you can see every book is now here this is the real thing we have done which is from passing data from parent component to the child component like this okay so this is nice and let's work on the button thing so now this time we have the add to cart button on our book component we need to have a click event of this and then we see how we can move that into the cart click event of this add to cart button and we know when we need to do any event thing we just say on click and i say add to cart that's good now go to the book component and here on this let's create a function called add to cart and here i just say console.log this dot book because we already have the book information in the component let's open the console make it bigger for you clear it and click on add to cart nothing is happening so once again nothing is happening so what happened here we need to inspect yes i forgot to call this function one more time click on add to cart and yes yeah we have this information pragmatic programmer click on first one clean code that's great since we know how to get the information off of the book when we click on this cart then we just need to have a card so where we can have the card on the books component on the books component so here on the books component let's create another object called const cart and cart is also going to have a array of book and initially it's going to be an empty array so we don't need any const and right here so what we need whenever we click on add to cart we want to move the information from child component to the parent component okay so which is the child component remember this thing this book component is the child and books component is the parent so how we can pass the information from child to parent once again let's go to the documentation and here it says sending data from parent to child component so click here this time we need to move data from child to parent yes remember when we did that thing from parent to child we used input but now we need to send the data we need to output something so that's why we are going to use the output so when we do the output thing we need to define a event okay so first we need to define an event we call that with a decorator of output and we initialize with the new event emitter and we can define what kind of data we are passing once we define this event emitter then we can use something like this so we can say this dot event emitter dot emit and whatever value we want to pass if you are not convinced with this let's see how this is going to work okay so let's go on book dot component dot html single book we have this click event when we and we are calling this add to cart button function where is this add to cart function it's inside book component here we just console log this let's create another output variable or emitter i can say emit book okay and this is going to be new of event emitter and what should be the type of this event emitter hey i have no temp oh i need to call it yeah so what should we type we are going to pass full book information so that's why this book type is absolutely important now on this add to cart function which is trigger when we click on the button we can say this dot amit book dot emit or i can call it book emitter book emitter like this dot emit and then we can pass here like this dot book okay everything is fine now suppose we say it's going to be the string then type the script complain that hey you are passing a full object you said it's going to be the string so it's very important that's great now these are absolutely fine let's close this and this also go to the browser and see what's going to happen when we click on any button click on add to cart seems like nothing happened why because behind the scene a event is really emitted but what's going to happen when we emit the event we don't know okay so let's work on this and see how we can listen the emitted event on the parent component now here we have the event emitting whenever we click on any add to cart button and that happening from our book component like here but how we listen for any event remember on the book component dot html we are listening for an event called click event and then we are calling any function for that particular event that means whenever any click event happen then execute this function similar to this concept we can go to the books dot component and here we are emitting the event on book component on the child component so whatever component is emitting the event this is the book component so on the book component wherever you are using or inside the template you need to listen for that event and do the things what you want so i say add to cart okay now this is the thing but what should be the event name remember on the book component we have given book emitter okay so this is the name of the event so i say whenever there is an event called book emitter then call this function called add to cart inside of the books component so i can go to the books component and here create a new company a new function called add to cart and just log anything for now this means it doesn't matter which button i click we should get a console log so click on add to cart it's not working so once again i did something wrong so book emitter add to cart on the books looks like everything is fine and yes everything is really fine i just need to reload the page and you can see everything is working okay but we don't need this asdf we need the real book information so remember every event is having a magic you can say property called dollar event by passing this we can get whatever information we have inside the event so just like that when we are passing we can say hey it's going to be an event and whatever we have inside the event we can just log and for now i call it any so that type of script will not give any error let's click on add to cart and you can see we are getting the full information of the book and this is how we are moving and since we know the event is going to be a type of book we can just type hint here and this is going to be like add to cart book add to cart book so instead of event we can just call it book but why we are getting this book remember on the book component we are passing here the book information or the book object and that's why whenever we are receiving these things here we are on the books component cool so this is how we listen for the event of any custom event emitted by any child so remember one thing whenever you need to pass data from parent to child you pass it via normal property created by input decorator whenever you need to send information from child to parent then you emit an event and this is all the communication between the child and the parent component let's talk about the life cycle hooks in angular so what are life cycle hooks in angular a component instance has a live cycle that is start when angular instantiate a component class and render the component view along with its child view so basically angular says that whenever you have a component and when you create the new class of the component then after that it load the template it load the child component so at every step you can have a hook what is hook that means at every step you can do something so it's a life cycle of a component a life cycle continue with change detection a life cycle means if there is a change that's also a life of the component then uh on update all the view and component instance uh instance as needed the life cycle ends when the angular destroyed the component so whenever we are removing removing the component then we can call the destroy life cycle so from the bond from the initiation of the component to the destruction of the component we can hook at every point which is called life cycle hook similar to this component directives can also have life cycle hooks so what are the common life cycle hooks for a component for a component you can have ng on change as the name suggests on change every whenever anything changes on the component ng on init when the first time component load then do check it's for developer then whenever we want to check something after content in it that means everything is loaded after content check after viewing it that means template loaded a view checked everything is fine on that and finally on destroy but you can see i have bold three of the life cycle hook one is on change on init and destroy so let's talk about all these things so here we have two components books component and book component so let's talk about this and here first whenever i open a books component i need to open the component here you can see i'm implementing on in it interface so if you are not familiar with the interface think about a interface as think about as a class which are forcing you to have some function so now you can see we have this on init function so i'm just going to say log on in it and save this file and go here and you can see we are having this on in it so i can just say it like here on in it is like this now on it is here but we also have the constructor so what is the role of constructor if the role of on init is like when component is created what is the role of constructor let's do the same thing here for constructor and i can say hey constructor constructor like this and maybe i can do this for this like here okay so console log of this and this should be constructor as string as a string and something is bad happened okay so i can get back the last way of having constructor instructor and on in it okay so see whenever we load any component first is the constructor called after that on init called so what is the difference between these two if both of them called once for every component life cycle see constructor is basically the part of a class so here we are creating the class so what happened when angular says that okay i need to create a component so first it initiate this class so when the class is initiated then this constructor is called then after that we have all these properties then we initiate some other things then we load the view after all these things when say it says that okay constructor is ready to mount it says that on in it so this is for on init means when the component is actually ready to be mounted on the html or the dom that's why it is called second and this constructor is called first so what we can do on ng in it suppose you want to fetch some data from an external api then you can load that here you can also do that inside the constructor but suppose for some reason you want to do that once the com the class is initiated not on the constructor so you can do that here now similar to ng on init we also have a ng destroy so remember we had a button here so this button is let's say just google and we have a click event where i say is showing is equal to not off is showing so it just toogle all these things so if i go here to google it you can see yes we can toggle but what which component we are toggling we are toggling this app book component so let's have the example of on destroy on the app book because we are destroying this component only so go to the book component and here we can see we have this on init as the interface but along with that we can also have on destroy or of this implemented and now once i implement this then it says hey you need to add a property called on destroy ng on destroy here is the one and g on destroy so let's have that and g on destroy and it's autocompleted and here i can say console.log off on destroy like here yeah okay so this is done and let's try this i reloaded component so these two constructor and on init coming from books component but when i click on toggle you can see i'm getting four times on and destroy because we have four times this book component and on each component we are logging this on destroy thing so whenever this so when this one is useful now suppose on the ng on init i say set timeout or set interval actually okay and set interval of uh let's say a function and here i say console.log and i log it hello for every second okay this is the interval i'm doing but i'm also creating uh my interval well let's let's first see what will what is the result of this now you can see every second we are getting four times hello or because of each of the component that's good but what if i toggle i do guild i have removed the component but still you can see this is working the interval is not yet removed even if i clean the console it's here so i need to reload and that's the problem and how many times i mount it you can see we are getting a lot of set intervals so what we need whenever we destroy this component we need to remove the interval so that's why i create my interval and this is going to be null initially and here i say this dot my interval is equal to set interval is not a type number of null so timer so this should be a timer is it let's let's have the annie okay so now we have it here so on the destroy what i can do i can say this dot my interval but i want to say clear interval of this dot my interval so now reload this and you can see the interval has started 12 16 for every component we are getting a console log of hello four times every second but when i click on toggle and now you can see the timer is removed for every component and we don't have any timer here and if i once again toggle it getting it back timer is started so that is the very useful thing for this ng destroy so since we are not going to use these things let's remove each and everything it's just for the demonstration and clean this up because we need to understand some other things so remove that button and on the books component also i'm going to remove the console logs and finally we are get are back on the track so let's move to the next big topic now slowly we need to move to the bigger concepts in angular so this time we are interested in service so what is a service here in angular service is a broad category encompassing any value function or feature that application need seems like a complicated thing but it's not but a service is a typically a class with narrow and well-defined purpose it should do some specific tasks still i'm not getting it so let's understand more about the service why we need a service ideally a component's job is to enable the user experience and does nothing so our component should be clean and lean that means it should not do the task of fetching the data from the any api or from the database it should not be responsible for doing a lot of manipulation and calculation and business logic so a component should present properties and method for data binding and application logic so what is the core purpose of a component just to link the template and the bindings to the data logic so in that case and component can delegate the certain task so if component need to use a method or just have some properties presenting the properties so where all these method and properties will go everything the component delegate task to the services such as fetching data from the server validating the user input logging directly to console and much more things and this is why we need a service a service also can depend on another services just like we will going to see later on that a user service can fetch the data by using another service which is called http service okay so that's good but how we can use the service in our application now let's see that so in our books component if i go see the component is doing a lot of thing it is holding these data it is holding the card details that's good it is having this console log a lot of things we are doing just inside this books component similar to that we have a book component here we are doing this add to cart and we are emitting this logic so this component is not doing much thing but books component is doing a lot of things so let's use the service to make this component clean and lean so i will open the terminal and i will say ng generate service inside a books directory and the call and we call that service book service so if i create this first it has created the spec for the testing we are not interested in testing right now so i can delete it but now you can see books dot service dot ts is here this is just a normal class if i remove everything just a normal class but to make it a service we are using this injectable decorator and we are defining that where it should be provided so we are providing it in root level now we can say that this is the injectable this means we can use this service from the service container and what is service container we are going to use this inside this component how we can use it we will see and we will call that dependency injection we will understand this thing but first what this book service will do first here you can see this is holding all the books data so we can move this array from here and we can say that i want to provide this detail from this book service so let's say book get books we're going to return this array okay so how we can use this function inside of the component first i need to create a constructor is already there so i can move constructor at the top like here and then inside this i say private books service colon book service and this is actually going to create a private variable called a book service which is going to have this class instance now this thing is called dependency injection all the magic will happen on the angular level now we have created this property books and this is going to be an empty array initially but what i want to do whenever this class is created not the component the class is created then i say this dot books is equal to this dot book service dot get books we can do this or you can do the same thing on ng init so let's do that on the ng init so first we define this property and then we have this until now let's see is this going to work or not so let's go and reload this page and you can see we are having this same now what if i just to comment this line and now we can see we don't have any book so yeah this is working absolutely fine and the benefit is the component doesn't know how we are getting the book it only know that okay when i want to get the book i need to say hey book service give me the books so get books so this is the task of the component and the real task of service class is doing the ultimate magic okay similar to that what we can do add to cart so i think that also go inside the book service but we are not interested in that right now so i just want to introduce you with the book service but what this in this is the dependency injection is doing let's understand this thing first what is dependency injection in angular okay so in angular the dependency injection in a shot called di is wired into the angular framework and used everywhere to provide new component with a service or other thing they need so the component needs something like a service and dependency injection is the way to provide it okay component consume the service that is you can inject a service into a component and this injecting thing is called dependence injection giving the component access to the service class okay so this is just the definition let's see how we can understand this properly now we have this component called books component inside that we are providing this books service via this constructor but how does constructor know how to initiate or create the instance of this books now what generally happen you can do something like this if i say private books service is going to be the book books service thing i have created this property and initially it is let's say null and is not assigned has no initialization in the constructor okay so now we have done this then i say that hey this dot book service is equal to new book service class so i am initiating this book service class so this is the normal thing we can do but this is not a dependency injection because we know this dependency we are adding it there is nothing for the angular so suppose this book service also need another service inside the constructor so maybe a name field which is going to be the string suppose we need this then what we have to do we have to provide some name let's say sarthak okay but if this sarthak is not a string it should be a another class so for now i'm going to create class name and this is the thing and this cons this also have a constructor which need the name as the string field like here and we are using this class here so name should be a type of class now we are passing the string here so we need to create a new instance of the name class so we can say this we can suggest name is equal to is going to be const name new of name class which should be available here okay so we need to pass the name class and then we say hey this is a name so this is really going to be a bad thing because suppose this name class also depend on another class so it's going to be a chain of different different classes so in that case we will not be able to create the instance of a service which is having lot of other dependencies so that's why there is a concept of dependency injection which says that i am going to take care of all the dependency you need so this thing will come from the service container of the angular so what is the service container think about service container as a big array where you have all the classes you need so if that class is available then it will give the class otherwise angular say okay wait i'm going to create a new instance of the class and it angular will take care of initiating and creating the instance it behind the scene and that's why instead of doing this thing when we say something like something like this you can see we are not creating any instance of this class we are not doing any new book service we are just defining that i need a book service what is the type of book service class that's it angular will say okay you need this thing i'm going to create a new instance and pass on your constructor so this is for the dependency injection in angular so right now all the books are coming from our service which is books service but when we say that it's a books service it should be only responsible for books thing see we have inject table and this decorator has a property called provided in and we are providing it as a route this means this book service is available throughout our project we can call this book service anywhere inside any component this is okay when you have to create a service globally but this service is only specific for the books so i'm going to remove this provided in root and when i do this if i go here you can see it's crashed why because if i go here it's not giving any error but you can see that something is wrong yes the error is here it says that hey you are saying that you need a provider for book service but you don't have simply means in our books component we said that hey angular give me this book service but angular doesn't know where is the book service because we have removed that provided in root so how we can register this books service we need to register this inside the app module and here we can say providers is equal to this thing and let's just import it by importing this we are back on the same track but we are back on the exact same track we are still importing this book service throughout the application because we have imported this on our app module so doing this or doing this is going to be the same thing so what we can do actually we can instead of importing it here on the app module we can create a new module for books okay and then we can import it that so let's go and say ng generate new module called books module and it will be on only available inside the books directory so now we have created a new module is specific to this books now here we can say providers and then books service okay now since we have a module dedicated to books what we can do on our app component you can see this books component is registered so i can remove this books component from here and then i can actually import our books module since we are importing this books module now i can register this component inside the books module so i can say books component so previously we were having this books component globally but now this is only dedicated to a module and now we are importing that module only so it's now mod books modules responsibility to load any component any service whatever it need okay so that's good and now if i go it says app books is not a known element so it says the books component is not there what happened declaration is good we are importing the books module also so what we have to do we have to go to the books module yes we are declaring the component but since the component is used inside the app component.html like here this is another module although it's a global module the app module but we need to say that hey book module we need external modules to be able to use this books component so i'm exporting the information of books component in that case yes app module will be able to use this books component inside the app component.html that means app template and finally we also need to add book component here because we know this books component is using book component app book component so we need to add the information of this book component inside the books module so we have added it and now we are just exporting the books component and everything is managed by this books module and our app module is just having the information hey that hey there is a books module and that's it okay so if i go here everything is working still same and everything is fine next thing i need to do is you know this book is a part of this books component so i can move this inside this books directory and then just change if anything is needed so save this file so what happened save this file also and now everything is once again fine now you can see how easy this structure directory structure is we have a books we have a books module which know everything about books module and it also know about single book and that's really great so this information is really amazing and let's now use services to do amazing things in our angular right now our add to cart button is doing nothing it just console log whatever we click so we have the book information so let's have a specific service called cart service and it's not card it should be card what i'm doing this is very silly so first let's open the book component and add to cart and everywhere i'm doing the card so that's not a good thing so is there anything yeah add to cart and on the book this is very silly so now i have add to cart button this is just to console log the book let's create a new service and this time i'm going to create the service inside a dedicated directory called services because this service which i'm creating is not related to a specific component it's a global service so ng generate service it's going to be inside the services directory and i call it cart and this time with the t okay now we have the services and let's remove this testing directory a testing file and now we have a cart service here i'm going to create a cart which is going to be a type of book array of book okay now this should be initially empty array and that's good okay this card service should have a function called add and what this is accepting this will accept a book which should have a type of book and then we should say this dot cart dot add since this is going to going to be an array so at property does not exist on the type of book it's an array so why it's not giving that so if i say array of this book it's going to be the same thing but i should say push yeah push is there and i'm going to push book here this is the function we will use when we click on add to cart okay so when where we have the add to cart button we have inside the book here we are calling this add to cart function which is inside this and now we are emitting this event to listen for the main books component but now instead of doing that here i can import the cart service so private cart service is going to be the cart service and then i say this dot cart service dot add this should give us the ad but it's not giving anyways we can say this dot books this should be the thing but oh so i need to do the add to cart uh instead of that cart service dot ad so now if i do yeah we have this this dot book okay now we are not emitting any event we don't need it because we can directly use this card service and that's good in that case we can go to the books component and now um actually we need to go to the book component and we are not emitting anything from here so we can remove that emitter since we have we don't emit anything we cannot listen for the book event so we can remove that we don't need it that's good and since we don't need that we don't need this add to cart function inside the books component and we can remove this cart array we had created cool everything is fine and now let's check this reload the page click on add to cart okay there is no error this means something is good happening in the background we are not having any console log so what we can do here we can go to the cart service and just here i can just log book whichever book we are clicking so click on add to cart yes it is working if this is working fine then what i can do i can have a list of card here and list of items of the cart here just below it so pro programming book list we should have a cart so go to the app and here i should create a cart component so let's say ng generate a component called cart okay and remember we are creating a cart and this is holding all these things but we are still moving this cart service inside the service directory because this is going to be the global one or if you want you can move it here it doesn't matter because you know inside this card service we are using provided in root so it's all up to you so i can remove the services and now we can go to the cart component and we can use the cart component just below the app book inside the root template so i can say app cart like here so it says cart works that means this card component is working here let's say your cart and yeah it's there your cart is there now i need to check if we have something inside our cart so we need to go on the component cart component and then we can say um how many a cart we have so we can say get cart and this once again should use the cart service cart service of cart service and we can return this dot cart this dot cart service dot get which should get get me all the card data we have so we can say get card yeah the get card is good so let's create a function called get which is going to say return this dot cart nice so since we have this now what we can do we can use this get card function and then we can say that how many books we have inside the cart so let's go to the cart component and now i say div inside this div i can use this interpolation and i can call this function directly get card now you can see get card is having nothing but i can say get card dot length is this going to work it says zero now if i say add two card you can see now it's one add to cart once again it's two that's great so by doing this we are getting all the books we have inside the card and then we are having length so what we can do we can simply say as trick ng if we have this thing greater than 0 otherwise if it is 0 then we need to say no books in your cart or if we have the book then we need to loop over the books so but first see if we say yeah we don't have any book in our cart if i click okay nothing is there let's loop over the cards we have so we can say ng let's use the div so ng for off ng4 in let book off get cart okay and then we can say inside the p tag the information or the title of the book so book dot name like here so we don't have any book in the card click and yeah pragmatic programmer art of computing if i once again say pragmatic programmer it is having here so what we have to do next if there the book is already in your cart we can say that remove to remove from cart the button will change it to remove from the card okay that's good so for that we need to go inside the book component here we have add to cart but we need to say remove from cart but this will only available ng if not in cart not in cart um or i can say is in cart so if it is inc if the book is in cart then we can show this button otherwise we can say if it is not available then show add to cart now we don't have this is in cart property so we are getting this error so let's open this book component and then we say is in cart is going to be the boolean and initially it's false because initially no book will be inside your cart but when i say this dot add to cart we can say this dot is in cart is equal to true because this is moving it inside the cart so let's see if i say add to cart now button change to remove from cart now let's implement this thing also so we need to say when you click on remove from the card we say remove from cart function inside the book component so remove from the cart and this time this is in the cart will go become false and we say this dot card service dot remove this dot book now we need to implement this remove function in our cart service so we have to do this which accept the book of type book and then we say this dot cart dot and how we can remove it so i think there's a pop but pop will remove from the last so we have to find it so i can do this like this dot cart is equal to this dot cart dot filter where book is book and i can say just say b b is not equal to book okay so we are filtering out where the book is not this book okay so once again click on add to cart remove from the card add to cart add to cart add to cart add to cart and remove from the guard remove from the cart remove from the card remove from the god this is implementing the card thing in our angular using the services our application is really amazing but the problem is all these things we just have on single page and that means on only one page i can say so you can see in same page we have a heart same page we have the list of books but i want to have a dedicated pages for everything and have a header which should say cart or the home page will will list all these books for that we need the routing thing so let's go to the angular website and just search for routing and you will find this routing angular routing thing so let's go here and it says just go to the common routing task and here it first say you need to run this command to add the routing in your angular application if you don't have but in our application we already have added this when we started the project when we created the new project through ng new command so since we have it it doesn't matter we can start it but since we already have it what we have to do first we have to head over to the app module file this file and then we need to import app routing model module but app routing module is a file which is on the app directory so we need to first create a file called app routing module so what should be the exact name we can see here it says app hyphen routing dot module okay let's go on the app directory create a new file called app routing dot module dot ts okay now inside it we always need to export class called app routing module this is going to be a class but we need to make it as a module so we say ng module but since this is going to be a routing module we need to do some of the other things so before doing anything let's go to the app module inside the imports let's import app routing module and that's it now we only need to work here on the app routing module so let's go and see what we have to do in this we need to import routing module then dot for route and we need to define the array of all the route and also export it so that all the application can use this okay so how it's going to work first we need to import importing route module dot for root and then we define routes okay routes is going to be a constant which is having a type of route and for now it's just a empty array and it's it has to be routes actually not route yeah and similar to this we need to export this same route router module that's good now this is done in terms of setting up the routing but finally we need to create some route so how we can create inside this array of routes we have we need to create some object where we need to define the path and on that path which component we want to have okay so let's go to the application we have and this is the home page that means the route of slash so i can say the path is going to be slash and component is going to be what should be the component how about the book the app book component so i say app like books component this is the component thing now if i go reload the page something is breaking it says hey there is no slash so what i have to do we have to just say empty and now you can see we have the app books component now since seems like nothing has changed but trust me something has really changed how i can show you i can actually create another path another route which says slash cart and in this i am saying card component so if i go to the slash cart it will only load cart component let's see how this is going to work so i think once again we have some issue okay so angular says you don't have to say slash why you are saying slash so that's good now let's go here on the address bar and say slash card just press enter and on the card we are also getting the full thing now this is happening because of one important issue see on our app.component.html we are having these both of the component we don't want we want to manage the component by our routing so let's comment these two and then if i go we have a blank page you can see nothing is there so how we can tell to angular that hey angular give all the responsibility of managing the component to our router for that we need to go on the documentation and we say we first need to have this line of code which is router outlet so copy this and remove everything and paste it router outlet this is the only thing we have to add and now all the component will be managed by our router this means if i go to the slash cart you can see we have the cart here and similarly we have the books list here wow so this is really really amazing but let's have some styling like a header or nav bar where that navbar will be common and where we will have the links for list of books and the cart now to add some styling let's open the tailwind css because this is really amazing click on get started and go to the framework guide we have this angular click there and it says you need to first say create a new project we already did and finally we need to go to install all these things so go here on the project run all these things after that we need to do npx tailwind init and what this is going to do this is going to create a tailwind config file in our root okay what next it says then on the config you need to copy this content thing and change like here basically this is saying that where are where is all our file where tail wind need to be applied finally we need to add these three things on our base style file so here we are and paste it and finally we can start building things okay so what we need we need a navbar at the top so let's open the app component and here i just say hey i need a nav inside the nav i need first a left and a right so on the right i need a button then this button is going to say my cart like here and here i can give a simple h1 which says book shop like this so you can see these are here but we need to style all these things how we can style these things so i think there is some styling we can remove it and now inside this first i just say class of flex so this will be flexed but it's not applied that means we have some issue on our tailwind so maybe i can restart our application so that it can build and include all the tailwind css things and then i can try and yes you can see all the styling has changed so bookshop is there and then i can say justify between and padding off for background of purple let's say 800 and text off white looking good yeah so maybe i can move it to 900 also yeah so my book shop is here and here is my cart this is the button now what we need we need to have this list of books so i can move this router inside a div and this div will have a class of container do we have yes so it should be like this or we can just say padding maybe padding off four okay so you can see so some margin is there these things we have added this some styling on based on our css so i can remove this styling because now we need the tailwind to handle everything okay so we did with this like nav bar thing and in the navbar i can say bookshop this bookshop when i click i want this page and when i click on my cart i want the cart page so let's make this also a button and now how we can do that for that we need to go to the routing angular documentation and then we say whenever we want any link we need to use anchor tag and on that instead of href i can say router link and whatever the path we want to give okay so this should not be a button this should be an anchor tag and then our say router link is going to be the base url and on the cart it should be router link for cart slash cart and this is the normal slash okay so let's click on the my cart yes we are on the cart click on bookshop yes we are on the bookshop and this is looking very very nice now i will just do some styling behind the scene and then do some styling on these books and finally we will start with the form so that we will have a login and register page i have given little styling here and it's just because of the tailpin css all the styling you can see from this classes i have given just like these so it's not a big deal so what next we want to create two pages one for login and one for register then we will implement the authentication so first i'm going to create two component one for login and one for register but before that i want to create a auth component or auth module actually so how it's going to work see we have the cart we have the book let's create ng generate module of auth inside of the auth directory so if i create you can see we have this auth module and i think it just should be inside it so i can remove it from here that's not the thing i really need so it just like auth okay now i have created a auth module inside the auth directory and next i want to create ng generate component and this component is auth component but let's have login component inside of the auth so we have done that similar to that we can also create a register component and yeah and both of these automatically get registered here inside this auth module now what we have to do we have to just to make sure we have to route to access these two component because all the component thing is managed by the our route so here we can say when we go to login the component should be login component when we go to register component should be register component okay and similar to that we can go to our app and here we can say we need one login and one register link so login will go to the login register will go to the register okay so now we have three buttons so we can just give some styling to all these and we can say hey i need a margin of margin x that means on the right and left both side of four how about four looks good okay so let's see is this working or not let's click on login and it says login works if i click on register it says register works that's great and everything is fine and now what we need we need a form inside this login component so first i create a div with a class of flex and margin of auto and height of screen then i create a create symbol form and inside this form i need a div in this div will include the input with the email id and then we will provide some classes of padding too a little rounded and that's i think that's it or maybe we can provide the width but for now this is fine then i can give a label for this email so email and provide the id for email and label is email then we can create another one and this is for the password thing so password and password finally we need another thing which is for button submit button so this is input field with a submit button no need for any id but this is going to be having width of full background of purple 700 text of white if you don't know these tailwind thing don't worry and when i hover over it i need bg purple 900. let's see if i go to the login and yeah we have this and we want this to be at the center so why it is not at the center i can give class betting four rounded large and have some border that's okay but it should be justify center yeah good so that's nice and i think margin auto should come here la yeah good this is this is good and one more thing is an h1 tag of login which says text of center and text of xl oh i think i get it left here so it should be xl okay we just finally need to give all these div some margin y of let's say five so this is now looking good and maybe i can give this form a width of 1 by 3 and now this looks once again good and this email part has to be of full width so when i say width of full okay and then this also have width of full so then yeah something like this okay so we can say hey this div all these div having width of full and both of these input fields should also have width of full and cool and the very last thing is both of these input fields should also have some border so that we can recognize here we are and one more property we need to give is placeholder email address and similar to that we need a password so we have designed our login page and similar to this login page i'm going to create a you can say register page also and then i will come back so let's do that and finally i have created a little register form also so both forms are here and now let's implement the form thing and yes we are going to use the angular form so we need to go to the angular website and just for search for form and then we will be able to use any of these now let's start with the form how let's go on our auth login and we have this and very first thing is we do the two-way binding so we need to use square bracket then parenthesis and ng model with a field we are going to create called email this field will be inside the login component so let's say it's going to be the string and initially it's empty stream now just to check i'm going to use the interpolation and show the email let's go but we have this error it says hey ng model is not available but we have faced this issue before and this is because of the form module which we have imported in our app module now the point is this forms is only available on the app module or app component template it's not available on the login so what we have to do we have to use this auth module and here we will import the form module then we can go to the app module and we don't need this form module here and now let's see it's still asking the same thing why because yes we have imported here but we need to import the auth module in our app module so we say auth auth module and it should work so if it is not working we can restart our server so just by doing that you can see now everything is fine okay now if i type something it's not working let's see we have some error it says hey you have to define the name so we have not defined the name in our login template so i say that hey this is name is email okay is this going to work yeah now you can see whatever i am typing i'm getting here that means it's a two-way binding two-way binding for the email or for the password also but you know on the password if i create another field that's not a good thing so what i have to do i have just to create a form and this form is actually going to have a email of string and actually this is like email which is empty and password which is also going to be empty now the type what should be the type of this thing so for now we can go to the types directory and we can create our new uh type for first let's create a file called auth.ts and here i say export interface called login and i say login form maybe and i say email is going to be the string plus pass word is going to be the string that's good now we say login form okay we have this form so what we can do we can say the two-way binding is form dot email and form dot password and same we need to provide the name of password okay so it says email property does not exist yes we don't want this and that's good so we have all the data in our form now how we can submit this form we have it we have this submit button but when i click you can see nothing is happening when i add something nothing is happening so what we have to do we have to go to the form and here we need to use our submit hook so we can use the ng submit directive and this is going to do the submit part okay so we are having it let's go to the component now it says submit is not available in your login component so on the login component we can say submit is a function which is just going to alert this dot form whatever we have inside the form so let's say sarthak at bitfumes.com password is secret123 click on submit nothing happened no error so why it's not submitting okay it's not submitting because i'm bad so i have to call this submit function and now i say sarthak at bitfumes.com password secret one two three submit and now it's an object so i can do another thing i can just say console.log log open zoom for you and then i say something something and submit yeah so this is submitted so just like we are submitting this login form i will do the thing for register form behind the scene but then we will see how we can validate thing we can only submit this form when the form is valid finally let's work on the validation so when i submit this form it is submitting with all the details are empty now how we can work on it first let's open the register because i have done something on the register also then we need to create connect or create a template variable which is going to be the ng model and now we can use or we can hook or you can say we can refer to this input field with the name of email now i'm going to create another div inside this i will say email email field must be valid okay right now if you go it is showing and we can design it a little bit so we can say padding of 4 bg of red 300 and text of red 500 something like this and text of red 500 yeah maybe i can do okay i can do 800 yes this is good and finally little rounded and padding is too okay but i only want to show this field when the email is either empty so right now yes it is empty so it is showing but as soon as i write something it should not be there so first thing we need to make this required field so i said that this is a required field now i will say that only show this field so i say there is a hidden property but bind this hidden property when email field is valid so when this is valid then hidden like hide this field right now it's not valid if i start writing it's valid cool so this is very easy way of making uh doing any kind of validation so same thing we can do for our password and this should be password and finally the password confirmation or i can say confirm password okay now copy this thing paste it here and password field must be valid and here i say password and finally on the confirm password so confirm password and confirm password with capital c now everywhere we are having it and whenever i start writing that's gone this is good but you know when i open this form i don't want to see this so i will say that when i touch on any field then only check for this kind of validation so inside of this email valid and using this hidden we can also use the asterisk ng if ng if and i say if it is invalid then show it or if email dot touched then only show it so you can see now it is not showing any error but as soon as i click here and start writing you can see it's checking but since we already have it it's not having any issue so we have created this validation but what if you can see we we focus out so when i go here it's not having anything when i start writing it's gone but when i make it empty it's not doing that but when i first land on this page there is no error this is really we need we can also do one thing which is like email dot dirty and i can use the or condition either it is touched or it's not a correct email so if i do this like this you can see i don't have to go outside it's just doing validation at that same time so now we can use the same here on the password field so we can convert it to hey it's a password and it's actually confirmed password and here we have the password so password yes okay finally we have done with these things and now let's i'm i will do that same kind of validation thing in the login but final thing is remaining that we can able to submit this form so what we have to do just like we created a a reference for this email input field we can create a reference for our form also so i create my form is ng form what is the use of this case then i can use my form and go at the bottom and on the submit button and i will say that disabled if my form dot form dot invalid if the form is invalid just disable this button so you can see if i click you can see i'm not having any any console log because this form is not valid if i start writing something and click still because we need the confirmation password and finally everything is fine then you can see we are having this email and password and confirm password everything is here okay we'll do the same thing on the login form and then we will see how we can really do the login with the firebase now i will go to the firebase to have the authentication but first i need to click on get started and here i'm i will create new project angular 2014 course okay confirm it click on continue and enable uh i don't need any analytics finally let's create a project this project is creating and once this is done we will get some kind of code and that code we need to have inside our application so i will go to the app and create first fire firebase.config.js inside this i will use the code they are going to give so go to the authentication part here and before that we actually need to get the code so yeah go here on the web section click here and register app and my angular app and firebase hosting yes i will also need the firebase hosting we will need to deploy it later but first click on register app so first we have created the project now we are creating our app and now it says npm install firebase so copy this and paste it so it's going to install the firebase then it says initialize the firebase and we have to do this and that's why we have created the firebase config so we have this and finally we can say that initial we are importing the firebase we are configuring then we have this and then we say export export const app or i can call it fire firebase like here so it says to do add sdk for the firebase product you want to add okay i will do that if i need it but for now yes this is fine now what we have done we have used this code in our project what next it says click on next it says now you need to install a cli because later on we will need it for the deployment so let's install it right now and while this is installing click on deploy first it says you need to do the fire base log in then init and finally do the deploy part okay so we can do that later but let's continue to the console so here we are and go to the authentication because we need to have our authentication click on get started on the authentication and it says which one you need i need email and the password so let's enable this save it and yeah email password is here so this is good but how do we really do the authentication we have the firebase in our system like here but what is the real process so when i go to the register like here then we need to first register our application so to register it we need to go to the documentation so click on go to docs and then we need to search for authentication so where is the authentication thing yeah build is authentication where now here we say how to get started it's for the web part and getting started it says you need to have these things which we already have but finally it says that from firebase auth you can say sign in with email and the password so this is for the signing in but how about creating the user so create user with email and the password now we can use this and then we can see what's going to happen but where we can use it on the register so click on the register component we have this submit button and then we can we can get the create user password from firebase auth so copy this thing from here and paste it then we need to create the user with email and the password what is the code we can just copy all these things and paste it here and we don't need to do do the console log right here so get auth we don't need we need do we yes we need the get auth then from where we are getting the email in the password we have the form so we can say this dot form dot email this dot form dot password we just need the password but we also have the confirm password so we can do something like if this dot form dot password is not equal to this dot form dot confirm password then we can create a variable called pass word matched is going to be a boolean and we can say it's initially false and if it is matching i can say if this is matching then i say this dot password matched to maybe i can do reverse so i can say this dot password matched it is equal to false and initially i can say no error so it's going to be true so if the matching is good then we just return so that we will not do any authentication nice so first we create the user then it says you nee you are signing in and if there is any error we will handle the error but what we want we don't want to sign in a user we want to move the user to another login page maybe but let's see is this working or not and for that i will just say user credentials and logging in okay so from the register form we are sending all the detail and let's do the magic open the console and say sarthak at bitfumes.com password is secret123 password is secret123 and click on submit and now we have this thing it says no firebase app or default has been created so it says you need to initialize the app oh really yes we are doing this here so we need to import this file in our project but where we will do that for that let's go and first change from js to ts because it's all about typescript and then we can remove these things and just say export default of this firebase configuration and for now i just say can't find name okay so export const is also going to work okay so then we will go to the app component and whenever this project is initiated the app component is initiated for that we say on init we say ng on init and then we need to initialize the application so if i first i say initialize auth it's not auto initialize app initialize app actually and i can get that from here so what was that initialize app okay and i can do this here and then i say initialize app inside that we can say firebase config which we are loading from our configuration now firebase is loaded and now it should work but it says module has not exported config we are exporting cons to firebase config so firebase config is imported oops i think it was not compiled anyways so once again it's not submitting but i need to say sarthak with films.com secret one two three secret one two three click on submit and yeah after some time you can see we are having the user detail and that means in our firebase if i go on the users yes we have this user congratulations we have implemented the user registration but first what if we have a wrong password then what's going to happen you will see that there is nothing happening because we have restricted it also uh we don't have any loading thing here so we are not worrying about these things that can be implemented i am focusing more on the heavy part so we did the registration how we can do our log in so let's work on the login system so how do we do the login or authentication so here we have getting started on the documentation and now we can see that we have sign in with email and the password okay so once again we need to have all these things here copy that and what's that namespace worked anyways so we can go to the login component and here on the submit part let's do this import it at the top and yeah so this will be this dot form dot email this dot form dot password and that's good now if there is any error i just do the alert credentials does not match our record okay but if user is there i will say alert yay log in success okay that's good so let's go here on this and say sarthak at bitfumes.com and say secret one two three open the console open the network click on submit and yeah it says login successful cool so we are done with that and this means we are easily able to log in our user now what if i say any incorrect information like this click on submit credential does not match our record very very nice so this is good but as i told you we need to have some loading system in our application so here we can define is loading which is boolean which is boolean and initially it's not loading but when i start submitting so this dot is loading is equal to true and whenever we are done with the things do we have the finally yes we have the finally part this dot is loading is equal to false so whenever the firebase is doing something we have the is loading true that means we can go first we can say if this dot is loading is true then just do the return that means if it is in the loading state then if even if user is clicking do nothing okay so let's go to the login component and here on this button we can just say um we can use the button instead of this and call it submit and button type will be type will be submit like here and then we can do this thing and obviously this class also and the part is done here okay everything is good but the benefit of this is we can just go here and say ng container and this is going to say loading loading dot dot dot and once again ng container this will include the submit now we are only going to show this loading if is loading is true and we will show submit if is loading is false so right now it's false obviously by default so then i say something and then i click on submit it's a loading and you can see we are getting the record similar thing we need to do on our register so register component is here and let's have this and we need to have this code also in our register so i can copy this thing register [Music] and do all these things cool and the final part is the finally so that whatever is the condition i say this dot is loading to false so this is done and we have proper login and register but we also have this cart so what if we do some kind of logic and say that cart will be only available if user is logged in so let's implement this thing now to know about log in user we have to use this auth and we can get the current user but before that whenever i log in i need a state which tell to the angular that hey user is really logged in so it's going to be the state but where we should add it i want to add it on a auth service let's generate a service so generate a service called auth service inside the auth directory now we have the auth service we don't need the test file so auth service is here now inside this odd service we can see it's a root that means available everywhere so first thing is i'm going to create is authenticated is going to be a boolean thing and initially it's false that's good but then we also need a log in function and then we need a register function okay this is good and we will call these functions from our components so you can see on a login component we are using a lot of code which is not recommended so let's inject auth service auth service and then here yes we have we are having this loading thing but after that we say this dot service dot login that's it and copy all these code to login function and we can import these like here here and we need to also pass the form so i can say form so now i can remove this dot form and that's it form is login form type okay now everything is good but in this case what we have to do how do we change this so what we can do we can actually move the is loading part also here because at one time only one page will be active so that's not a big issue in this way we also need to move these two and pass this dot form okay so let's do this cool we are done with the login thing similar to the login we also need to do the register move all the thing from the register so copy paste this dot auth service we need to create it private auth service is auth service then say odd service dot register this dot form passing the form detail we don't need login information and we can go to the auth service here accept the form which is register form and do all the things we want and let's first remove this dot form and this dot password matched let's move this also here password matched everything is fine and create user also imported no need for this dot form and yeah everything is good but remember one thing when user is successfully logged in yes we need to do this dot is authenticated to true yay but if the user is not able to log in i say it's going to be the false and if the user is registering then we need to move or redirect user to our home page so for now i just say this dot is authenticated is equal to true and if there is any error make it false now let's try this and if i go on the login page it says hey i need a loading but we have moved the loading inside the auth service so how we can use this odd service for our loading component so loading login component so here inside this i'm going to create is loading function which is going to return this dot auth service dot is loading and instead of a property i'm going to use this loading function here so i just need to say hey use the loading function now this is working going to work and you see this is fine okay so if this is working here we need to do the same thing on the register component so let's create is loading and return this dot auth service dot is loading and we can remove any variable or property if we have created go to register component and do the same thing now everything is fine and we have all the logic in our auth service which is is authenticated if this is true then we can go here on our app template and then we can use ng container and is this container i have used yes so i can move this to only if user is not authenticated if ng ng if not off is authenticated if user is authenticated then i create a button which is saying that log out okay and class of margin x4 let's try it says is authenticated does not exist now this is authenticated is not exist because this one is on the app component and now our app component doesn't know about that is authenticated thing so once again here also we can say constructor private auth service is auth service and there are many ways to do these things i'm just doing a simple one and similar to that is authenticated function i'm going to create which is going to return this dot service dot is authenticated okay so now i can call this function which is going to check every time we are having so okay so i yeah i need to remove this not sign from here now user is not logged in yes i can say correct email and the password secret123 click on submit loading and you can see now we are having this log out thing how we can do the log out and how we can really redirect user to the cart page or home page let's see so once user is logged in we need to redirect to the home page how we can do that so go to the login component actually on the auth service because here we are doing all the authentication part so we need to import some route related things so we need to import first the router let's call it router and then say router here and when the when the authentication is successful dot router dot navigate to the base url that's good and let's try once again sarthak at bitfumes.com password is secret one two three click loading and yes we are redirected here that's so cool and now let's click on logout nothing happening let's work on that so we need to create a log out function on our auth service where we just say this dot we need to actually use the authenticated authentication same thing so here manage the user on the manage user we should have a log out thing provide user information email verification email user password lot of things are there the authenticated user so you just need to say auth they get the current user and then we say that re-authenticated it's a re-authentic as word looking for de-authenticate a user it's going to delete the user so password authentication is going the thing we have to go on the password authentication we should see sign in is there where is sign out yep we have the sign out let's just say sign out that's good like this so we say hey sign out on passing the auth so we can get the auth from here and sign out we need to import and once the sun out then i say this dot router dot navigate to login page and that's good now let's call this sign out function from our app component but app component doesn't know about sign out because we need to implement the sign out same thing on our app component dot ts file so at click let's say sign out or log out let's say log out and go to the app component.ts and we say logout is this dot authservice.log out okay that's good and now let's see it should redirect user to the login page bitfems.com secret one two three click on submit we are logged in click on logout it's not working i think i did the same mistake whenever i'm doing so log out so i need to once again log in because we are not persisting the state and that's not a big deal actually yes and click on logout yeah it's there but at the same time once the logout is done then we need to make is authenticated user to false so this dot is authenticated to false and the final part sarthak bitfumes.com secret one two three click login and now click on logout yes everything is working absolutely fine and the very final thing of this big amazing angular course is what we need is once the user is really logged in then i don't want anyone to visit the login page and if the user is log out i don't want anyone to visit the my cart page let's implement the guard now so let's prevent the user for visiting this my card page if not logged in for that we can start with ng generate and this time i'm going to generate a guard and i'm going to call this can activate or auth guard so let's see what we are going to get it says which interface would you like to implement can activate can child can deactivate i want yeah can activate that's it that's done actually simple thing app inside the auth we have auth guard which is once again similar to the service and now it's provided in the root level but since it is related to auth i have moved it into the auth directory now this function is useful this function is going to return boolean and that depends upon what type of thing we want to do so you can see here this function is having a lot of things it's accepting these route and state then we have observable promise every other thing and finally it's returning this true true means always all things are valid and we can go to the angular we can go to the routing and routing common task and then we can search for can activate yeah we are here so just like we have created this we can see we have a next and the state we have route and the state not a issue then how we can add this can activate guard to our routing so we just need the third element and name our guard so go to the route module and here on the login or on the card actually i say can activate with auth guard like here okay so auth guard is here since it is at root level no problem with that now reload this is not working because we know can activate is returning true what if this return falls you can see it's now on the base url if i trying to click on the my cart it's not working because this thing is totally depend upon the true or false but what exactly we need to pass here so let's remove all these things because we only need one thing which is a constructor inside the constructor let's have art service auth service and this auth service is going to tell me if the user is logged in or not that's the simple thing and now depending upon that user will be able to see the my card so click on login and say like this bitfumes.com secret123 click on submit and yes i'm now logged in and what if i try to click on my cart yes i can see that wow that's so amazing now the final part what it is deploy so go to the firebase and go to the build and we have a hosting let's click on this getting started we already have this npm firebase tool if you don't have you can check here and on the firebase to so we have this firebase we don't have the firebase tool anyways so we can install it so just to do that okay so it's installing and after that what we need we need to do the firebase login from the cli okay so once this is done we will be able to run the command so now let's do the firebase log in and it says allow firebase to collect information from cli so i say yes and now it's doing this so i allow and now it's done so yeah it says firebase login is successful close this window and then it says firebase in it so i do the firebase init and you can see now one firebase debug log is created and now we have question it says which firebase feature you want i want the hosting and configure file for firebase hosting and setup action if we need but we just need the firebase hosting so we are using firebase hosting so i press space bar to select it i have used the authentication so is there any authentication related thing i have not used store i'm going to use the uh this one firebase cloud function directly and its file mm-hmm so i think that's it we don't have to do anything just press enter and now it says select an option project setup use an existing project which we directly have right here oh this is asking for the existing project on our um yeah so this is angular 14 course do you want to use your public yes so use the public directory later on if we need we can change it configure it single page application yes it is a single page application setup automatic build and deploy with github and not with the github or maybe i can do yes and no i'm not sure so just say no and it's done so now you can see firebase json is created and it says that public file public directory is there which is taking care of everything so here we are now what we need next we need to say firebase deploy okay so let's do the firebase deploy and then it's doing something deploying angular 14 cores so we are getting this url so let's visit this and it says firebase what is firebase how it's getting firebase because in our public we have this index.html we don't need this public so i'm going to delete this public directory and i will change firebase.json from public to disk directory but where is the disk directory when we need we need to create it so first let's open the package.json and we need to build our application so i say npm run build and dash dash prod for the production so i'm using it and now once this is done once the production is done then we will have a dist directory here that this directory we will use and you can see now this directory is here inside that we have a app my app directory and then we have index so we can say dist slash my hyphen app and that's good once again do the firebase deploy and let's see uploading new files and everything is done we get this same once again reload this page and whoa we have this here and everything should work so finally let's say this one two three submit and yeah now it's working absolutely fine everything is great and log out can't use the my card wow so this is final look for our course and really happy with the output and this is how you can create a full-fledged amazing angular application with all the features in build so there are a lot of amazing thing available still available in angular i have not touched that i have not gone to the depth of each concept but this documentation is so easy to understand very nice structured you have to read it and then i'm sure you will going to understand angular very easily i have learned everything from the documentation so that's the only goal cool if you like this episode please give it a thumbs up and share with your friends who want to learn angular because this course is really amazing and share your thoughts inside the comment section if you have any request for any other programming language or any other thing related to programming web development just comment below your request i'm going to create i will going to create the videos on that so see you on the next video till then goodbye

Channel: Bitfumes

Views: 266,172

Keywords: angular tutorial, angular tutorial for beginners, angular 14, angular full, angular full course, angular full tutorial, angular 2022 tutorial, angular 2022 course, angular best, angular best tutorial, angular best practices, angular 14 tutorial, angular 14 features, angular interview questions and answers, angular js for beginners, angular project, angular crash, angular crash course, angular course 2022

Id: IYI0em-xT28

Length: 234min 25sec (14065 seconds)

Published: Tue Jun 28 2022