Transcript for:

in this complete angular course for beginners you will first learn the basics of typescript and then you will learn how to use angular you will learn about important angular concepts such as binding dependency injection forms routing and more suntash is your instructor for this course he is a google developer expert for angular a github star and an active contributor to both angular and ngrx so he is the perfect person to teach you angular hi welcome to this course on angular getting started in this video we are going to introduce angular so we will talk about what is angular we will talk about framework versus libraries and at the end we will see some of the features of angular so we'll see a tiny to-do app and we'll go through some features so let's go through what is angular which is really important before you go ahead and choose angular as your framework so angular is actually a ui framework built by google and it is actively maintained by a team with uh within google which is the angular team and uh it has like around 30 members who are actively working on it angular had a previous version so uh there are some confusion regarding that so let me just clear it there was a framework called angularjs i am saying pause because it will just reach its end of life it was created back in 2009 and it was created using javascript so it was a pure javascript framework around 2014 angular team decided that they will be rewriting the framework and they'll be creating a new framework they initially named it as angular v angular v 2.0 but later they decided to drop that v 2.0 they said it's angular so we have angularjs and now we have we had angularjs and now we have angular that's it and every so after uh the initial release of angular they decided to set a set uh set a release cycle for the framework so every six months there there will be some new additions new feature requests new enhancements some bug fixes which will be released so it happens every six months at the time of recording this video angular version 13 just released so if you are wondering we will be using v13 for this particular course no because we want the stable version so we will be going with angular v12 but at the end we can actually provide a video which will walk you through how you can upgrade from angular v12 to v13 so that will be covered so that's about the framework and one important thing when the team angular team decided to rewrite the framework they chose typescript as the language to rewrite the framework we will go through uh typescript in upcoming videos so we'll not talk more about it here what else so angular is a component based framework for building scalable apps so it's almost first choice for all the enterprise applications because they want to release faster which you will see in this course once we start implementing new features you will see how uh first we can actually do and deliver things so that's why it has been the number one choice so if you're thinking about what's component of course we are going to talk about component there will be an entire section which will talk about it but just let me tell you a little bit about what component based is so you use lot of websites in your daily life so you might have visited let's say if you were trying to learn angular you might have visited angular dot io or let's say you use facebook twitter every day so if i have to tell you what components are on those websites so you might have seen there is a sidebar there is a header there is a footer and there are some content areas right so for example in facebook you will see cards on twitter it's like totally different so those are small components which we talked about and all the frameworks which are out there for example react vuja angular they're all component based so you can create components and then you can build small small components and attach them together and build your application angular being a framework it provides you set of libraries and uh it has a lot of features included as part of framework so you have routing you have forms you have pwas uh which and uh many more right so you have data binding so we'll we'll talk about those features let's talk about framework versus libraries what is framework so frameworks generally condensed set of libraries so what i mean by that you might have used for example in case you have never used it that's absolutely fine but in case you have used some technologies like java.net in past you may have seen we use something called using or we do something called import in java so what you do we actually require or in case you have written lets you know node.js code you may have seen require or now the latest version support dsm so you might have used import so what we do right we actually import some libraries so if i talk about frameworks those libraries are part of your framework itself for example in.net so all the namespaces you which you import or you use are part of the framework itself you don't go outside similarly in angular framework also you have a lot of features for example i spoke about routing forms those are part of the framework so you can just import it with from the framework itself you can extend the framework of course uh you can build something on top of your framework linux dev tools is a good example uh you have ionic framework also which uses uh some of the features provided by angular uh so as we said there are some some examples of labels are you have angular.net you have java you have any express js so those are some examples now let's talk about libraries so libraries when we talk about libraries which we talk about some specific functionality for example let's say if i have to use uh low dash right so which is a really good uh uh blackberry out there so what low dash contains low dash contains a lot of utilities function which you can use uh to uh avoid a lot of code in your in your existing code face right so if i have to let's compare to objects i can just uh import something or use something from load as rather than adding my own so you can actually combine multiple libraries for example let's let me take an example of react in case you know about react right sorry in case you want to create an application using react so what you will do you will take react you will take react router you will take for some some of the form library which is available which suits your uh requirements so you will combine all those libraries and build your application that's what you do so that's that's libraries so some examples of course react moment js in moment.js has been deprecated but yeah it's a date time library now you can use late fns which is a replacement for moment.js and you have low dash let's talk about some of the features which is available we are not actually going to go into detail because we are going to go into more detail in the upcoming videos so uh there are a few features which is provided bangalore for example it has its own template engine uh it provides your data binding so you can find the data on your front end it has forms routing it provides you observables which is which is actually another library but uh heavily used inside angular and pws right so let's see an app so it's a small to-do app don't worry about the command as of now so i'll start this to-do app and we will see some of the features in action so here is our to-do app so you can see i'm whenever i click on this urls i'm actually being redirected to another url so this is routing so this is routing functionality you can see this is a form where i can input some values so let's add a bills as a task or by groceries as another task so these are two tasks which i've added now i can also mark this task as complete so and then i can go to completed task and see what are the tasks which are which has been completed so what we have seen here is you have data binding functionality you have forms you have routing let me show you pwa as well because it's being talked about a lot and let's see what actually pw is so whenever you visit some website you might have seen this symbol which says install app this is pwa functionality so what you can do is you can install your website as a native app it will behave like a native app in case you install it on your mobile in case i install it on desktop it will behave like a desktop app so that's that's about bwm so that's it from this particular video and we'll move to the next video now hi in this video we will talk about typescript as we said in previous video while introducing angular that typescript is a language in which the entire framework is written and we need to write our code in typescript as well so we are going to go through of course we will introduce you to typescript we'll talk about some basics i mean how the language came and who invented it and then we will talk about why should you learn typescript of course the one reason being you have to write your angular code using typescript but yes there is more then we'll talk about type safety and at the end we will see uh we'll install typescript and then we'll also write our first code and we'll execute that code so let's go ahead and get started so what is that what is the typescript right so let's talk about that first so it's a strongly typed programming language now you might be wondering what is strongly typed programming language so in case you are new to typescript just hang on we will be talking about it in more detail but in case you are coming from languages like java.net or in case you learned java.net in past so you might have seen that whenever you declare a variable you say okay it is integer it is a string it means you are already defining or you are telling the program that okay this is the data type of this particular variable and it should only hold the value of that particular data type that's what types of days and it is created and maintained by microsoft so initially a lot of people a lot of new developers thought that it is created by google which is totally which is wrong of course because uh as angular was the first to adopt typescript that that's why people think about uh or thought about that it is created by google but it is not so it is created by microsoft back in 2011 and i think around 11 around 12 there was some public release which which was available but it didn't got so much recognition until unless google team decided that they will be writing their new framework which is known as angular v 2.0 that as we uh learned about in previous video that they will be rewriting the entire framework in typescript and then people started talking about typescript and now typescript also has many uh versions right right now i think the version 4 is there the major version but i think minor version is 4.4.4 so we'll see that i mean we'll of course learn typescript before we move into angular that's the whole idea about this particular section that where you will learn about typescript you will write your first program and we'll learn more about it it's a superset of javascript so let's talk about this thing uh before i i'm sure before coming to angular in case you have written uh your front-end code you might have used javascript and you might be wondering where is javascript and why why should uh we use typescript so you don't have to worry about it so most of the content com concepts which you have learned is actually same because if you see this diagram it says okay javascript is nothing but it's a subset of typescript so uh every javascript program which you have written so far is a valid typescript program and um you can actually go ahead and convert them to typescript by just renaming the file most of the cases it will work without any issue and then some type safety issues that's it but it should work so let's see what happens what uh why typescript right so why should be using typescript so as we mentioned it's a it's superset right it's a super set of javascript so almost uh learning curve is very much smaller it compiles down to javascript now this is this might be something which is confusing to you so we are saying that okay typescript is superset of javascript and then it compiles back to javascript yes that's the whole idea so script only provide your type safety so once you write your program most of the time what you see whenever you write a program or you write a code in javascript there is no type safety i mean we will talk about time safety com uh which will be coming up but yeah so the whole idea is to provide time safety to your program which will be compiled down to javascript by using which once you actually run your program or you compile your program you get all those errors related to type in your bra in your let's say in your development environment we before going to production that's a good idea it keeps your code work evergreen now what we mean by keeping your code evergreen there are many version of javascript in case you are not aware the es5 was there for a long time es5 is supported by most of the browser even including i11 and older browsers now with latest browsers we have es6 or es 2015 but that that's not it right so the uh the thing is it's going on the the development is going on the features are being added tc39 is the community which finalizes all the features which will be added into javascript and all the browsers implemented so yes uh 2015 is 2016 17 18 19 20 and then you will find 21 20 and then next those are the versions so that it's named by year and then next is of course all those experimental features but in case i want to i have written a code which now as of now uh works with es2015 and all the browser support most of the browsers support es2015 nowadays all the modern browsers now let's say all the browsers started supporting is 2016. if i have written a code using esp2e using javascript what i have to do is i have to actually go ahead and adopt to the new features right or new syntax but using typescript you don't have to you can just say okay compile down this javascript or compile this javascript to es2016 and then you are done that's it that's what i mean by keeping your code evergreen it is supported by all the major frameworks and libraries all the javascript code or all the javascript libraries you which you will find on nvm they do have something called types if they are not written in typescript or most of them are actually written by script written in typescript so of course here you can see react loves typescript react is one framework which is oh sorry one library which is not written in typescript they use something called flow and but you can write your code so now a lot of react developers are adopting typescript and writing their code in typescript angular written in typescript who the new version which is vo3 actually is rewritten in typescript so yep all the major frameworks supports even you can write your back-end code using typescript so express.js you have nesjs and all those frameworks can be written in typescript coming back times type safety so what is type safety in case uh you have written your javascript code in past you might be familiar with one error which we get a lot undefined cannot find or cannot read something or undefined or probably null errors why that happens because there is no types right i mean we you don't define that okay this particular variable will be integer and it will have a default value of something let's say 0 or it's a string and default value will be let's blank you don't do that you don't do that in javascript and when we don't do that do that and we write try to compile our code in our browser and we try to access those properties or let's say access those variables and we try to access the properties of that variable what will happen in case there is nothing no value is defined or no value is assigned or there is no data type of course you will get an error but in case i can get those errors the undefined and null the most widely uh introduce error or most widely seen error in your javascript code while compiling your code what i mean by compiling your code nowadays you have lot of compilers which is available type typescript also comes with its own compiler so it's known as csc so what if we can do is we can capture those errors during compilation time that's that's what type safety does for you languages like c sharp and java they are they have been doing from a long time but now types type script is trying to solve that problem while writing your front-end code or as i said you can also you use it for your back-end because of course thanks to node.js you can run your javascript code anywhere browsers uh you can run on your os windows local machines right it's uh but one thing [Music] now as we said typescript will be compiled down to javascript you cannot run typescript code directly into the browser that's not possible uh typescript code is something which is just for your purpose for development purpose and it will give you the output of javascript code right so once you get javascript code you can go ahead and execute in browser your browsers cannot understand typescript there is a new runtime environment called deno uh which supports typescript you can write your typescript code and you don't have to actually compile it down to javascript it will just run we will see some code where we will talk about type safety but before that let's go ahead and create our first program and see how we can run create sorry create and compile our first types of code back to javascript code so what i'm going to do is i'm going to create a new folder uh which we which i will name it as typescript demo and we will keep the entire board which is related to typescript in this particular folder and this code will be shared with you so you can either just follow the video or follow the code write the code by yourself or you can download the code and play around it that's up to you how you prefer so let's create a new folder so i'm using vs code uh as my editor you can use whatever you want to but the preferred ps code i think it uh i mean it is available for all the all the os let me show you the link from where you can download it so you can just go to google and type vs code and code.visualstudio.com you can go ahead and download the latest version which is available right now i'm using windows and it gets automatically updated so i don't have to download it again but in case you are using other browsers just go to other platforms and install it so now our folder or our workspace is available so let's follow the steps to create our first program so what we need is we first need to install node node is required in case you have already installed mode just go ahead and verify the version we are going to use a node above 14 because that's what is supported by the angular latest version angular 12 and 13 also supports node 16 but as i said i'm not going to use node sorry angular 13 as of now so let's install or just first check the version so i'll use windows terminal to verify the version which you have installed you can just say note icon v it will give you the latest version my latest version is 14.15.5 which is okay because i want to use angular 12 and it supports it in case you don't have node installed doing it for first time so you can go to node.js.org and uh you can see latest table version is 16.13 as i said and you can download it as per your os by default it is giving me windows option because i'm using windows but in case you have mac os or linux it will probably prompt you with that particular setup okay so once uh you have installed node let's see what we have to do so you need to do npm in it to create a package.json file uh we will talk about a little bit about package.com later and then we have to install typescript and then we need some uh dna to initialize typescript so let's talk about the steps so this is my terminal and uh now first thing which we wanted to do is we wanted to create a package.json file so which is npm init this is the command and it will ask you a few questions you can just press enter and move on we just wanted a few things which is like name and version that's it and main index.js is fine so this once we have this package.json file now we need to install typescript so this package.json file will keep track of all the packages which you use and which is installed in your uh workspace so that's why we we are going to use this package.json this package.json is really important file because once you publish your code on npm uh npm actually uses all the information from this particular file what are the packages you depend upon what is your name what is the name of that package what is the version of that package so everything is actually taken from here so now we have our uh file we have our package resistance file now uninstall typescript so i'm going to run this command npm installed type script and it will probably give us probably let's see 4.4.4 yes as i said that's the exact question which is available right now and now it gives you node modules folder this is where all the packages which you installed will be kept nothing which you should check in so this is only for your development purpose now we have our typescript installed we uh have our package.json file we need typescript configuration files so we need to run dsc let's see what has double hyphen get so we have to do tsc iphone in it iphone fm internet and you will get a file called dsconfig.json really important file this is the configuration file which remember i spoke about you need to change your version and then you can compile your javascript to es 2016 and 2015 that's the file so this is where all the magic happens right so uh right now we are going to just talk about the first two properties which is target and module so target by default is es5 es5 is as i said the javascript version which is supported by all the browser all the modern browsers though they support es2015 so i'm going to change it to years 2015. module is something which tell which is for where you want to actually run your code with whether you want to run it on browser whether you want to run it on your os or your command prompt or from your machine local machine so sorry not local machine but yeah on your uh os not on browser so common js we are not going to we will let it be common js right now in angular you will see it will use es next which is of course for browsers so that's it so i changed my target to use 2015 and module just kept it common js there are few more properties which we will discuss about later on now let's write our first file so i'm going to create a file i'll name it as data types dot ts right so all the typescript files will have extension dot yes but before we do that let's create a js file and see what's the problem i mean why there is no type safety so in typescript sorry in javascript whenever you declare a variable what you do so you do let let's say i want to create a variable called fnm and probably you will be saying okay this is test right but javascript also allows this so as you can see actually i declared a variable called f name and then assigned a value a number it works doesn't give you any issues but it causes a lot of issues once we once we have hundreds of lines of code and now we lost the track okay what was the variable type and then we tried to read or let's say use some function which is actually for a string but the values number what will happen of course it will give you some errors that's that's what the problem is now let's go to typescript so i'll create a variable i'll call it as a name and let's say it is sean which is not last name welcome and now try to give it us the numeric value so in typescript it will give you an error it will say okay this type number is not assignable to typestring because of course i mean this is uh you file initializing the variable you said okay this is string and how this is happening uh we will talk about it i mean we are not if you see we are not giving any data type but somehow it is saying okay this type of string so we'll talk about that as well but yeah this is just to introduce you that okay this is what type safety is i'll recommend this out and see how to compile this code so here uh what we will do is uh typescript comes with its own compiler.tsc so run tsc now once you do tsc it will compile down this code to javascript code so it will create another file with same name so you can see its name types.js and almost it contains the same wood but i mean it's a js file so this this is the output which is generated but we will be doing a few more things with are this data.ts5 this code was just to introduce you how you can compile your code and how you can write your typescript code and how you can get the es25 es2515 version as your output or javascript version as your output so that's it from this video and we'll move on to the next video now in this video we are going to talk about single page applications i am sure in case you are going through some job requirement or you are going through some development uh using new frameworks they all support single page applications right so it's it's one of the widely used word nowadays in technology so every framework all the major framework which we have they support sp so let's see what we are going to do in this video so we will be talking about what is pa and we will also talk about how angular actually helps you to build single page applications so as i mentioned spa stands for single page application and all the modern frameworks angular java you are sorry angular java and react and vujs so all those frameworks supports creating single page applications so what's the difference so in older days whenever we used to create a web page we used to create multiple pages for each and every view the problem is of course we are actually rewriting most of the htmls we cannot reuse and another thing was whenever we used to switch between the urls for example let's say you have page called about this you have page about home or home page so what used to happen is there used to be page refresh the reason was whenever you click on a url the entire compilation of that code used to happen on server side so it's like i'll give an example of a spx pages which were like uh which will uh which were used long back and it was created by dominant framework or dot using.net framework so we used to create aspects pages where like uh for each url we will be creating each page and whenever you click on a page it request goes to server server will identify okay this is the page which is which is requested and then it will compile down all the pages and then it will give you the html then a lot of developers thought okay i think this is not the most efficient way what we can do is we can just give the static pages as it is rather than actually compiling everything on servers we can actually send all the resources to the client browser and then it can render it no compilation needed so that's where others how spa came into picture so in spa what will happen is all the resources actually to render everything will be sent on browser's machine or on your clients browser machine and that's it that's the only request will have which will happen and whenever there is some page uh data which is which will be requested for example if you have some apis to get the data from there will be a request but it will not reload the entire page that's the difference in spm even though i have multiple urls in frameworks like react or angular or vu it will be like a bunch of javascript code which will be required to re-render something so in case let's say i have form i have a powders and i click on about us so some javascript code which is already which will be rather either downloaded or which is already present will just go ahead and change that particular view so it will render whatever information is required on that particular view so that's that's how spa works how angular helps so angular has its own routing routing engine so whenever you click on some urls angular knows which view to render and that's how it happens angular has its own library called angular slash router which we will learn about and see how it how you can actually do everything you can request for url you can create your multiple urls friendly urls i would say or html5 urls now which is used and then angular also offers ssr server side rendering yes it's available but again it's not like the older days where the request goes to server and then there is a full reload which will never happen so it's not the full reload which happens but here angular will actually go to server and then compile and it will give you whatever data which is required with the entire page so it's not like the difference between ssr and spa is ssr is good for seo search engine optimization in case you for you your focus is more on seo go for ssr or there are other tools available to create your static pages for example there is something called skully which you can also use so this is it from spa and now let's move on to the next so before we go ahead and learn about of course typescript in angular we need some software to be installed so what we are going to need is we are so what we are going to need is we are going to need nodejs and we are going to need an editor editor is your choice i am going to show you how you can install vs code and i use vsco personally so lets go ahead and so before we go ahead and uh start learning about typescript and angular we are going to need some softwares to be installed and that's what we are going to do in this particular video we are going to need vs code and we are going to need node.js as well so uh editor is your choice vs code is the editor which we are going to use but we node.js is mandatory and you can use any editor of your choice apart from vs visual studio don't use visual studio because it's it's like heavyweight and it has a lot of things right which we don't need generally so what we are going to do is let's go ahead and install node.js and then we will see how we can use install uh how we can install vs uh code or uh and if you prefer any other reader please feel free to install that particular so let's go ahead and see node.js first to install node.js you have to visit this site called node.js rg and there are always two versions which are available so you have lts which is long term support and you have current current is where you have some uh experimenting features which probably you never need so don't install current because in case you are using it for development there may be some breaking changes so we will go with the latest stable version uh which is 16.13.0 so it says okay this is lts long term support and let's see first how you can so let's uh open a command prompt and we will see how we can actually verify which version of node.js is installed in on our machine and then we will go ahead and install the latest latest version so i actually updated uh node.js two days ago for my laptop so we will see the latest version which is available is 16.13.0 but let's go ahead and install it anyways so i'll just download the setup so uh let's start the wizard and uh right now as i have already have 16.13.0 available it is saying do you want to change or do you want to repair or do you want to remove so i click on change and i will change nothing so that's that's what we are going to do right now so you have a node.js runtime which is required we need a node npm package manager we will talk about npm in few seconds and of course i need all the other features so i'll just click on next automatically install necessary tools if this is something which if you are probably installing it for first time go ahead and do it but i'm going to skip it right now so let's go insta uh click next and it is asking me if uh okay so it is asking me to allow to change change on my application which is okay and this is it finish right so in case you get some error just let us know uh we will try to help or uh you may find some widely asked questions on step off in case something goes wrong now next thing which we need is npm why npm npm is a node package manager which will be used to install any packages which will be required for you so we are going to use it for to install typescript we will also see npm being used uh to install angular clm and we will also see npm being used when we want to install any other packages in case we are coming from dotnet or java background in dot net you already have some you have already have something called nougat which is the package manager in uh java or mobile world you have maven to install packages so it's similar so the only thing is no npm comes by default with node so you don't have to install anything you don't have to install it separately earlier in older days node.js and pm were two different things but people started using so much that node just decided to make it as part of the node build itself so you don't need to install again there are a few other package managers available uh which may you uh which you may use in your day to work day to day work in future so you have uh yarn and you also have pnpm so those are two other package managers which is which you can use npm as i said is already installed so you can see npm hyphen v which is 8.1.0 right now and how to use it we will of course feed while installing type the next thing which we need is uh we need editor as i mentioned you can use anything any editor you want but we are going to see vs code so i'll search for vs code and this is the website and you can see there are multiple version for mac os windows linux you have unstable and insiders and you may ask okay what is insiders so insiders is something where uh vs4 team may give you some access access or some beta releases some features which is not still available for everyone and that's what insiders is recently windows 11 was launched for insider's program first and then it was launched for general purpose so stable is that's what general purpose is i mean you can go ahead and install and uh you don't have you get access to any beta features but it's okay right i mean uh probably you will be using it in product uh day-to-day development if you're comfortable going any use insiders otherwise stable is fine we will be using stable and to update visual studio code you don't have to actually do it manually uh it's it gets updated in background so when once you install it that's it that's the only thing which you need to install and then it will be updated in background regularly whenever there is a new release so let's go ahead and download the stable version as of now so it says the current version is 1.62.2 so let's see and in case we you want to use visual studio i think visual studio 2022 will be available soon but as i said i don't use it so it's really happy you can use webstorm or any other editors which you like so let's see so i'll say accept agreement and create desktop icon i'll just click on all and let's go ahead and install i already have the latest version available i'm just doing it to show how to install it and again in case you get some issues while installing vs code generally uh the problem which you get during installation is related to the access so make sure that you are running all the setups as an administrator just to avoid error in case you still get some error just let us know we will try to help as much possible uh and before you uh like wait for the response just check it on stack or for flow as well probably you will get your solution there and that's it so let's launch visual studio code and we are done so in in upcoming videos we will be using vs code for all the code which we'll try previous video we saw how you can create your first file how you can use tsc typescript compiler now let's talk about data types so whenever you start learning any new programming language you learn about data types i mean how what are different data types it has and how to work with those so that's what we are going to do now so in day types we will talk about data types we will talk about uh inference type inference which is really important we will also talk about union and intersection types we will talk about generics and literal types so let's start with data so as we said typescript is a typed programming language and so it has lot of data types which is available and we will go through each one by one and let's go ahead and do that so we already have our program our workspace ready and the first stereotype which we are going to talk about is string [Music] so if you remember this code from the previous video we already declared something called lname and then we said equals to john which is a string value but how actually typescript knows that okay this is string we'll come to that but let's uh so let's let's uh so we'll talk about that i mean how angular sorry how your typescript knows that okay this type of string and this is where type inference come into picture typescript has the ability to determine the type from the value which is being assigned it's amazing right i mean you probably don't need to define the a type because typescript can actually guess it for you but don't try to do that i would suggest always use the type because sometimes sometimes it gets it wrong when you are writing complex code and it may give you some data which is not you want so here that's time difference so it can actually determine the data from its uh the value which is assigned so here it's a string so it is saying okay its type of string which is okay but in case you have to declare a new variable this is what you will be doing most of the time so you will say okay this is last name which is type of string and then you can assign a string value to this so it's my name [Music] last name and then the advantage is now i can actually if you say l name dot generally you don't get all the methods in case you're writing a javascript code and just declare a variable and press dot you will get list of functions for sure but it doesn't give you that okay this is only string function or numeric function it doesn't give you that here all the functions which you can see are actually uh can be applied on string that's it so you have to upper string to string so let's say if i do two upper string right and i'll say let new name equals to and name dot uppercase so i'm just updating or i'm updating the name to uppercase and now let's do console.log and see the output of this particular value now here you know type script compiler tsc can be used to convert or typescript the tsc compiler can be used to convert or compile your file to javascript code but how you will run it so we will be using node but there's something called ts node which you can also use but we are going to use tsc and node so let's see so we'll run dsc first which will compile this code to javascript which is right data.js and you can see your code available here and now i can just say node and data and you can see okay uh the uppercase function was applied to this value and then you have this output so you are running this locally because we are able to run this on my command prompt because i am using node as i said node can be used to run your code on your local machine you don't have to actually run the javascript in browser so this is string i mean let's see uh the the next attempt so it also has something known as number so let's talk about numbers so whenever you have some numeric value to a sign quite unused number for example let's say let h equals to let's say 20 right but you can you can do this because of type inference thing but in case you have to create a variable and you don't have a default value you can say type colon number uh sorry not not the and capital but yeah lower so you can see it says okay now you have let age ah okay i'm writing code in javascript file my bad and you can see i can say let age which is type of number and now i can say h is equals to 25 let's which is a value numeric value but if i say age is equals to 25 it will give me an exception it will say okay this is string but i am expecting number so yeah this is something which you can do you can also do uh decimal numbers so in case you have like uh decimal numbers you can say 25.5 that's also applicable that's uh and you here right so you can see h dot so you can see you will be only able to see the function which can be applied on number so you have to fix to precision but what in case let's say you want to type cast which happens right sometimes so yes that's that's possible as well so i can say let the result uh equals to so let's say if you want to you have a numeric string value and you want to pass it to in this is a normal javascript function this is something which is not coming from typescript yep this is something which is available in your javascript as well so you can say pass it and uh string value and it will work so let's uh create select dob equals to 25 right so it's it infers the value so i don't have to do anything so it says it's a string and then you can pass this string here and using percent you can convert it to number and let's see the magic here so it says result will be type of number because as i said due to time type inference functionality type script knows what what will be the return type so person returns a number and that's what out that's what the output is we will see some uh fun i mean we will see functions as well where we will of course try to play with uh these relatives and let's see the next so after seeing bull a number there is boolean as well which is available in almost um in most of the programming languages so let's talk about boolean so boolean is something which can hold true and false values right this is what we know this causes a lot of confusion when we come from a type safe language like dotnet or java it i was actually i got into a lot of issues initially when we started with typescript because i was coming from a document background let's see why so in java or dotnet whenever you say boolean it has a default value it's false right so let's see sensitive is valid which is type of boolean and in our types of language like dotnet and java we have habit of doing this is valid of type boolean because we know it will return the default value as false but let's see what happens here i am going to do console.log result and uh not result is valid sorry and you can see here there is one error so it says variable is valid is used before being assigned it is telling you that okay this value is not assigned and it is just giving you a quick warning here but let's see let's see what happens when we run the board so i'll say tse it will uh of course bring this warning here error this uh this error sorry it will print this error here as well and why i will just come back to that in a second but let's run the node and data and you will see you will get the value as undefined so where is the default value going so actually just let's go back to uh earlier video where we said that java type script will be compiled down to just javascript doesn't know anything about times so if i go to typescript.js you will see is valid that's it and if you write this code in javascript it's it will be undefined because you have not assigned any value that was the error which is printed here so it says it's not assigned so of course it was expecting that it will fail you have you are trying to access a variable but you have not assigned the value so it will be undefined why we are getting this error because of t is config and there is a property called strict true so if you keep this in if you use a district mode by default which which is by default you cannot or you you can but you will get an error if you try to access any variable which is not defined so while working with typescript keep district more true so it's like uh it enables all strict type checking options so you can see it says enable alt type checking option we will discuss about few of this stick type modes but right now let's go with the strict mode i mean where all the strict strict options are enabled so yeah that's why it was giving enough so whenever you are working in boolean make sure you define the default value so either true or false whatever you refer i mean whatever fits of course into your workflow or in your code so use default value false order and now you can see the error is gone itself so you might have seen one more advantage that you don't have to actually most of the time run the code you can actually see this types uh type related error inside your terminal itself so it saves a lot of time during the development now let's talk about the other day type which is ally again i will uh um go back and refer for example.net.java where you have list types available right so you have list which is available in type in java's java as well as starting in javascript world we use aries and generally we do something like this so let's say if you have emp list this equals to this this is generally how your array looks like in javascript so here if you see the type so let's say it says any of array what is any so if you see here in the database list there is any as well so we are going to talk about any let's come back to that later let's talk about arrays so in typescript you can declare a as as an array of some data so you can say string l for example if i just want all the values sorry or i want this array to only hold the values of type string what i can do is i can say string and then box there there is another syntax which is available as well so i can say let i can say department list which is you can also use this syntax which is known as array and then you can use this rectangle boxes this is known as generics so that we will also talk about generics in uh [Music] we will also talk about generics but as of now let's just see the syntax so yeah these are two ways in which you can define an array feel free to use any one so it's same because once it is compiled down to javascript you don't you will not have this particular type slider because it will be removed and then uh let's see i can say emp list is equals to i can create some arrays and i can have string right so if i try to add a number you will see uh i have we have an error so it says number is not assignable to type string so yep this is string array and let's change this to numbers list and we can say number of array of numbers right so i can just hold numbers here uh let's create a number list equals one two three four five these are five numbers there are few functions which you can apply i will i will talk about few functions as of now and then we will talk about few functions when we talk about interfaces because um you can do lot uh while uh with interfaces so here you can see num list so let's try to use some function right which we generally use in javascript so here let's try to filter all the values which is greater than 2 so i can say let result is equals to i can say num list i'm not using my i'm not going to use map but i'm going to use some function called filter okay so this filter function by using this filter function i can say okay each number i'm accessing each number and then i will say num is greater than 2 and this is closing so let's see uh here i think result is already declared above that's why it is giving me errors so i can say results and i think this is extra so now here let's see the output so it says okay result will be number of array so this filter function which is of course coming from javascript is same it here what we are doing is we are filtering all the values within this array where number is greater than two so if i print this output i can say okay the system is so dot log results and let's compile using type compiler and then run node you can see we have output 345 also we can use few more so i can say results is equals to i can let's use some other function and find let's use find so i want to find a number which is equals to okay so here is a catch so if you see this results it was expecting a number of array here if you see this it says number or undefined because uh find method returns only one value so it doesn't return an array so just that's why we are getting that error because array it was array and then we cannot assign it number so that's not possible so i can just print console.log number and you will see that we will get the number i mean of course number two number equals to two which exists so let's see we have pse and then [Music] node so of course two is available in the array and we get that output so this is fine you can also use find function in case you are trying to find a single value for example let's say uh this in employee right so i think that's that's the best use case where i can say uh if this employee exists or not right i want to find that particular that particular employee so i can say emp list dot find then i can say emp and then equals to emp goes to this and then select and then we can the node and then we found that particular value so this is how you can use find you can also use i let me show you in simple example of sorry let me uh let me show you another example of reduce function which you may have uh heard about a lot in javascript with how you can use it so i'll use it to calculate the sum of number list let's see so i'll say let's sum is equals to you can see i mean if you can see this magic which is happening here this is something because of github copilot which is a product by github and right now it is in beta and you can apply for vert list so you can also use it so it says num list dot reduce so this is reduce function and here is accumulator and the number the way it works is it will calculate the sum till it reaches the end of the array so let's see and i'll just do console.log some so the output should be one plus two which is three then three plus three six six plus four four six plus four ten and ten plus y fifteen so let's see if i'm right i mean if i'm good at map or not so let's go to node and fifteen oh yeah so i am good at maths just kidding it's a simple math so yeah so this is how you can use reduce function uh to actually go through entire number uh this is reduces really useful in case you have area of some object and then you want to calculate let's say you have products right and then you want to calculate the sum of your card you can use reduce so these are few functions and we as we said we will come back to the areas when we talk about interfaces so let's move on and let's talk about the other area type which we have this is xenon uh enums are really um [Music] handy and it is available in most of the programming languages which we use let's see how you can actually use those so here you can use enum and i'll take a classic example of color so let's say i have a enum color and then i what i need is red green blue so red green blue so let's say you have some um probably design system where you want to restrict the colors which your team can use what you can do of course you can give them the list of colors that okay these are the colors which can be used what in case you can give them a typed list of course this is enums right so you can give them enums and you can say okay these are the these are the colors which can be used so let's say if i want to create a new color so i can say c which is type of color and then i can choose color dot and i can say okay which color i want green blue or red so this is how you can use enums let me show you a magic as a as we said right as sorry as i said in previous video that whenever you compiled on your typescript this types are actually removed they are not used that's only until you write the code and with enums in most of the cases you are not going to use enums on production i mean once your code is compiled you won't need this enums but let me show you what happens when you do dsc so this how many six lines of code is actually generated for that you know but on production i what i need is this line i don't need to know about this because of course i cannot change this value once in production right once my bundle uh once my code is compiled so how to uh how to take care of it typescript allows you to declare enums as const and this const will do the magic so let's see what happens that's it c equals 2 that's it this is the code which will be available on your production so what this cost will do is it will just stream down everything it will remove all the information because uh if you see enums enums actually have an index value so you can see here 0 1 2 so it will just keep those those index values and that's it it will trim down all the type information so in case you are not going to use this enums values on your production remove it by using by declaring them as const so you can actually let's say uh the example which i gave you are creating your design system and then your developers need to only select the colors from this but that doesn't need to be known once you are once your code is deployed on protection just declare it as a constant that's it so that's a very good use case and in case you want to trim down some bytes from your protection i mean when i was using.net i used to use it a lot i mean i think that when i was writing that dotnet code it was really the new feature which was introduced in uh dot net and it it is there from long time in python and very useful so let's see i mean uh what what we can do is let's use tuples to swap two numbers let's see how many lines of code feel right so i'll create let uh swap numbers [Music] which is type of integer sorry not integer so which is type of number common number so this is my tuple and i'll write a function right now so it's a function uh swap numbers and uh what this sharp numbers does is it takes to parameter so i'll say um it takes num one comma num two so these are two values it takes and it returns num to command num one now let's use it so what i'm going to do is i can say swap numbs is equal to swap numbers 10 comma 20. so let's see it says inning cannot be assigned okay so here number one so here uh i'm have to just assign the return type as well now let's see what it returns so it says okay it returns number common number and you must be wondering this looks similar to arrays what what is the difference so let's me let me show you that so here if i try to access swap numbers of zero okay here you can see i mean you must be wondering okay this looks similar to the aries but okay what's the problem here so if you can see okay i was okay the variable name was incorrect so he here you can see okay i can access this start numbers with zero i mean this is something which you can do with arrays as well here let's try to do that right so for example here num list so i can say let new num is equals to num list of zero and it works so uh if you know arrays index starts with 0 so 0 1 2 3 4. so 4 is the maximum index which we can access let's try two and five you don't get any uh any issue here i mean it's okay uh the value problem will be once you compile your code it will probably throw you an error right because there is no element at fifth index but still but let's try to do something similar here so we have two numbers available inside this swap function right so you have first number and second number so if i try to access swap numbers of two let's see again i just entered wrong variable name so here you can see it says this tuple has length of 2 has no element at index 2 of length 2 has no element index 2. so it is saying that this tuple only has two values that's it i cannot see any value at index 2 if i try to access the value at 1 it will just give me the value that's it it will not give me any exception so what what do you think this doubles can be helpful at so let's say you have an api call which gives you let's say employee list and department list as well in most of the cases what you have to do is of course you have to uh go ahead and create two separate apis or probably you have to go ahead and find the objects and then you have to assign it to two different properties to return it from your function but using tuples you can actually easily do that right you can just return first first value and second value so you can probably say this is department and this is employee and your variable can be of type employee and type of department and it can just fetch the value by index using zero or one so you can say of employee or zero a zero will be let's say employee and one will be your department so that's what you can actually do using the tuples react has a lot of use cases for tuples i have not seen that much use cases in angular but uh probably some advanced cases so we which i have never been across but yeah this tuples are really useful in case you have a function which returns multiple values you can use triples let's see uh other data so now next day type which we have is ini we actually saw any data type we actually saw any data when we were going through errors remember so uh any is uh kind of let's say in javascript if you remember it just you don't have any data types so any is kind of equivalent so if i create a variable i'll select the department which is type of any so if i create a variable with type as any here so i have department of variable which is type of any i can assign any value to this particular variable so i can say department is equal to yt uh department equals to 10 and it will accept it will not throw any exception the first thing which you should do is do not use any in your code base so try to avoid any in case you have an existing code base try to move away from any and use the uh correct data types in case you can otherwise uh there is there is something called implicit any true flag available here as well which stops you from using any by default so if i just enable this let's see and i try to act like try to say um let's take this similar previous example right so where we had boolean remember this one it says is valid is used before being assigned so here and let's see what else we can let's see if this gives an error let's say some numbering let's try to create a function so it's a function add and here let's see implicit any because we are actually saying number so it will not give a semi error but yeah and i don't try to use any uh probably i'm not able uh not able to get the error because we are saying this is any but even though if you don't give any right so if you just create a variable without mentioning any real type you will also see that okay this is also type of thing so let's try to compile this code tsc and let's see the output right so it will work is a work as a design if there is no data types assigned so you don't have any type check and your application or your code may fail in production right because you are not using the time safety feature so first thing which you should do is not do not use uh type any anywhere in case you have an existing code base try to actually incrementally do it i mean you of course if you have a large code base you cannot do it at once you can do it slowly slowly in iterations that's what you should target about so this is amy and now the other day types which we have we have void and never so let's go ahead and see but before that i mean before discussing about these two types we will go through functions so uh in functions uh functions are what click some some uh set of instructions which you write uh for example let's say if i want to add two numbers what i can do is i can write a function which will have the instructions on getting the input how to add those functions and then return it so it's kind of uh probably a reusable thing which you can actually go ahead and reuse wherever you want or it can be your business logic as well right so probably getting the api data that can be a function so uh in this particular video we are going to talk about different ways to write functions so we will talk about how you can write your function in typescript then we will talk about generic function we will talk about optional parameter required parameter and rest parameter so let's let's go ahead and do that i'll create a new file for functions i'll call it as function start is so first let's talk about the ways in which you can write a function in typescript there are multiple ways the first first is of course named function for example i can say function and then function keyword and then i can say add and this is functions dot d is right so you have add functions and now you have two parameters and it returns a plus b this is generally what we write in javascript right but in typescript as we said we will be using type saved so i can remove this and that's okay this is number one which is type of number so i will be mentioning the type of parameters which it can accept so i'll say okay this is number which is type of number and this is actually as i said this is github copilot which which is being used here and then i can return num1 plus num2 so in typescript you always have type save functions so uh in if i have to actually add a function in java if i have to create a javascript function for add and i don't define any uh types right generally i don't then i can accept strings as well and it can break your code as well but here we are saying okay this function this that function can only add two numbers so that's it that's taken care of and due to inference due to inference this add function knows the written type as well but i will suggest always have the written type let me tell you the reason why of course one reason is for compiler and what in case you try to add two numbers but you miss the written keyword which happens a lot of time i mean of course it happens with me sometime i just miss the written keyword and i just keep thinking why this function doesn't return anything let's see the return type so it says it's void remember the written type void which we spoke about or saw in the previous slide so void it means it will void it means it will not return anything right so this function will not written anything just to make sure that okay uh you don't get into such issues if i define the return type now you will start getting an error so it will say okay the function whose declared type is neither void or any must return a value because we are saying that this should written number then we have to put in return number that's th this is this is your first way to write function and then you can say okay let or let's do console.log add to comma 3 right so i can just run dsc to compile the files and then you can use node functions and you will get the output as five let's see another way to write a function so you can also write a function like let's just use subtract is equals to or remove this uh this uh and i'll say return or you don't have to return such number one minus ten so this is also another way to write the function you can see uh same right so you have just you don't have function keyword that's it so here we are saying this is something which uh we know as arrow function right so you have error function have used here and then you are saying the sub function takes two parameter number one and number two and returns a number and uh within this it will say number one minus number so this is another way and let's try this out and see subtract two minus three of course which will we should return minus one so let's see run dsc and then [Music] known functions and we have minus one as output there is one more variation to write a function let's use constraint multiply and rather than using arrow function you what you can do is you can actually use a function keyword here and then you can say return number and here you can say okay ah sorry you don't have to use a function now you can say uh return num1 into num2 so this is another variation the way of writing a function you can use i mean whatever type you want to let's see the output right so if you run tsc let's go to functions.js so you can see uh this is your subtraction this is a multiplication so all the types are stripped and this is your normal name function for so this is name and this is a named function this is a function expression and this is arrow function so this is uh three types in which you can write a function and there is more to it but you don't have to worry about it this is this is the minimum information which we need to start working on our angular code base now after this let's see some example of optional parameters required parameters and rest parameters so let's say uh now you have this add function but what you need is you need this functionality where you want to add three numbers but third number should be optional so how you can do that so here in typescript you can see number three and you can put a question mark and say type of number so now you can see num3 is optional and your add function still works if i remove this you will start getting an error because this add function requires three arguments we have just passed to so this is this is known as required or sorry optional parameters so i can use it with two values and three values as well but i mean you must be wondering what how about here right so how to use it here uh i'm just adding num1 plus num2 you can use uh the optional chaining here so you can say num3 if num 3 exist so i will say num 1 plus num 2 plus num 3 else num 1 plus 1 so this is a false statement in a single line so here you can see so it says if num three exists num uh add three numbers if otherwise just add two numbers uh this is not optionally changing and i'll talk about optional channel changing probably in next videos in upcoming videos this is not optional channels sorry sorry for that uh here uh you can also use so as i said this is optional parameter there is something called require parameter as well so here let's say i need three numbers but third number is required so i mean you can still go ahead and avoid that so i can create third parameter number three and i can assign it a default value so if no one passes this value 10 will be used so i can say num1 minus 1 minus num 3 right so num3 has like default value of 10 if no one passes then will be used but in case i pass the third value this value will be used so this is required and so this one is required parameter and this is sorry this one is optional parameter and this one is your required fact so we also have something known as rest parameters what is that let's let's go ahead and see that so now uh this function has had a requirement that okay third parameter can be optional and this is where it is required but let's write a function so let's say uh function and two okay i'll just i'll say add two and here the thing is i can pass and number of arrays n number of values after this so i have two numbers but after that i can just pass the n number of arrays that's the requirement how you can do that so i can say number three which is number array so i'm saying uh this you can see i mean so thanks to go github co-pilot it is writing code for me now so here you must be wondering what is happening here so here the third parameter is array so i'm using reduce to make sure that it come it actually sums everything and then adds in number one and number two let's see how to use it so i can say console dot log so i can say com to comma three but i can also do five six seven format argument of type number is not assignable to type let me numbers is equals to and let's try to use this numbers variable here should be okay yeah so we are using this rest operator right so i have to pass like this rest of numbers so here it will be 2 3 2 plus 3 and whatever the sum of this number is let's see dac and then we can say node and yeah so it's it comes to 20. so this is how you can use the rest parameters so in case you want to pass n number of numbers after this you can do that i mean in previous uh thing and previous without doing this you can also do this but you have to say dot dot and five six seven and i mean you can go as much as you want right so this is how you can actually pass this rest parameters or rest values so these are three uh ways how you can actually play with the parameters make sure that you always define the written type and always define the parameters type as well we will talk about generic function as well if you remember in previous video we saw an different variation of arrays remember array and then angle brackets and then we can define what data type it will have area of saying rf number so generic functions are like it can be like a function which can have return type based on what you pass so it will it will be like it will act like a placeholder so whatever you pass will be removed and uh will be returned at the runtime so let's go ahead and see that but before before going to that let me show you one more way to pass the data here for in the rest parameters we saw you can actually pass three dots but you can also do this you can just say five comma six comma seven comma eight i mean so the way it works is there is parameters it will take these two as first and second parameter and rest of the values will be passed here num 3 which is really cool about respects right so you don't have to go ahead and define 10 parameters or 10 different parameters to actually hold those values now let's go ahead and create our first generic function so what we will create so what we can do is let's create a function which will take the array of string or area of number and then it can concrete all the values and give it to you as a new array let's see let's see how we can build it so here is the function so it uh function name is get items so we are saying this t is our placeholder you can call it anything you want so generally this was very confusing when i started learning generics i used to think t some t mean something because everywhere everywhere you go you will find t or every programming language you go for uh generics you will find t so it's not like that you can also make it type and then just change everywhere from d to like the official website of typescript which has a typescript handbook they use this pattern so they don't call it t to avoid this confusion they use time so we know okay what we uh what we mean is this is a placeholder it doesn't mean anything so uh let's try to pass some values and use this function so okay i'll call it as com get result is equals to we'll call get items and right now let's see what we are doing here so we are passing the array of numbers and it knows that okay we are saying okay as this number all the types are replaced and it is replaced with numbers so you can see this is how generics work so i can also do this is equals to get items and now i can pass abcd and now you can see it will say okay the return type is string you can also do this you can pass the written type i mean the type t here so you can say okay it will be i'm expecting to pass number and everything which will be returned should be of type number array and same here so it can infer the values i remember we we spoke about inference so it can infer the values and it can give you the proper proper return type so this is really useful in case you want to create some reusable function which apart from its type right uh it can uh we can take any type and it can work so you can do this you can actually go ahead and create that function as generic function so you can replace this type with whatever you want whatever you are working with now we are going to talk about classes if you have very any prior experience in programming you might have heard about classes because object oriented programming starts with classes you have like inheritance or polymorphism everything is around classes in javascript there was no concept of classes for a long time am i wrong yes i'm wrong so there was a way to create classes in javascript but the syntax was little bit different and it was uh it was kind of you may know this something called iffy immediately invoked function expression so that was equivalent of class in javascript and with es6 thanks to a6 we have class syntax available so thanks to es6 we have this class syntax available and typescript had it actually before before even that it was introduced in esx so uh earlier typescript actually you should like we used to write class syntax in types then it used to transpile into es5 and then used to give a cp function but when es6 introduced classes it started actually giving you class class syntax so you will see when we write classes the syntax are pretty much similar in javascript as well as uh typescript so let's go ahead and see what we are going to see so we will see of course we'll talk about classes we will see how you can create classes we will talk about properties and constructor we will talk about the how you can create methods how you can create instance of a class we will also talk about member visibility and then static members so let's go ahead and get started and let's create a new file so we'll call it as class yes so how you write class so you will use of course class keyword and let's name it as employee so uh for naming convention uh prefer this uh pascal case employee so let's say employ if i have employee information so i will be capital so right this is your possible case so right now we have a class called employee so this is how you create class and let me go to ts config.json right now and remember we changed this target es1015 we are saying uh we are going to support modern browsers but what in case i want to support older browser so let's see how it used to create classes or we used to create classes in older days right in es5 i can say tsc and it will transpile and give us this height so you can see this this is known as the immediately invoked function expression or iffy but if i change this configuration to use the es2015 version which is now supported by all the modern browsers and you can run dsc again and you can see okay same syntax right so class employee now let's uh go ahead and see how [Music] let's add some properties to this particular class how so let's say if we want to have some properties and some constructors which we generally do let's see how we can do that so to define properties you can create let's say id which is type of you have to give type to each property you should and right now as we are in stick mode you will get this error it says id has no initializer and it's not definitely assigned in the construct so in case you have default values go ahead and do that otherwise just put this exclamation mark which will uh which will avoid this error and we can say name and we can say address so this is how you can create properties but in case i want to use constructor and i want to actually assign all these properties using constructor typescript has a default constructor so let's go ahead and see how you can create an instance of this class first so i'll say okay this let emp is equal to new employee i will call this employee as uh john right so this employee name is john and then we can define or we can assign some properties so i can say okay this one name is sean and address this is 71 okay so this these are the properties these are the values which we have assigned to this particular prop and let's see how it looks like so you can just say console.log john and let's transpile this file tse and let's run it using node and you can see it gives you a employee object right and it's it is giving you all the values id name address so this is how you can create a class and assign its values here now let's talk about constructors so constructors are something which will be which will be responsible for creating an instance of this class so how you can use constructor of course by default there is a default constructor which is available you don't have to in case you don't want to or you can have parameterized constructor so in other programming languages you can actually have parameterized constructor as well as default constructor in typescript you cannot have both you can have either default constructor or parameterized constructor so here let's try to actually do that i'll create another constructor function i'll constructor [Music] so you will get an error so here you can see it says multiple constructor implementations have not allowed so you cannot do this by using constructor of course we we can avoid this in case we have default values right we can do something like this i can say okay this dot address is equals to address you can see as soon as i do this the error will be gone and then i can set this dot id equals to id and this dot name equals one but once we do this i mean what we are expecting is we are supposed to pass this properties by creating the instance so where we are getting the instance you can see at line number 15 and we started getting the error as well because we are not passing those values and it is expected that whenever you are creating an instance you have to pass the value so rather than actually passing this values here on line number 17 18 and 19 we can go here so we can say one comma john and address is highway 71 and we can remove this otherwise that will just overwrite the values which we don't want to and let's run it again so i can say tse and now i can just note and you can see you have the properties right so same values which was assigned here is available so this is how you can actually add properties and this is how you can create a constructor function now let's talk about uh methods how you can add methods to your class to create methods you can just give a function name you don't have to use function keyword so i can say okay get name with address and what i can do is i i want to actually have a written type as we said we should have a return type here string and i will say okay this is written uh this dot name plus this this dot address here actually i want to introduce one more uh syntax to you so here we can see okay we are passing this dot name and then we are passing we are concatenating two strings basically so we have this dot name and then there is a name will be john and then his address which is is highway 71 let's try that out right so i'll say let address is equals to john dot get name with address and then we'll just do console.log here on line number 27 and let's do tsc and we have this john highway 17 but this way of concatenation is really uh buggy sometime because your you may miss this so it happens it happens it happens with everyone uh it happens with me it happened fit me uh in past as well so what you can do is you can actually uh use the another you use another syntax which is a string literal uh you can actually do something like this so you can say uh in single quotes so you can use this this key which is filled which is known as tilt you can press this without shift right so looks like single quotes but it is not and then you can put it inside the dollar and curly brackets so variables you can replace with curly brackets and here also i can do same so i can say dollar curly brackets and now you can see i have a space here i don't have to manually put a concatenation sign which we did earlier and do that so i can say uh john stays at hyper 71 and let's see the output and this is something which you can do in angular as well so it's not like something specific to typescript i mean uh you can do where you can actually go ahead and utilize this code in your real-time application so using this string literals so you can see john stays that have you seen even no need to actually go ahead and concatenate using plus sign or uh no and you don't miss your spaces right that's that's the cool thing about it now let's talk about creating instance we so what we learned so far is we created a class we created uh properties and constructors uh we added properties we uh also added constructor we added a method we created an instance of class this is how you do it right so using new and class name uh let's talk about visibility right member visibility here uh you can see you have properties id name address but before that i i think i'm used to actually talk about why to create classes that's really important right so in your application what you are going to do is you are going to create a lot of you are going to create a lot of code which will contain your business logic how to actually write those business logic or where to write those business logic that's where class is coming comes really handy so a class will be responsible for like uh handling some business business logic which you will be writing for example let's say in angular we are going to use classes for writing services which can have like getting data from your backend and displaying it on your front end we will be using it for components which will be kind of your view so it needs some back end right i mean it needs some glass to actually give the data back to your html that's where we will be using classes so it's it's it will just wrap your entire business logic you are going to write your business logic into classes and you will have like tons of classes right different classes where you can have different logic for example if i'm writing some logic related to uh getting the data from my back end for all the rooms i want for example if i take an example which we are going to go and implement in our this course we are going to create an hotel management application so well let's say you have like lot of rooms available so you can write the class to get those room data and display it on your front end and assign or you can have like logic to assign your rooms those are the different logics which we will have so those logics will actually go into your classes so it classes makes like splitting your logic uh into smaller chunks right that that that is what your classes are going to make it possible and you can do lot of stuffs with classes which we'll see uh here let's say uh we have right now id you can actually create blog uh this is private uh keyword which is introduced in new version of javascript and now supported by typescript as well or you can also use private keyword but i just think you should not anymore because it's the native one is supported so you can say hash id let's see what it says so it says hash id is declared but its value is never read because it says okay it's a private value sorry private variable you can see now we have actually started getting this error here as well so i can say private or i can just use hashtag in case you want to keep it private so here you can see private id and then uh with private uh sorry private variables you can actually assign them into your constructor so if i keep the this one hash id so what i have to do is i have to go ahead and change it here as so i can assign this inside my constructor if i try to access the properties you can see i'm not able to access id because it's a private it's private to the class and we won't be able to access whenever we create a new instance of that particular class so that's the private property for you and prefer now if uh as you will be using probably android 13 in future i mean by the time this course gets released i prefer hash id which is like the native syntax for creating private variables in javascript so this is private by default all the properties and all the classes are public you don't have to mention that you can also make it protected so you can see okay now i have made it protected so why uh what protected does it is useful in case you want to extend this particular class so let's create another class i will call it as class manager which extends employee so ah here it says uh constructor for derived class okay this is this is something which is required in case we are extending so we have to call superb and this is it now here uh we can actually access all the properties so you can see i can get address and name uh properties which will be accessible here and [Music] but you can see uh whenever you create a new object you won't be able to get i mean so protected is something which will be available within class and the classes which extends this class so right now i can go ahead and access uh this name inside my class as well as the class which extends it but once you create the instance you can see it's not available it's uh something which is not visible to my instance a public instance which is created so this is how you can actually use protected classes between like in case you are trying to extend this is also known as inheritance in uh other oops concept so you can you also call it as inheritance so you can also get access to all the members i'm sorry methods as well so i can actually create uh this get name with address but here i can say this manager this uh whatever name is a manager at this particular branch right so this is really nice so i can say okay this let create let's create a new mic so mike is a manager who stays at cherry stripe and i can do console.log and get name with address now let's see we created an instance and then we have actually a new i mean we have implemented this my manager class actually implements its own method which is called get name with address but for in case i don't do this let's do that you can see i can still call get name with address what happens now [Music] so in this case what what will happen is your manager class knows that okay this method exists in my parent class so it will call the parent class so this is this is something which is really nice about inheritance you can achieve this and let's roll it back so we have its own function as well and we have implemented by manager so this is from member visibility and you can have static members as well now it is allowed so let's see uh static members probably let's talk about i can say static and should i create a method let's create another and i'll say return 50 right i'm just returning a number so with static members static members are something which can be accessed with the class name so here let's see what i am referring to so i can say john dot you can see it it has address and gate get name fifth address where is this particular function which is get employee count so you can do is employee dot get employee count so you will be able to call this particular method on the name itself without creating a new instance so this is what happens in static i wanted to show you one more thing yeah i wanted to show you getters and setups right so this is something which is widely used in programming languages like java and dotnet you can use skaters and setters you can also use getters and setters in typescript so here i can say get emp id so as of now you if you remember emp id is a private variable so it cannot be used outside you can it cannot be accessed outside but in case i want to access it so i can do is i can say okay this is a getter method and i can say return this dot hash id similarly i can have a setter with same name and here i can say this will be id which is type of number and i can say this dot id is equal to id i'm just assigning it so i i don't want to return anything i can say okay this right so this is the setter which will assign the value and this is the getter which will get the values here so now uh let's say let's do this and i just said john dot emp id is equals to 100 so i'm just then changing this employee id which was assigned as 1 200 by using setters and here you have john dot um [Music] it says will be available on the instance itself so i think we already have console.log no we don't have let's add console dot log john dot emp id so what we are supposed to get it here so as we are calling it it will call the getter so we will get the employee id which is entered so let's clear and call dc again and i'll call node which is some node class and you can see i we are getting hundred so getters and setters it is also possible in case you have like hang off using getters and setters they are useful as well in case uh we will be using it in angular you will see some examples where we use getters and setters so this is it for from the classes we will now talk about interfaces so interfaces are really important i mean a lot of time you will be writing interfaces when you write a new code in angular or even uh you you use it outside why interfaces are important let's see so here we will be talking about of course how you can create interfaces how you can create uh use interfaces type you how you can implement interfaces yes that's possible how you can extend interfaces we will talk about optional properties with interfaces we will talk about object destructuring and array destructuring that's uh something which is really useful i mean you can actually avoid a lot of unnecessary code using object and direct structure and we'll see that so let's create a new file i'll call it as interface on these so to create an interface you can use interface uh keyword and then there is a naming pattern so a lot of developers i before interfaces i don't like it i mean even angular's uh documentation says don't use i so what i can do is let's create a user interface right so what a user can have so it can have a name okay it can have let's say it can have id and your user can have email so these are the properties so uh most of time you will be using interfaces as uh to create your own user defined data type so this is now a data type for eco so you have user it you uh interfaces can also have a function definition we will talk about what function definition is soon but here right now let's talk about interfaces as your user defined data so let's say you want to use complex object right so you have like name age id email and what we generally do in javascript is something like this so we create where users for example equals to and then you you just give all the property names i mean in of course in javascript you don't give type so you say uh it has name which is like blank age which is let's say one ide has one the default values right so and then you can say maybe less something blank this is generally i mean we have an habit of like creating an object in javascript but in typescript you can rather than doing this you can actually create an interface and then you can use this interface as a type so we have type safety that's the whole idea right so we can have type safety by using this values let's see what we can do so here remember uh so we have this user here and let's try to create another interface i will talk about let's go back to class here address do you think we can actually uh have a complex object as an address yes we can for example we have at this line one address line to zip code or country or city whatever those are the properties which uh your address can have but right now is it possible yes i mean i can just go ahead and do something like we discussed we saw right so we can have your street i mean city you have your state and pin so i can say okay this is pin and string so i can do something like this and you you can see we already have an error here because this type does not match but i mean writing this in your class breaks the purpose i mean what in case i want to use this address type somewhere else what you will do of course copy paste the code right which is like uh which brings the single responsibility principle when we are talking about writing a better code what we can do we can create an interface rather than this so what they can do is i can just create here i'll just move on top i can create an interface called address and and i can have all these properties as part of this interface now i can just say okay this address is type of this address and while assigning the values uh here also we'll say okay this address is type of this address and now us while assigning the value you will see that we are getting intelligence to provide all the values so you can see it says okay straight uh abc city bangalore state karnataka and you have your bin code so all this are the properties which you can pass as an address and this is typed right time so whenever your users try to actually use this particular class they will get the intelligence okay these are the types which needs to be provided in case they provide something which does not match the type but they will get the error so that this is where you can actually go ahead and utilize interfaces what in case i want to use the interface but i don't want all the properties to be provided let's try to create a value here so i can select user which is type of user equals to i mean i'll provide all the values email so we have john age sorry name age id and email but in case i want to make age optionally let's remove this i don't want to pass it what we have is an error it says it's it's missing a property which is age so in typescript you can actually make it optional by putting a question mark in front of the property so it will of course you will get phase the scenario a lot where you want to actually make some properties optional while creating you your own type or creating while creating your interface this is how you can do it so just put a question mark and that's it now let's see one more thing you can also extend interface you can also implement interface so let's say i have a new interface i'll call it as employee and it needs to have all the properties of users so i can do is extend so i think employee already exists that's what employee name is protected property name okay so this was actually we already have an employee class right so it was just name you cannot have actually this same name for two different classes and interfaces so here we can see employees extend user so we have all the properties which is part of user and you can also add your own so let's say a name age id email and i can add let's say salary as extra property so if i create a new value or create a new variable let's say i'll call it as of course let's call it as something else let employee okay so i'll call it as employee which is a type of employees now you can see you have name id email of course age is optional and then you have salary as well so if i remove salary now you will start getting an error that salary is missing so this is how you can actually extend an interface it is also possible that your interfaces can have method definition what do you mean by that so let's create an interface and i'll call it as login and it has a login method which returns boolean for example or let's say which returns type of user so this is method definition you are you are not responsible for implementing this method who can i mean of course the class so let's go back to class.ds and we want to use this interface how we can do that this class exists in different file this interface exists in a different file this is where we will also talk about one concept which is known as module cs modules in typescript or now available in with javascript as well you can actually import uh sorry let's not jump to the con the terms right now but what you can do is you can refer to some object which is which is defined in different file into another file how so whichever object needs to be used outside you have to mark them with export keyword once you add export keyword these whenever it is compiled your code knows that okay this particular interface can be used outside of the class now where we want to use this particular class what we have to do is we have to import we have to use import statement and then we use calibrate brackets from and give the relative path of that particular file so that right now the relative path path is interface don't have to give the extension remember i'm not using extension yet thanks to bs code uh you get 10 deletions so once you press ctrl space bar you will see how what are the things which can be used outside of this particular module out of interface so interface is a module and then you can use login from here now i can just go to employee and say i will implement because i want to implement this particular function so i can say okay implements login and you can see there is a of course uh option which says uh there is an alert which says you are not implementing this um login uh sorry interface properly so let's implement it and you can see here so i have login and which is type of user and probably you can return a new user and let's copy the user from here we already had a user defined right so you can just return and okay so here uh this is interesting so uh we have said uh we are saying that okay this is the date and type which is user so what we have to do is we have to also mark user with export keyword yes you're right so we have to say okay export and now i can just go ahead and use in class so i can if you can please click here and you can say add user to existing import which is available here and this is it so we have implemented our login method as well you can export in sorry you can import in multiple ways so here we can see we are saying import each object right login user there are some other uh ways to write import statement which i generally should not use but just in case you get across this particular syntax just remember that this is possible so you can also say info star as i'll say this is user login from dot slash interface and once you use this syntax you have to refer everything like this user login dot login and uh here as well user login dot user so that's that's the only syntax so it's a it's an alias we are saying okay whatever this particular module gives to me i use it as alias user use user login as an alias and then i can access every object by using dot so don't use this i mean this is something which you should not just use whatever you need and that's it so this is how you can also uh import and export which is known as es modules and this is also you can how you can use interfaces now we will talk about object destruction and led structure let's see so let's say we have a function which returns the user information right so let's rather than function let's have this object so you have this user object and uh what we need is i need to access name and email that's it i just need two properties how you generally do that so this is the way so you will of course create this user object and then you can say user dot name password i want to access it so i can say user dot name and user dot email right so this is how you would generally access all the of all the objects but in case we actually can write this in a single line of output yes that's possible so here what we can do is we can do something like this i can say user comma email sorry name so we i can say uh this is known as object destructuring so we can just access name and email out of this three properties i don't want to read id that's absolutely fine you can also rename it for example i just don't want to use it as name i want to use it as username i mean i want to access this name property but not as name property i mean i want to rename it as a username so what you can do is name colon whatever new property name you want and that's it right and for example email also i don't want to name it as email probably i want is uh user login right so now if you see here next line i can just go ahead and use user login as a as an property that's available so this is object destructuring which we can generally use let's talk about let's talk about led structuring now so we have this object destructuring and to create or do you learn about parity structuring let's create an array first so i'll create lit users which is type of user and then so as mentioned you can use both syntax array with like brackets which is a generic syntax or this syntax and let's create few records so we'll say name you know email let's copy from here i think we have this and let's format this and that let's add one more few more records so i'll put this as so i can say 1 this is 2 and this is three and change the id and john one two now to learn about our uh led structuring let's say i want to access the user one and user two how we can do that any idea so of course we need array syntax so i will say box and then i can say user one command user two and this is it so you will get the first record in this secondary button this let's let's try to write console.log and see if we what we are talking is correct so i'll say console.log user2 sensor dc and then we will run node this is interface so it'll say okay there is some typing issue this should be changed it's okay so anyways it says but the files will anyways compile so not a problem here so it's a node interface um so you can see you have like first record here second record here and you can also have all the values the rest of the values like this you can see you request users so let's say if i have a few more records right so let's say look at this as user john v and id is four and let's do console.log user3 awesome console.log rest users so let's use tsc again to compile the files and then we will use node and you can see our rest of the values are available as part of this particular array and you can see these are objects you don't have to actually go ahead and get it as object array and then you have to access the values it's not so you don't have to do index of zero index of one that's something which we don't have to in case you are using this array destructuring syntax and you can get the rest of the values like this all the rest users so this is a really handy in case you are working with arrays and there are a few more functions uh let's few uh let's talk about few uh let's say if i want to filter uh a value like so i can say uh [Music] result is equals to [Music] this users yeah let's use the rest users and here you can use filter for example and then you can say user id is greater than two so what are the values which is the list three and four sorry uh we all only have three and four interest users so i can say okay greater than three three so i i will get one one record with like this id four i think we are we already discussed about few array methods so let's not talk let's not uh go ahead and talk about them so that's it that's fine and this is this is it about yeah so this is it about uh interfaces one more thing uh before we move back so we need to talk about decorators and but before that before we move into decorators one more thing which we uh let's talk about so interfaces actually does not exist in javascript so let's see the output so we have this user interface which is created right so let's go ahead and see interface.js you will not find that particular interface anywhere so remember at runtime all the interface i mean once you compile your code all the interfaces will be removed they won't be part of your production bundle so you have to decide whether you want to use interfaces or classes this is generally which people do ask that when to use interfaces of when to use classes in case you want to actually retain the type by uh like once you create the prod build go ahead and use classes because uh generally used in like backend programming so if you are creating your apis it is preferred that you should use classes for written types not interfaces for example if you uh come across an sjs or you use expressions where you have to actually give some take some input you cannot use interfaces there because of course once you create your build the types are gone so you can use classes and then you can retain the type and you can also verify if you are using uh if you are getting the correct information or not so [Music] just keep it in mind so this is something which uh which is really confusing for someone who is coming from java dot and background but yeah this interfaces does not exist really inside typescript or javascript so decorators are one experimental feature which is available in typescript and it is not going to go anywhere because a lot of users a lot of frameworks libraries already use decorators a lot it was initially suggested as part of javascript but it was lit dropped so that's how they still exist inside typescript they can be applied on like um what what is a decorator so it's it's like uh [Music] you can also you can actually go ahead and modify the behavior of your class or method or a property at runtime by using decorator so are we going to write the decorator the answer is most of the time no that is uh some advanced code where you may need it why we are talking about decorator here because it is used internally by angular and you will come across multiple decorators when writing your angular 4 so let me go to code base so some examples which we'll see is for example class let's say component and you will come across let's say decorator called component so what this particular component meant so generally whenever you see something on top of class or property or method with starting with at the rate and having some curly brackets and some properties those are decorators so it can change the behavior of your class at runtime once they are executed we will not be writing our own as we said uh we will be using the one provided by angular that's why that's the reason we are talking about uh decorators here you can actually write your own decorators in some to handle some advanced cases in case you want to do something at runtime uh but that's that's really advanced use case you probably will never come across that as i said these are experimental features so there are two flags which is used uh this one experimental decorators and experimental decorator metadata this needs to be enabled so you here you can say okay enable this experimental support for es7 decorators this needs to be enabled here in case you are writing your own typescript code outside of angular but inside angular these are already enabled so you don't have to do that so this is it from so this is it from decorators we will not go we are not going to go into much detail let's talk about es module uh we already saw the example while working with interfaces and classes you remember import and export keywords that's what we uh this this is what es module is all about and let's see uh we also went through actually this is also covered we also went through typescript to a different version you remember we change the target to es5 and es2015 you can change it to whatever version you want and let's see some properties of this ts config.json file and then we will end with our typescript section and we will start with the angular section so here as i said we uh we already went through target and module we saw strict no implicit any uh just enable it as well but if you see say strict true you have enabled all the strict flags here you don't have to actually enable one by one apart from that you can use some some of the uh properties for example here put output output can we see output here yeah out here for example let's say i want my all our output which is generated right now let's see so if you notice this and this file is not saved somehow if you notice right now all the js files are just created next to our ts file but in case you have a lot of files it will make your life really tedious to actually go ahead and figure out which file is your output so using root diff i can just say okay this is dist folder and now i can just to plc and once you do tac all the outputs will be generated inside dsd folder you can see here all js files all the output is a part of dsd folder uh source map which is really uh interesting because remember i said we can when only run javascript on browser what in case you want to debug your code what you what code we are going to write of course typescript what code we are going to get on browser javascript how to debug it not possible right so yes this is possible uh by enabling the source map this is also something which you don't have to because on in angular the in development mode you will find this property to be true but let's see what happens when you do source map true so let's run the ac file again so once we say source map true a new file another file will be generated called map file this map file contains the information that from where this code is getting generated so you can see uh there is a property called sources so it sources it says it is coming from class.ds right so at runtime this file will be actually used by your browser to redirect you to the correct ts file rather than js file so this is source map and i don't think so you need to know more about yeah this is really interesting i'll just i'll just remove all the dst folder all the js files so let's see uh once you do no emit you can see there is no output generated let's go back and fix this and just say this is type of address to fix this issue and then we will say this address i think we can get let's comment this as of now let's run psc again right so if you say no emit there will there won't be any output which will be generated there is another flag see selection [Music] and sources so let's move it back to false and let's say tse now you have your output generated one more thing which i wanted to show you is let's go back to interface class.ts here we were getting errors right so if you remember if you see this we are getting an error and once we run psc we are getting the error but it still generates the output let's see i mean earlier it was already there so we are not sure if it is generated or not so let's see i mean you can see even though we are getting the error we are still getting the output so remember one thing typescript cannot stop you from compiling your file it can only give you errors warnings those are like really your warnings it is saying that okay you have some type issue but it will not stop your code from compiling keep this in mind so uh in case you are like you are relying on this error and considering that your code is actually not compiled yes it is not it is not true your output will be always generated it will give you some typing issue in case it has but yeah it will also give you the output so this is it from typescript section now we can go ahead and learn about angular all the concept which you have you uh which we have learned which you have learned sorry all the concept which you have learned so far related to typescript will be used inside the angular and they are really important so don't skip anything hi so far we have completed with typescript we learned the basics of typescript now we are going to apply those concepts so let's start with angular so here we will first go through the setup and installation we will set up our workspace and we will install the necessary applications or necessary programs we will install the necessary softwares required to run our to run and create our first application so let's see what we are going to see here in this video so we will see how we can install angular cli we will see how you can create a workspace using angular cli we will create a workspace and then we will talk about the files which is available in that workspace and finally we will also talk about monorepo which is really important so let's go ahead and get started in previous video we mentioned that we won't be probably using angular 12 but i think sorry in previous video we mentioned that we probably won't be using angular 13 but uh we will use angular 13 i have seen there are not many breaking changes so let's go ahead and use angular 13 which is the latest version and which will be uh the version for next six months so you will use the same version and it will be easy to even migrate in future so first thing which we have to do is of course go ahead and the first thing which we have to do is go ahead and install angular cli which will help us to create the application so we will open the command prompt so this is the folder where actually i'm keeping all the files related to this course but you don't have to worry about it you can just open a command prompt and run this format npm install at the rectangular slash cli hyphen g so hyphen g is for global so we will be installing the latest version of angular cli globally in our machine so you can use the angular cli from anywhere so you can use angular cla from anywhere on your machine so you can also verify if which version is installed let's right now let's install it and then we'll see how you can verify the version it will take few seconds based on your internet speed so so it's installed now you can see this is the very this is the version so it says angular version 13.0.1 is installed as of now to see which version is already available on your machine you can run ng hyphen fn version which will give you this version angular cli version and it will also give you note version as said 14 is absolutely fine angular 13 support [Music] our application in case you don't want to install the global version you can also use nbx i'll show you how you can do that but let's go ahead and now talk about creating our workspace angular cli allows you to create an empty workspace where you can add multiple projects and libraries sorry angular cli allows you to create multiple projects within your workspace so you can create an empty workspace and then add projects later or you can create an workspace with a default application that's choice is yours what we are going to do is we will be creating an application with the default application which we need so let's see how we can do that i mean how you can create and workspace empty sorry how you can create an empty workspace and how you can create a workspace with default application this is the so move to any folder where you want to create your project right now i use i have created a folder called angular and i create all the angular related projects in this particular folder angular folder but choose as per your convenience so you can use engine new command to create a new application awesome you can create a new workspace so engine you and then you can give your workspace name i can say hotel hotel inventory app as we said i can create an empty workspace in case you want to create an empty workspace you can pass a flag called create application is equals to false i want to create and work space with default project so i won't be let's do that so i'll say engineer hotel inventory app and hyphen fn create application equals to false this will create an empty workspace for us we will delete it and then we'll create again with default project so right now it is installing the packages i'll just cancel it here because i don't want the packages to be installed i can because i want to delete this folder and then create a new [Music] so we want to create a new application with with a default project so here we'll just open this and open with code so we'll see what we get when we create an empty workspace so you can see we don't have much uh files available here you have dsconfig.json which we have seen we have package.json which we have also seen angular.json which is like angularjson angular's configuration file and rest of them are just read me and get ignore and editor configurance so this is it this is what you get once you create and workspace without a default application now you can add a application as well let me show you how and that will require us to install the packages so let's go ahead and do that i just don't want you to do it but let's see so to install the packages you can run npm i and it will read all the packages which is required from package.json and it will installed and then we'll see how you can add a project into this empty workspace and then we'll delete it and then we will create a new workspace with a default project okay so uh now it is installed so let's see how to create a new so what we want to do right now is we want to create a new application so you can use ng generate app which is short for application and your application name which is let's say hotel in when so this is our application name hotel inventory app is our workspace name and it will ask if you want to actually share this information with i mean this is just for like usage of the commands so it's up to you so this will ask some question whenever you create an app let's see those questions so it says would you like to add angular routing as we are going to use angular routing later on i'll say yes don't worry about it right now uh which styles it you want to use i will go with this sas and this is it so you can see a new project has been created here uh called hotel inventory and it has some files these are the files which we'll talk about later on later once we finalize our workspace and now we can just skip this installing packages thing yeah so this is how you can create an empty workspace and add project later on in case you want to and now let's see the other way where we will create a workspace with a default project so first i will go ahead and delete this folder so now once that folder is created now let's create a new workspace with and default application as result we can say engine new and you have to just mention the project name so i can say hotel in when app and that's it you don't have to mention hyphen fn create application flag and this will create it will ask you the same question whether you want to add routing i i we want to actually use routing in future so we'll say yes which style should we want to use i'll say css and that's it now it will create your workspace with default application or default project so now all the files are already generated so you can see hotel inventory app and now only the installation is going on so meanwhile let's go ahead and open this project in our vs code okay so now the first step is completed we have learned how to install angular cli and how to create an application with default project without default project i mean an empty workspace where you don't have any project or a workspace where you have a default project so now next what we need to do is we we will learn about what are the files which is available within the workspace we just created so we'll start with the last one we'll start at the bottom and then we'll go up so let's see what are the files which is available so the first file which is available is tsconfig.json you might be wondering why i'm not saying tsconfig.spec.json because that's the first file which is here right so these two files tsconfig.spec and tsconfig.app they both extend these config.js and you can actually verify here the first line extends and even if i just open app it will also save extents so what is the purpose of this two files so let's first talk about ts config.json so this is your ts configuration file which we learned during typescript you may see there are few things like strict no implicit returns so these are all flags which is available in typescript and source map then we had target remember so now uh we said we we were using es2015 now angular saying es2017 is safe to use so that's it module we said es next but yeah here it is to es2020 so which is absolutely fine and then there are some angular related flags which will uh which will be used in terms of angular you don't have to worry about it right now and then you have out here as we see as we have seen right where all the outputs gets generated and now whenever you write code in angular you will be writing two types of code most of the time so you will be writing application related code and you will be writing unit test angular says all the unit tests which will be automatically generated for you uh we will be seeing some command which will generate all the files you don't have to generate files manually so everything will be generated will be created using angular click both files will be generated by angular cli for us and this spec.json will be used by all the unit test files so angular generates all the unit test file as named as spec.ds so you can see here it says include spec.ts so all the unit test file will be named as spec.ds and this configuration file ts configure spec.json will be used to compile those pack.ds files and you will be writing rest of the code which is like dot ts files which is your which is our application code that will be compiled using ts config.type.js so that's the value difference so now as we know about ts config files let's move up so readme.md is something which will be used only for like your repositories for example if you upload your project on github github actually displays all the information from your readme and on your like on your repository let me show you quickly so this is ngrx codebase so you can see here this all this information is actually coming from readme.md that's that's the purpose of readme.file where you can give some information about what project what your project is what are some commands for example building your command testing your computer sorry building your application testing your application so you can mention all those to make contribution to your project easier then you have package.json so here we will have all the packages which we are using and there is two things i mean dependencies and dev dependencies which is available here and there are a few commands which will be used for example how to run your application locally how to build it how to run tests and you can also run it in watch mode in case you want to so it's up to you but so lot of developers get confused between dependencies and dev dependencies so it's easy to actually identify any packages which will be used and needed for your production build goes into dependencies you need packages which is just for your development purpose and it won't be part of your production build goes into dev dependencies so for example all the packages related to test karma karma chrome launcher all these packages are actually your dev dependencies even type script even though we will be writing our code even though we will be writing our code in typescript typescript is not your dependency because we are not going to deploy typescript on production on production we will be of course deploying javascript right because your browsers only understand samsung lock file is something which is used by ci in case log files are generally used by uh your ci environment it is it is optional it's up to you whether you want to use log file or not in big teams it's always good practice to use log files but in case you have a small team i think prefer uh deleting this file it's absolutely fine uh the problem in last teams is that so many developers will be like uh adding new packages removing new packages so look log file make sure that you all are on the same version in case someone changes the version they have to commit log file the only overhead is in case you add new packages or you update any packages log file needs to be updated updated as well otherwise it will your ci will fill then you have karmaconf.js file which is anything with con phase configuration not conference so karma.confor.js is it is it's a karma is actually a task as a task runner to run your tests and angular comes with a default unit testing uh framework which is available which is jasmine and karma so you'll be writing your all test cases in jasmine and then you will be using karma to run those tests you don't have to change anything here until you need to for example you can change your threshold values and you can add more uh this coverage or coverage reporters it's up to you i mean you can read more about it from karma website itself you don't have to go anywhere else angular.json will have information related to your workspace for example right now in my workspace there is one application which is hotel inventory app in case you add more projects this config this angular.json file will have all this information about every project each and every project git ignore is a file to ignore some files which should not be checked in and you can see here we have node underscore modules because this node module should not be checked in never do that i mean it's like some node module should be installed every time whenever you are running it on ci or if someone takes the latest project so it should not be checked in and then you have editor config it's like uh you can the advantage of having enter config file is the advantage of having editor config file is you can actually set up your environment your local editor based on some settings from any other editor for example you are a big fan of some other editor right adam or webstorm you can bring some configurations here so that's the purpose of having editor config browser list rc this is really important file because based on this your output will be generated you can see uh you can run this command npx browser list and it will tell you which are the browsers you are supporting right now so you can see it supports chrome 95 wedge 94.95 and some other versions right so this is this is the uh browser list which will be generated if you are wondering where is i11 no i 11 is not supported anymore angular 13 has dropped the support for i11 in case you want to support just go ahead and add or remove something from uh refer to this browser support section on angular.io and you can also go to github.com to see all different browsers right which is available and then what needs to be done to add those browsers here so this is browser list rc now apart from that what we have here is src folder this is src folder is where we are going to have fun it means we are going to write our code here node modules has said all the packages which is installed will be available in node underscore modules folder and it should not be checked in so let's see and now let's go back and talk about src folder what we have again we will start from the bottom so first file which we have is test.ts and again this file is something which where you don't have to do anything so this is used by your karma config karma control gs5 it actually just loads all the files recursively that's it to all the dot spec files right so it loads all all those files and give it to karmacon.js that's it so you can execute then you have style.scss file which is your global style sheet file so in case you want to add any global styles you can actually add it here styles.css polyfills very important file so you can see something some some text is written here and then you have only one import called zone.js what is this polyfill.ts to understand polyfills you have to like we have to talk a little bit about javascript so remember when we were talking about uh remember when we were talking about typescript we said typescript can be compiled down to any version of javascript we need does all the browsers support all the version of javascript probably es2017 yes es2015 yes but what in case we have is 2018 or 2019 even not all the browsers supports a free feature from es2015 or es2017 so how to take care of those features so what you can do is you can add folly fills for those features for so what polyfills does is it will make sure that your code which you have written are backward compatible with some older browser so for example let's say animations so when uh there is one package let me see if i can find it here okay this that's removed now we don't have that anymore but earlier in earlier version of angular there were few packages which we need to install in case you want to support animation on i11 so of course now i11 support has been dropped so that is removed but in case you want to support some features which is not supported on one of the browser you can add polyfill so polyfills will just add some extra code remember it will always add some extra code so it will always add some extra bundle or extra lines of code to your final bundle so you may like get some performance not performance it but yeah you may get some larger bun bundle uh if you add polyfills that's that's the only thing why imports zone.js here zone.js is needed to run all the code which is so zone.js is something which actually patches a lot of features or a lot of code which is not supported by some browsers uh and used internally by angular that's it that's the purpose in future angular team is planning to remove zone.js but that's uh something which is in which is still in development so right now we cannot we cannot remove it so that's polyfill for us main.ts what comes in your mind after hearing this file name main dot is of course in case you are coming from java or any uh programming background you may have heard about main static public static void main so whenever we talk about main function which says okay this is where our execution starts so this is the same file for angular this main.ts is entry point where our application execution starts so whenever you like create a new application run it this is where everything starts so you have something called if it is running in production mode this is environment variables so it says okay in case i am running in production mode go ahead and enable prod mode in case we are not we will run in development mode first all the development we are going to do and we are going to run everything in development mode and then finally we will create broad bundle which will be deployed on our production server here also we have something called bootstrap app module we will talk about this in shoes in upcoming section right now don't worry about it the only thing which you want to understand here is this main dot ts is our main entry point then you have index.html which is our main index.html which will be served remember we said sorry so this is main index.html which will be served to your user so angular is sba single page application and i'm sure you uh so most of you are already aware of this concept called spa because all the frameworks which you use nowadays we talk about sp single page applications we will talk about spas in detail once we go to routing this is fair icon this is something which you see on all the websites this icon which is you can see github icon here that's fair icon then you have uh environments folder where you can actually create your environment variables based on different environment you have so right now there is two environment.ts which will be used for development environment.ts which will be used for production we will create some more environment variables in future just to give you some idea how you can create it right now you can see there is only one property called production so make sure whenever you add more properties you should add it in both files otherwise your product build may fail or any environment very environment based uh file which you have created may fail assets this is where we are going to keep our keep our assets so what is assets in programming right so whenever you work with front end of course you will have images some static files everything goes into assets so just don't give keep it anywhere else make sure that you are adding into an asset folder then you have app this is now finally this is the folder where we are going to write our app sorry this is the folder where we are going to write our code so you have an app module here component.ts pack.ts then you have a style stylesheet file says css file html this is where you are going to write your html files and then you have app routing why this file is here this is related to routing so don't worry about right now we will talk about this while so when you once you say do you need routing module remember the question which we had do you need a routing module when you said say yes this file will be created and of course in case you need routing functionality you should say yes so these are the files so you have modules component and now let's move ahead before we go ahead and write our code or we just talk about this module which is available here component.ts files which is available here let's talk about important thing so we said in angular you can create multiple projects within your workspace that's something called monorepo so what is monorail so mono repose is something where you can actually have multiple applications so in angular you by when i say multiple applications you can have multiple application and libraries both you can actually create angular applications as well as libraries and inside a single workspace you can also deploy multiple applications from your monoreport that's advantage for example let's say you have a client who has like the admin dashboard and then there they have a client facing in client-facing application what you can do is you can just have both the application in a single monorepo and you can also create libraries which will like be shared code between or between both the applications and then you can also deploy both application from the mono repo itself it also makes sharing the code between multiple projects easy so you uh you have like a separate team which is working on admin application a separate team which is working on your client facing application or public facing application what they can do is they can create like extract the common codes keep it in library share it across and then use it saves a lot of effort lot of time and it makes like collaboration between multiple teams much easier so this is uh it from here uh the the workspace and monorail now let's talk about few things a few files again main.tas and other files i'll show you the connection between this files and your angular.json file how they are connected so let's go to angular.json file and this is our project right now hotel inventory it has project type so this is how you can identify if a project is library or application application is of course your application which can be deployed somewhere and then which has like your visual visuals or front-end application kind of thing so that's application library something which is which will have your reusable codes and you can use those libraries build those use it or publish it on nvm those are libraries so let's go ahead and see so there are few properties so first this hotel inventory app what is the source route for this application so it says src so this is this is the folder in case we create a new application we will see that later on you will see the source route will be a different folder prefix will come back to this before that let's see some more options here so here uh the first property which you have is output path this is where all the final bundles or final code to be deployed will be created we'll talk about this then you have index file so remember we said okay this is the default index.html which will be served to the consumer do does it need to be index.html the answer is no you can name it whatever you want but mapping should be here so you have index which will uh which have a path to index.html so this file similarly main main.t is again so this is referring to this file so it can be any file name i'm just saying okay this is the mapping this is how they are mapped once you start building your application then polyfills of course it is defined here so in case you want to add like uh you want to have a common polyfill for let's say you have monorepo with 10 applications now do i need to actually have multiple polyfill.ts the answer is no you can actually go ahead and just create a polyfill.ts somewhere in a common folder and then use it that's possible ts config as we mentioned for app ps config.json will be used and there is a new property called inline style language you can earlier uh writing in line sas was not supported now this so that's this is the property which is used and what will be uh actually available inside your assets folder so you have fab icon and then assets folder so once you uh let's say keep some images uh in your let's say separate folder right generally try to move them into assets folder but in case you are keeping it somewhere you can actually just pass a path here style.scss this is your global styling global style.css and in case you want to include more styles you can actually mention it here for example let's say you want to add bootstrap you want to use angular material you can apply or add all those paths here this scripts uh you can actually load some js files as well so you can actually give path here in case you have some requirement to load some external javascript otherwise just don't so these are the files which is related now let's go back to main.cs so here you have your main.ts and let's run this application and then we will see the flow how it actually goes to this what is this module and then how you get your first page so to do that i'll just open so we go inside hotel inventory yeah let me zoom in a little bit now here you have to run a command called ng serve hyphen o to run this application locally so i'll say i don't want to actually share this information it's up to you you can just change it to yes if you are working on some side project so meanwhile it is getting compiled let's go back here so here as we said so this is your main entry point to the application and it goes to so it goes to this bootstrap model so whenever use your main.ts executes it goes to this bootstrap module and it bootstraps and module which is app module and let's see what is available here and it has something uh called app model class actually and then on top of app module there is something called add three ng module so what is this let's let's talk about this and then we will move on to next topic in angular everything is a class right so you can see this app module it's a class component it's a class but to bootstrap your application you need a minimum one module remember this so in angular we call this as a root module in future it may be possible that you don't need modules anymore but right now we need modules what we do using module we will also talk about that so right now let's talk about this so uh this class this is your root module which will actually have information about all the components which will be created what is component yes we will talk about that as well it will also contain the information of any third party library or any angular specific library which is being used so if you see this import section it has something called browser module and app routing module so this browser module is actually an angular module which is available as part of angular platform browser library and app routing module is created by us when we started our when we create a created r application so when any angular module which needs to be used needs to be imported into imports array any uh components directive and pipes remember these three words we will talk about all these three any component directives and pipes needs to be registered by declarations array and this ng module will have all the information about different components different angular modules which is being used or any module which you have created by your own it means i can have any number of modules i can create n number of modules in my application but it needs at least one root module and that's why angular creates one by default and this will be loaded once you start your application or once you build your application so this is from where your execution starts so now it gets uh goes to app module app module knows everything about my application it knows what are the different components what are different modules i am using and it gives that information to your compiler now after this let's go ahead and talk about this at the retention point now your compiler needs to know that whatever class i am actually uh compiling what type of class is that what is this at the rate engi model remember just in typescript we discuss something about decorators so and we mentioned that angular uses lot of decorators so this at the right ng module is a decorator so what decorator does it modifies the behavior of your class so what this add that ng module is doing here it is giving all this metadata information that okay what are the different components i am using what are the different modules angular modules i am using to the compiler then you have something called bootstrap app component so now once you compile all the files your angular application needs to know that okay which component will be loaded first what is component now let's go ahead and talk about what is component so it goes to this app component.ts right so you can see you have component.ts and whenever you create a component you will get four files so let's talk about those four files so you will get a ts5 you will get a spec.ts file where you will write your unit test you will get a css file or css file or whatever type style sheet you have selected third and you will get an html file your where you can write your html code so these four files will be great now coming component so components are actually your views which will be actually rendered to the end user so here this is my first component so similar to my root module which is we said app module we will have one root component this is our root component that's why also the selector is named as approach we'll talk about what this selector means and what that template you are in cellular is but that's why they are it is named mentioned as as root because we need a root component as well now let's come back here so bootstrap we have mentioned that okay this is my root component and this root component will be loaded on your index.html it means in case i want to load any other view or any other component in future where i can load it i can load it within this app component.ts so now let's talk about all other files so now we are aware that okay this component this is the component of view which will be available for us now and these are the four files so html is where we will be writing our our html code and in case you create new components and it needs to be rendered you will add that into app component or testimony let's talk about this properties first so we have this first property which is named as selector so when you create component actually what you do is you create a view how it will be rendered it will be rendered using an html tag if you go to index.html this is your html tag and that's what you will be creating so you will be creating multiple reusable html tags which i can go ahead and use anywhere i want to those are components so you go to any library or any framework ui framework they will give you this custom html tags this is what you will be creating you will be creating those custom html tags and then you can render it anywhere you want to so here the selector becomes your html tag then of course it needs to render some html so you can do it in two ways in angular you can either have a separate html file separate where you can write your html or you can also use inline html as well so this template url now points to this html it says okay whatever html is rendered right now it's coming from this html so if i go to this as low plus four to double zero all this information is actually available here so let's remove it and i'll create an h1 i'll say hello what right so and you can see as soon as i press save this will be automatically compiled so this uh in angular the ng surf command runs in a watch mode what i mean by watch mode it keeps and watch on all the changes which you make in your file just on your file system or in your workspace not everything is washed so let's say if i make some changes to angular.json or package.json it won't be actually washed are you make any changes inside your src folder most of them will be watched and it will just restart the server which is running here so you can see let's press ctrl s and you can see compile successfully because of course there were there were not any changes so it was so fast that we didn't even realize but it says okay the build time was this so we have hello world here but let's see how you can actually make it inline as well i'll remove this i'll comment this uh template url property we will be using template url i always prefer having another html file to write our template in case you want to do it in line you can use template property so i can just say hello world from inline template all right let's save and you have hello world from inline template and i can also of course add h1 and you can also see uh i have installed angular inline uh angular language services i'll talk about that as well i was getting an intellisense whenever right whenever i was writing the inline html tag so let's let's let me tell you you can go to uh extensions and you can actually go ahead and install angular language service this is the angular language service it's created and maintained by angular team itself so it gives you all the intelligence inside your vs code even it gives you all the errors inside vs code so you don't have to worry about like getting those errors while compiling or building your application most of the errors you will actually get inside your editor for example let's try this out i think okay this works yeah but here you can see it is giving me option that okay there is open h1 tag so uh this is inline html template but but in case you have multi-line htmls sometimes you may don't want to actually create a separate file for your template but it's multi-line so you cannot do it in a single line that's possible as well so what you have to do is you have to rather single quotes you have to use the stick operator remember we use this in typescript as well so i can mention p let's use p tag and i can say angular is awesome and now you have multi-line html right so just add the this tick operator and then move your html here so you can see the output is available here so this is how you can do it in multi-line html as well i'll just keep this here so you can refer it in future you have style urls same so i either i can have another file to create all the style sheets sorry all the styles related to this component and or i can just have inline styles as well so it's up to you whatever whatever you prefer i'm not that good in those styles i mean i can probably yeah i can write some css but i mean i that not that advanced right so it's up to you which styles you want to use let it be a separate file or you can also use styles property to give you or to write your inline styles so i can say okay the such one will have let's see i'll commend this one and then we can use inline styles where we are saying this h1 if we have one yeah we we do have and it will have the color red so this is how you can write it in inline and as we said now you can also use inline sas code as well here earlier it was not supported so just keep that in mind with angular 12 it is supported now i'll just comment this as well okay so this is about component and we also discuss about module so now what we can do is we can create our new component and then we will start learning about the next topic or next concept which is template syntax because of course this is uh important whenever you want to start working on a new ui framework you the first thing which you have to understand is of course the language which we have learned about which is typescript and the next thing is the template engine how to write your templates and let's get into that so first thing first i mean first what we are going to do is we will be creating a new component and we will be writing our code inside that particular component okay before we move up before mo uh we go ahead and create a new component i want to again talk about the selector property remember uh there was in angular.json there was a prefix called app so this prefix is actually used whenever you create a new component in your html tag name so here app root is your html tag name and app is a prefix angular says whenever you are creating a new component have some prefix just to avoid conflict with any other html element which may exist so if i just keep it root there is possibility that root may be another html tag defined somewhere it can be native it can be created by some other library or it may be created in future inside let's say inside html as well so have some prefix generally it should be it should start with whatever your application is or let's say some people also some some companies also keep it on based on the company name right so or the application name whatever you prefer so right now we have app but we can change it to whatever we want so here let's say uh [Music] i can change it to hotel inventory right so hotel inventory app so i can say h i i know it sounds really bad hinv for example hotel inventory right so short for every inventory or let's say if you uh have some specific hotels right for whom you are creating this particular app you can keep the select prefix based on that now if you change it here you have to actually go ahead and change it here as well and once you do this you have to go ahead and change into index.html as well so you have to say okay this won't be abroad but hotel inventory management hotel inventory road right so uh or you can also do it while you're while you are creating your app so you can say create engineer your application name hyphen fn prefix equals to whatever you want but up to you i mean whatever way you want to do it so let's see if it still works yeah as i mentioned we made changes right now to angular.json and any angular.json related changes are not watched so we have to stop our server and run it again so let's do that here and we'll draw and serve again um and meanwhile let's go ahead and start preparing or start talking about the new the next topic which is template uh syntax right so we will talk for template engine and you have hello world again but if you see hello world i mean just let me show you one more thing here i can go to [Music] inspect and here you will notice this is your html tag hi nb root right and then you have h1 tag available here so this is the html tag you created right now time to create our own component so here uh what we will be doing is we will be creating will be creating a hotel inventory management app so let's create some views around that right so first what is important if uh hotel wants to manage his inventory what is the most important inventory rooms right so room seems the most important inventory they have so what we will do is we will create a component so how you can create a component is you can say ng g which is short for generate so you can also write generate if you want to we'll be using shortcut and then you have component which is also there is a shortcut to write we can write c and then your component name or your view name whatever you want to give it so let's say uh i want to now create a component called rooms so which can have information about all the rooms the uh what it has right now and whenever you do that as we mentioned this will create four files you have html css pack.ts and then your tsl ts file is where you will be writing your code html file where you will be writing your views to get the list of all commands you don't have to remember those remember just just keep that in your mind you don't have to remember all the commands all the options you can just go to docs and at the end of the docs you have the cli command reference and you can read all the commands in case there are some changes in future there that will be updated in case you get a new command in future that will be added here as well so you have all the information related to cli commands and this is our application so let's close this so now we have created our first component let's try to right now just uh see what is here it says room works let's go back to our application on sorry let's go back to the browser and see what is available here so we just have hello world so in case i want to render this rooms component or any information related to rooms component right now i have to add this html tag here because this is our entry component and you will see okay it says rooms work it means the new component which we have created is getting rendered perfectly fine you don't have to do anything let's go ahead and add some information so let's talk about templates first question why you create front-end application okay if you're wondering you get paid for it yes you that's that's the different uh answer but what else right so we create front end because we want to display some information to the end user that's the whole purpose i mean of course i can create apis and i can ask my users to just hit those api and get information right that that's uh that's developers that's that information is relevant to developers but for end users the information which is available on some some front-end application that's what matters so you get paid for that and it means whatever code we have to write we have to eventually go ahead and bind that data to our html our view that's where it will be available so let's now let's see how you can actually do that in angular every language every library has their different syntax to work with templates so how you will do it in angular so here we have already discussed about component introduction we have also already already discussed about how great you you can create a first component so we'll just skip here and then we'll come back come to just binding syntax so let's see so how you can bind that information to your friend let's close this so there are three ways uh to bind your information which is available in your ts5 to your html so you have interpolation you have property binding you have even event binding so let's see first interval interpolation you can use interpolation syntax with any basic data for example if you have date if you have a string you have number those information can be binded using interpolation even uh you can work with objects using interpolation so uh let's see what we will do is we will create um uh let's say hotel link so this is my first property and i'll just print hilton hotel right so this is the hotel name for like if let's say this hotel name we want to display on our view right now using interpolation syntax so you can just go to html i will put an h1 tag here right and i'll say welcome welcome to and you can put double curly brackets and put your variable name so hotel name is my variable name right and just save let's go back to the browser and it says welcome to return so this is how your interpolation syntax textbooks so this is string of a variable of type string you remember we said inference so it is able to infer that okay this property should be string and then we are displaying it using the interpolation syntax angular allows you to also use so let's talk about the second way which is property binding so angular allows you to actually use native html attribute properties for binding as well so what i mean by that so actually i can have a div and i can bind a value directly to this this div to any valid property of this particular tube so remember do you remember any uh valid property of div so in case uh you don't it's absolutely fine you can just go to uh mozilla docs right msdn and read about all the html tags and basic javascript so i'll use one property which is known as inner text so there is a property called inner text equals to i'll say here i i'll create another property i'll say this is number of rooms so let's say we have 10 10 rooms available in this hotel and then i can just use number of firms here so what is the difference so gen generally uh you use this in a text property something like this this is this javascript code so generally we do document dot get element by id and then you get an element by id and then you are applying a text this is normal javascript this is how you do it in javascript but in angular you can actually just avoid all this code and just directly do it here so you have inner text remember this box that's the extra layer of syntactical sugar which we are adding which angular is adding and then you are just saying okay this variable name should be bound to this in a text property and i can say okay this is a number of rooms right and you will see number of rooms available 10. so this is property binding uh remember you can only use it with any valid html property of any valid html tag if i try to use inner text i'm getting inline error remember i said angular language service can give you that that's it if i save this you will also get this information everywhere so you are getting this here you will be getting it in your command line and as soon as you fix this and say okay this is the property it will be gone from here it will be gone from your [Music] view so it's back and that's it now once you create front end of course you need to display information but you need to do one more thing as well you may need to actually collect information so how to collect information so of course in uh you may want your user to interact with your application it means you may want your user to raise the events i mean probably us save some information or probably in some cases retrieve some information based on some filters so you need those right so you need to need a way to actually raise the events as well so the third way is something which is known as event binding right so let's talk about even binding now in plain javascript we just do something like this so let's create a button and we use click equals to a function name so here you probably will be using a function name in javascript in angular you will do some just little bit extra so here um sorry in javascript you say on click so you'll be some doing something like on click goes to your function name in angular as i said every programming languages or every framework has their own different template syntax or template engine in angular you have to just put it in this banana syntax so this this is known as banana syntax and this is known as box syntax so it's put any event just remove on put a banana syntax and that's your angular event now on click equals to i can create a function so i'll create a function called toggle and i'll say this is toggle so right now we are getting an error because this toggle function does not exist let's go ahead and implement it let's go to ds and write a toggle function and what this toggle function will do is let's say it will hide show hide the rooms so i'll create another property hide rooms which is equals to false and whenever we click on toggle and set this dot height rooms is equals to not this dot height rooms right so we want to toggle the value and here i'll create a div here and i'll move this information here and then we will be using a property binding syntax so hidden is a property which i think all available on almost all the html tags which exist so hidden equals to hide rooms it's a boolean property right so true or false also true let's see so let's go back so right now we have number of rooms click on toggle and they are gone so remember but uh this this div still exists here right because hidden is a property and i can just remove it and then display this information again so toggle uh what we are doing is we are raising an event which is going and going ahead and updating a property and then our viewer is updated accordingly i'll show you one more thing how you can actually debug your application because that will be uh beneficial for for upcoming uh videos and in case you get into some issues you will be able to figure those as well so here in sources panel you will be able to see all the components all the files which you have written this is your code right so i can just go to not here so go to pages and you will be able to see all the files in dot folder so you you will be able to see localhost for double zero and then you will be able to solve them back and then dot folder is where your code exists so app and then you have your rooms and you have your dot ts file let's add a breakpoint here click on toggle and you have your breakpoint available right so your debugger available here so you can see okay uh right now the hydro property is true and we are upgrading it to true to false and now it is available here so this is how you can actually add breakpoints find files you can also use a shortcut so you can press ctrl p and open any file so you can just type app dot so let's say i want to open app modules so you can hear it do that here or let's say rooms right so i can just say room start component.ts and that's it so you can also search in case you have a lot of files of course you won't be wasting your time going through it you can just open the sources panel press ctrl p this is on windows i in i'm sure probably this will be the same across all the uh different os for chrome so control p and then just type the file name the same command control p works for your vs code as well so let's say if you have thousands of files how you will search for a file we can press ctrl p start typing the file name and that's it so you can move to any file by using the shortcuts so this is uh it from the binding syntax you will learn about interpolation you learn about property binding you learn about event binding and this is what we are going to use for all our upcoming tutorials in this video we are going to talk about directives so we will see types of directives and we will also see built-in directives in this particular video and later on in this course we will also see how you can build your own custom directives yeah so let's go ahead and see what directives are so directives are something which can change behavior or appearance of your dom element they are kind of like and uh you can say that they are a reusable function which you can apply on any dom element which you have in your application and then if you want to change that behavior of your dom or let's say appearance of that dom you can achieve that via directive directors can implement all life cycle look we have not learned about lifecycle hooks right now it will be in upcoming videos but just remember this while implementing you can also implement all the lifecycle loops because we will be using that later on the one difference between your components and directives are they cannot have templates remember we when we uh went through all the components we said there will be four files every time and there was one template one style sheet uh then we have your you'd uh sorry your spec.ts and then your dslr in directives you will be having you won't be having a template file so it will be just have uh your directives will just contain your logic so let's talk about types of directories which we have so there are two types which is one is structural directives and one is attribute based directive structural directives are always costlier because they are going to implement uh sorry structural directives are always costlier because they are going to change the behavior of your dom which may give you performance uh performance issues as well attribute directives you will be using a lot of the time probably most of the time you will be creating your own attribute based directive rather than structured directive so let's go ahead and use some built-in directives which we have available and later on uh and we will also talk about what are the structured directives and attribute based directive which we have while going through each built-in directives here so first we will we will go through ng if ngif directive and let's see what we can achieve using ngif directive let's go back to our code this is our code here so uh what we will do is we will also uh we'll create on one interface where we will have some information about our rooms so let's go ahead and do that let's create the interface i'll call it as rooms so this is our interface name then we can say export interface remember the typescript section where we created our interfaces and i'll call it as room and let's see uh what this room uh property is going to have it will have as of now we will we will keep adding more properties as we go but right now let's say we have label rules which is number then we have book rules and let's have these two properties as of now and then we'll see later on and here i'm going to create a rooms property which will be type of room which is imported from you can see actually due to angular language service it auto it can actually auto import out this is something which is also enabled in vs code so you can just go to room and uh it's not going to be arrayed it's an object and here i'll say available rooms is 10 and booked rooms is five and let's have total rooms as well so let's say you have total rooms as 20 but you're just booking for 15 right so where you have five available and five booked and five probably somehow something on hold or something like that right or going through construction so you have this now you you have this data available and what we are going to do is let's first see in the spelling i think i'm not sure why i keep rooms somehow so you have total rooms available rooms and book room so what we are going to achieve using this property is we will be using nge if directive we will see an example of directive and let's say if available rooms is greater than zero we want to display a section where uh probably you can see which which rooms are available right list of rooms which are available in future right now we don't have the rooms list so here let's see how we can achieve remember we said we can also use all the valid properties of html while doing property binding and we saw an example of hidden but there was one problem with hidden attribute so he so the problem was if you inspect this element and see this number of rooms and just let's click toggle even though uh that particular div uh element is hidden it is still available on your dom and when you have lot of dom elements on your you your view it will cause performance issues so what we can do but in case i don't display this storm element until unless i need it or i can just remove it whenever i don't have any rooms available so in that case my dom dom element will be fewer than what we can expect in case we display all the elements so let's go ahead and try to achieve that so i'll create a new div here and here i'll say for example i am going to display rooms list here in future when we have a list of rooms let's see if okay remove this breakpoint first and we get this rooms list now the cases in case rooms are available i want to display this entire thing i mean i can have anything here right i can have a list i can have whatever i want to in future we are going to have list basically so here what we will do is i can just access this rooms property here and using the ng if directive so star ng if is equals to i can say rooms dot total sorry available rooms if it is greater than zero i want to display this so rooms list right now of course our available rooms are greater than zero so we will get this rooms list and it is available here now let's go ahead and change the available rooms to zero and let's come back here okay so that particular div is gone but let's inspect the element this is this is where it gets interesting right so you can see that div entire date is gone it's not available in your dom so something which let's say there are some some secure information which you don't want to display to all user but let's say you want to enable that particular area or you want to display that particular section in some particular case that's it you have the perfect use case for ngf try to use ngif as much as possible don't rely on the hidden attribute so that's one thing now let's go ahead and change this to them so we have learned about ng if directive now let's let's go ahead and see what our what else is there so we have ng4 okay before we go to ng4 before we go to ng4 i'll i want to show you some some more i can say syntax which you can use so here in a typescript this is something uh uh this is known as optional chaining and there are two two uh sorry there are two features which are actually enabled in typescript which is optional chaining and null knowledge collision collision you can actually use both inside template as well let me show you some example so let's say if my rooms my room's property right if my room's property is not available what i can also do is i can say no rooms so let's see so what i will do here is i'll say rooms is this and i'll just have to make it optional let's do that quickly so question mark question mark question and i will commend this i'll keep it here so i can we can go ahead and use it later on but let's see so we have we don't have any uh data available for rooms let's see what we get here so we are getting an error so it says rooms dot available rooms is greater than zero and it says object is possibly undefined but in this case now what we can do so of course this will be taken care by knowledge pollution operator but you can also use the optional chaining here you can put a question mark and let's see sorry i can do something rules and if rooms and rooms dot available rooms is greater than zero let's see if it works uh-huh let's uh let's see uh we have made some changes so we are saying rooms dot available rooms so in case rooms is available we will display only rooms list here let's see what it displays okay it is showing object object which of course makes sense because we have to change we have to check for an individual object right and so here i can say i can just use the same so i'm saying if uh rooms dot available rooms is available then uh it's okay otherwise just go ahead and display no rooms and it should work yeah so you have no rooms available in case there is uh the available rows available rooms does not exist so this is something which you can use which is null collision operator and this is optional chaining so you can say okay before accessing this variable go ahead and check if this exists or not so this is really useful in case you want to bind some object you don't have to worry about it i mean whether this object exists or not so we generally do write if uh and else that so you don't have to do if an else here you can just put a question mark and try to access an object if object exists it will print it if doesn't exist it will just leave it right i mean for example this rooms list right now available rooms does not exist so it is not displaying room list that's it so these are two uh operators which is really useful while working in angular template they are available inside your typescript file as well so feel free to use them there also now once uh now we know about these operators and we know about ngif let's go ahead and do some uh extra stuff right so rooms list we said uh we want to display rooms list in case we have available rooms now let's go ahead and put this code back let's see it breaks the template it doesn't so we we still have rooms list and it displays the number of rooms which is available so which is this this line of code so rather than this dip i could have just used this which will take care of yeah i mean in case my rooms does not like uh there are no available rooms it will also show norms so let's see this available rooms is greater than zero object is possibly undefined i can just remove let's see dot available rooms okay do i need to check if it is undefined let's see let's see so available rooms not equals to undefined and rooms okay i'm still getting this set up somewhere because of this question mark which let's remove it which make it makes the value as undefined as well so you should not be getting it anymore numbers html okay let's change rooms dot available rooms greater than zero right first so we have like our uh now we want to display here groups list now we need rooms data so we need uh rooms list data so what we will do is we will create an interface and we will call it as room list let's add some properties so first thing which we will do is room type right so you can have like there are multiple room types which is let's say right now string and uh what else we can have well our room can have amenities right we will say this is amenities which is as of now string then the price of this particular room which is number and what else what else room can have i can of course i mean it is the the room type is there it can have an image right so photos which is uh which can be string area of string but let's let's say we right now we have only one one photo so this is and uh available i want one daytime property as well so we can have check-in time right so we will also have one date property and check out time so we have string number date so yeah i think this is enough this is more than enough uh information now let's go ahead and create some data so i'll say room list let's just type of chrome list and uh this is going to be adding so just and let's say room type uh amenities price and then we have photos let's take some something from uh unsplash second time let's say we have uh [Music] let's put some date uh 11th 11th november 2021 and check out time this and we have to say new date and then in your application just try to use some uh date time from daytime uh library for example state data finance whatever your uh you have decided for your application so when it is price let's say i'll just increase to increase 2 000 sorry photos let's take the same photo as of now and then we have chicken time and you have chicken time so and this won't be deluxe room but let's say private suit and rest of the things are almost same let's increase the price to 15 okay so we have this list of records available here now let's try to bind it now we know how to bind values like string number boolean we also know how to bind objects now but what about arrays so let's try binding areas here right so rooms list i can say rooms list so just let's place it here as it is and we have something called object object object so it says okay there is some object which has three records so you can see it actually printed it thrice so it means okay there are three records but i'm not sure how to read it so what's uh the way to read it yep that is this is where we our next directive will come handy which is ng ng4 we will be using ng4 so it's like for loop which will look through each and every record and display this information in the way we want to so generally uh what how you display uh area of information right on your web page the in if i have talked about in html probably we will be using some data table right so right now let's use table and in future what we will do is we will remove this table and we will use something from third party ui library because in your real-time project you are not going to create table probably never you will be using some ui library so you should learn about that and that's what we will do in probably in upcoming video where we will remove this table and then we will replace it with uh with angular material table why we are learning it right now because angular material table will uh will actually avoid or you can say uh it will it will give you a wrapper where you don't have to write this code so you should learn about ng4 in case you have to work with area of records but as you said angular material table takes care of everything so it will do it do internally all those things you know you won't be actually writing this code but this ng4 directive will be useful for a lot of other cases where you have actually era of data and you want to bind it so let's uh use table and we'll say okay first uh there is a tr and then dh we have room number room okay not room number but we are okay viral number can be on property which we missed and let's add it here so it's room number one [Music] number two and so number three so okay so we have a room number property as well so let's see uh the headers so we have room number room num room type then what else so this will be our table headers room price then we have uh room status we don't have but let's say we will have amenities right we have amenities so we have room number room type amenities price is there photo we will use later on check in time checkout time because uh we want to actually uh see some [Music] date time pipe as well and just talk about it later let's see so right now let's display this checkout and chicken and check out time check time so let's use only one chicken time here this is it so this is our header and now we want to display the information so let's come back here and have another tr and now we want to what we want to do is we want to create multiple rows remember so dr means of course your table rows which will be created for each and every record so this is where you will be applying your ng for so i'll say okay this is ng 4 is equals to let's see how the syntax is so you can select room of rooms list okay what happened here okay it's not rooms list it's long list okay so now this will this uh for loop will run for each record inside room list so we have three records right now and now let's display the information so we have room number type price room dot okay room what's wrong here see this what's wrong yes td room dot okay let's generally we should get intelligence but somehow the intelligence is not working okay so we have price then we need amenities so let's copy the properties right now amenities and then we have check-in time and that's another property check-in time okay so now we have our room list available let's go ahead and see so let's go ahead and see that on the ui here you can see all the information is available in a tabular format so i think check-in time okay we have to change it is what happened to this it is not just number two i mean it is you get a change something here i'm going to teach them when it is now this is a string okay i think i just copy pasted something hmm checking time which will be here so let's go ahead and see the ui and this is uh this is the information which we have available in tabular format so we have a room number we have room type we have room price but then we have amenities and then this is your date format so by default the you can see angular displays the long date format which we can change we will change this date format later on right now let's uh go ahead and see what happened here so we have ng for loop available which like works for each record which is available in your array there are a few more properties which ng for us let's talk about those rather than uh actually uh ng4 can also give you access to two few more things which is uh even and odd values so in case i want to find out which row is even and which row is odd ng4 gives you that so i can say let e equals to even and let o equals to r and let's print it here right so i'll say this is one more header even [Music] and let's see i mean if it's even display even or display out simple logic right so you can see even odd even so this is how your information is getting displayed so using even or not values what else we also have an index value available so in case you want to get a hold of an unique value for your row and you don't have any unique values you just want to display a running number while actually displaying your records that's possible you can say let i equals to index and here let's say i will add one more [Music] ph we can say dd and this is display i remember this is an index value so it starts from zero so don't uh don't be shocked once you see okay it's why it is giving zero because of course this is index so starts from 0 you will say 0 1 so this is it so you have this few values which is available we will talk about one more um a very important property or of ng for let's do it later because uh that will require some extra code to be written like we need services and all uh to see an example ng for every every time uh the thing is whenever you have ng for a directive used in case something gets changed it will re-render all the records within this data you can actually improve the performance of this particular ng for which we will see in a separate section how you can improve that but right now this is it this is the basics which you need to know about while working with ng4 so we are done with ng if and we are done with ng4 but we we didn't discuss about one thing you remember this star what with this star is okay we uh we have been discussed about it so let's let's uh let's talk about that star remember we said there are two types of directives attribute-based directive and structural directives so how you will differentiate between structural directives and attribute this directive so that's the star which actually lets you know or there is one more way generally in all the built-in directives which has star or structural directives yes that's uh that's what that's true and other uh like ng class and ng style they are attribute based directive so your structural directives can modify your dom remember this here if you see your uh list on your view right now you can see actually we just on in our code base we just have dr manley once who is creating these three tiers or four tiers one two three four okay first one is headers anyways so one two three three records right who is creating that so that's the task of ng for star ng4 and it is actually a structural directive so it can add and modify uh sorry it can add or remove the dom element from your view similarly if you see i mean we had used ngif it was actually adding the div for removing the tip you can actually do that on button click as well of course by changing the properties so that also does the same thing and ge is also able to add or modify the tom element so any directive which can uh modify your dom element is structural directive attribute best directives are something which will probably add some attribute to your uh element or remove something or add some extra logic to your element based on some properties but they cannot modify entire dom that's the difference so sorry they can modify the dom let's they can modify the dom but they cannot add or remove the element from the dom that's what your attribute directives does most of the time so let's see uh let's talk about ng switch we'll take an example of ng switch and then we'll talk about the rest of two class uh two attribute based directives which we have ng switch is something which is uh i have used very rarely but very useful so let's see an example what we can do i'm sure you you might have learned about switch case statement so ng switch is kind of similar which is available here so let's see what we can achieve i'll take an example simple example here and let's see so here what we want to do is for example if i am an user i'm normal user i don't want to display this room's information to the user but in case i am an admin i want to display this rooms so let's see how we can achieve that using ng switch so first what we will do is we'll create a property here i'll say this is login type we don't have login page right now so we'll just start with mock data it's a login type and i'll say this is admin right now and let's go to our company testimony here i'll use a div and i'll use star ng switch is equals to i'll say this is login type just uh oh let's name it rolled right which makes more sense and now based on whether the role is admin or if it's simple user we want to display different views so here what i will do is i will say a div and we will use star ng switch case is equals to i'll say this is uh user this is user rule i want to display you want to actually use it as string so what i can do is i can put single quotes inside it remember if i just remove single quotes it will treat it as variable as we have seen so far while binding the data so here i am i want to treat it as string so i'll say okay this is a user and here i can say uh this is let's say welcome user right so this is what you want to display to the user if it's not it's admin i want to display this room's information and uh switch case like uh switch case statement this this also has ng switch case uh will also have a default one so you can use that so default i can say you don't you're not at risk to be this page right so let's see right now our role is admin so we should be able to see everything let's change our role to user so we will see that welcome user thing so you can now have welcome user and let's type users which will say you are not authorized to view this page so this your ng switch case works so you have like your ng switch where you are assigning the value and then and you switch case based on which you can toggle your view you can display whatever you want to here so in this which case uh and ng switch case default these are the different uh attributes or you can say different directives which you have available you can use those we'll keep this code here because we are not going to use it anymore so let's see an example of ng class and ng style and then we'll wrap up with built-in directives so can you guess what ng class and energy style is related to yeah if you if your answer is related to style cs that's that's the correct answer so what we need is uh there are two ways right so i can just apply some style or i can apply some some class directly so let's see how we can do that so here i'll create two classes even where we have let's say background color and color let's change to this is looks white so i'll say this is still blue and color is white and then there is an odd class which has background color of light still blue and let's use tomato and white so let's see how we can use ng class to toggle the class between even or not we can do that here so [Music] i can apply this ng not here let's not apply on td if we want to apply it on tr so i can say ng class is equals to so if i am if my class is even then i can say okay the if it's even row i mean my class will be even else i'll say use odd class there are multiple syntax remember you can also just uh use a variable name directly here that's absolutely fine right now we are saying okay based on even value switch uh have different uh class let's change this to even let's go to view and you can see we have different rows a different background color for different different uh even an odd rows right so this is how you can use ng class also as discussed you can also have a variable for example let's say you have a class name which is saved for some user user preferences right they they prefer some different class to be used so you can save those those class and then load it by a variable that's also possible ng style is something where you have to give the style so let's see where i where we can do that uh in a text here let's try to do here so i'll say if ng ng if um zero and use the style and say rooms well let's remove it right i mean we can directly do this as well so we can say here ohms greater than zero then we can say color then color is green so we will just see this one let's see if this works because i generally don't use ng style okay it is expecting something at language rooms uh color green uh missing expected curly brackets on line number seven this is close this is okay okay this is an extra rate so you can actually we can do something like this so we can say color which is a property and then we are saying if rooms there are available rooms make it green otherwise make it red red let's see how it looks like you can see this is green color which is coming here so let's make it some other color which looks visible so i'll say steel blue okay so this is still blue now you can see of course that it is different from the the black or you can just keep it green so this is how you can also use ng style ng style also accepts variable so you can also pass a variable here that's absolutely fine so this is from the directives part now we will move on to pipes so we know how to do data binding we also learn about few useful directives next thing which we are going to talk about is pipes what is pipe so in uh so we are going to see what is pipe and then we will talk about some built-in types so let's first talk about what is pipe so in your day-to-day uh work of course what you will be doing is you will be finding some data on your front-end screen or your view and there will be times that a requirement may come that okay this particular date object should not be displayed in the long date format which we have seen probably it needs to be shown in some other day format or there might be requirement to display amount in let's say dollars inr or any other uh currency right so by default the currency is dollar of course but we may need to actually show it in a different format for uh the same goes to numbers what to do i mean of course we cannot ask the api to change the date format they will be like okay this same api is getting used at multiple places why should i do that for you so the pipes are the answer so pipes are used for data transformation so when i mean transformation it has a meaning so transformation means my original object remain as it is i'm not going to change that object but while presenting that object i am displaying it in different format so it means the pipes don't actually uh pipes actually don't change the ocean object they keep it as it is but while presenting it on your view you may actually change the format in different different format so there are few built-in pipes which we have and there are a few uh you can actually write your own bypass which we are going to do in future here we will go through all the built-in pipes which we have so you we have date by buffer case lower case we have currency we have decimal we have percent pipe as well we have json pipe slice and then we have a simple so let's go through them uh go go so let's go through them one by one and we will see uh we will apply and then see how your view looks like so let's switch back to the ps code and this is the same view which we uh wrote last so remember rooms and then we created a list so let's start with the first pipe which we have which is great pipe so we already have a property called uh chicken time right so here let's see how we can apply so you can give use this particular symbol which is available just below backspace and above enter so you can just save shift and press this which is pipe operator and then you can write okay i want to use date and let's go ahead and see this and let's see it on our view so you can see your date time format is actually changed to something else earlier it was a long date format now once you apply date it is short date format by default you can also change it with specific format as well all the formats are available on angular.iodox so you can just go to angular.io and in docs section you will see uh references so you can see all the formats which you can use here so you can also use text short medium long or you can also specify the format you want as well so it's up to you so let's say if i just say date and then in case you want to change you have to put colon and then you can write okay short so this is the format which i need short which is the equivalent to let's see m d d y by h m m a so it's like something like this this if this is the example right so uh the one which is by default is this one short date you can specify the format as well so i can say dde uh mmm and so it will be a date month in the first three characters so you can say 11th november 2021 so this is how you can actually change the formats and you in case you need time uh so you can also pass the hmm ss and uh this one two three four four sets is actually for time zone in case you want to display the time zone so this is an example of date format let's see what else we have so let's go back to slides we have about case lowercase let's see both and then we also have title case okay which i missed here right so i want to display this in lower case we can say lowercase so everything will be displayed in lowercase characters right so you can see air conditioner free wi-fi tv bathroom kitchen or everything is in lower case right now and up and i can just change this to uppercase and everything will be in camps and if i'm not drawn okay so i missed it in slide but we do have title case as well where the first character will be in capital so you can see air conditioner free f and then we have tv bathroom kitchen so every the first character is in capital that's titled now we also have currency so we can use currency and by default the default currencies in is based on the en us which is dollars so you can see dollars available here 500 thousand dollars and 50 000 you can change currently by passing the value for example for indian currency the co-designer so you can see uh it will now give us request symbol remember the uh currency uh code to its equivalent uh display uh is not available for all the currency types it is available for all the major currencies but you may actually find some currency which is missing so in that case it will just display whatever you pass here so here you have inr for example if i want to display euro i can say eur and it will display you the hero symbol and uh of course great britain bound g b g b and it will display the pound symbol saved and you will get this pound symbol here so by default it's euro but let's keep it as an inner right now indian rupees so we are done uh we saw how did pipe works how we can use lowercase uppercase title case then currency pipe we have decimal and percentage pipe so let's see percentage five first percentage is uh something which will display your value in percent so one is hundred percent remember this so in case uh you want to actually uh convert some some some numbers in percentage make sure that it is uh in decimal right so let's go ahead and see so you can see it is zero percent is 100 percent this is 200 percent so in case you have 0.5 it means 50 which is of course true right so this is percent pipe we'll come back to decimal and then we have json uh and uh slice and and we have a sync pipe so here we are going to say jsonpipe of course we will see slice paper as well as pipe we will not discuss right now we will discuss it during uh http and api calls so we have to wait for that let's see how to use this input so here uh room from list so jsonpipe is useful uh mostly for different but was for example let's say this room list right and it has a lot of objects okay a lot of other properties as well and what you want to do is we want to just check what is the value available here so if i just or just apply these uh just apply this binding you will see this is object object but what in case i want to actually see the value so i can just go ahead and write my power based on that it happens because of course in case you have large largest object you need to find okay which property exists and which property doesn't so useful for debugging don't keep json types on protection so let's see what how json helps here so i can just use python symbol and you can say json remember it's all small and now you can see okay these are the values which are available so it says okay there is a room number there is a room type these are the values then you have photos object available as well then you have chicken time checkout and these are all the properties which is available within this particular json property it can be applied it can be applied on object it can be applied on an array so you can apply it for everywhere remember again i am saying this is something which should be used for debugging purpose only should not use on production so this is jsonpipe i just keep it here i'll comment this then we had slice pipe so slice is similar to slice property or you can say slice function which exists in javascript so here uh let's try to apply a slice here and you can pass how many records you want to display so i guess is zero to one let's go ahead and see our view and you can see it says okay it displays first record because the pipe which we are using the slice or let's talk about slice function which exists right so slice function accepts through parameter first index and the last index it will display the value between those two so we here we are saying start from the zeroth index and display one value you can also change of course uh the first and then you can say okay uh go to two right so start from first and take the next two values but doesn't exist there are no other two values which exist only there are zero one two so it is only displaying me uh the uh id2 right so room number two which is third record so zero uh one two so between one and two there is only one record if i say zero to two let's see so it will always skip if i am not wrong here it will always keep 0 and it will give you 1 sorry sorry i am wrong here let's see the values so you have room number 1 and 2 right so it will start from 0 until 2 0 1 2 so here uh so room number one and room number two uh it will skip the last one if i'm uh okay so let's reiterate again so when you pass slice and some numbers so here what we are saying is starts from 0 and go to go till 2 so you have 0 and 1 it will not consider the last number similarly when we say 0 and 1 it will again skip the last number so 0 and 1 and if i say 0 to 3 let's see what happens it will display all the records right so 0 because third index 0 0 1 2 3 so third index is fourth value so of course there is nothing which exists there and it will always not consider the last last value so we get 0 1 2 similarly when we passed 2 what it did did is so 0 1 and skip the last value so zero and one so this is how it works so generally you won't be using slice a lot of time because in case you are working with large data set it is not suggested that you should use slice pipe to filter out the records so general i mean the use case to use slice pipe can be filtering without the records but don't use it are you not filtering sorry the general use case to use slices pipe sorry generally use case to you uh use slices pagination so don't use uh this slice pipe for pagination unless you have some like fixed records so let's say you have some master table where your records are not going to go above 5 15 or let's say 100 it will always be like that which generally doesn't happen right i mean most of the cases you will get more i mean you don't know how many records we are supposed to get so don't use slice for pagination in a real-time application always rely for server-side pagination or server-side filtering in case you are working with large data set so this is a slice and then we have number as well so let's see if we get any type and i don't have decimal numbers here decimal pipe example right so we are what we will do is we will add one more property so let's add a rating property because that's something which can be decimal so here i'll say [Music] reading and we will say this is type of number uh you don't have float you had this uh beacon does exist in typescript but begin days like for big numbers so for rating i don't think so we need uh begin and now let's add this property so i'll say this rating is 4.5 and here let's say it's 3.4 this is output 5 for example and it is 2.6 so what we can achieve using decimal points so let's say you don't want to actually round off these values or you don't want to round off these values to some specific numbers so this is something which you can achieve using a decimal pipe so here i'll just add a last property and i'd say this is written so let's apply decimal um sorry not decimal the name is decimal but the pipe name is number so let's uh apply this and see how it looks like so you have this four point five three point five point six for example uh so this is the values right and now we want to actually display this in different format so what we want is uh there are three properties uh there are three properties which you can pass first is how many number we want to display before decimal so i am saying okay we want to display one number before the estimate then how many decimals after uh sorry how many uh numbers you want to display after decimals for example if it says 0 and 0 so it will uh let's see what it does so it says okay this five is closer to five so it goes to five three point i think uh what were the other values let's see so we had three point four and two point six so three point four is closer to three so it goes to three two point six is closer to 3 so it goes to 3 so this is how this particular value works let's see how we can change the values so this uh two values right so this is minimum uh you can actually see the definition here so it says uh this is the value and this is digits info and you can also pass local but this is not we are looking at right now decimal pipe and here so you can see uh let me show you the shortcut so you can actually go ahead and say control plus click it will take you to this particular pipe in case it happens right so i generally don't use number five so if i forget about the definition of course the docs is one place where i can see look for it but you can also open this inside vs code control plus control plus click here or you can also do f12 so press f1 and it will also take you to the definition file where you can see some example for example let's see here so it says 3.6 number and then we are saying first it will we want to display one number before the decimal point and after that we want to display uh minimum 0 so you can see minimum number of digits after decimal point so it says zero and maximum number of digits after a decimal point so it says zero so this is what we are saying uh so let's say if i do it like this so i i want to display one and one right so you we said okay we want to display uh at least one minimum digit and one maximum digits which is four point but in case we had a running number right so let's say if i change this to three point four where we have a few more numbers available now let's see what happens so you have 3.5 because it actually said okay 3.4 and we want to display only one number so it actually four is closer to five so it says okay let's go to five and let's go to [Music] i want to display two maximum numbers let's see what happens here so you have three point four six so uh this is uh two decimal numbers and we can of course increase whatever maximum numbers you want to so now you have three point four point four five seven so this is this is how you can actually uh use this number type and you can also pass local uh local uh which is like you remember the numbers are actually different in different different uh countries so for example here in india we use decimal points but if you go to europe sometimes they use comma or probably uh some other countries might be using some other different uh different uh separation uh uh value right so separate different separator which you got you can also do that using this let me show text sees that we have some samples so let's try to display this number in france dfr is local for france let's see okay there is some error okay this is not something which is valid local invalid pipe argument missing local data for okay missing local data so we have to add local first and then it's okay [Music] let's see enus is available yes this is available and this is the default one so right now of course the front uh the thing is with local is you need to add the support for those locals so that's that is something which is not added probably we'll see an example of later on but yeah i mean you can pass the locals here and then it will display the number based on that particular local so for example this number may be different or in a different format in france which is possible and it is possible it's too so you can see thousand decimal support separators right so uh in canada you uh we use space in danish we you are we are using space so in different currencies there are different separators which are used so this is what i was referring to so thai you have comma then dot here also you have comma spanish there is no comma there is just spaces sorry space you have dots and then dot here you have comma so these are different uh numbers formatting different locales and angular supports different locals as well i mean that's another topic which is not part of this course but in case you want to refer uh angular does support converting your uh like text to a different format which is known as internet internationalization and localization it is a feature which is which is supported by angular so that's it from the pipes as we mentioned the sig pipe will be used while talking about http in later section hi in this video we are going to talk about lifecycle looks but before we do that let's do one more thing right now if you see this particular view it it's missing something it is missing the styling if you think about it right so there are multiple options which you can choose from you can either go with bootstrap you can go with angular material or you can also use something [Music] or you can also use television css which is also supported by angular so what we will do is let's add bootstrap right now and then we will add angular material later on and probably at the end we will see how you can configure television css probably later in the video so to add bootstrap there are multiple options which you have there are multiple libraries which actually supports bootstrap so we have ngx bootstrap and ng bootstrap both are same uh even contains lot of similar components i mean you can choose any one they both support bootstrap 4 as of now they don't have support for bootstrap 5. so let's see okay so nzx bootstrap actually came with suppose it came up with the support for bootstrap 5 also so let's add you can add this command you can see how you can install so there are instructions given on this page uh you we can we will use the angular cli way so let's go ahead and do that and before you do that and before you do this make sure you stop the server which is running so i have stopped the server because it is going to impact the angular.json and we need to restart the server so i already stopped it in case you are running just stop and run this command ng add ng export start which will install bootstrap 5 and it will give access to some components which comes with it so if let's go back to the page so you can see it has accordion alerts button carousel collapse so these are all components which you you can use inside your angular page or angular application so we will come back to this later on right now we just want to install ng export strap so let's see it says uh the package engine bootstrap 6.2.0 will be installed and executed somehow okay let's see what's wrong so this ng engines bootstrap the current version is 7.1.2 but it is saying for us the compatible version is seven six point two point zero and we have angular 13 which is being used so there is some problem with the release so let's use the uh latest version whatever it is offering right now 6.2.0 and meanwhile i'll check what's wrong with this so it is released on silence september 24th since cannot find schematic angular utility config okay looks like this particular package is not compatible with angular 13 as of now so that's that's the problem here tell what we can do even they are not compatible with angular 12 this is strange okay let's try with the uh [Music] this version which is 7.1.2 okay let's see 7.1.2 and then this one has package.json which supports angular 11. this is really strange because it should be either angle 12 or 13 so let's look for the tax 7.1.1 and this also uses angle let's check if ng there is another package ng input strap let's see if that supports it mg but beta support for bootstrap 5 is available with angular 11 with 11.0 beta 2 and this is the command so let's see i'm getting started and this is for angular 12 bootstrap css5 let's try let's try this one and you put strap is added okay let's see if this works ng add ng bootstrap so it also supports in case you have multiple projects so you can pass which project you want to add this bootstrap library to but let's see okay so it is saying bootstrap 10 will be installed okay this is also just not working so let's try with this one so what i'm going to do is i'm going to [Music] enter it next so uh remember as of today not all the libraries are compatible with angular 13 and that's what we are that's what the issue which we are facing right now um okay this is this is sad angular 13 from good project found common 13.0.1 angular common 12 okay so even they are not compatible with angular 13 because they are saying okay this is for angular 12 okay let's see if we have any other way start by let's start 5.0 okay so it is available let's try to install bootstrap directly and then we'll see and then install put stuff so uh if you are not aware bootstrap five has actually dropped the support for either so that's that's one thing which they have done so bootstrap is installed now let's see so you can verify it from node modules folder which we have available here and let's go to a b so distributable js and sorry css and okay this is all bootstrap css files which is available we want to use bootstrap.main.css this is what we are going to use and there are multiple ways there are multiple ways you can do it let's see let's try to configure it so [Music] okay i have to i want you to copy the path actually so here bootstrap main dot css i'll copy relative path and i'll show you both ways first way is you can actually add this uh css into your global global styling how you can do that so you can use import sorry add that import and then you can do this you don't have to actually give path like this you can just say build this one and of course change pst css extra wind.css and let's try to see if this one works so and then we will show you another way which is uh not adding to your global style css but in another way we'll be able to see the changes because of course styling of your page will change because of the font which is used by bootstrap okay let's there's some error no such file directory open bootstrap dst okay what is along here probably let's remove this and let's see our build okay now it is compiled successfully so let's see okay so you can see uh i think you might have seen this page you can see this page and this page so this one has bootstrap 5 which is installed and now applicable to your application this doesn't has any css so this is how you can verify if bootstrap is added to your application or not so let me show you another way to add bootstrap or any other css so it's it's something which you can do with any css any css which you have installed using npm so it's not only for bootstrap so this this was the first way where you can actually go ahead and add it into style.css or css whatever type which you are using so let's stop the server because in another way we are going to add this into our angular.json so i'll comment this out so we don't have the css available here and i can go to angular.json angular.json has many properties there is one property called styles and i can go here and i can apply uh just it's an array remember and i can just go ahead and add this part and while adding this path here you have to add with node modules remember this okay good strap paste css and strap main.css and if i'm not wrong bootstrap also gives you satisfy you can also use that let's see tsd css and i think you will have here it is so in case you want to add or use sas files this is sas files are available as well so rather than actually taking the path from list you will be taking it from scss folder that's that's the difference and now let's run it again and then and you can see uh of course let's see the difference right so you have this is with bootstrap five and this is without any style being added to our application so right now of course as of today nzx bootstrap ng bootstrap do both are not supported with angular 13 but in future they will so uh the only difference would be you have to run that ngat command and you don't have to set this conf this uh changes which we did right now right so we added this to styles array you don't have to do this manually that will be taken care by ngat command which we used previously so now we know how to use this as css so let's try to actually apply some css here class table so let me close this now uh you can see this table is uh actually having this new class and we can also see one more thing uh let's try to minimize so we have you can see as we added bootstrap now our application is responsive so it is changing the width of your table based on your screen size so you don't have to do that manually anymore i mean you don't have to add extra styles uh to make your application responsive bootstrap will take care of it for you in this video we are going to talk about lifecycle looks so we'll talk about what lifecycle looks is and then what are the different lifecycle looks which exist for uh your components so let's see what is component uh or lifecycle locus so in angular what we are going to create is we are going to of course go ahead and create a lot of components now all component needs to go through some life cycle looks or you can say some events which it needs to go through this will happen this entire events or you can say hooks will happen for each and every component so in other technologies also in other frameworks also you have the concept of hooks and same applies to angular in dotnet in case you are coming from dotnet uh earlier in older days it has it had something called page lifecycle events which is which is kind of similar thing which we have here so if you talk about each uh the component of a com sorry if you talk about event or lifecycle hook for a component so somewhere it starts creating a new instance for component and at the end it will be destroyed so from start for from creating an instance to destroying an instance this is how your entire life cycle looks looks like and uh there are a few live stuff looks uh sorry these are the life cycle looks which are mentioned here so you have all changes only need do check after content in it checked we need checked and then destroyed so let's uh go through each of them one by one and yeah and you might have already noticed that ng on init lifecycle looks already exist on your rooms component so if you see this there is ng on in it so in angular for every lifecycle looks there is an interface so for example ngon in it has an interface called on init so if i have destroy or ng on destroy so there is an event called uh or an interface called on destroy you can just go to this event and uh same fpl or control click and you will go inside this to see which event is that so ngo in it in earlier days it was optional but uh make sure that you implement the interface whenever you are trying to access some of the lifecycle looks of your component so let's see what you can achieve using uh ngo net lifecycle load but before we go ahead and do that before we actually move so before sorry before we go ahead and move do that before we talk about ngon in it here you will notice that there is also a constructor which is available so it means before even your ngoninet event gets called your component needs to be initialized so this is where this happens and when in when it happens actually on your page whenever it gets rendered on your view at that time constructor will be called and just after the constructor is finished your ng on init lifecycle ngon in it lifecycle look will be called so people do uh get confused okay if both are kind of same that okay once my component is initialized i can just hook into ng or unit lifecycle look why what is the difference between constructor i mean we are we are saying that whenever a instance is created a constructor is called remember ngoninit is where your you should write your logic constructor should be used only in case you want to inject some services this will become this will be coming later on when we talk about services but let's just keep that in mind in in your mind constructors should not have any blocking code so in case you are writing some blocking code in your constructor it is wrong that code should be part of ngoninet so let's see uh what we can achieve using ngon unit lifecycle look and um to see this what we will do is we will just move some property declaration from here to ngoninet so here i am saying okay this room list is equals to empty and then in n g on it i will say this dot room list is equals to this records right so we are just moving uh the entire array here inside ngo in it so in case you have any let's say you want to load some data from your api and you want to display uh that data on your view you should write that code as part of ngo net lifecycle load this should not go into constructor or any other life cycle so ngo engineering is something where we are saying that okay now my component is initialized and just after my component is initialized you want to do anything just add that code into ng on in it life cycle look so let's go ahead and verify our view and here we are i mean there is no changes and our code is compiled as well so this is all about engineering we will be using utilizing we will be utilizing ng on it like cycle looks in future whenever we start implementing our services and start getting the data from the api so we'll see some use cases where we'll be using it now let's go back and talk about other life cycle looks so you might be wondering i mean i said ng on in it is the first life cycle event then why i have mentioned it second year of course that's that should be the question in your mind right now so we have ng on changes which is before ngon in it remember in this lifecycle looks constructor is the first one which will be called every for every component once they are initialized so we have engine changes before ngonin and then we have ng do check let's uh go ahead and talk about uh so there are two topics which will go parallely here so lifecycle looks and there will be something known as component communication this these two topics i generally take it partly because they they need each other i mean they uh they needs to be understand uh while talking about lifecycle looks and then you uh needs to know about component lifecycle sorry component interaction as well so this ng on changes actually uh is related to one of the ways you can do component communication let me just go back and talk a little bit about component communication because we will be using uh component communication in our code right now so what we will be talking about here is just theory i mean we are going to see the examples so let's introduce and then there are ways for component communication we will be doing this parallel right so ways for component communication we will relate to the component lifecycle look so in case you write your real-time code you know what needs to be done rather than just doing something blindly so why we need component communication in case you are going to create an entire enterprise application there will be scenarios that you need to interact between two different components right now we have seen that we right now we have two components app component and your rooms component what in case they want to actually interact with each other how we can do that that's what communication uh component communication is all about we also said that in future what will be we also said in future what we will be doing is we will be creating a lot of html reusable html tags that's what component is what in case i want to create those reusable tags and then i can use it anywhere who will be passing the data of course someone has to interact with that particular component right that's a reusable component so it cannot contain its own information it has to rely on some information which is coming from somewhere else that's your another component this is component communication so multiple components interacting with each other but there are multiple ways now so there are three ways which we generally use so first is using input and output second is using view children or content children sorry we child or contention and third one is using service now as we talk about ng on changes we are going to use the component communication using input and output so let's try to create a scenario first so in this uh application right now if you see now we uh you are also going to learn how you can actually split your big components into smaller components so if you see this html uh which has like like 43 lines of code right now 43 lines of html if you see if you think about this table i think this table can be another component the reason being i can just remove this logic and keep my component smaller that's what we uh often do right whenever we talk about single responsibility and this has nothing to do with rooms right i can actually go ahead and display a lot of information and then i can just keep this logic separate also let's say we want to display this room's list at multiple locations or multiple pages what you will be doing is copy pasting a good idea the answer is no what we can do we can actually create a reusable html tag put this somewhere else and just pass the data that's it that's what we are going to do now so let's go ahead and create a component and as this component is related to rooms i'll put this inside rooms i'll call it call it as roomslist so here in case you want to create this component inside this particular folder i can just go ahead and say open in integrate terminal and to create a new component we already learned the command so i can say ng g c which is ng generate component and then i can say rooms hyphen list i'm not sure why i keep making the mistake of rooms now so now we have this rooms list folder and all four files aspects earlier now let's do uh one thing so we will remove this logic from here and put it here so my entire table uh logic i mean to render the table or render the rooms list is not part of it i mean it's not part of rooms company it's part of my room's list company makes sense right i mean it it even tells you what it is supposed to do it is supposed to list the rooms now let's talk about the data so we have okay rooms list and we don't have the data right now so we want to pass the data so let's see how we can do that as we said we'll be using input and output so now let's try to understand both here we want to get the data which means i want to get the input so what we will be doing is we will be creating an input using accurate input which is a decorator sorry which is a decorator and i can call it as rooms which is type of rooms list array is equals to i mean i have an empty error by default so we are saying make this rooms property as an valid html property on this html element this is what we are doing here remember whenever you add input tag it means this property rooms becomes and becomes an property on top of this html tag so we can pass the data now few need a few things need to be changed so rather than rooms list i will be saying rooms and that's it so now all the errors are gone now let's try to use this component in my parent component this is where we want to display that component so we know the html tag yes we do so i'll copy this html tag here and as i said the rooms is the valid property which is added here so i'll say rooms you can see uh due to angular language service we are getting in intelligence is equals to now we know that the property which is available here is called rooms room list and we can close this html tag so this is it now let's save this and see if it is already compiled because our application is really small and see here so you can see okay now you have your entire data available but let's verify if it's true right i mean if it's actually coming from the rooms list and you can see here so this is your hotel inventory management and hyphen rooms list this is the new html tag which we created but where is the css gone let's go ahead and try to see that and we have rooms class table ah okay sorry if you remember we had added add odd or even style so you can see odd and even is actually added here so it is part of room component how is this happening we will talk about it there is there is something called encapsulation which we need to talk about currently what we can do is you we can actually add it inside rooms list or we can add in our global style sheet so let's do that and once it is added in global it is available so that's that's it that's this is how your you can pass input to your component now what we made it what we made possible right now so if you think about it what we did is we created a reusable component which doesn't need to know from where my data is coming anyone can pass the data by using this property to this particular component so i'm not restricted to use list component only at certain places i can use it anywhere i want because this rooms component only contains information about how to render things not how to get the data or how to drive the data in real world application we call this relationship between this two component rooms component and rooms list component as parent and child you can also call this com relationship as smart component dumb component so this is for smart component which knows from where to get the data and some some action which needs to be performed and this is your dumb component which doesn't know anything it just needs to know how what to render that's it so parent child smart component dump component these are the things which you uh if you come across these things this is what you mean in your real-time enterprise application try to split your components to as smallest level as possible don't have a component with like thousands of html or thousands lines of ts try to split them as much as possible generalize them and uh try to have like small component for each logic so here we knew that okay there is a rooms list which needs to be created so what we did is we created another room space component which will take care of rendering those things now in real time application now let's uh let's talk about the term right smart component of component in real time uh applications now your child component may need to do some action for example so let's say uh we want to actually we have this rooms list now i want to give an action button at the end and i want to say book this room or uh marks it mark it as sold right so this is something so this hotel becomes not available we are saying this particular component is child component or dumb component so it cannot take action on its own simple example real-time scenario of course if you have a kid what you what kids do right they come to you and say okay i need this thing and then you do it right and you don't give money to your kid and say go ahead and buy it until of course they they become um they become smart right i mean they know how to deal with things so same same concept is applied here so now as my child component or my dumb component doesn't know or doesn't need to know how to do stuffs what it can do in case it needs to perform some action it can ask parent it can ask the smart component to do stuffs this is where we need to pass the data back from child to parent component how to achieve that of course output right so we are saying input can get the data output can give out the data so let's create an output and outputs are actually an event so let's right now let's create an event called room selected so i we will click on this room we'll say okay select this room and this information will be passed to your parent and your parent can do anything whether this room needs to be worked this room needs to be marked as sold this room needs to be deleted right i mean let's say uh now this room is used for some other purpose so this room is not available anymore so what we will do is we will create an output decorator we will use an output decorator and then we are saying the event name is rooms room selected or we can say selected room and it it needs to be an event so there is a new event emitter class which is available in angular core which needs to be imported so we can say new event emitter and then we have to tell what kind of data we want to send back to parent so here the kind of data we have is room list if it needs to be multiple of course you can put an array but right now i want to just select send the selected room so done here so now what we will do is we will add an action here and i'll create an header and then say this is select room and inside td we will add a button and it's auto so we can say button class and vdn video primary is a is a bootstrap class and this is the function which will implement select room so let's go ahead and see and this is the room object which we which it will get once you click on this particular room so let's go back to typescript and add this function which is supposed to get sorry which is supposed to get a room list and then once this room list or the room is selected we want to emit this data back to parent so this this line of code selected room dot embed will give this data back to the parent who has remember who has actually uh subscribed to this event it's not something like i mean if i'm not subscribing to this event this won't be available so let's go ahead and see that part of us see that part of the code so here this is our okay button [Music] it was not closed so now let's go back to the parent which is this one and let's implement the event so we know the name selected room this is the event name and i'll write a local function which selects the rooms so we can say select row and this is something which is not implemented right now let's go ahead and implement so here what i will do is uh first let's add a console.log so it's a selected room which takes a room and we print console.log room save this here now as we are getting some data we have to actually pass some information here so here you have to pass something called as dollar event this always remains dollar event so this is an event which will be received from my child component and here you can specify that okay uh this event uh which will be sending me the data of this type so this room um this this data will be type of room list so far so good let's see our build just completed let's see our application now we have the select button you can see when you hover it becomes blue right so let's go to console and let's delete and let's click on select and you can see okay now you have this rooms component.ts line number 68 this is where this information is coming right so you have your amenities checking time checkout time and whichever row you select you get that row specific data sent to your parent so this is how your output works now uh we can actually do something more with this i can say okay this is selected room which is type of room list and we as we are using strict mode i just add this so we don't get the error and now here uh let's do it just before above the table so i can say this div is awesome and we will use star ng if so we'll just display it in case selected rooms exist and then we can say okay this selected room or let's uh use json pipeline to see what information we have available let's go back and let's click on select because there which is not saved looks like i think some okay looks like something is not getting recompiled okay it is not so somehow now it is done let's click on select ah my bad so we have to assign this value right so this dot selected room is equal to and once we have assigned this value now let's go ahead and click on selected room you can see the information is getting changed based on what data you emit from your child component so this is how you can communicate between two components child and parent or smart component dum component using input and output now how it is related to ng on changes event because that's why we did this we'll see that next so far we have seen the ng on init lifecycle look and we also saw how we can do component communication using input and output and we did that because we wanted to talk about ng on changes lifecycle bug which is next so uh let's go ahead and do that and while talking about ng on changes we will also talk about one very important concept which is known as change detection in this is like really important topic even in interviews as well a lot of questions may be asked uh related to related to change detection so let's go ahead and go in depth and talk about how change detection works in angular and how ng on changes helps us to actually improve the performance so let's go ahead and do that so if you see our app right now what we have is we have a child component which is let me just close this we have a parent component called rooms component and then we have a child component called rooms list so this is and uh then we have a top root level parent component which is abnormal whenever we do some action the data needs to be updated right and the data our view needs to be updated if we talk about not the data how that happens so angular does it via change direction so it is actually internally handled by angular but there are multiple ways you can actually um [Music] change uh change direction for your component so let's go ahead and talk about change section first i'll go to the app so this is our app and i'm going to enable it's climbing on okay let's see and we can go to panels here so we have style computer layout and there is rendering on let me just open it in another tab and show rendering should be here compact points now computer layout [Music] okay let's open this in chrome and let's open dev tools so you can press f12 or just right click and say inspect okay so this is what i was looking at so there is a tab called rendering which you can see and let's click on pen flashing this is the property which we i was looking at and let's click here so some green uh borders you can see right now what is this green border so this green borders are actually saying these are the dom elements which are getting changed are we changing everything the answer is no we are not changing everything but still uh whenever you click on some or you perform some action angular detect there are some changes on your view and your view needs to be updated this is by default which happens inside angular but there's components which doesn't need to be changed for example this table right did we added or removed anything here the answer is no we did not right so uh this table should not change why it is getting changed even if i click on a toggle which is outside of like this is something which is available on our parent company if i'm not wrong yeah uh this is a uh sorry this is on rooms component if uh yeah so this is on rooms component and then it is also updating the rooms list component how is that possible i mean i'm not changing anything but it is getting updated consider like right now we just have two components but in case you have a lot of components on your view what will happen so change direction will run for each and every component can we avoid that the answer is yes we can so let's see how we can actually optimize this uh change uh detection strategy which which is default uh to change detect changes for each component remember the way it runs is let me just go back to uh dev tools and i'll go to elements here and there is angular dev tools also which is available now you can actually see it here so let's say down on tree so this is your ts3 structure right now let me just zoom in so this is our tree structure right now so we have root then we have rooms and rooms list so in case someone performs action here it it will of course uh send an event to the parent and parent will start running change direction for each and every component so let's say i have rooms and then i have let's say employee or let's say there is a there is another view which is to add rooms time so what will happen is the change direction will run for both even though i am changing only rooms or i am changing something in rooms by using change section strategy you can actually optimize this behavior let's go ahead and see that so first i mean there are some rules before you can actually go ahead and apply change detection strategy to your component so here you can say change direction this is the property and there are two modes by default it's on its default let me just import change instruction strategy first so we will get this intelligence so you have default which is default when you when we don't change anything so any event will cause the entire change detection to run for your application and then there is on push before you go ahead and use onpush there are some requirements which you have to make which you have to meet on push change friction strategy can be only applied in case i am not modifying some data internally in this component how you can achieve it by using input and output in future you can also uh apply the same strategy in case you use some state management technique for example if you are using ngrx or if you are using any other state management library in that case also you can move it to one push right now the state management part is out of scope of this particular uh course so here we are going to apply it on rooms list component because it uses input and output so it doesn't rely or it doesn't change the data internally it relies the data which is coming from outside so it always knows that if in case the data is getting changed so here let's move on to on push and to now to actually uh show you the difference we have to do one more thing let's see that so what we will do is we will write some small code to add a new record or to add a new room number let's go ahead and do that it's just a small button so let's do it here so this is div and then we have button and i'll call it as add room [Music] and we will right now uh pass the static data so [Music] let's say this is add room let's go ahead and again spelling mistake and let's go back to ts and here we will add a new room so we'll create a room first so it's a const room which is type of room list is equals to and then we'll say um let's see what is the properties room number four and then there are room type there is amenities there is price there is photo so we'll just copy the one from the existing property and there's second time and then you have checkup time and then you have reading okay so this is our new room data which is available let's copy the photos property here because all the properties are required as of now so [Music] we have to pass each and every property and after this i'll say this dot room list dot push so let me just do this room list dot push and let's go back here and comment this out so we are saying right now my change detection strategy is default so it means any action is performed just go ahead and run the change section for everyone let's click on add room see room list chrome list push and then you have chrome list available here so should work let's see let me just save this file again because probably it is happening because it is not able to identify the change direction strategy okay let's see if there is any error let's ohms component.ds and what we have is this dot rooms list so rooms list we have okay we already have the record available here one two three four is added twice so it should work okay i just want getting added let's see let's go ahead and check that rooms list okay so we forgot to remove this pipe slice remember so zero to three so we can only display three records so even though more records are available and let's try to click on that room so you can see it is working fine i mean whenever you click on add room the record is getting added now let's keep this change this code as as it is and let's go ahead and apply change direction here because this is really important i mean you uh you might have understood now that okay why to use onpushing strategy because we are not modifying some data here and the data is actually coming from outside but there is one more important concept which we need to understand so let's go and see now you can see actually i am clicking on add room and nothing is happening but let's see a magic so i'll go to of course dev tools and let's click add a break point here click on add room okay so you you can see you your room list right now here okay somehow it is not able to show click add in the watch and let's see what is available here so you can see okay your uh data has f four records here so you have one two three four and let's move on but here you still have three records why so because now my component which actually is or change traction strategy on push there is one more requirement which we have to which we have to meet here let's see what is happening here so this room list property which is getting binded to my child component what we are doing right now we are actually pushing and record into this particular array so this is where you have to understand the concept of immutability whenever you are working with change direction strategy on push the data which you are trying to assign should not be mutable so it means when we apply a dot push what happens we actually change the room list property the concept of immutability says we should always return a new instance remember this because it is really important because uh in future if you try to use some state management technique and try to do the same stuff you have to understand uh the concept of immutability because entire state management thing works with immutability so here we are saying rather than actually modifying room list directly what we need to do is we have to return a new object every time we modify this instance it can be an object it can be a array whatever but in case you are trying to modify it return a new instance how we can do that so there are i'll show you a syntax which is very useful so you can say this dot room list now is equal to i can say uh dot dot dot three dots it is called spread operator so i am saying this dot room list which means keep the existing data and add the new record okay so this spread operator will say okay this in this array spread the previous data so in case i have three records all uh present already so three add three records plus the new record if i click it click on it again what will happen so it will have four records and the next record will be added which is fifth record let's try to run this and see how it works so let's click on add row and um of course i will remove breakpoints and you can see now a new record is available click on add room again a new record is available so now uh the advantage of using onpush let's click on toggle so here what will happen is now as my room's list component is on change section strategy on push the component also sorry the change section three will check okay if this component is marked as one push it means i have to only run the change direction in case something changes inside this component so here this property will make sure that we are not running the change detection for this particular component until and unless needed but keep this requirement in your mind first of course your component should not change the data internally second in case you are assigning or passing some data it should be uh it should actually come from the parent component right it should or it should not uh it should the property should be immutable so it means whenever i am assigning a new property or new value it's the whatever your let's say if you are using state management state management or like ngrx or ngxs they always return a new object whenever i try to modify something same up same concept applies here so in input property what i did earlier was i tried to use dot push what dot push did it modified the room list property so right it actually mutated the existing object but it should not do that it should be immutable it means whenever i am trying to apply some uh or pass some data to my child component and i have changed action strategy on push it means i have to apply a new instance or pass a new instance every time so what i did what we did we changed this code from this push method to this new uh code where we are using spread operator to make sure okay the existing data is already available in array and the new record gets added so this is related to change detection strategy on push now go ahead and let's uh go ahead and talk about ng on changes so i'll close this and here so on ngon changes property or ng on changes lifecycle look can be applied on a component which has input property remember this you cannot apply ng on changes let's look anywhere else you can only apply on component or a directive which has the input property right now our component rooms list component has input property so let's see how what it does and how it behaves so i am going to use in on changes and let's implement interface so uh you can see ngo changes get some property which is changes of type simple change and let's see what simple change is simple changes sorry simple change is also an interface so uh here you can see simple change so what it has is it's a it has a property name and some metadata so let's see what this metadata is simple change property so it will give you sorry it will give you some information like previous value next value so let's see here so you have previous value current value and whether it's a first change and there is a is first change property as well boolean property as well what we can achieve using this let's go ahead and do that here right now uh what we will do is we'll just write console.log to just figure out what's happening here so what actually ngon changes does let's inspect let's go to console so let's go to console and click on add room and see here so you have some data which says rooms simple change pre current value is like this one two three four four records previous value was one two three three records is it a first change you can also find that property so it says first change is false it means no it is not a first change it is because previously you can see there was one console log which is here at the top if it says the previous value you was like three records and let me just refresh this [Music] right so uh yeah so you have current value 3 and then we have previous value undefined here this is what i was looking at because whenever your component is initialized you will have of course previous value will be undefined and then you have first change as true because this is the first time the value is getting changed and then you have current value as three records and when i change it every time you change this uh you will get the records available here now what is the use case what where you can actually use it so let's say in case i want to modify some property after getting the input values you can do it using ngo changes so you can just assign it inside ngo changes but remember ngon changes will only work in case you have input properties and your input properties gets updated or you get a new value remember this new value not updated so it's like whenever you get a new value you will get uh the uh data inside ngo changes and based on that in case you want to write some logic you want to log these values you can go ahead and do that using ng on changes how you can access the properties so let's talk about that as well right now we have only one property called room list i'll add one more property and we will say this is title and i'll say this is a type string and i'll say this is default values blank let's go ahead and try uh to pass this value as well i'll say this is rooms and then we have our title is equals to room list and we want it to be in string so i'll just use single quotes so now with this string and let's find this value this title is equals to rather than doing this we'll see title here and we have rooms list available here the room list available here right so just add let's add as to okay so we have room list uh which is coming from outside so now let's go ahead and try to change this value uh and see what we get so i'll just write another one click of this toggle button right so we already have the struggle button i'll say this dot title so we have we have to define a top title property here so i'll just say okay this is again title equals to room list and let's use this title property here now rather than string we'll just pass this title property here and on toggle i'll just change this to and say rather than room list let's call it as rooms list and we just want to actually change the property and see what we get inside engine changes and let's install it and let's clear this console and let's click on toggle and we have rooms list available here so let's see what we get here so you can see right now only the value which is which got changed is title right so whenever you will change your input value that will come as property so here you can always do so if changes dot let's say title which means the title is changed okay index image so i'm saying if the title property has changed so uh you can do something like for example i can say this dot title and changes.title.com value let's apply to [Music] what we can do let's try to do the substring or two uppercase let's let's do uppercase current value dot uppercase you can see uh your property or value is updated to uppercase because of this and why it work because of course here we are assigning a new value right so we are saying this dot title equals to so this is uh this is what you can do or achieve using ng on changes let's take a look very useful in case you want to control what value needs to be updated whenever a new data is passed or you want to run you want to run change direction manually that is also possible using this probably we will see once we talk about services because we need to understand the services before we go ahead and use anything or any services available inside angular so this is uh this is it from engine genius so what are the concept which we learned because we learned about input and output we saw how you can pass data between two components or how you can do component communication using input and output then we also learned about change direction strategy which is really important and then we learned about ng on changes just because of engine changes we had to actually learn these two concepts very important now as we have learned about ngon unit and engine changes and now let's move on to the next lifecycle look which is ng do check now this lifecycle look is something which you will be hardly using but you have to understand or you have to know about what do check does so let's go ahead and see it in action so here uh i will just go ahead and add this on rooms component.these so here i'll say ok this is on [Music] search to check yeah so this is the interface which will be used for do check and then we have to implement the interface and just sometimes there is something wrong ng do check and this is the method which we need to implement so on changes i'll remove this and okay and here let's do console.log right now console.log and i'll say on changes is called okay cannot find name blue chip okay so let's add it in it should be imported from angular core so let's add it here and let's see the build and it's completed now let's go to the page and let's inspect the element uh let's go to the dev tools and here on console you can see there is a message says on changes is called now i'll just do one thing and keep it open here right i'll remove everything and let's invoke some events for example add room you can see on changes is called let's click on toggle you can see on changes is called you uh let's click on this select and you can see on changes is called so what this on changes event is so this on changes event is something which will be executed every time you raise any event irrespective of where this component is implemented or available in case it is active it will listen to any changes which has happened inside your entire application remember that so this event uh or implementing this lifecycle look is very costly in case uh what what what can be the use cases uh for uh in last four years uh i have been writing angular code and never see never saw any example or any use cases where i had to go ahead and implement ng on changes but it can be useful in case you want to detect some changes which is not controlled by anywhere so let's say you have some logout button where some logout button plays on any some corner of your screen and you want to make sure whenever that log logout button is clicked you should go ahead and detect changes but where you are not sure what we can do what you can do is you can have an implementation of ng on changes or sorry are not engineer changes do check event or do check lifecycle loop as there's an event which is raised blue check will be called and you can handle your special scenario where of course that event is something which is not captured by anyone will be captured by your do check lifecycle so that's one you that can be one use case but try to avoid it as much as possible also another thing which you should keep in mind is you should not implement ngo on changes and do check together on same component the reason being of course both are going to do the same thing what on changes does it will detect any changes to your input values what changes on do check will do it will detect any changes inside your application so it will be like capture twice so don't do that and try to avoid on changes sorry do check as much as possible not on changes to check as much as possible uh some i like extreme use cases if you get into it even before doing that just try to in case you have some special scenario where you think that do check is some do check is the answer uh you need to implement budget i would suggest go ahead and check on stack overflow ask to ask the question if uh what you are trying to do is correct and then use it otherwise don't so this is ng blue check in this video we are going to discuss about ng after view unit and and ng after wechat and we will also discuss about something known as view child and we will learn about some other stuffs like template ref and how you can dynamically load a component so let's go ahead and get started so far we have discussed about on changes on it on init and do check so to understand how you can actually use ng after viewing it we have to first learn about view child and how we can actually communicate or load a component using view child and what else we can use uh do using view child so let's go ahead and do that so we'll start with a simple uh example the first example which is which is really useful you will get into a lot of scenarios where this may be helpful for you so let's get into that so what i'm going to do is i'm going to create a new component and we will communicate to that component using view child so i'll call this component as let's call it as header component so let's say ngtc and header now we have already seen an example where we have we are actually communicating with a component which has input property and then the child component can uh send some data back using output so in using input and output but this is another way let's say uh you have a component but you don't want to actually make it reusable i mean you don't have to uh don't want to actually have uh input and output properties because most of the time they will be individual component but sometimes let's say you may need to load them uh in another component you may want to access them in another component and probably assign some property or call some function of this particular component or let's say you have any third party component this is really a good use case for view child as well so let's say you have a very uh third party component which on which you don't have much control right so it's like they have some component and then you can pass input and output properties or let's say they have some component where they don't let's say you get an uh library ui library and where they have some component which is internal to them so they don't want to actually make it reusable but maybe you want access to that particular component you are working within a team like multiple projects working together and it's a library so they they don't want to make it reusable like by using input and output but you may want to actually access them um so what what are the approach what is the approach you will take of course you can go ahead and talk to the team and ask them to make it reusable but let's say they don't want to do that right i mean it doesn't fit uh or it doesn't actually help in their use case so what you will see how we can actually do that how we can actually access any component into uh our other component which doesn't have input and output property so let's uh create so we have already this header component now what we will do is we will create a property here and remember i am not going to make it input property okay so we have title which is of type string and i'll put this title here using interpolation syntax so far so good i mean you created a new component you assigned a new property and then we just added that into our interpolation syntax so we just added that into our interpreter using interpolation pollution syntax sorry we just added that using interpolation syntax now let's go to appcomponent.html and let's say let's go to room component.html so we have this welcome to hotel name uh what we want to do is we want to have an title here and we want to use this header component so let's see how we how we do that so i will just comment this out and we will use fbp hotel header is that the component name oh sorry directive name no so this is the directive name hyp header and this is it so we have places component let's see how it looks like on ui okay so we don't have that particular h1 available here so let's inspect and here let's open it here so you uh we have this header here but i mean we don't have any property right because right how to pass the title now i mean that component is uh that component doesn't have input property just have a property but what in case i want to access it now let's see how we can achieve that using view child so here uh we will create we will use view child it's a decorator so virtual decorator and then it we need to pass some parameter and we will talk about that parameter as well so here i'll go ahead and pass this component which is header component right so this is the component we want to access and i'll call it as uh so this is a variable i'm saying this is header component of type header component and let's import this header component okay we have already imported header component somehow it is taking some time for some reason anyways so what we did here so using view child what we have done is we have created a new instance of header the setter component and we can access this instance inside this component inside the rooms component right now so i can access any property any method on this particular component and i can achieve whatever i want to but there is a cache let's do console dot login okay somehow my indecisions start stopped working let me just check so this dot uh header component has no initializer okay we are using strip mode so i'll just put this question mark to avoid this particular level and it is compiled let's see the output let's see the output now so we have uh let's go to console and here rooms component uh ds line number 36 yeah here so you can see uh what we have available here is let me just zoom in we have undefined this uh i i specifically said that using view child what we are doing is we are creating a new instance of this particular component but why don't we have anything if it's a component i mean it should be give us some metadata information right about that particular instance but we don't have here so let's see uh why and how we can access it so first thing which i'm going to do is i'm going to create or i'm going to implement after viewing it so let's go ahead and do that view in it and we will implement the interface which is ng afterburner and let's use the same line which we have written here online number 37 and let's paste it on line number 80. it's saved so let's go ahead and see and it is simply it is compiled successfully and now let's wait and see so online number 36 sorry now line number 37 as i uh added one more line we don't have anything we still have undefined but at line number 80 we have the same instance but we have now some metadata so what is that metadata it is giving me information about it is giving me information about the header component so i just said that it is going to create a new instance and it is it has created but this instance is actually available inside after unit not inside engine indeed why so so let's uh discuss the difference here using view child you create a new instance but there is one more property which you have to provide here let's uh do that and we will discuss about it so there is a property called static true by default this static property is false and what happens when we make it true so let's go ahead and see both in the in action now you can see now after making static to true i started getting an instance at line number 37 and of course i will get an instance at line number 80 as well because it's available so what we achieve using static two this is here you where you have to understand the component life cycle book properly let's go to the slide so if you see this life cycle look ngo changes ngo in it ng to check and then we have content in it content check and then we have after unit and after we checked and then ng on destroy this lifecycle will execute for each and every component now [Music] i am right now inside rooms component what i'm trying to load i'm trying to load header component so what will happen here so let's go through it first the ng on init of your rooms component will be called and then after do check after content in it after content check after viewing it after we check an ng on destroy as i am trying to load header component the same life cycle of header component will be called as here we are saying static true which has a very specific purpose that in case i am saying this component is has this property called with static true it means this component is actually safe to be used inside on init of its parent why so i mean why we should make it true and why why should we should make it false this is here where i will talk about little bit i'll talk a little bit about asynchronous programming if let's say uh my header component has the same lifecycle look and inside ngon in it lifecycle look it has some asymptos code what will happen in that case of course the execution will be blocked and it is not uh it is not we sorry we won't be confident that this particular instance will be available at the ng on init of my parent because of course i mean this at this particular time header component is still executing its ngoninet on inaudible so it is still not initialized so whenever you have some component which has let's say some asynchronous code which may delay or something right so which may delay creating or executing the ng only lifecycle look make it static false you do we need to do that no the answer is no static is false by default that's why we were not getting that instance at line number 37 when we didn't add it static to property in this case header component does not contain any synchronous code so it is safe to be used but still whenever you are using view child that's why they removed it so earlier therefore there was a lot of confusion people a lot of developers used to miss this property and they used to try accessing it inside engineering lifecycle which used to get which uh used to cause an error and developers used to blame the framework so angular team decided around angular 9 that they will remove make it by default false so they will make static variable false so developers don't get an instance inside ngo in it in case they are sure that okay i am sure that okay this will not cause any issues they can make it start true so based on what you are trying to do use this static property properly in case you are not sure just make it just keep it default so where you don't have to pass anything and you are safe to access this instance after unit now let's come and talk about after unit what we did there right and why it is available in after unit so when we are saying static is false of course we are saying okay this is something which may cause delay and we are not sure that we want to use it inside ngo in it after viewing it is life cycle so ngon in it is initialization of the component like so component is getting initialized after we viewing it is the at this particular life cycle look the component is saying all the view so remember so uh the component is saying that whatever view i have that is also initialized so i'm if i'm trying to load any other component inside my component it means that they are also ready they are initialized as well that's why we are saying after view init so after view is totally initialized i mean everything on my template is also initialized it is safe to use any other component in your template uh in your life in your code base right on in your ts file so that's the ng after viewing it lifecycle now the other lifecycle hook which is related to ng after view unit is known as after view checked so if you uh see here it is known as after view chart so to go to after reject let's do one more thing right now we have just accessed the instance what i'm going to do is i'm going to remove this i'm going to remove this static property here from here and comment this out and here let's assign the property title and let's see this is okay so we are saying okay this header component title is rooms view and you can see the properties available here rooms view but i want to show you one more thing so here you can see uh there is an error which says expression changed after after it has been checked error so this is one of the most um what you can say the most searched error related to angular and it has an actually link as well so you can click on this link and it will tell you more about this error it will it has actually a video as well from the angular team so let me tell you uh you should not worry about this error in case you get this error this is totally fine if you get this error on your development development environment right now we are in dev environment how you can verify if you are in dev environment you can just click here six messages and here right so in console you will always see this message angular is running in development mode when you create production build you run in production build if you get this error in production build there is definitely something wrong with your error with your code but if you get this in your development mode that's totally fine and let me tell you why of course you can go to the link and you can read more about it but let me just tell you as we are going through this uh particular topic in development mode angular runs change detection twice so that's why we get this error so it says okay previous value was blank now current value is rooms view so they run it twice that's the that's the reason we we have this error and why they do it because it's of course development environment so they need to actually go ahead and recheck if something has changed so don't worry about it i mean it's it's totally fine and ng after let's view checked so we can actually go to this sorry after view checked right so you can see uh you probably will never use this particular lifecycle cycle look so it says it says a callback method that is invoked immediately after the default change director has completed one change check cycle for a component but as we said we will uh the by default i mean angular will run this change direction twice in your development mode you will get this error even though we call this in after view check so it's like now let me just talk a little bit about after what we have after we checked let's take a look so at this point your angular has already completed one life cycle check already so in case you want to um let's say assign some property here you can actually go ahead and do that here after your life your change direction has completed or you want to modify something you want to modify some values you want to call some function you can actually go ahead and do that here but remember in depth mode you will still get this error so don't worry about it this error is okay in case you get in depth mode but if you are getting it in production mode that's an issue yeah so uh this is it from after unit and after view checked is it no there is more so let's go ahead and talk about those what else we can achieve using view child life cycle looks i mean uh [Music] let's do one more thing uh how about dynamic components so let's say i just comment this out now i want to render this room's component but dynamically i don't want to do it in template so just copy some template here so we have this tip then we have ng template uh i'll talk about what ng template is and then we uh have h1 tag welcome user uh let's remove this as well so we have just an ng template with hashtag user and then ng template so first let's try to understand what ng template is so ng template is kind of like a tag to understand it in uh like easy words so ng template is a tag which will be uh which will never render anything so ng template itself won't render anything so it's like it is not visible i mean so but it can help us to render some other template so what some other template can be it can be another component so let's try that out here what we are going to do is we are going to dynamically load the rooms component using view child so let's do that so i'll say okay this is few child and then i need the access so let's view child and close this now after this i need the access to this particular ng template tag so this hashtag user has some specifics i'll just talk about it so we can use this here and then we can use one property called read and which we can pass view container ref i'll call it as vcr the container ref which is type of view container it is going to give me some reference by the name if you can guess so it's saying okay i'll get it will give me some reference to what now let's talk about this user so here this hashtag user is something known as template reference once you define something with hash on any html tag you can access that tag so you can access that tag inside your ts file using view child it's not only with ng template i can access any html tag i can even access div i can access even input element we'll talk about it i'll we'll see an example right to just to be sure that how it works so here we are saying give me the reference to this user tag right and this view container ref will actually help us to dynamically load a component let's do that so here i am going to first say it implements oninit and here i'll say this ng on init and uh okay so i'm getting some uh hint because i'm using some service from github so let's write i'll write this force so you can const component as we want to let's uh assign some value as well component ref is equal to i can say this dot vcr dot so there is a method okay so you can use this dot view container f dot create component and then you can pass any component here directly so i'll say okay actually i wanted to do is load rooms component and let's import okay so now so it has rooms slash rooms dot component so this is the file and then we need rules component here so at this point of time uh you will see your component will be loaded so let's save this and see if our code is compiled yes it is let's go to html and cannot read properties of undefined okay sorry so we just uh sorry so we just learned that whenever we use view child the static property is false so what we need to do is here i need to use after unit and here we can access this ng after unit and now we will get the instance of the tag and it should work now so let's uh see let's go to the browser and here it is so you have your view which is loaded which is loaded dynamically you remember you uh you didn't specified the room's uh component inside your template inside a template you just have an ng template and you just gave a reference a template reference and then we loaded that component dynamically from our typescript file so this is what you can achieve you can just let's see the uh html dom here you have hi env rooms which is loaded inside this particular div and this is it this is how you can actually load a component dynamically just a single line of code and in case you want to actually modify some properties using component ref so i can just do component ref and i can do instance dot and you can access any property so let's try to access any of the property which we have available here and i'll say number of rooms it is 10 right so let's try to change it it is getting used somewhere yeah here so i'll say this number of rooms is equals to 50 and let's let's run it and see the output here and you have 50 here so then you have actually loaded a component dynamically you changed a property as well and this is what we achieved using mutual and we also learned about template ref so let's try uh to actually access a div element using template reference let's see how we can do that i'll just comment this out and we'll keep the code same here let's comment and comment this and here i'll create a div and i'll say hash any property name let's say name so we have this div with hashtag name this name is actually template reference now i can access this inside my component using uh virtually also view child give the name and now as i'm sure that okay this div is actually available inside my template and it doesn't contain any code which will delay or cause any issue i'll say okay this is static true right so i'll say this is name and you can of course you need to give some type so you can give a type called element ref because it's an html element and now recommend and use oninit and let's see ng on sorry not that enjoying it and then i can say this dot name dot you know let's try to access any property uh okay so now intellisense is not working in but it should give me negative element let's see let's do console.log so first let's see what this dot name gives us it should give us an element [Music] so let's see if it is compiled once it is compiled and let's see here [Music] we have native element ref and yeah so native element is the property which we should be trying to access so we have uh this or native.native element and then you can access any property for example i want to set in a text i can say equals to uh build then hotels right and then i will just remove this console.log now let's see and we have hello world is there any issue you can uh you can see it here so you have built-in hotel available here let's put an h1 tag so it's visible right now it is not or it's it's it's okay right so we add and even uh it's available so yeah that's what we wanted to verify so we have this little nodule available here and what we did we accessed an element remember so earlier it was like uh what what what we have done so far using which right so first we the we actually accessed and component instance using view child that was our um header component right so we actually access return component or created a new instance using typescript using your file uh we used view child for that then loaded it then we spoke about static property what it does then we saw in second example where we used view container ref we container ref to dynamically load a component that was the second example third example what we did is we accessed an html element we tried we got the access of that html element using using template reference and then we assigned some value to that particular html element by using of course the uh native property right so we use the instance dot whatever property uh not we used native uh what was that property name yeah so we use native element property dot the property which exists on html element so here we know okay div has something called in a text and we use that property to bind it so these are three examples which we have seen using viewsite and we also saw that okay the instances will be available in case we you we are using static as false in after view init lifecycle look so most of the time after unit lifecycle hook is good for anything which you want to do after your view is initialized and uh if you checked is it's optional i mean you will probably there there will be hardly some instances where you will find it useful but you can do everything which you want to do after view is initialized inside ng after viewing it lifecycle now let's see one more example i'll do one thing so i what i'm doing is i'm having multiple instances of this header component inside my rooms list let's see how it behaves so we still have single uh here we still have only one instance which is available and which has this room's view property rest doesn't so here let's try to understand this view child property will always access the first instance which is available on your template in case you want to access all the elements which is available on your component of type header component you need to use view children so name itself tells you what we are trying to achieve right so view child in case i have one instance view children in case i have more than one instance right child children so let's try to do uh use view children and the same uh the one difference which we have here is view children static property is by default false and it's false you cannot change it because it is saying okay you are going to have access multiple instances and cannot be available during engineering so here i'll pass header component and here i'll say this is header char children component and we have to just do one more thing now query list let me just write this code and then we'll talk about it let me see if query list is imported from the correct path okay it's still not let's try to so we have this uh sorry so we have this uh view children and we are saying this is the property and this is hydrochildren component children and we are saying this is type of query list of header component what we are trying to do here so let's see let's see [Music] okay looks like my laptop is consuming a lot of resources foreign okay so now here so what we did is we created we used we children to create instance of error component and then we named it as header children component and which is type of query list of header component let's try to just to console.log and see what what happens here and we know that we cannot access it inside ng on it as we said that is like static is false by default we cannot do anything here so let's say this dot uh header children component dot now you can see it says forage why it is saying for it because uh let's do console.log and then we will see what it contains and then we'll talk about the properties it has okay so you can see uh what it has it's a query list it has a property called dirty it means dirty means there is no uh nothing has changed inside this particular component then it has first and it has last this is first instance and last instance so in case you have like multiple components of same type and now you want to do something different with first instance and last instance you can do that for example let's say uh you have you you have multiple rows like let's say you created a component and you want to render them as rows you want to take first row and show them as header take last row show them as footer and whatever is in between you can actually treat it as your content that's possible using first and last you have also length property which tells you how many results are there and then you have underscore results property which gives you all the result so it means it is an array so query list is something which has access to all properties which is available here you can let's go ahead and see here right so i can just go ahead and say header child component dot last okay so i can access last component and then i can access the title property of last so i'll say this is uh last title just random string right and let's see the output so it's a it says okay this is your room's view which is first instance which we have already changed using view child and this is your last title which we changed using the last property in case you want to do uh something with each and every row you can actually do it by using for each loop and what else and we will see no different changes later but yeah i mean this is like an array so you will get all the methods most of the methods not all methods which is available on your on on your array so you can see it has some uh there is something called reset but and it's not what we need so we have fun find filter and you can also call destroy to destroy any component okay and you can also get any uh component using index in case you want to here you have get method as well so this is uh what you can do using header children component this is really useful in case you want to create your own uh let's say reusable component or your component where you want to create your drop downs right so where you can your users can pass the list of records and you can display them as you want not the user want right so these are some examples uh angular material uses um view children multiple players at multiple places you can check out the code base to understand it more so this is it from view child and view children we also discuss about how you can use view child you can how you can use visual trend and the life cycle looks as in previous video we saw how we can use view child and we also discuss about some uh scenarios where view child is useful and ng after viewing it uh life cycles look hook as well ng after unit hook as well now in this video we are going to talk about ng after content in it but as i said we will be going through the life cycle as well as some some of the concepts so here we are talking about after content so it has to be it has to do something with content but what content we are talking about here we are going to talk about the really important topic called content projection so let's go ahead and talk about content projection and then we'll come to ng after content in it and what is and then how we can use it so let's go back to the code base and for this what we will do is we will create a new component so uh because we need to understand what content projection is so i'm going to create few components and then uh let's see let's uh we'll talk about the content projection so first component which i will create is let's call it as container so this is a container component and why uh content position is useful let's let's talk about once we create this component so let's say you have your application right but what you need is you uh once you finalize your design system you said okay my sidebar can be on left side my footer can be on the lower side my header will be on top of the top of the page but use i don't want to actually give this functionality where user can decide i mean not the end user but my developers as a lead engineer i want to actually take care of where the components will be rendered and in what sequence this is where actually uh these are few scenarios where can this is actually one scenario where content position is useful what else so let's say you have created one component as you said components are of course your reasonable html tags so what we need is we want to give that reusable html tag but what content should be placed inside that particular container or a particular component should be defined by user again if i talk about user here i am talking about the developers so your developers should be able to define that okay i want to put some let's say h1 tag or uh i want to put a break here or i want to put a horizontal line here that's something which is up to the developer so these are two scenarios where content position can be really useful let's go ahead and do that so first how we can achieve that so to achieve the content projection what you have to do is you have to place an html tag called ng content so let's do that i'll say ng content and this is what we have so we have ng content open closed that's it nothing [Music] else let's take this component just close this so you might be wondering what is different here i mean we have been doing the same thing earlier as well right we for example rooms component we have placed the room component open and close that's it how this ng content is going to address so let's see the view it is act as it is now let's try to put some html contents here so what i'm going to do is i'm i'll place an h1 tag i'll say this is from energy [Music] content let's go ahead and see and you can see you have this is from ngc content available here the content which we placed inside an html tag and if you see this i mean of course this is how it looks like hiv container and then this h1 which is replaced by this ng content which we have placed here so it will not work with other tags for example if i do try to do it here for example h i n b rooms we don't have any ng container here so it doesn't know what to do with this so let's go ahead and try this out and see and you don't have anything here right so in rooms you are not getting that particular h1 content which we have placed but here we are able to get it because we have placed an energy content and you can knows that okay this there will be some content which will be passed by the user i mean as a developer i mean you can be the same developer right you who is writing container and who is using that container so this is uh what you can achieve using ng content but of course this is not it so let's go ahead and talk a little bit more in detail you can also do one more thing as i said you can provide the order in which you can you want to actually load your components so let's say i can give or i can create a container component which has like your dashboard header footer sidebar placed accordingly right but you don't want to actually do it by yourself i mean containers should not have anything so container should define okay where was what that's it there isn't mean let's say what you can do is that container component is your reusable component and now you are going to use that reusable component across multiple applications so what you have to do is you have to just create the component and you have to just place them that's it that's what you have to do as an user i mean as a developer so let's uh create few components here [Music] let's see what we can create we can create an employee component so of course hotel will have any have employees and we already have rooms so we'll these are two so let's say now what i want to do is i want to uh load let's say employees data first then i want to give an ng content where people uh sorry where developers can add whatever content they want to and at the end i want to load rooms so let's see how we can do achieve using ng content so in ng content you can pass a property called select in select you have to pass the html tag remember this so first what i want to do is i want to actually load employee okay so this is where i'm going to place employee then there is an ng content and at the end what we want is we want to load rooms so let's go back to rooms let's close this again take rooms go to container html and let's replace this here now we are done with our container now let's go back to this main component.html and now we have this container available here so what i can do is i can place so remember i'm placing rooms first and let's put in employee second and let's save this you can just format and let's go back to our page so this is uh this is how it looks like so you can see uh you have hello world then you have rooms view and let's see here i need to comment this out otherwise rom's data will be like displayed twice and let's uh yeah so we uh it's compiled now you can see so let's open the container you have employee first then we have this is from ngcontent because we placed an empty container we are saying that okay whatever doesn't match comes here and then we have rooms and we don't have the same sequence here i mean we are sorry we don't have same sequence here we are loading rooms first employees second and then at the end and it doesn't matter i mean because you have defined this this is the sequence in which i want to actually load some content and [Music] you have also defined this is these are the uh matching tags so select we are saying okay select this particular html tag or select this particular component right which will be placed here so this is how you can actually use a continuous now what else what else we can do we are talking about ng ng after content in it now what is the content for a component so for this particular component if you talk about container component the content is something which will be loaded or which will be provided by the parent component so the content also whatever is loaded inside this container is the content now [Music] your components so my container component can only access this components in case they it want to inside a lifecycle called ng after content in it because at that moment the company knows that my component my uh my contents are initialized so who is giving the comp content it right now it is it is parent component like app component which is giving the content when container component will come to know that all the components are all the contents are initialized within my component add the container oh sorry uh ng after content so let's put an implement and let's see what we can do using this so i'll say implements after content in it and let's implement so here you can see in c after content in it but how to select the components so here i want to actually select let's say employee component for example let's add some properties here so i will say this is in b [Music] employee name which is string and by default john and let's display this employee name here so we want to actually so let's say access the employee component here and then probably want to change some data or want to call some action or want to actually do something with employee component everything is possible so how to access that particular component first you have to use something known as view chill view checked okay so you can say view child and then you can pass the component so you can say okay this is employee component and then you can give an a name sorry not view child content child so we can give a property name so i can say this is content or we can just call it as employee which is type of employee component and let's import blue chip that's the contentious idea and now we have this particular property of course this is uh strict mode so we have to put this question mark as our exclamation mark and now let's try to access and uh before we move ahead you might have this question so uh do we have static true or false available here the answer is no uh in content child you can actually only access those uh everything which you have defining here inside the ng after contentment so there is no option of all calling static true the reason being of course because this component doesn't know what is supposed to be available here it will be always passed by my parent component and bad it will take some time right so running through all the life cycle initializing its own content then uh [Music] going to child component initializing that and then coming to the content in it life cycle look so it won't be available here so we have to actually just go ahead and do whatever you want to do with this particular component or access this component here so let's do console.log this.employee right now and let's see our application so here um just so you can see here so you have access to uh line number ts you can see the line number here so it says okay this is coming from container component and then you have the emp name access to emp name as well now what i can do with this so i can just uh do something like i can change this dot employee and i can just access the let's say emp name equals to from drawn to rick and it will be changed here so you have uh the updated value available so you can actually dynamically oh sorry you can actually uh access any component at runtime so it's not like something which is uh you you can access any component which is loaded by a content or ng content then you can access access that component using content chart and then you can do whatever you want to do so uh the the preferred way is always of course using input and output you can make as much or you can so the preferred way is to use input and output but in some cases this this is really useful view child and view children where you don't have much control on your component you want to access those component uh inside your typescript file uh you want to create the instance at that particular time and then you want to assign some data or you want to actually bind some data or call some function which is available on another component so these are the some use cases where these two are really useful of course both having different purposes right we saw what we tell us and now we are talking about containers so energy content remember this type so in case you want to you are not sure okay what will go here you just want to provide a container where my i can i can replace any text in future so you can actually add that inside the container for example uh one com one example which we can give is faqs right so for what in case you have a lot of clients what you will be doing is of course the design will remain same properly probably the only thing will change it will change is content so what you can do is you can create a container component uh apply all the stylings you want to and then just ask your designers to actually write the content for you that's it or who whoever is uh responsible for the content they can provide the content that's it and that's uh that's that saves your time right so let's uh move on and now i've ng after content in it then there is also there is a life cycle of called ng after content checked so in case you want to actually make sure something is something needs to be done once you are once one time your change section is has executed you can use that but probably rarely used so you will not find many scenarios where that will be used which leaves us to our last lifecycle look which is really important because whenever something is created it needs to be destroyed of course i mean everything it's it's part of the life right so our component starts when it is initialized and when it is destroyed at that moment our last last life cycle look which you can see at the bottom is ng on destroy which on destroyed i mean it itself says when i am getting destroyed so this is the event which will be called when your component gets destroyed but when does our component gets destroyed very important question let's go ahead and figure that out so here let's take an example of this so uh remember we had this hidden right so what i'm uh what i'm going to do is now i'm going to use uh ngif on this but uh what i will do is whenever i click on hide rooms we will hide the entire room list remember what ngf does it removes the component from the dom so let's use it here and let's implement on destroy and i'll say this is console.log on destroysquad let's go back to our code so i'll remove clear the console and let's click on toggle so you have your component back so it this is the first time your component is actually loaded let's click on toggle again and one second so you have bronze components gf night rooms i just implemented this on destroyer at the wrong place because the component which is getting destroyed is not this one it is the room's list component save this and we'll just remove the on destroy from here because otherwise it will give us an error that we have not implemented the interfaces properly yep let's see so you uh we have this toggle button now the component is loaded and let's clear the console and click on toggle again and you can see now it says on destroy is called and root rooms list component just to clear that okay this is the correct line where this code is available so what is happening here why uh uh why on destroy is getting called so remember so whenever the dom element gets removed sorry whenever a component is get gets removed from your dom at that moment the components on destroy life cycle event will be called now what you can achieve using ngo destroyer so it's it's getting destroyed so it should be okay right i mean it's okay it's getting destroyed but it's really useful in case you have some memory consuming code and you want to free the memory this is the core this is the lifecycle look where you can actually do that now what is the scenario for wrangler so in angular you uh we will be using something called subscription in upcoming sessions in upcoming videos and using those subscription you can actually uh subscribe to some some data now once you subscribe to that data that's that subscription become active so somewhere you have to actually unsubscribe to those that's where ngon destroyer comes into the picture or you want to actually probably uh let's say reset some data or do some logic when you're you're whenever your component is getting destroyed you can go ahead and do that inside ngo destroy for example let's say uh you want to remove something from local local storage or session storage whenever a component is getting destroyed yes that's that's the life cycle book where you can book into and call those code to clear your cash clear your storage those are the things which can be done here but most of the time you will be using this lifecycle look to unsubscribe to the data in future so this is it about lifecycle looks now let's move on to next topic in this video we are going to talk about dependency injection so we will talk about what is dependence injection and we will see what uh what is di providers so di stands for dependency injection mixture so let's go ahead and talk about dependency injection so dependency uh in case you are coming from some other technologies you may have already used it for example dotnet and java uses dependency injection a lot but in case you are not aware that's absolutely fine so what what is the dependency here so in angular a dependency can be a service or sorry not [Music] you it can be a class actually it can be class so let's create it so in angular a dependency can be a class or an object which you can access or you can inject inside a component or inside a surface wherever you want to it's actually a design pattern which is uh as i said widely used in other technologies dotnet java they use it a lot and in other technologies you have to actually go ahead and do some configuration to actually achieve dependency injection but angular has the dependency injection built in and this is one of the uh this is one of the uh i would say one fun so dependency injection is one of the feature which actually makes angular what it is it makes angular really better because this is one functionality or you can say one feature which is not available with other frameworks and it is really powerful so we will of course go ahead and see what we can achieve using our dependency injection as we said there are uh there are multiple types of providers so you have class bis providers then you have value providers and we have factories we will talk about those uh what what are those and but and we can also uh before we actually go ahead and talk about other di providers we'll start with class based providers so we'll start with class base provider then we'll see value provider and we will see factory as well so here let's go ahead and see how you can create and consumer service we will also talk about what service does because that's important right before you can you go ahead and use something you have to be aware what why it is used so here rooms component.ts let's go back to this component so if we see if the uh number of lines of code in my rooms component is already raised around 126 i mean including the spaces but yeah i mean more than 100 lines of code and some of the code may be reusable right so uh but not right now but of course in longer longer term some of the code base some of the code which we have written inside room component can be reusable so what we can do of course the what we can do is we can create something reusable and we can move this code somewhere what is that somewhere so that's somewhere in service so what we can do is we can create a service we can move all reusable code in that particular service generally what you try to do is keep the code minimum inside your component and try to split that code into multiple services i mean services is something where you will be writing your business logic so your business logic should go into your your services so don't try to write everything inside component always split them into services services are something which will which is which knows okay what it's supposed to do for example it's possible that you may do multiple things inside a component for example uh you can have a dashboard where you are accessing the data from let's say employees you are accessing the data rooms data you are accessing the booking data so what you will do write all the code inside your component the answer is no of course what you can do is you can create multiple services based on what uh each service is supposed to do for example each service one service for rooms one service for booking one service for employee and then i can just use all those services inside the component and the uh the advantage is i can actually go ahead and use that service anywhere i want to and i don't have to duplicate the code so let's see how we can actually do uh or start creating a service and split the logic in this example so what we'll do is we'll create a service for rooms now [Music] for creating the services it's up to you what folder structure you follow generally what i do i keep a folder called service or services and i create my all services here for example any service related to rooms goes into this folder similarly i mean if i have to create a new service for employee i'll create a services folder in employee and then move all the code base or add all the logic there [Music] so let's let's go ahead and create our services so we won't be doing it manually we will be using angular clm so you can type ng g generate as service and the name of your service so here i want to create a service for room so i'll say okay rooms so my new file will be created inside this services folder and here it is so you have rooms dot room service class created so you can see okay it has a it has a class and then provided in root what is this provided in root we will discuss about it let's ignore it as of right now and what we will do here is we will move some logic from my rooms component to here and then we will use this service rather than actually writing that code into room service let's see first this data right so we have actually this data which is coming for example in future what we will do is we will get this data from our backend or from some api so generally the driver of any data should go into service so here i can create a method i can say this is get rules so this is rooms list and then i'll just return in this dot room list so nothing extraordinary right right now because we don't have the apis we just want to understand how services works so we got the rooms data which is now part of my service and rather than actually uh doing or getting all the data i mean inside the component what we have done is we have moved that logic into service now let's see how to use that particular service as we said in angular we are going to use dependency injection so what is a dependency injection it's a design button of course we reset it's a design pattern so but what it it does so using dependency injection approach the dependency injection approach says you should not create an instance directly so in general if i have to create an instance of class this is this is something which we will do we will say okay this is room service which is type of [Music] is equal to new room okay so this is how you will create a new instance of a class but when we say we need to use dependency injection this is something which you should not so rather than creating the instance manually we need to rely on the dependency injection uh which is already provided built in by angular we don't have to do anything else so let's see how we can do that so here i can inject a service i can inject anything i can inject a class i mean i when you can inject a component which you should not do until unless you think that's the last approach possible which i think which i don't think so i have seen some developers doing that but that's an antibiotic i would say should not inject a component so here we have created a service and now we want to use this particular service inside our component so this is this is how you will be doing it so you will say uh rooms i mean the variable name service which is type of rooms service now once you do this we have to also provide the access modifiers now uh this is where a lot of developers get confused whether we should get it uh get uh take it public or private i would say always make it private the thing is if i make this particular service public it can be accessed on the template which is again an empty pattern a lot of developers does that does that does it should not access services directly from your template try to avoid it so what i can do is i can mark this as private it means okay i'm limiting this particular service to my template or sorry to my typescript file itself not anything else so it will the instance will not leak on to my html or my template now to get the data i can what we can do is we can say this task rooms list is equals to now we have to get it from service so we'll say this dot room service start get rooms and let's square in let's go ahead and see the output so so let's go ahead and see the output so here of course we have to click on toggle and you have your data back the only thing only difference is now this data is coming from your service not from component itself so component doesn't know how to get the data generally your component should not know um how to get the data or how to add the data or how to even do any business logic that should not be the responsibility of your component that should go into a service so what uh what is a service a reusable class where you can actually put some business logic and then you can just access those inside your component and this this is how you will create a service so let's go ahead and move on you can also achieve component interaction using service so in case you want to pass the data between two components you can do that using service better example which we'll see is when we learn about alexis so right now just just be aware there are multiple techniques so we have used input and output view child view children content sorry view view child content child and you also have some services as the another approach so now we have to actually talk about let's let's go into little bit more detail into the services here so provided in we have root and you have uh two more uh you have root ini and uh there is one called platform which is which is not used uh which is in get which gets internally used by the router service uh as of now there is no like concrete example which is available for using provide uh provided in uh platform in case there is something comes up we will add a new video but right now we have to provided in root and any uh we are going to discuss about root right now and any we will discuss once we go into routing because uh that's there is a solid use case which we can use before actually we talk about this provided in root we have to talk uh something about how this particular services gets resolved right so we said dependency injection so once once we inject this particular service angular has to actually resolve these dependencies how we do that how angular does that so to understand it let's uh talk a little bit about this diagram which is known as dependency resolution here whenever you inject a service angular needs to figure out where this particular service is provided so right now if you see this provided in is something which is known as root so what what does it denotes in older days i mean before angular 6 before angular 6 what we used to do is whenever we had we create we used to create a service we used to register that service here so you can see this providers area is empty we actually used to do it here then with angular 6 angular team came up with a approach where they said when we create a service we will say provided in root by default so when we say provided in root the service is actually registered here inside this app module you don't have to do it manually now now why it was done which is of course again very really uh again which is really important to understand so a lot of time what the developers used to do is they used to inject they used to register a service and over the time of over the time probably after some sprint developers used to actually stop using that particular service for example let's say i was doing some poc the code made into master and now i am not using it after the next release because the poc is not needed anymore but as this is already available in providers it is getting bundled as part of your code final code so agnes that once we once you create a service and say provided in root we will take care of registering your services here in app module also in case this particular service is never getting used we will also remove this from the bundle once you create a production build win-win situation for both of us right and as framework and as well as the developers now what else what else provided in rulers once you add a service using provided in root you get a single instance of this particular service available across remember this so what do you mean by singleton let's uh try to figure that out so what i'm going to do right now is here let's uh we know constructor right so we we talked about constructor multiple times so what it is i mean this is uh something which will get called whenever a new instance of your class is getting created so here what i will do is we'll say console.log and i'll say room service initialized why i'm doing it let's let's go ahead and figure out so let's say i use this particular service somewhere else for example in employee component and say this is private uh not employee rooms service and room service so we injected this particular service here as well now let's go to let's go to our view and see what is happening here so you can see room service is only a room service initialized is getting called only once not at other places and it is from room service this one i mean if you even see i mean if i click on toggle you will not see okay this service is not initialized again why so because there is only one single instance of this particular class or this employee as a room service which is available right now so there is only one instance whenever you use provided in root so it means i am registering this particular service into my root module if it gets used of course it will be part of your bundle if it doesn't get used it will be removed but you are also getting a single instance of your service now let's go back and try to see what in case i need a separate instance valid use case right i mean i don't want to use the same instance for multiple components i want what i want is so employees should have its own uh uh sorry in employee should have its own instance so i can we can actually pass something known as providers and then you can pass a service here so i'm passing room service again here so now let's see what uh what happens and you can see rooms service is actually initialized twice one of course the global instance second is for employee so who is using global instance right now rooms and who is using the local instance employee so employee has a different instance and your rooms has a different instance so this is how you can actually uh create instance of your service in case you need to most of time i mean single in singleton instance is more than enough but there might be some there may be some use cases as per your application for example a real-time example which i can give is in one of the project i was part of we wanted to actually take some json data and we wanted to put some controls on the on the ui and remember so every screen has that json data coming from the backend so what we needed is every screen should have its own instance so unfortunately uh in during testing we've actually figured it out it didn't made into the production but uh what we did is we removed this provider's property while migrating our port because our code base was on angular 5 and we wanted to migrate to angular 7 i think where this provided in concept came in so we ended up removing everything and then just adding provided in so what happened is now whenever i used to switch the uh urls i used to get more and more components being added onto my view the reason being it was a single instance or single instance which was available so whenever i used to switch back to another page i mean all the json it used to get uh used to get added into the same ad because it was a single instance so make sure that you are sure that you whether you want to create a single instance or not so in case you don't want to create a single instance go ahead and register your service inside that component and you're safe so now we know about single singleton instance and how you can make non single in a singleton instance now one more thing which is again very important to understand during dependency injection so uh how your services are getting resolved right so here uh let's talk a little bit about it so whenever a component uh or a service right it checks that okay there is something which is injected here the service resolution starts from this particular component so it's okay it identified okay now this room service is actually injected here first the component will check with itself do i have an provider's array available here if it is available the entire dependency resolution tree stops if it doesn't identify that okay this particular service is not available here in case i have a new module remember i can have a number of modules we have not just done it as of now we will be doing that while we move into routing so let's say if for example rooms has its own module it will go to the parent so it will be module in that case it will check with that model do you have this particular service it says okay i don't have it and then it goes to the parent of the that particular module so let's say right now we have component appcomponent.html which is our root component it checks with this particular component do you have this particular instance it says no and at the end it reaches to app module and as all the services which you create are marked as provided in root it comes here and it says okay i have found this particular service but in case this particular service is not registered i mean we misprovided in root or uh you you never had this particular property so there is possibility that you may not have this provided in property available in case someone migrated the code base so what in this case now you'll get an error so this error is again uh you will find of course you will find a solution on stack overflow if probably on the first page so whenever you get a error like something like this which says no provider for room service so here it is saying that i am not able to figure out where this particular service is registered remember you may get this of course while working daily on your code base it's possible so here it is of course saying that okay this particular service was not available at app module so what i did is i went one step above so let's see let's go back to the this diagram so it it it actually went to this app module our rf module it didn't found this particular service here then where else it can look at lookup so remember above app module we also have something called main.ts and we use something called platform browser here so it goes to this platform browser and says do you have this particular service by any chance it says no i don't have it after this there is one more level which is called null injector which is actually specifically to use or check if this particular service is available or not and once it reaches there you get this particular null injector makes sense right null injector and null injector error so you get this particular error says okay this particular service is not available i'm not sure what you're trying to do but it is not available it is not registered and let's go ahead and put it back so i can go to room service and just put it back and our application will combine will compile again and it works so this is uh what this particular hierarchy means so this is how your services gets resolved so this now uh so this is it from the dependency injection uh we will we need to discuss one more thing before we end up with dependency injection and then we will move on to our http so far we have learned about dependency injection and how it is resolved but there are few more important things which you should understand and which is known as resolution modifiers so we are going to talk about four resolution modifiers which is which exist and which are really useful uh based on your scenario so we will also discuss about the scenarios where it can be utilized so let's start with the first resolution modifier which is available called self let's see a use case for this self decorator so we are back to this code and here we will go to this employee component uh because i think this is the best place where the self decorator scenario is best suited for so remember we discussed about how you can actually go ahead and add this provider's property on employee service because we want to have and separate instance for this particular service and then we also discuss about the resolution uh how how your dependency gets resolved right i mean it goes to your parent and uh it keeps going till it finds uh the root and if it it is not available at the root it will go to the null injector and then it we will get an error called null inject error right so this providers does not exist which is like as i said widely uh [Music] a widely searched error which is available on internet but now let's go ahead and see how you can utilize the self decorator here so in this scenario in employee component we are actually injecting the service at the component level right so we are we are sure that this particular service should be available here that's the use case and that's the expectation as well so what we can do is we can by using either itself decorator which should be imported from angular core remember this by using this we can by using this self decorator now we are saying that this particular service should be available at this level if this particular service is not available here it means we should throw an exception now when it can be uh useful so in my uh one of my real-time project where i was working so we wanted to actually create the forms by collecting some json data which was coming from backend so what happened is by mistake while migrating our application from the lower version to the upper version so the lower version was actually angular 5 and we were migrating to angular 7 and the provider's property came around angular 6 so what we did is by mistake we removed that property and what happened but as we remove this property whenever we used to actually revisit different forms all the controls used to get added into the same service because it's it was single digit service and at one point we realized that our form one of the page or one of the form is really slow and then we realized that okay behind the scene it has like 300 controls so that was the use case but in case we added this we had you we might have added this self decorator it actually serves the purpose because it it should tell us that okay now this particular service is should be available here should be registered here if i use this self-decorator let's run this application first iphone or so the application is here and let's click and let's keep it side by side because we want to see the error so let's say if i add the self decorator and i remove this provides property so now what will happen is we will start getting the same error which we have received earlier which says let's come back here and okay looks like this employee component is not available that's why i'll just add this employee component somewhere let's add it here and now we have the snow provider for room service right so we started getting this error now actually here as we added self decorator now during uh our file resolving this particular instance angular will not go up it will just try to see if it is available here if it is not available here it directly goes to the nail injector error and it traces an error that this particular service is not available so pretty useful pretty useful in case you are aware that okay your service will only be registered at this particular level go ahead and use it now let's move on to the next decorator which we have which was itself for that we will take an example of this rooms component service because if you see we are not registering the service here right we are not saying okay this should be available at the component level we are expecting this web service to be available somewhere i mean maybe his parent uh parent of room component may be app component or app module so we are aware that okay this this service will never exist at this level so what we can do is we can ask the angular to skip the check for this particular component by using skip self that's the name right so name itself suggests skip self skip myself from the entire dependency resolution tree which you are going to execute skip myself again to give you an idea do we should we use this the answer is maybe because angular internally because angular internally uses something known as bloom filter to figure out where the service or the instance is available and it is pretty fast already you don't have to do uh go ahead and use itself but it is a useful uh with another attribute or another resolution modifier called optional [Music] so let's uh go ahead and see now the next attribute which is available we will see optional first and then we will go to the host to understand the optional one what i have done is i have created a service called logger so this is logger service and it contains a method called log and you can see uh what i have is i'll just add this provided in property here because i have removed it right now so i have added this uh created this new service and what i'm going to do is i'm going to use this logger service but what we need is we want to use this logger service only during dev environment during production actually we don't want to use this long service but as we have seen if we try to remove this provided in property we will get an exception because we are saying uh if this particular service is not registered anywhere go ahead and raise an error even though we use skip self or we use self we are going to get this error so this is what we can achieve using optional decorator so let's go to appcompany.ts we will actually inject this particular service here so let's say private log the service which is type of login service and let's uncomment this so i'm going to call this log method and let's see and we have uh this app component.nc on it right those so this is this is something which is blocked at this line angular you can see logger service dot ts but during production let's say we don't want to inject this service i mean there are multiple ways we will not talk about it right now but in case uh just to recreate the scenario where this particular service is not registered what we can do is let me just add option later on but we can actually go ahead and recreate this scenario where this service is not registered by removing this provided in root property right now we will start getting an exception saying this uh service is not available right and no provider for log service this this was expected so what we can do is we can mark this service as optional so let's go ahead and use optional decorator not option optional decorator and now list currency and the error is gone so we don't have that no provider for logger service anymore because this is optional so in case angular figures out there is an instance which is available it's okay if it doesn't just go ahead and execute it i'm using this ternary operator here because in case this particular service is not available uh we will get an error so let's see so if i try to execute the log method there you can see cannot read properties of that so to avoid this i am using this ternary operator which will only execute in case logger service exist otherwise it will just skip that so this is optional now what we will do is we will go ahead and see the last decorator which is available called rose and for that what we are going to do is we are going to get uh take this container example right so what we have here is we have injected this room service here in my container now how host is useful let's talk about that so here how many instances of uh room service which we have let's go ahead and see that so we have one and two instances right now [Music] what in case i want to have and separate instance for all the component which are part of container like this this container component in that that case what i can do is i can just register this particular service here first and then i can add the host decorator here now all the component which is actually uh loaded inside this particular uh this particular container will start using the instance which is available here so to just recreate the scenario we have uh employee and rooms right so what i can do is here remove this and from here remove this because it was creating this second instance if you understand if you remember right and let's go ahead and see now okay one more thing which we missed is this container right so we have we have to uncomment because we we are not right now using container so i'll just do this i'll comment this employee and then i will just use the container and let's go ahead and see so now you have two instances so one instance is actually which is of course global one and another one is actually which is created by the container component now the content everything within container will start using the second instance which is created by container also we are saying this is host component so and no actually none of the component which is loaded inside container will go above this particular level to look for this particular service instance so if i remove this and try to run you will start getting this no provider for room service found in node injector it will not go up it will never go up and check with its band so this is what you can achieve using the host decorator remember most of the decorators you are not going to use delhi probably few use cases where it may be useful skip self i have as i said it's not mandatory but you can use it it's uh as a flute builder is already pretty fast and you don't have to use it self is really useful do use it in case you are using providers on the component itself not to actually avoid that because blue filters is already uh pretty powerful but just to avoid the scenario which i mentioned right so sometime by mistake refactor while refactoring the code we remove it if you have add itself it means okay i actually really wanted to have this component this service registered at this component level and in case someone new comes in and joins your team and he figures out okay this providers is probably not useful and removes it he'll start getting an error and probably he can read about self decorator and what it is of course documentation is a better way but just in case nothing is documented right so this is all about uh the resolution modifiers and let's move on in this video we are going to talk about another type of service so as you can see there are actually three types of services which exist so we have used the first type which is class based providers so till now whenever we used to do ngg service we used to get a class with of course add direct injectable decorator and we used to inject it and then use it let's go and see where value providers can be useful value providers are like you can pass an object as a service and you might be wondering where that can be useful why should i use object as a service so let's go ahead and figure that out first first let's see the use case and then we will create our service so so far uh let's go back to our room service this is the code we have we have an constructor and let me just remove this line and we have a get rooms method because this service does not do anything i mean this is an kind of sorry so this is us like a static service right i mean uh with mock data and does nothing right so we have just some dummy data which is which is available and then we are getting the state but once you create a real-time application your data is going to come from of course an api and for any api you need an endpoint that's that's how apis work right so what in that case let's see an example in case i have to access an api endpoint which will be used across my application i mean in multiple services what can i do the first way let me show you the simpler way which can be done so i can go to environment i have added already added this uh uh this endpoints here so what i have done is in environment.ts i have added a property called api endpoint which is of course and right now targets to local state 080 and some api slash v1 so even version one of our api this api does not exist and i have to add the same configuration in productions so my build will not fail otherwise it will fail so remember in case you have multiple environment files whenever you change into your environment or ts make sure you make the same change into every environment or ts file which is available for example i can have one for staging i can have one for uh uat and of course two are required which is environmental ts and product we will discuss about we will discuss this later on uh while deploying on deploying our production production uh application how we can change this settings but right now just remember so whenever you add something just make sure that it is added to all the environment files and in case i want to access this api endpoint inside my service how i can do that let's go to in room service.ts and i can import from dot dot slash dot dot slash dot dot slash and till i reach to environment and then i can say environment. uh the environment file and then i can just access the property right so environment and then i can use this environment anywhere so i can just say here console.log environment dot api endpoint and let's save this and see and you have this url available right so here you can see room service line number 18 sorry 44 and we have this api endpoint which is available in our config file but what we are talking about here is we are saying this url will be used at multiple plus multiple services what in that case just think about your import right i mean it will be like everywhere i have to give entire path how i can avoid this so this is where the value providers come really comes really handy and we are going to see two examples so first let's see how we can actually deal with this objects right some uh so what i'm going to do is i'm going to create a folder i'll call this as app config so it will uh contain some services related to application configuration so the first thing which i'm going to do is i'm going to create a service so let's see how we can we create a value provider right we i'm going to call it as a service because it is we are going to actually inject it so i will call it as app config dot service dot ts if you are wondering why i am typing it because of course there is no command for it you have to do it manually so the first thing which we are going to do is we are going to create a export constant and i will call it as app service uh it depends i mean if you see i'm using capital letters but it's okay even though you don't use capital letters that's absolutely fine because uh generally we have an habit of mentioning const as capitals but it's not mandatory so choose whatever you are comfortable with and then what i have to do is i have to create a new injection token so i will say new injection token and you can see uh i'm using something known as github copilot that's why i'm getting this autocomplete so i'm going to use it and let's import injection token from angular core and then this is app config right this is actually an interface we are going to create so let's go ahead and create that i will create an interface let's call it as abp config dot interface dot this and let's do let's create an interface and you can mention uh all the properties which belongs to your app configuration and so uh right now what we are going to do is i'm going to use api endpoint this is the only property we have but in case you have more just go ahead and add all the properties here now here i can just use the same interface which we have created and let's import it so this becomes my service this is this is the service we are going to use but we also need the data so by value providers means i am going to provide some value that's let's go ahead and create our value so i am going to create another constant and i'm going to call it as app config and let's provide the value so i here i can say api endpoint because this is the property we have here and then we have to provide the value now what we can do is we can import our environment dot ts file here and slash dot dot slash environment slash one and take the property which we need so we are going to need environment dot api point and now i have to do it at only one place i don't have to repeat this inside edge and every service so we don't have to do that so now this is done so we have our service ready we have sorry we have our service ready we are we have our value ready now let's see how to register this particular service because we have not done this right i mean we don't have anything called here called provided in uh so let's see let's see how to do it so we can go to app module and you know that you can see this providers here this is where you can register yourself so you can say provide sorry it will be an object so i can say provide and here i am going to say provide this particular service and i am going to use a property called use value and inside value i am going to say this is the value and let's import both so i'll just done so we have what we have done so far is we have created a value provider we have registered that value provider now the next step is to use this provider let's do that i am going to go back to roomservice.ts remove this and now we need to access the url from that particular service which we have created so we know we know how to inject a service so let's write that constructor this year and our service name is app service config so if i do this and you can see i cannot right even my intelligence says it it is not something which can be recognized what is this so the way to use the value providers is you have to use something known as inject decorator and then you will pass your service here app service config so let's import now you can see it's it is giving me the path somehow let's change this it should not be src so we have our uh app service we have to use the add inject decorator and now i can say private so i'll call it as config and here we don't have to use type any because we also know the type so let's go back to the surface this is the type appconfig so we can use this particular type here so we get proper intelligence right i mean even the typings and again this is now let's try to access uh the same api endpoint by using this particular service so let's save this go back to the code base and sorry go back to the url and let's see if it is compiled it is compiled so let's see and we have room service initialized here and this is your end point so you can see line number 46 now we are actually getting this value from a value provider rather than actually directly accessing environment dot a value from environment.ts what we are doing is we are we have created an uh injection token or we have created a value provider and then we are using it so this is the way you should be doing that now let's talk about the second use case so if you have uh by learning javascript you might have seen some apis right i mean you may have seen windows we have local storage station storage what in case i want to use those inside angular of course you can because of course that's javascript and angular at the end gives you javascript as an output right and it's a friend it's a front-end and every javascript code is a valid type script code so you can use that but there are some ways so there is there is a way to use it so to do that i will take an example where we will use the local storage service okay so we'll see an example where we are going to use local storage service as an value provider inside angular app so to do that we will create a new file and we will call it as local storage dot token remember any javascript api which you have seen can be used in this way and i just copied some code so here what we are doing is we of course we are creating an injection token we are using provided in root here because i want to make sure that this particular service is reshapable and if no one is using it it the code can be removed it and i'm calling a factory function to return a new instance of local storage that's what we are doing here we don't have to register this service directly anywhere so let's see how we can use it so i'll go to webcomponent.ts and here let's see uh we will inject something will import from dot slash okay dot slash local storage token and now we can use this into our constructor so we will we need to use inject right and then we will call our local storage token which is type of local storage and you can also give type storage so this is any this is actually the type for your let's see yeah this type for your storage api which is which exists in browser so actually typescript also ready has type definition file for most of the web apis or javascript based uh apis which we use generally it's called a file called lib.dom.ts because it's all related to dom right so here uh we can use it in case you get any error while compiling just move it to any that's subject and once this is done let's go ahead and add something to local storage so to do that i just add one value so let's add on ngon init let's add this value into our uh local storage so i'm adding a variable called name and the value is related let's see it this this value will be added once our app is loaded right because it's on engine in it on our root component let's go ahead and see so this is uh where you can verify local storage so here you can go to your application and just see local storage localhost four double zero right so because our application is right now running on localhost four to double zero you can see this value name data notable yep so this is this is where your value will be available don't try to add anything which is secure to your local storage this is just an example how you can use local storage in similar way you can also use session storage so in case i in case you want to use look stress and storage inside your angular application rather than directly using it try to create an injection token like this which like the one which we have created for local storage the only difference would be session storage right and uh even you can use other apis for example window dot for example in case you want to use uh location right so rather than actually injecting location directly which is or accessing location directly which is possible yes of course it is possible try to use the token so you can use location menu bar there are navigator there are a lot of apis which access right i mean you can all you you can use all those apis as a token here rather than actually directly using inside your code base in case you come across any existing code base which is not following this try to refactor i mean you will learn something new so this is it from value providers in this video we are going to talk about angular http and observables this is really important to understand because in your enterprise applications what you are going to do is most of the time you will be interacting with the apis so this is what we are going to learn here how to interact with your apis how to handle uh the http uh calls and how to do different http calls so let's go ahead and see uh the agenda for this particular video so we will of course go through the introduction then we will set up the http client we will use the http client service which is which will be used to make those api calls we will talk about rxjs we'll talk about observables and streams we will see different http methods which exist we will see some examples of rxjs operators and then we will see http interceptors and at the end we will see at the end we will see app initializer so let's go ahead and see uh why this angular http is important so in enterprise application as i said you will be interacting with apis in javascript you might have used hdx or fetch if you have never used it that's absolutely fine that's those are the low level apis which is available inside your browser http client is the service which we are going to use to interact with our apis and destitpic client internally uses rxjs so what is rxjs of course we will see that but let's go ahead and start with setting up our skipping line to use the functionality provided by ctp client to interact with your apis we need to do some configuration so let's go through that those steps the first step is we have to use something called http client module as soon as you see module it means this is something which needs to be registered at your module level a strip client module generally should be registered at your root level because uh you are going to use http calls across your application right so you just need to register it once and that's absolutely fine until unless you are using services and even in that case this will be taken care of okay sorry i just added it to declarations really sorry for that i okay so here it is so we have http client module registered and we have imported it from angular common http remember this angular common http because http client module should be imported from here in case you get an old code base it's possible that uh there was another uh [Music] there was another library called angular slash http so if you are getting something from angular http you are probably on the older version and you should move to angular common http which was of course uh introduced in 2017 so you don't have to go ahead and still use that particular api remember angular slash common slash yesterday this is from where you should be using it so this is first step now we are done we are done with setting up the http client now let's go ahead and see how we can use http client service but before we move into uh start using our http client service we need an api and we don't have any api available as of now so what we are going to do is we are going to use a mock api which i have created you don't have to worry about this i'll share the we will share the code and you can just download it this api is actually written in nest js and it is written using typescript so i'll just do npm start here to start this particular api and it will expose some api endpoints which which we have already written so you can go to rooms controller and you will be able to see aps slash rooms uh this is post this is get this is get by id and this is patch and delete these are different apis which is available and we will be interacting with this api so you can see these are the end points which we get api slash rooms post abs slash rooms get and now let's go back to our code base uh sorry here uh let's go back to our uh application like and the first thing which we need in case you are setting up your http uh or http api or your api server locally you need to create one file which is known as proxy.conf.json is something uh this is something which is available inside documentation so i'll just guide you to the document documentation and uh in next time whenever you want to set it you can just refer the documentation so you can go to angular.io which is of course the official documentation search for proxy let's see um okay let me see you get this set up okay oh so yeah you can go to the documentation and go to uh this ng surf command and in ngsurf you will find one property called proxy yeah proxyconfig and you can just click here to it will take you to the page where all the information is available so we can create a proxy.con.json this is first step which i have already done for us and then you can just copy and paste this uh our api also exists with slash api right so slash api slash uh [Music] so slash ap slash room so we'll start with slash api and this is where the api exists local 3000 so you can verify from here uh this application main.ds and app.listen so right now it is running on localhost 3000 and after this there are few steps more which i have already done for us but you can refer it from here we have to actually add one more configuration so we have to add one more configuration inside our angular.json uh the surf command this is the configuration for serve and we have added this inside development we have also added proxy config and path to our proxy.con.json file once you do this that's it you're done right so this is to set up the proxy and now let's go ahead and utilize the service http client service to make our first api call so room service this is uh where we want to go and we are going to use http client service which is available inside angular so we'll say private http and we'll say type of http client let me just remove this and we will import http client from angular common slash http so this is this is imported now we have our strip client service available let's go ahead and make our first api call so here right now we are getting the data from uh of course service itself we have hard coded this data let's remove this let us get rid of it i'll do one a small change as my id at the back end is a string i'll change this room number to b string and probably i have to change at one more place which is this now to get the data in from an api we generally make a get called so get calls can be accessed from the browser itself so let's try to see if that works so i can say localhost 3000 slash aps slash rooms this is where our resources are available and you can see uh we have three records available already and this is our data so here rather than actually getting the data from this dot room list what we are going to do is we are going to call the http get method so there are multiple methods which exist so we have get post put delete patch and there are a few more but we won't be using them uh pro a lot so let's use generally we call like whenever you start working with a new uh sorry whenever you start working with a new framework the first thing which you learned is cloud operation right create rate update delete that's what we are going to do this get method is read so here i'll say this dot http dot get and you can see i'm getting intelligence but i'm not going to use it right now so i'll say so we get and we need an api endpoint right now as we have a proxy server available we don't have to give entire paths so we don't have to mention localhost 3 3000 slash api slash rooms what we can do is i can we can mention slash api slash rooms this is it because of the config proxy config which we have so proxy will redirect or this call slash api rooms to localhost 3000 which is available here right and now let's say let's save this and once we go back to our component we will start getting an error here so this code is commented right now but let's uncomment and if we will start seeing an error it says this dot rooms have some swiggy lines let's see what it says it says type observable of object is missing following properties so it is saying okay whatever data you are trying to actually assign this assign it to room list is is of something of type called observable what is this observable so let's uh see this first what i will do is we'll just con do a console.log to try to understand what this observables and everything is and let's go to console and we can see this right so we have observable which says operator and there are something called source but there is no data so let's try to understand what observable means angular uses a library called rxjs internally to work with data and it is also used inside your http service as well even there are few other places like uh we we will be using it in forms we will be using it in routing so multiple places so alex just let's see what is this so this is the official uh web page here it's just dev so you can go ahead and see what rxjs is it's a there is a small introduction which is written here so it's a library it's of course a library to work with even it's a event best program uh sorry to work with event best programs using observable sequence so what what do you mean by observable sequence i mean probably you might have never heard about observables it's a because it's a of course a different library and generally we don't use that those libraries but rxjs is one of the powerful library which which which is available here and can be used with any framework so it does not that it it's only technically coupled with angular it's uh it's used in react it can be used in woo it can be used in swelt anywhere you want so rxjs has a concept that whatever data you get is a stream of data right so what do you mean by stream for example uh you might have already used lot of streaming services so let's go to youtube let's uh let's go to netflix let's go to amazon what are those they are your streaming services like amazon of course amazon not the shopping app right amazon prime so uh what you get is you get a stream of data right i mean that they are streaming some data to your your devices once we say stream so it's like once you what happens uh when you when you want to access some streaming services the first step is you subscribe to it right i mean of course you you need to create an account you subscribe and then you can start getting those streams the similar concept works inside rxjs so once you want to get some data the first thing which you have to do is you have to of course someone needs to publish the data that's that's of course true because of course if no one is publishing the data or no one is publishing the streams you will not get anything but as a user as a developer what you should be doing is you should be subscribing to the stream to get the data it's a continuous stream generally uh let me just try to explain you as a common term which is used a lot called push versus pull architecture let's go back to our code piece i'm not going to write entire code but yeah just just an example so here let's say if we are not using stream what you will do is you will call let's say get data to get the data in case let's say we perform some operation we add the data so we add a new data what you need to do is in case i want to get the latest data generally we do sorry generally we do is call the get data again right this is this is something which you we have been doing from long time right in javascript we have been doing from long time so whenever you modify the data what you do is you get the data again what you do is you pull the data this is called pull pull based architecture so every time you update something just go ahead and pull the data rxjs works on a push architecture it says once you get the data it is continuous stream continuous stream of data so in case you add some data you add the data directly into the stream and once this stream is updated anyone who has actually subscribed to the stream will get the data you don't have to call the get data function again to get the data that's full based architecture here we are saying whenever you update the stream you will get the updated data that's push based architecture you are not doing it doing yourself actually stream is pushing the latest data to you so hope you understand understood this because this is really important to understand rxjs and streams i'll just leave it here in case you want to refer this again so what we are going to do is we are going to get our of course rooms data first thing in case i want to access this data what i have to do is i have to go ahead and subscribe to it and how we can subscribe using uh rhs it has a subscribe method so you can to get rooms dot let's see subscribe and here we can say this dot rooms list is equals to rooms but we are getting an herb again i mean why let's try to read the error this is one of the most important skill you should learn in all the modern or the latest frameworks which we have available nowadays the developer experiences really the developer experience is really great what you mean by developer experience so it's all these things right errors or messages while developing so it guides you what the actual issue is so it says that this room list is of type this room list array but you are trying to assign it to an object and of course there is a mismatch in data type what we can do here is we can go ahead and change uh in get rooms we can actually ask our http service to actually give me the data in this particular type so i can use these generic syntax and i can say room list so i'll start room yeah room list array so we are saying whatever data i am going to get just transform the data into this particular object and then give it back to me and you have your data available and let's see what else we are missing we are just missing one bracket and let's save this and let's go back to our front end and let's click on toggle and you have the data you just made your first http get call from an api using angular you can go to network and you can just go to uh [Music] fetch xsr and you will be able to see your request so here we have our get request uh which returned us status code 200. you can go to preview to see the data which is written and these are requested us and request response address so this is your plain link json response and this is your formatted response and it also tells you uh when it started and how much time it took so it was completed around in 11 11 0.89 milliseconds so it took this is how much it took to actually download the content it was waiting for 11.32 milliseconds to complete the call but total if you see uh here 31.88 milliseconds so this is absolutely fine i mean you should not your api should respond within one second and 31.1 uh thirty point eight thirty one point eight eight millisecond is perfect i mean of course it's a local database and we sorry it's a local api and we just have three records to fetch but yeah congratulation you just did your you just made your first api call and you have rendered the data on your ui so now we understand how to get the data from http but i'll focus again on rxjs because this is really important to understand so we saw that okay rxjs is something which gives you stream of data and it is used for writing reactive programming and we also discuss about pull versus push what is the difference and it gives you like it gives you observables like stream of your data which we can subscribe to what we are going to see now is we are going to create this observable by using rxjs itself not using http and see how it works so let's go back to our code base and let's create an observable by r1 so what i'm going to do is i'm going to create and stream i'll call it as a stream is equals to new observable see survivable is something which should come from rxgs okay it is not imported and we'll remove this right now okay and now here in observe we get an observer which we will call a method called next so there are multiple methods which exist on your observable so you have you can see you have unsubscribe you have complete you have error you have remove and add here what we are going to do is we are going to call next what you mean by next so whenever you call a next on your observer it will be emitting a new data so whoever is of subscribing to this stream will get this data so let's say i'm saying the next data is uh user one and i can of course call it multiple times so i can say okay this is observer dot next user two and next user three and i can also call observable observer dot complete so whenever this of course every stream will finish somewhere so i'm saying whenever this uh after this just go ahead and complete the stream so you can see i'm going to call complete method and this is where my stream completes we can also handle so you can see it says observer dot uh we have one more method error right so we can also handle the error in case what uh if error there is any error right so we can just say okay in case of error just raise an exception and that's it so we'll say this uh i mean we are not going to use it we will see it later on whenever a stream raises an error how to handle those so we'll see that as well so now this is our our stream which we can subscribe to which has an observer and which can which can raise or which can give you new stream every time you have you are calling this let's go to stream ngo init and here i'll say this dot stream and we will subscribe to this right so we'll subscribe and we'll say this is our data and we'll call console.log and we'll see what the data is let's go back to our hotel inventory app let's go back to the console and you can see you have user one user to user three after this your stream gets completed right so we are going calling complete let's try to call this again so we are calling it multiple time it is anyways happening multiple times right now so you can see user one user to user three and again user one user to user three is getting uh getting uh rendered so we are subscribing to this stream multiple times and we get the same data every time and after this your your stream completes inside this subscribe also you can get three values so let's go ahead and see uh the definition of course so you have next value you have error and you have complete three values so you can actually write some this as this is our next value so so once we subscribe to this we get three times of three types of data so you can see we get next which is of course next value so we'll we can also do something like this on complete i am going to say just go ahead and complete uh sorry we'll just print that this is this stream is completed and in case you get error you can also just say okay uh there is some error right so whatever stream whatever the error is you can just print it let me just format so we have next complete an error let's go to our ui again and you can see it says user1 user 2 and this is where com your stream completes then again user 1 user 2 user 3 and your stream completes right okay this is uh at another place where it is getting called so user room component this is the one okay because our rooms component is getting rendered twice it is getting called wise that's that's that's the thing uh i think it has to do with this right so we have portal rooms here and let's come comment this one so we will just use this and it will be rendered only one so you have user one user two three and then it is completed and then you have user one user to user three and then your uh api uh sorry your stream completes so this is what will happen this is what we will be uh we won't be using this syntax uh um we will be using this syntax a lot of times even not this syntax we will see what is the standard way this is just to make sure that you understand streams so what uh we have as part of uh streams is there are two parts one is of course your observable which will be subscribed right which your users can subscribe to and internally observable will have an observer which will observe the data if there is a new value which is available now where this is useful so in case let's say you are working with some real time database right so whenever a new value is like pushed because it's a push based architecture your observer will actually observe okay there is a new value so what i have to do is i have to call next internally this is what it will be doing internally it will call next method so whoever has subscribed to it gets the new value even in case it uh it also has complete and error so in case you get some error or your stream completes that's it if your stream completes it will not going to give you anything in case error is sent it will capture that error and it will send it to you you don't have to go ahead and create this by your own you will be using some operators of course we will go ahead and see that this is just to let you know how observables internally work and what's what you get once you subscribe to it you get next complete an error these three methods are given to you generally what we do is we work with data but you should also work with try to handle the errors gracefully as well i mean your user should not see the error right red lines in your once your application is available so we will see how we can also handle error in case we get it from the api so this is this is all about observable streams observable observer and how you can create it manually by using observable class which is available here right so if you go to this rxjs observable you will see this is a class and it also has time so right now if you see uh let me just show you uh here so it says observable of unknown because we have not given any type uh we can actually make it string because right now i'm working with string so it will know okay this particular stream will have string of data you can make it number in case you are working with number but yeah this is higher level api you don't have to do it you don't have to use it directly inside your code because most of the time you will be using http and you will getting you'll be getting the data from there or you will directly work with streams by using other methods so we will see those right now this is what we have in rxjs right so and observables now let's go ahead and move into other methods move on and see other operations right now we have done get operation and we've discussed something about rxjs now we will next we will try to do post operation right so we uh we are done with red let's do it let's see create and let's go back to our code this is our service and we will call at rooms add room okay we will pass one room not rooms and here we are going to do return this dot http dot post api slash rooms and the room data which we have available right so our service is done this is this is uh this this is the a service is done so this is it but you have to be aware whenever you are working with apis you should be aware of request format as well as response format so let's uh let me just check what is the request and response format for my this particular api so we have this post this is the create and create room which is which requires room number room type amenities everything apart from the room number which will be created for us and let's go ahead and see the service just to see what will be the response so in create this is just of course i'm not accessing any database so okay i'm returning the room's entire list of data which is which is added now so let's see uh so we have this our post generally you get the latest record which is added but it's up to you i mean it's it's a really bad practice to return all the data which is added but this is just an example right so i'm just going to return all the data which is available after adding this record as well and now let's go back and this is our ad room function remember we just wrote this here we will call will recommend this and we will say this dot room service dot ad room and we will pass this room as uh the data i will comment out room number uh which is which won't be passed here let's see if it gets any uh it gives us any issue otherwise this should be fine and this dot room list we will assign whatever data we are getting from this response to room list right so we uh let's go ahead and try to let me just close other browsers and we have our get data right so this is available get call succeeded and we got our data from the api we want to just add functionality so let's click on add room let's go to network first because this is where we will be able to see our request click on add room and we got 201 so if you see we have 201 created it means my api was successful we also got the latest record which is added here you can see the id is alphanumeric because it is generated using uuid which will be unique id and its alphanumeric string so let's see the payload so this is the payload which is which we have sent to our api and of course this is uh this is the response which we have received and this is json response in case you want to see it and you can also see other information right so your timing and everything so this is it this is how you make a post call i mean in case you get a single record of course you have to try it uh you have to go ahead and see i mean how to handle that data but right now i'm returning all the record including the current record so i get everything which is available and i can add more so you can see right so you have those different records with different id the same record we added with different id right now i'm uh sorry right now we have our hard footed the data because we don't have any form in future we will replace this with the form that's what we are going to do so let's move on and make our next api call which is now update so let's let me just check quickly what is the update api looks like okay so this is my update and it takes the data and updates the data and gives me back okay let's try to make an update call and here what we are going to do is of cour again i am going to hard code some data just to see how to make this call right and this also returns the entire records remember this this also returns entire record in reality you are not going to get this you are not going to return entire data probably you will get the id right so this is updated or not that's it so let's go ahead and add a button and i'll call this as edit room and let's implement this function okay so edit room function and as we said we are going to just use the dummy data here as well so i'll take it from this and i'll say uh room number three so this data will be updated for room number three and we will call it as edit room again in future we will have a form from where we can edit this record so let's see uh what we have at room number three which is private suit and 15 000 so i think we have a different yeah so we have different record here so this will be updated with room number three let's write the uh method so i'll say this is a date room which will get a room data and will return so i'll say this.http.put and again i'm returning the entire list so i'm saying okay this is the type of response and then i did we'll have the same api and this is our data let's go ahead and save this thank you so let's see let's try to make an edit call so we have so we have our edit call here so let's click on edit edit room and we don't have any ah okay one second did we call this particular api i don't think so no we didn't write so we have to save this dot s t e d b room service dot edit room and then we will subscribe to the to the data and then we will just mind it i'll say this dot room list is equal to data because we are getting everything back let's save this and go back to the ui see the data so we have this one available click on edit and okay it gave some error let's see let's go to the network and uh we have api rooms put 404 not found okay okay let's see for what we have to what we have for ot here okay we don't have put okay but we have rooms post get patch and delete okay this is let's see if we can change get patch which takes an id and let's see if we can make it put and we need to pass an id then let's run this again so i'm restarting the server so it uses put uh it actually captures the put api as well but we have yeah now we have put so it says it is available on api slash room slash id so we have to pass the id in the request itself so let's go ahead and see how we do that so we'll go to edit rooms and this is where we have to pass room slash id so we'll say okay i am going to use this this tick operator and i'll say slash dollar and here i'll say room or dot room number which is the id for us and let's go ahead and see let's uh go to the browser and see the data or see the request which is being passed let's click on let's go to the network we are already on the network tab let's click on edit room and we have 200 okay yes we made our uh put call as well so we have this payload and you can see uh the data is updated as well right so we uh earlier it was something else now we have same data which we had sent here available in our table so you can see your payload you can see your request it says localhost 4000 api slash room slash 3. so this is how you can make a put call so ah this is this is uh let's see the delete next so i'll say delete and if you see delete also requires the id to be passed so i am going to do is i'll say just id just type of string you don't need to send the entire data to delete so and delete also does not return anything so you can see okay here right now it returns the id that's it right so it returns the uh it returns the data apart from this id we as we said this is a dummy api so i'm returning all the data but in reality you will find that delete will never return anything that's that's uh that's true and let's call let's see this is delete room and here we will save this dot delete room dot sorry this dot your service room service delete room and i am getting the data back again as i said i am giving the entire record and let's try to delete this one with room number three home surface delete okay and let's try to assign this data here so we have let's see api slash room slash id this is how our request looks like right now api slash room slash id we don't have to pass any payload to delete go back and uh we need of course and delete from delete button available to call the delete so i'll say okay this is a delete room and we will be calling this delete room function from here and let's go ahead and see the data first and let's click on delete room and done so now we have learned about the delete function as well right now you can see it returns something but in probably in real time your real-time application it will just give you information about okay whether it this data is related or not or in case you have received some uh other error right that might that you might get but delete gen generally just performs a single operation okay just go ahead and remove this data and that's it and in in case you are also taking care of your apis make sure you don't delete the data from database always prefer soft delete over heart delete so soft delete it means you have some flag which we just turn on so probably you can just have a column called deleted and just mark it as yes deleted yes and that's it so that's it from the crowd operation you now understand crud operation we will see some of the rxjs operators next and then we will wrap up the http method by after completing few more videos like fbp app initialize now next what we are going to do is we are going to explain explore one more api which is really powerful it gives you more information about your http call and it is known as request so one thing uh before we go ahead and implement this request api i need an api which has lot more data so what we are going to do is we are going to use a dummy api which gives us around more than more than 4000 records and json placeholder is one of the dummy api which is which exists it's a fake rest api and it has a method called photos which gives us 5000 records which will be sufficient which actually suits the purpose for this particular example so let's go ahead and do that before we move into this i'll just make one more change let me just close all the files and in rooms component i'll just talk change the value of toggle because right now by default the rows are written which we don't want to so let's change height rooms to [Music] true and i think it should work let's uh write this api call as part of room service itself and i will we will call it as get photos this api is known as request so the first thing which we have to do is we have to go ahead and create a request http request so let's go ahead and see how we do that so i'll create a constant request and is equal to we'll say this dot sorry monitors dot will say new http request which you can see actually comes from here http request which is coming from here let me just remove this yeah which comes from angular slash common slash scp and we are going to so let's go ahead and see the uh payload so we can actually pass several methods we have get head boost sorry get head json b options uh but remember this doesn't work for post because post is not here right and uh we will be calling get method and this is the api which are which we are going to call sorry let me just check this in placeholder and let me just copy the url again in case you are trying for yourself you can also refer this json placeholder api for your your project so this is the api and now it needs some we need to pass some configuration here so let's go ahead and see what are those configuration so we are going to use report progress for this particular example that's and now we are going to pass this http request to our request method so let's do return this is not http request and we are passing this particular request and we need to create the interface as well because we need to provide the typing we will do that but i mean that's that's for you you can try this out you can just refer the metadata or you can refer the properties from this particular url just a placeholder type called typecode.com photos and it gives you response so you know what type of response you have and then you can create your interface based on it so you have album id title so all these parameters now once this is done let's go ahead and call this method inside room component.ds i'm going to call this method i'm going to call this method on ngoninit this is just an example right so in case you need to use this you can so let's see what are as i said this is going to give you more information about your http request so let's see what those information i'm talking about so i'll say this dot room service dot get photos and here i'm going to do subscribe and let's see the first uh thing which you should always do is just check what the data is or how your data looks like so let's see uh so i'm saying console.log data and go to console and this room number component.ts line number 66 and let's see the response so remember earlier whenever we subscribed to our data what we got we got the data that's it but here your rooms component is actually giving you more than this it is giving you entire http response which has lot of information which has body status code status text but one more thing if you notice your http call which you made using http request and then you subscribe to it it is actually printed multiple times so let me just start from the top right so here we don't have anything but we have to see for line number 66 so here so first is here so you can see it has some information it says http header response so it says okay uh your request to the server is sent this is what we get this is what information we get here okay and now this is also 66 and here it starts loading the data okay so here you can see at this line again this is line number 66 so this is where it actually start loading the data so it also gives so it also gives you information how much data is loaded so you can see here line number 66 again line number 66 here same if you see object type 3 and how many bytes are loaded here again and then finally when you get the data it gives you http response why this is printed twice because we are loading it twice right so you can see here it's the same component a room component getting called twice so you can you get same information again and again let's hide one so i can we can go to app component dot html and inside this and we will so we will see get some sorry we'll get a small log to work with and yeah so now at the end we have this http response what you can achieve using this so let's say if you have an api which takes some time to load data and you have a lot of records to display for example the same example right we have 5000 records so we don't want to actually make made sorry we don't want to you make user think that this is hand the application is hanged right now rather you can display the user that okay this many devices are downloaded and you can probably show some loader right and based on that uh your user i mean your even your application will be interactive rather actually just being there and user thinks that okay there is nothing which is happening so let's see how we can read this information let's go to room component.ts so this data is actually not the data it's its event so if you see there are multiple events which is being called so i'll call this as event and then here what we can do is we can subscribe to multiple events so i'll say okay let's use switch okay looks like some okay switch based on the event type i'll say case uh i'll uh first let's see http event type which we have to import http event type is what is going to give you those information so whether your request is sent i mean in case it's an upload event if upload is in progress if it is download what is the response editor whether our request is actually sent to the server or not in case uh there is some problem communicating with server you will get an error here and let's go ahead and do that so first and we are going to see we are going to say okay [Music] so in case the request is sent i will say okay console dot log request has been made and of course don't miss the break and then case and say this is http response setter and say console and here we are going to say request success and then case this is uh important so we are saying okay case http event download progress and here what you can read is uh let's create a variable i will say this is so sorry total bytes so this event is actually going to give us how many bytes are downloaded so what we can achieve here is we can say this dot total bytes plus is equals to event and if you try to access right now you will get two properties total and type so total can be uh sorry total can be null while you are downloading the data so what we need is loaded so we need to show how much data is loaded and that's about this and finally we will handle the response and now if i do console.log and let's consider console.log again so if we try to access event dot you will see you will get uh many properties and these are the properties which you generally get from an api let me show you here so if you go to network and click on rooms click on headers and you have requested us right so sorry not requested us but yeah this one so you see uh you get status code you get the data of course which is part of your your response so you are going to get more information about what your response was including the status board including your body including your headers status everything so i'll say let's try to access body and let's see and this is your photos but this is not what we are interested into we are interested in console.log right now so let's go ahead and see so we have of course this is uh [Music] this is our data so this is 5000 requires which is available and here we want to display the total byte so what i'm going to do is here i'll say there is let's play send h1 here sorry so it is visible and then and say this is total bytes loaded let's see and you can see uh of course it is my internet speed is real fast so you can see two this many bytes loaded but we can go to network and we can move to slow 3g and let's reload right so you can see okay it was it was it started from zero and then it is loading the data so i'll just go to no throttling again and so it is too fast of course so to download this many 72 bytes so it didn't took a lot of time but yeah this is what you can achieve using request api it is really powerful it gives you a lot of information more information than what your you generally get from your http kit uh so try to utilize this as much as possible we already saw the use case where you can do that the only thing is we have to utilize the json placeholder api because we don't have an existing api which gives us those many records so yeah that's it from the next we are going to discuss and see some rxjs operators as we said in past rxjs is really powerful and you should learn about rxjs in more detail though this is an introduction uh though this is and not and fully fledged rxjs course but yes we are trying to cover as much as possible so you understand the basics and we will be covering rhs as much as possible which can be used in your production application so once you start writing or once you start working on angular application you will be able to use enough rxjs operators as well as well as enough rxjs in your application there are many operators which exist there are i think around there are more than 100 operators which exist it's not possible to know all of them and you even don't need all of them to uh to be frank you can always refer the rxjs operators on rxjs.dev which is official website and in case you are not sure which operator to use they have one really nice operator decision tree where you can give some information about what you are trying to achieve and they will give you an operator which we can use you can see the documentation for operators here as i said there are more than 100 it's not possible to understand all of them and probably you won't be using or you never need more all those hundred operators you are going to almost use most of the time around 10 operators which from which we will be using most of the pitch from which we will be covering most of them here the first operator which we are going to use is share replay now why we need rxjs operators remember rxjs gives you a stream of data and that stream of data cannot be modified it can be modified only within a stream or before it is subscribed so how to modify those data so that's where operators come really handy so here i'll give you an example of how we can use share reply operator and then we will also see some examples of operator where you can modify the data while the stream within the stream and then give it back so to see this example what i'm going to do is i have i'm going to make two changes here i'm going to uncomment this again so we get the request twice i have made one more change in container component remember we had this host uh decorator here on the service and this providers have commented this and i have removed this as well just to make sure that you are following the same because if i don't remove it i mean we are going to end up with multiple instances of a service and of course it will make two different calls so let's go ahead and talk about this share replace service so here you can see rooms is being called twice photos is again being called twice it's the same data right so why we need to make two calls what we can do what we can do better here probably we can catch whenever first make call is made and then we don't have to make another call right that's that's looks like a perfect solution yes that's what share replay does share replay can help you to cash the request so you don't have to make your call again it's very useful in case you have some master data which uh you don't need to download again and again right whenever you are visit your user visits the page and in case you are making the same call at multiple places which is possible it's not something which uh you which you should avoid it is something which you should avoid but it's it's possible that it may happen that you are calling the same api again and again to get some data so let's see how we can use our sorry rxjs share replay operator to cache this request and make our application little bit faster so i'm going to make some changes into room service i am going to use a different approach generally i prefer this in case i don't have any uh i don't need a function so i'm going to use get rooms but i'm going to use a dollar i'll talk about what this room installer does and then i'll call this get rooms api and remember as i said we cannot go ahead and modify the stream after we subscribe to it a stream can be modified inside a function that function is known as pipe so this pipe is where you can do anything with your data and right now we are going to call a share replay operator with share replay 1 so we are going to repeat or replay the last one record which we have received and this is done this is uh the method now let me talk about this get room installer what we are doing this is a property so we are saying this is a property and this dollar is to denote that this is a stream so generally whenever you work with streams try to use this approach try to uh use this syntax and so you don't need ngo in it or you don't have to call anything inside engineering we'll see an example where we can actually avoid subscription as well so once you get comfortable with this it will be easy to understand that code as well so here we have a property get rooms and then we are saying okay this is a stream which we get here and so far nothing has changed we still getting to record to request right so rims rooms now let's go to rooms component.ds here and rather than getting to get rooms we are going to access get rooms property and let's go ahead and see that we are now getting rooms request only once but of course we have the data available multiple times because we are caching the first request so we don't have to go ahead and make another call this is something which is really important to understand because of course you may have an application where multiple calls are being made unnecessarily with even though the data never changes you share play and then you are done in this video we are going to discuss about one pipe which we had left while talking about built-in pipes remember we said we are going to use a sink pipe while working with http and that's what we are going to explore here that's why we are back on this particular topic we are going to see how we can utilize a sink pipe and what's the purpose of using a sink pipe so this is going to be little bit longer theories plus examples so let's go back to our port so here right now the code which we have written you you can see everywhere we are doing dot subscribe dot subscribe right so we are subscribing uh our uh stream everywhere now there is a downside to this there is a downside yes to subscribe the streams try to relate this streams uh streams to your streaming services when you subscribe to let's say netflix or amazon prime once you subscribe let's say you subscribe to netflix and you wanted to actually cancel that subscription next month and you forget you actually forgot to cancel your subscription what happens you pay the price same thing is applicable here but here what is the price we are paying the price is actually performs so whenever you subscribe to a stream the streams are active the standard way is whenever you subscribe to stream you should unsubscribe to it how we can unsubscribe to it remember we discussed about ngo and destroy and we said engine destroy is an event where we can go ahead and uh re uh i mean release the resources we can actually unsubs uh we can release anything which we have in memory so this is where we can unsubscribe to it but most of the places we don't need to subscribe manually it's not impossible i mean it's not even totally impossible to remove all the subscribe methods it's not but yes there are places there are things uh there are like operators by using which you can you can do that and especially in case you want to just read the data you can go ahead and avoid the streams uh sorry you can go ahead and avoid the subscription manual subscription for example of course this one or we had the photos one as well right so i mean of course we are here we are trying diving deep that okay we want to handle this even this even this event but yeah uh even in this case right so we can just avoid the subscription because we just wanted to access the data so async pipe makes a spot makes it possible to manage the subscription for us what in case i have to do it myself so this is how the code will look like and you will see this code in a lot of places in your application or maybe if you get hired to work on any application probably the chances are that you will see this code generally we get and subscription object which is type of subscription which comes from rxjs so you can see okay i'll just do this one right so subscription which is come which comes from rxjs you can see this and we will ask this we will use this variable to hold the subscription for us and then i'll use ng on destroy and you will find that some code which looks like this so if this dot subscription it means there are some there are any active subscription go ahead and unsubscribe to it so this is the code which you can find at many places and this is the way you can actually uh unsubscribe to an active subscription as well why ng on destroy we are saying whenever this component gets destroyed just go ahead and destroy the subscription also because we don't need it we don't need to it to be available in the memory and in case i want to avoid this which i said totally i mean uh there is a service i'll share the code there is an actually [Music] there is a service which you can use at all the places to actually achieve this uh or write this write your code in a simpler way but yeah i mean i'll share that in future because that that service you can utilize in your real-time application here but right now let's say i don't want to actually subscribe it manually here how we can do that so i will remove this and let's use this stream so i'm going to comment this line because i'll keep it here but i'll just comment this now remember the earlier code which we wrote for sherry play i am going to use the same approach here so i'm going to say this is uh what this is rooms i'm going to say this is the room stream and this is equals to this method so i'm going to say okay this is room stream and actually this data is coming from your no subscribe method let's see once this is done of course let's go back to the ui and we will see okay there is no data which is available inside my table let's go to component and let's try to read what is available here how we can do that so we can use i'll just remove some headers here and whenever we have a stream we have to use the async pipe and then i'm using json to display that data so think like what it will do is it will unwrap that object and it will give you the data so remember earlier previously what we used to do is we used to subscribe to get that data out and then read the data here what is happening is we are passing the entire stream to a sync pipe which will unwrap which will unwrap means it will unsubscribe to that particular data and give the data back to us once your ng on destroy is called passing pipe will also take care of unsubscribing to that object so you don't have to write go ahead and write this code where you say okay this is equals to this subscription is equal to this and then unsubscribe in ngon and destroy so you don't have to write this code by yourself now let's go ahead and see how we can use it so i'll just copy this i'll comment now we know how my data looks like and here we are passing this uh rooms data let's see where is my where where is the table and i had her here now i can say uh this room stream pipe a sink here is it room or rooms [Music] and we will also say ngif rooms type busing so in case some rooms is available go ahead and display this and it says a room list of okay so rooms can also uh sorry this is a sync pipe uh can also return null so that's what it is us telling us right now that okay if it is null i mean i'm not able to assign this to an array or null the the thing which we can do is we can say okay this is type of not here this is type of this or none and this error will be gone so now we have uh we are checking if rooms data exist then only use but there is a downside to it so i'll show you i'll talk about that as well but right now we have our data which is absolutely fine right we are getting the data but here right now uh we are checking this in rooms async and here also we are doing the same the downside of doing such or writing this code is we have to i mean your sync pipe has to subscribe it multiple times can we do it at once yes that's possible you can do something like this so you can say rooms are sync as room and then you can just pass uh let's do it make it rooms and we can pass it here well even so we have to subscribe only once let's go ahead and verify our ui and it works no error and everything is as i mean looks the same as it was earlier so try to avoid multiple async pipe on the same stream rather do this so you can rather than actually doing multiple passing pipes you can just say okay as this and then you can just use that data unwrapped data down below so this is how a sync pipe works why we discuss about it because uh the next operator which we are going to use depends upon sync pipe so let's go ahead and see that now back to our rxjs operators and right now we are going to talk about the another object called catch error and that's why we learned about trussing pipe so let's see how we can actually handle the errors in our code base so so far we have written the code all the happy flow no exception that's fine right i mean most of the time you will get the ap flow but we have to handle the exceptions as well so here let's try to introduce an error how we can do that i can just change the api right so i can say api slash room and let's see and we have okay somehow application still works but get room okay sorry here we are not using the get rooms now so we will get 404 we generated an error now how to handle these exceptions right now we are saying okay we have a stream and whenever like that stream gives you the data just go ahead and display them let's see an example where we can also handle the exception so you can handle the exception inside service as well as in your component the best thing would be to use something like ngrx which is like advanced topic which is not part of this but yeah let me show you how we can handle exception here so this stream as i said we cannot modify the stream after we subscribe to it but we can modify it by using pipe so we will apply the pipe and here i am going to say catch error this is the ngrs function which we have and we will handle the exception here but it says okay there is some problem so it says error it declared but right now we are not using its value let's try to use the value and to do that what we will do is we will say right now let's do console.log and we'll say error and it says array of void ah okay so it accepts room list parameter right so we can say okay do this capture the earth and written off this i'll explain what we are doing here let's format and we have an extra error okay so we are handling uh we are we are saying okay this is uh log the error and then just return the empty array so let's go ahead and see okay so nothing here let's see the console and we have the uh error which is http line number let's see line number 68 yeah so line number 68 we have error http error response and it says okay this is the message right so this is the actual message which we have now what we need is we let's say we want to display this particular message you want to show okay this this is the actual error which we have received how we can do that i'm going to use another type which is available in alexis which is both observable and observer so i am going to create an error stream and i am going to say this is a type of subject and it is sorry just type of subject and which is type of string uh sorry and as this is not initialized i'm going to say okay this is uh application operator which will avoid that particular error now let's see what is this particular subject is as you can see it is coming from rxjs of course and it is subject is actually base class for all the uh different uh uh streams which you get so it's a uh like uh what you can say it's a base class right for all the type of streams which you get this is the best base class so you can actually create a subject and then uh there are different types of subjective which also exists internally angular also uses subject at a lot of places so here uh what we have done is we have created uh this subject and now here what i'm going to do is i'm going to say okay this dot error dot i'm going to call a method called next remember we said whenever we we saw an example of observer we said there are three methods which exist next complete and error so we are going to say next error and whenever we get the new error value we are going to subscribe to this so we are going to say here this dot we don't have to let's see let's do this dot error stream dot as observable so this is my subject this get error or let's make it i'll keep it get error as of now i'm saying i'm going to subscribe to this so this is this active stream whenever there is an if there is an error which is erased i'm going to push this error you generally should not write this code inside your component because there is a drawback whenever next gets called you uh your change detection is going to run again so that's a drawback but of course you should learn about this how to do exception handling as well you can move this to your service you can move it to another common place wherever you want to but yeah now we have this error which is available and now let's go ahead and see so i'm going to save this and going to subscribe to this error just above this and uh here i'll say h1 and get error pipe sync and what i'm going to do is i'm just going to take message out of it right so we don't need to display the entire error so let's see how the ui looks like and okay there is some error cannot read properties of undefined okay probably i'm missing something let's see okay new subject this is how it should be actually we have to create a new subject of type string and this should fix the issue now we have of course everything is working fine looks like everything is working fine but you can see you have error code available here so it says your error message has to be failure response for this blah blah blah which is available now so what we are doing is whenever there is an exception now we are handling that error we are handling that error and then we are subscribing to that error as well we are saying okay in case we get the data that's absolutely fine but in case i get the error just go ahead and display the error as well you can customize this error based on your requirement now let's go ahead and fix the url and our data will be back now we don't have any error so nothing no error will be subscribed to right so this is how you can use catch error and yes just make sure that okay you are not doing not writing this code in your component this is just an example you can do it inside service we will see an example of where we do the component interaction using service where we are going to see different types of subjects which exist and probably we will move this code outside so this is it from [Music] so far we have seen two operators share replay and catcher and we also saw an example how you can use a sink pipe which is really great you should focus more on using a sync pipe as as much as possible let's now see an example of map operator we are going to see some uh other map operator as well because there are there are few different like uh you will find there is switch map merge map and uh there are a few operators like that so but here we are going to just talk about map operator so let's go and see how we can actually use map operator to work with our stream and modify it and by the way this is the first operator which we are going to use which can modify which will modify the data right this is the first operator which we are going to use which will modify the data so far we have seen cache error which was able to cache the error and we saw we saw share replay which was able to cache the data right so let's see uh how we can modify the stream by using shareplay now sorry by using uh how we can modify the stream by using map operator and to do that what i'm going to do is i'm going to subscribe to the same streams okay and i call this as account and i'm saying this is a stream and here i am going to subscribe so i'll say this dot room sorry room service dot get rooms so this is our stream and then we can use pipe and now in map using map operator so we just use map and okay this is coming from rickshaws we'll say rooms and we will take the number of rooms which is available inside this and now if you see this type the important thing is see the types here it is array of rooms and here it is count which means number of rooms which are available inside this particular area so we are actually modifying the stream and we are just returning the number of records or you can see rooms.length which is number of records number of rooms which is available in this particular stream but we are not subscribing it manually we are still in the stream we modified the stream and said okay it was like room of numbers which was coming inside the pipe and then we took only the count as and we gave that count as a stream so here now i can just go ahead and use this in our template and let's put it here and let's uh okay there's one thing let's put it in it in h1 and we'll see number of rooms is sync and let's save this as well because otherwise uh this variable won't be identified because the file is not saved let's see if it is compiled yes it is compiled let's go to the browser and you can see it says number of rooms three so this is how you can utilize map operator and uh without subscribing to the stream you can just get the data whatever you need from the existing stream so this is uh the map operator and now we will move on to the next topic in this video we are going to talk about several things first we will see how we can add the extra headers to our http request and then we will see how we can actually intercept those requests that's where the concept of http interceptor will come and then at the end we will see app initializer so first let's go ahead and talk about modifying the header information so we are back to our code base in your enterprise application there might be scenarios where you may need to pass some extra information in the header whichever we are talking about http request header so we will first learn how to do that so let's uh go to our service and let's try to add some extra headers to our this calls right so we have get call we have post call how we can pass that so if you see the signature of every http request which we have i mean get both put everything you will find that there is something called http headers which we can pass which takes a key value pair similarly you will find it for post as well and post delete everything so let's see uh how we can create an http editor and then we will try to pass it so first let's create the header i'll call it as header and it will be new http headers right so uh as we know it takes key and valid so a few combinators which we see content type you have let's say forms data no that's not a header or you can pass token right so token is a common use case here we are going to pass let's say um token for example and it will take this is the value so alpha numeric let's say our token is some alphanumeric random value and then here i can just say pass this headers to okay so we now let's verify inside our browser that if if that particular header which we have sent is received or not let's go back to our network tab and let's reload this uh it's compiled and this is the request which we are planning to see which we uh in which we have added that particular header information which is named as token let's see so this is responsive this is not what we are looking at we are looking at request header and let's see if we have okay there is one thing uh there's a one mistake which i made if you i mean we are not calling this method anymore so if i have to do this i have to actually pass this letter information here right in inside this call so i'll do one thing i'll create and cut this and paste it here and then we'll pass this header information into this with the start headers and let's remove it and let's remove this as well okay so this is the http method which we are calling let's go ahead and verify our build which is comp which is compiled application is compiled now let's go back to our code base and let's try to see request header now so we have this token which is available now this token can be received from at your api so in case let's say you are working together with some back-end developer he says listen uh for this particular api call i am going to need some token this is the token which you have to pass with every request so this is this is how you are going to do it so you will let's go back to the code and then let's talk about it so this is how you will create a new header and then you will pass that header into your request so this dot headers which you have passed here and you can of course pass multiple and let's see [Music] so you can call append method and then you can add multiple so that's how you can do it you can also see there is a method to get the headers you have has has to actually see if this particular header exists or not so you can just copy the same header let's say let's try to add a room and see if it works and we have this information passed or not so we can pass headers and we will pass this rotators in add info in add api as well let's go back to the code and let's add a room and this is our rooms api and we will be able to see token here as well right so this is how you will be adding header information now once we know this how to add header information let's talk about another use case so let's say you get a token and now the requirement is you have to actually go ahead and add this token f to every request do you think the what i'm doing is correct or is the most in efficient way of course the answer is no right i mean what i'm doing is i'm duplicating the code which is of course i shouldn't be doing that so what we can do so this is where the concept of http interceptors come in http interceptors is not only made for this but there are bigger use case for http interceptors http interceptors i mean you may have actually heard about interceptors let's come back and talk about interceptors first before we talk about http interceptors what do you mean by interceptor you might have seen some movies right where some someone says okay your call is being intercepted what you mean by that so actually there is sender and receiver so client is my receiver and server is my center right uh if you see i mean your server is responding to uh each and every request and your your client is also making a request to so it goes from your client to server and server to client now there is someone in between who is listening to what is happening what what data is going what data is coming that is interceptor so similar way http interceptor is an a service which will sit between your http call which is being made from your client which is your browser to the server and in case also your server responds it can also listen to your request that's http interceptor here what can be the use case i mean there are a lot of things which you can see do using http interceptor one is of course you can add this combinators inside interceptor so you don't have to add it everywhere what what else what other use cases can be in case you want to let's say add date timestamp to each and every request yeah that's you can do that uh you can do using http interceptor what else let's say you want to uh handle the scenario where your token is expired yes and should be interceptor is the way to go and you can add multiple http interceptor it's not like you can only add one http interceptor the only thing is it will be called in the sequence they are registered so let's go ahead and create our first http interceptor to see how it works and to do that i'm going to use a command so of course n g g interceptor and i'm going to call it as let's say request request interceptor so and we have this this two classes created and you have this request interceptor which is which implements http interceptor that's why it is called http interceptor remember http interceptor can modify your request as well as it can modify your responses as well in case you want to now http interceptor has has actually an function which we need to implement which is called intercept and this is really important next dot handle this line actually sends the request to your server if you don't re if you don't call this method nothing will happen so let's try to first do one thing i'll just do console.log and we will just log our request right so request interceptor and then we'll pass the request with us once you are done with this i mean uh right now this interceptor will not do anything because it is not registered let's go ahead and register the interceptor so we will do it here and this is the this is how you are going to register it so you will say provide so we are going to say provide on this those value which will be http interceptors so uh let me talk about this uh in in a little bit uh [Music] we'll talk about this what we are doing here so we are saying provide use value this and then we will say multi true and let's go ahead and verify first so our build is successful let's go back to our application and console because we want to change see the request and request success request has been made and let's see there is anything from interceptor okay somehow it is not provide request interceptor which is our class please value this multi true okay let's see our amp is getting updated the build was successful and nothing changed okay somehow it says nothing changed okay let's see [Music] room service has been initialized okay let's not use customs value i think just done the opposite of it so you have we have to provide http interceptor as a service and then we have to say use class which is our request interceptor so i just use the values somehow and let's talk about this and let's verify again in case it is working fine or not and we will be we should be able to see now first here it is so you can see request interceptor line number 16 and it has everything so right now aps rooms is called and we have context body header and there should be one for uh photos and there should be one for where is the rooms api ah this is the rooms one right so you have rooms one and as well as the photos so both the requests are captured here in case we want to add room you will see uh when the request is handled here so you can see body context headers and in headers you will be able to see the token because right now we have one uh header which is added here so this is this these are the information i mean this uh this gives you complete http information i mean which is being sent from your client machine to your server server machine now let's come back to this and talk about this provide and use class so here this http interceptor is nothing but a token so remember we created an injection domain and this http interceptor also is also the same so here what we are saying is we are saying i have created a new http interceptor by implementing the interface http interceptor go ahead and add this http interceptor into list of interceptors which already exist and you might be wondering which interceptor exists yes so angular internally adds a lot of interceptors the reason being if you see this information right now are we preparing this information no we are not this is something which angular is doing by itself so of course it has some list of interceptors which is internally implemented and then we are adding our own so it will be executed in sequence so once every interceptor is executed then this will be executed if we add one more after this in that case first this request interceptor will be executed and after that the next interceptor will be executed it will always be sequential remember that in case you uh end up adding multiple interceptors so remember the sequence now here we have the information uh which is uh needed and now we understand what http interceptor does for us now let's go ahead and utilize that right so here what we are going to do is let's uh first add the header information right so right now we have added the header information inside the service we cannot do it for each and every uh api call so let's remove it from here so i'll just comment this out remove this from here similarly i'll remove from add and let's come here so first thing you cannot directly modify the request you cannot modify the original request so let me just refresh it because it may cause confusion so you cannot modify the original request you can clone it and then modify so i'll say okay this is new request fonts new request is equals to i'll say request.clone and here i can pass headers which will be i'll say new http headers and now let's copy the key and value from here so i'll say this is token and this is the value and the one thing which we have to do is now we have to pass this request not the original request remember that uh so it happens a lot of times that i end up just passing the same request and then i see okay why the modified values are not there so it's absolutely fine um everyone makes that mistake so [Music] and let's format using prettier and now let's verify the application again so we have uh network tab let's go to photos and it photos should also have this token so you can see the token is available here did we add it to photos no we did not who is adding it the interceptor is adding it similarly in the rooms you will find the token available here you will just let's add a room and we will find that okay it is also added here you have inside room uh we call delete room and inside delete room also you will notice that token is available so now with each and every request the token will be appended or added to the request you can do of course more thing for example let's say if you want to handles or you want to create some use cases when you forget request not for course request you can do that because this request information you can see uh it has a lot of information so you can say request dot method and let's uh do it for post one d right we will add this information header information only for post so i'm going to do this i'm going to say okay if requestism dot method is post go ahead and add this token and make a request otherwise make the original request let's format and right so let's verify now our get request should not have this in this token let's go to photos and no we don't have it for rooms we don't have it let's execute a post request by adding rooms and now we have it so this is this is uh these are the things which you can achieve using http interceptor right now we are only handling the request remember this you can see i'm not handling the response i'll show you one use case uh in while working with probably routing and forms how you can also handle the response so yeah that's it uh from the http interceptor now next thing which we are going to talk about is we will see app initializer so let's do that next next we are next we are going to do last topic from stdp intercept uh sorry from http and we are going to discuss about test initializers now what and where you are going to use it so this is little bit advanced topic as i am trying to cover everything which you can sorry i'm trying to cap sorry i'm trying to cover everything which you can utilize in your production application so you should not get any uh certain things okay uh this is something which i'm not aware of so this app initializer is something which is really useful it's kind of again a service which will help you to load the data before your app gets initialized and now you might be wondering what is the use case when i need the data before application is list for example let's say you have some configuration you need to load that configuration before your app is initialized and then you need to save that data into your service and then use it how you are going to do it i'm talking about before your application is sliced i mean before you get your first page this is where app initializer can help you app initializer can plug in your service and it will call that particular service before your app is initialized and you can do anything where uh whatever you want into that service you can make an http call get the data from your any api or you can just load a config file from your local uh disk right i mean for example if you have saved some file in your assets and you want to based on your configuration you want to load that asset file or config file that's possible so let's take an example where we will be using a config file and we will load that config file and we will make that data available before our app is initialized to do that first what i'm going to do is i'm going to create a service so i'm going to say nggs and i'm going to call it as a init service initializer and i'll add some code here and we'll talk about it so i'm going to make an http call and we'll create a property which is type of readme and let's add this tab update so what we are going to do is we are going to load this config.json file which we don't have right now let's create in assets config.json and let's add some properties so let's see a version [Music] and some some normal properties right so let's say it has to these two properties as well now this service needs to be called before my application is like so i can make the http call get the data and do whatever i want to i mean i can just go ahead and use this service anywhere and the data will be available now let's see how to use it so that's a little bit change in this index so we are going to create a function we will call it as init factory and we'll pass our service here so we'll say okay this is init service which is type of innate service which we have and then we are going to say return a function this is really important part so we are going to return a function which says we need service dot init method which is the method which we have here so this method will get make an api call or should we call float the json file and add save this into this particular property now once this is done we have to register it to register we are going to say provide app initializer because that's the service where we want to actually plug in this particular method then we can say use factory as we have factory available and then we have to provide dependency dependency will be the number of the services which you provide here it's possible that you can call multiple that's possible yes and you have to say multi-truth because app initializer is again an object where we are going to add a service now this is done let's go ahead and verify if this works or not and how we can verify i'm just going to the network tab and config.json is loaded yes that's loaded let's try to read the property now to leave to see if this property is available or not we can inject the service in here so let's say this is private and restart i just will just do console.login server start config and let's verify it and we have this data available app component or tsl number 24 and this is available and this is loaded even before your app is initialized so yep this is how you can do it uh common use cases maybe let's say you have a config.json file where you have environment apis based on your environment and you want to load that and then make api calls yes that's that's how you can do it so this is the last topic from http and now we will continue with router so far we have learned about the basics of angular and one thing you may notice is we don't have so much of ui right now available we said we are going to use we are going to create a project based on hotel inventory but we just have like a table and we saw some functionality where we can add details and that's it right we can edit but we don't have forms and even we don't have urls where we can click and move to different views so this is what we are going to start right now we are going to start with angular router so in this video we will talk about the introduction of course and then we will see we'll see how to set up router we will also see some services which is provided by router itself so we have activated route router service we'll talk about future module and we'll we'll see how we can do feature module routing as well we'll talk about nested route child routes lazy loading route cards we'll also see uh if you remember in last session uh we in last video uh we didn't covered how you can communicate between mult between multiple components using services so that's uh what will be covered in this uh this part as well we'll see how we can do that and we'll also see angular material so let's go ahead and get started so let's see what angular router is so it's provide it provides the functionality to add routes i mean what is the routes right so first we have to actually go ahead and understand what the route is so let me show you a page and i'll go to angular.time so the documentation right so here you can click on features you can click on routes these are different sorry you can click on features you can click on docs you can click on resources so these are different routes which are available on this page so using angular router we will be able to configure all this on the front end itself so we don't have to do this on backend it provides this spf functionality single page application so if you see we are still on the same page right if you click on blog it redirects to another page so this is different but this is single page application so where you can click on any let's say we can click on docs click on any of the urls overview you can see your url is getting changed but there is no uh request to the server so everything is happening on your front end which is which means it's a single page application where everything is known to your application in advance so it doesn't need to take any data from the backend apart from the http calls which we'll be making we can also configure nested routes so what is the nested route so you can see if i click here you can see guide is the main route and then in guides we have different i mean this is not uh this is not the uh uh child yeah so you can see kite is the parent route and then you have different child routes available inside this so if i go to get started you will find okay what is uh angular the developer guides but yeah i mean everything is getting loaded inside the same route so we'll see how we can also configure something like this where we can replace some part of you so that's will that will be covered as well so let's go ahead and see how we can set up router so let's go back to the code so this is our code and we don't have any uh router routing functionality as of now and let's go ahead and add that so we'll be adding it inside app module let's see what needs to be done let's go back to the slides so what we have to do is we have to first go ahead and import router module so router module is uh the module which will provide us all the functionality required for or required to use the routing functionality which angular has so let's add so i will not do it here so we already have something called app routing module remember when we created this application there was a question using ngnu so there was a question do you want to configure routing module and we said yes so that's the purpose so we can keep our code in different modules so here this app routing module is to configure any routes which we want to configure so we already have this so you can see we already have router module imported and then we have exported it so my app component sorry app module knows about this so you can see app routing module is already added here so the step is automated now then we have for root module so let's see forward function so here it is for root so you will be configuring for root 21 remember this you should not configure for route multiple times singleton service so in case you do it will probably override the previous routes which you have added so this is taken care for which is all also available and then we will talk about default route dynamic route and wildcard route so let's go ahead and see first how we can configure the routes so what we are going to do is we are going to create multiple urls as we saw on angular.io where you can click on guide we can click on talks we can click on features and it moves to different uis so let's see how many components which we have right now so we have this uh employee rooms and containers let's say we have three these three so let's see how we can configure a route so to configure a route you have to pass two things so first is you have to provide a path so we will say okay this is path and uh you can give any friendly url name you want to for example if i want employees component to be rendered when i click on a url called slash employee localized 3000 sorry localized four two double zero slash employee i can do something like this so i can say employee and when i click this just go ahead and give me employee component so first is configured we will similarly do it for others so let's say path and we'll see rooms and when i do this i want this rooms component to be rendered and the last one sorry is i want this to be let's call it as container as of now and when i do this i want component but once again okay container component will not render anything by default so i'll just remove it i'll keep this so we have two routes available right now so employee and rooms and let's try to see if our application works and let's say rooms i entered the incorrect early and it doesn't right it be it goes back to whatever we we had so let's see so there should be an error let's see uh so okay right now okay that error is because okay this route is okay so when we are clicking on slash room so you can see okay there uh in ui you can see the url but nothing happens right i mean so it should only display the content related to rooms or when i say slash employee only it should only display the content related to employee because we are missing one important thing when we configure routing we have to place so i'll just remove this i mean i'll just comment all this out here and container let's remove this let's remove this and let's remove this as well so here we have to place something known as a router outlet i'll come back and we'll talk about this what this router outlet is and let's see so we have in uh so slash employee and it says employee works and then there is john because this is what it is available on employee component that's it let's try with rooms and you should be able to see all the details related to rooms it works i mean sorry so it works i mean so we have rooms related data when we click on rooms we have employee related view or we can say employ related data when we click on employee so we have configured a route but do you think this is usable the answer is no of course right i mean generally we don't do that we don't ask users to go ahead and click on this url so you will go to good rooms or click on this url so you will go to employees we don't do that we generally have a nice navigation available or whenever you do localhost four to double zero let's see this so four to double zero and nothing happens there is nothing available on my route so generally what we do is for this we set up a default url so what we will do is let's set up a default url then we will see how we can work on the anchorings or the urls and then we will add an angular material so let's go back to the code and let's do first thing first we will add the default url so what i want is or as a user as a developer what i want is i mean whenever a user comes on to my page let's say he and uh mentors ww2 dot abc.com or right now local is for zero the user should be redirected to rooms so how we can do that so we can say path and redirect to slash rooms and path match full so it will match the entire path that's that's what this path match full means uh you can also provide rejects expression in case you need to most of the application don't need that so don't over complicate things so here we are saying okay whenever i come whenever a user comes on my web page and there is nothing after that slash four double zero so the path is empty redirect to the rooms which is already configured and make sure that you are matching full path so let's see and now we are redirected to rooms let's go ahead and verify it again photo zero and we are redirected to rooms so this is how the default url works now let's see how we can actually add some navigation so first what we will do is we will add some anchor links and then we will see how we can ease this process by using angular material or any other ul library of your choice so i'll add enter now you may have used href don't use href here so let me show you what happens in case we use href uh so of course we can do h reference equals to rooms and i can see rooms and similarly i can say employee so there's two anglings which are available and let's see let's click on employee hey it works let's click on rooms then why i'm saying not to use hf do you saw any uh odd behavior as we discussed about click on employee and you can see the entire page is getting reloaded this is not an sp this is multi-page application which this is something which happens in mpa multiple multiplayer applications so to avoid this what you should be doing is rather than using href angular provides a property so you can say router link is equals to and let's see click on employee and it works click on rooms it works but did you saw there is no page reload so it means page is not getting reloaded it's a single page application on the same page the views are being changed now coming back to our this router outlet we need to discuss it otherwise how you will understand that how this works so whenever you click on any url what in what happens in case i just keep this router link and remove this outlet let's see and nothing is getting loaded so there is no error you can see cannot read out this is something which is related to earlier view but there is nothing which is getting rendered click on rooms click on employee url changes but there is nothing to render so let's add back this router outlet and we'll talk about it so whenever uh there is any uh url or you have some provided some route which is configured the thing is angular looks for let's go back to this so angular looks for this router outlet on your view if this router outlet is available whatever component which you have configured here so let's go back to the configuration again so here you have added some configuration right so load this component load this component so angular will add this component just after this router outlet remember this so you have rooms added just after this router outlet in case this router outlet does not exist angle i mean won't be able to add this because there is no router outlet so same in case i click employee it will just remove the existing component and add this employee component this is how this works this router router functionality works so make sure i mean when you start you it will happen that you will miss router outlet a lot even it happened with me and i still do that i mean whenever i'm doing a live coding i miss it generally i mean not generally but occasionally not it doesn't happen a lot but yes it it happens so in case your router is not working route functionality is not working just check if you have router outlet available or not and that's it it will be taken care of now now what we have done we have added the routing functionality we have added the routes we have added anglings to shuffle between it we have added the default route we have uh even yeah that's it so now what we will do is now of course this url this navigation doesn't look nice right i mean uh of course i'm not going to use this application if i have to i mean how this ui looks like so what we can do is let's go ahead and add material next now in this video we will be adding angular material to our application and we will also add a navigation nice navigation using angular material itself so the page is material.angular.type this is the webpage where you can read uh everything about angular material so it's a ui component ui component library similar to remember we try to add angular booster so this is some similar but it uses the material css so material or you you can say it uses material design so material design is of course something which is uh created and maintained by google itself so they have created a component library on top of it you can see it has a lot of components you can go to components it provides cdk as well in case you want to build your own components uh which angular already has and it has a guide so let's go ahead and add this the first thing which i'm going to do is i'm going to stop the server because it will add some configurations to angular.json and have to anyways restart it so let's go ahead and get started so it says uh there are some guide for angular and then there are some steps which we have to do so the easiest thing to ins or easiest way to install angular material is just to run this command so let's do that ng add angular material so it says the angular material 13.1.1 will be installed i would say yes because that's what i'm looking at i'm using angular 13. and it will ask you to choose themes so the themes are same which is available here so you can see it has purple and green pink and blue deeper palette amber and you can choose whatever you like so let's go with indico and pink which is the default one okay you want to use angular typography we are not going to use it but let's add it do we need animation yes we need animation because a lot of angular material component uses animation you can disable them if you want to i mean in case you are using some older browser we have seen uh the animation doesn't work properly on i11 in case you are supporting it if you are not supporting it you are lucky now uh angular has itself dropped the support for i11 and most of the uh most of the applications out there doesn't support i11 anymore and now it is added let's go ahead and see the changes so it adds this css you can see the css is added here and it will add some styles it added some meta tags here and link which is which is to you uh load material icons and it will also add browser animation because we said we want to use browser any uh sorry we want to support animation so this browser animation module is added and that's it let's go ahead and run our application and see how it looks like remember we have not added the uh navigation as of now we'll do that next once we see the changes on our application okay so probably uh the changes are not that visible but you can see the font is changed because of course the angular material has a different font right now click on employee rooms everything works let's inspect and there is no console error apart from one which we have already discussed about this error now let's go ahead and add the navigation as we discussed about so we'll go back to the uh guide section here let's see and in guide there is something known as schematics i am showing you because you should keep this in mind that whenever you want to refer it next time just refer the docs so you can see uh this step is available here and in case you want to install cdk which we don't need as of now we what we want to do is we want to create a navigation so for creating a navigation there is a navigation schematic which is available it means it's a command which will generate the entire navigation page for us and we can just use it so let's go ahead and do that so it here so i'll see this is navigation so i'll call it as this is a app nav app navigation and this is done so we have this apple nav or we could have just said navigation that's that's all also fine but yeah so we have this uh component available here let me just close this and it has some already code which is available so we can see okay this is available here as well and some breakpoint observer i mean this is something which you may have do by your own in case you don't use the schematic so let's see how it looks like so what i'm going to do is you can see uh you can you can see uh it has some matte list some with some href we will be replacing the search reps with router or router link and this is where the content goes you can see it says add content here so let's replace and make this component available here let's comment this out let's comment this and let's see our view let us see our application so you can see it has some menu link one link to which of course doesn't work right now because there is nothing which is configured but you can see also this is responsive so you don't have to actually go ahead and make this responsive you don't have to write any extra css this is all taken care of so a responsive navigation bar created for us without even writing a single line of code yes this is what angular material does or this is how you can actually utilize the schematics which is available by angular material so let's uh add some let's make this navigation work so here let's go back and we said here we'll add router link and as we already know the routes we don't have to actually go ahead and move it in box so i can say okay this is uh rooms and this is a router link is equals to i'll say this is employee and we'll say this is employee remove this and now we want to add a component here router outlet and let's see our application it works right so you can now navigate to room so you can navigate to employees and everything works fine so this is how you can uh add angular material to our application or any application and you can also configure the routes and you can also add navigation without making much of an effort so you can see it is responsive it will work for mobile so you can just click on mobile here and it will work so you can move to whatever url or whatever routes you have configured so this is it from this particular video so far what we have done is we have configured the route we also saw how we can set default route for our application but let's see there is one problem with what whatever we have done so far and we will see how we can fix it so here let's say if i try to enter a route which does not exist and this is where the problem is you can see blank page and now if i go to the uh console.log let's see something interesting there so in console you will see an error which says cannot match any routes with this particular url so let me just zoom in and of course this url does not exist but we should not give a blank page right what we generally do in real time applications you might have visited lot of applications you might have used it a lot of web web apps what you generally do yes the answer is four or four pages right in case uh you guessed that you're absolutely right so the solution is to add a 404 route how we can do that using angular so this is where we are going to do so this is where we are going to do a wild card route example or we are going to see an wildcard route example so let's go back to let's go back to our code and let's open the configuration file if you remember it was app routing module and we had added this default route now let's go ahead and add a wildcard route which will take care of and we'll talk about it let's first add it so how to add wireless card route you have to say path and you will say double star which is the let's write this and talk about it here so the path double star says any route which does not match to any of this will be captured by this and what we are doing is we are redirecting to rooms do we need to the answer is no we don't so let's uh create a 404 page and let's redirect the users to 404 page so let's add a component and we'll say ngc and we'll say this is not formed you can show whatever you want to probably i've seen a lot of inventive uh ways to actually show not one page there are a different application which uses some svg svgs like some skull logo depends right so whatever whatever your use cases so here we are adding not phone page and let's go back to component and i'll say this or we can say the resource you are looking for does not exist right so we can show this and what we can do is we can just wrap it inside a div and let's do [Music] just add some css here h1 and we'll say this is font size and font color so color would do and we'll say this is red let's see let's go back to our application and let's try to enter a url uh but again sorry right now it will be redirected to rooms because we said it should be redirected to rooms here but what we want to do is we want to redirect to of course not found page so we can say component and we will say not bom component let's save and let's try to enter url which does not exist and here we are the resource you are looking for does not exist i think there is some problem with css which is uh not taking the color probably it should be font color if i'm not wrong there is nothing called font color that's my mum okay there is something wrong but yeah anyways this is not what we want to do so so now what we have is we have a 404 uh page which is available for us by using the wildcard route match so this is how we can handle those scenarios and let's see what's next so now we will talk about how we can create dynamic urls that is interesting right so what in case i want to uh redirect a user to let's say room slash id right so it uh you might have seen some uh ecommerce applications and let's take an example of e-commerce application let's open one so let's go to amazon and let's click on let's see any product so i say yeah one plus nine pro and when you click on this you can see uh there are some parameters which is added after this right if you see this one it has like s k one plus whatever your product name is and after that uh you will see here uh you have keyword one plus nine pro equals to this lot of parameters which is added in the url but in case we want to create some url where we can pass some let's say in our case a room id and it opens the new page right i mean it redirects to a new page let's see how we can do that how we can configure a url like that so this is where we will be discussing about the concept of dynamic routes we'll see how we can create dynamic routes the first thing which we'll do is we'll go to rooms uh let's see the ui first sorry so let's uh go to the ui first and we'll go to rooms and remember we added the select button so what we will do is on click of the select button we will redirect the user to another view where we can see the information about this particular page in as we move forward we will we will actually change this button to book now and so users can not use this but let's say it's a hotel inventory management so the hotel uh receptionist or anyone can book the hotel from this particular button so they know which particular room number is this and then they can just enter the information related to the user and that's the type in the guest and that's it so let's go back and what we will do is i'll create a new component here so let's go to open in integrate terminal remember one thing i mean i'm i'm [Music] creating the components which are related inside the same folder for example right now i'm going to create a room booking folder which is of course related to room so i'm keeping this inside this world folder so i'll say this is ng c and i'll say this is rooms game now we have this component available and so now we have this component available now what we have to do is we have to redirect whenever we click on that particular select button on this component so but that particular id will be of course it will be dynamic we don't know the id by default i mean in advance so let's see how we can do this so it's a path rooms of course rooms will remain same because that's the main url let me enter point slash and you can put colon id and let's see what the purpose of that particular component are sorry colon id is smooth here and then it's a component and we'll say this is rooms booking let's add this to module and this is so a room slash id and then rooms looking component let's test this right now and is there any missing thing yes there's a comma missing here let's close this and now let's try to test this first how we can test it i can just enter whatever i want to after room slash and you can say it says rooms booking works and from where it is coming it is coming here so it means my route is working fine i mean i can enter whatever i want to after this and it will just redirect me to room smoking works now what we have to do is we have to make a link from this rooms list right so whenever we click on this particular button select room we should be redirected to that particular component how we can do that let's see so there are multiple ways uh i can just use router link remember we uh right now on select room we used to actually send the data back to the component so what we will do is we will just comment this out and we will use button now and with router link right now the router link value will be dynamic so input box is equals to and then here i can say rooms so i can say slash rooms and the next value is the id which we want to pass so we already have that particular id which is room dot id if you remember so here room and why we don't have id anyways we will see room dot id and let's close button and we'll say book pro okay somehow it says rooms does not have id as possible room number okay sorry so we have a room number and i'll also add a class so let's add the class btnb primary let's use the same one so let's go back to our employer sorry rooms now we have this book room button available here let's click on one of them and you can see room slash one so you have the values available here so let's go back again and click on rooms book and we have the id has two available here so now we have configured a dynamic route now we can actually navigate between that but let me show you one more thing i am removing the slash here and it has a purpose so let me show you because this is something which you may face in your real-time application so you can see now what what is happening here now i am not redirected to rooms booking page remember i am redirected to 404 the resource you are looking for does not exist why let's see the url found the issue yes room says twice why so why it was working before so whenever you say slash it means the route should start from here by default the uh routing functionality works in a way that it will always append the previous url which is already or sorry previous uh you can say uh the parameters without parameters which is already available that's the reason it was like so doing room slash rooms because uh we said we we don't have slash right so it will say okay the earlier parameter is rooms here right so it is it is it has the rooms if i click on this it is saying just go ahead and add these two parameters to the url when we put slash it is saying just start from here so whatever the url is i want to redirect to rooms slash id so this is the difference remember uh we really uh keep this in your mind or you can just revisit the video again in case you get this error uh in future so now uh we have configured dynamic url we are now able to redirect to uh the component as well what next what next what do you think what should be the next step for us yes you guessed it right you we need to get the id right so whatever id we are passing in case you want to boot this particular room we need this id we need to read the one or two whatever value which is available into the parameter so let's see how we can do that for that we will go back to rooms component and let's say what we will do here is we will put the id uh i'll just do id right now and let's see how we'll read this id i'll go back to the slides and we will talk about a service called activated route service because this is what we are going to use remember so what activated route activated route services so it allows you to read the router data whatever router data which is available inside your application you can also access the snapshot data so we'll talk about what snapshot and the other data is and then you can also access data from route config we will see all these examples but let's do first what you want to do is we want we have right now the value which is which we are talking about is it is available inside our route right so we want to read this one so i'll say private this is a service and it is available by default by and provided by angular router so you don't have to do anything else you we have already we have already imported the router module so we don't need to register anything extra so let's say this uh router which is activated route right so we have injected the service and they should come from angular slash router remember this and now uh here we will say this dot router dot so there are multiple parameters which we have and the ones we the one which we need is we need terms and then in params see this so it's also an observable yes so router data is an observable so we can say subscribe and let's see uh let's say let's say params and see if there is an extra closing yes and console.log balance right now we'll just do this let's see what we get here so console and we have this right so we if let's zoom in so we have id and one so it gives you key value but from where this particular id is coming from right we are not seeing this uh just required and read id let's go back to our code base and let's go to the configuration this is the id so angular remember it knows that okay this particular key whatever i'm passing here is actually defined as id you can name it whatever you want it doesn't need to be id i mean you can just say room id let's try that right so we can say room id and let's see here so you will get it as room id not id so keep it whatever you want to should be i mean uh it should describe itself right i mean here we are talking about room so room id doesn't make sense i mean even room slash id does make sense but just not to get confused you can just keep it whatever you like now we uh now we know the key now let's try to redrive the values how to get it so here you can say params.get there are multiple ways so we can do this one let's try it with terms dot no this is not the one so parents of room id and let's see we need to of course do a console.log so let's try let's do one thing so i'll say remember we already said uh we'll be using a variable called id and this is number so i'll say this dot id is equals to param of room id so let's see and we will save this as well the template one okay it has no initializer so and say this is default to zero and you have one available here so you can see uh the value which is available inside our route is now we are able to capture it so let's go back click on rooms click on room 2 and the value 2 is available here so this is how you can actually go ahead and access whatever dynamic parameter you define inside your url but let me show you one more thing here so here uh you remember we always we said while talking about rxjs you should not subscribe remember while talking about uh observables we said we should not subscribe it will lead to memory leakage so how we can actually make sure that uh [Music] i mean how we can avoid this particular subscription so there are ways of course the way is using the rhs rxjs operators so here what we can do is we can actually do something like this so i can say um this dot id is equals to i'll say this dot uh router dot let me show you snapshot as well sorry we've actually wanted to discuss about this as well so params snapshot dot patterns of room id and let's see snapshots and then we'll come back to the subscription so let's go to rooms and click on one let's go back to rooms and click on two so you might be wondering okay if i am able to get the data using snapchat why should i go ahead and use subscription so remember snapshots will never update the data in case you are changing the value being in the same view so whenever a new value is submitted by anyone that value will never be captured right now we are actually migrate we are navigating to another view so it is it knows okay we are coming from another view and i need to update our take this status from snapshot so this will never receive a new value in case it is already in the view remember this because in case uh in future we will talk about child components and if you try to access using snapshot you may get into issues right where the value will never be updated so this is snapshot but this is not what we are looking at so i'll say this dot id i'll create one here let's create id uh stream is equals to right which is type of sorry type of observable of number because we know what this is going to be number and we put this here and let's see so we'll say this dot id which is stream is equals to this dot router dot params dot now we will use pipe because we don't want to subscribe and here we will use something known as there are multiple operators we can use we can just use map right so let's try let's go with map i mean this is the this is the easiest one right so we can say map and you can see the id it says it will be type of number because it knows the type and let's move and use this id type async right so what we have done here so we said now we are not going to subscribe manually we can just do this let's let's try to avoid this and let's do this id is equals to this and recommend this one it's format and [Music] let's see the application so you have the value when available here click on rooms and values to click on here and values three so we are still able to get the value the param value by using passing by we are not we we are not subscribing anymore and we also saw how we can get the data from params using the activated route service and what else what else here uh let's talk about so here let's talk about one more thing so right now we are using this params property right but there is one problem with params property what in case we have multiple values available as part of your query your parameters right but in that case what you will do of course you can say params of another value but uh there is another uh api which is also available which is more preferred than this params so let's try to use that particular parameter uh or particular property so i just comment uncomment this and rather than params we will use something known as paramap same it also emits the observable but let's see what is the difference but sorry what is the difference here so it is the params and to get the value here you can use params dot and now let's see this so it has some methods like get all has keys so you can before even accessing the values so before even accessing the values you can see if this particular particular key exists or not right it is really useful in case you want to redrive multiple information and other information is probably let's say optional right so you can just check if this particular key exists by using ash sorry it has and then you can access the value so here you can see get and then you you have to provide the key again the key will be room id so this is how you will be writing it but as we already have this code what we will do is we will replace this using this one so we can say paramap and uh here i'll say params dot get room id and let's uh comment this out we don't need it anymore we just wanted it for reference and let's go back to our ui and we still have this working code available so you can see the values whatever value we change we are getting that value available here so this is a preferred paramap because it is like more clean ui rather than actually uh uh just getting the value like this which may throw an exception in case the key does not exist here you can actually go ahead and check if this key exists and get the value so this is from the dynamic routes and let's move ahead so before we go ahead and utilize more services related to routing or more functionality related to routing we are going to have some more views and for that what we are going to do is we are going to jump right now or into forms so what we will do is we will create some views uh using forms and we will combine both together i mean forms plus routing so we get a complete picture how our application looks like so we are going to start with template driven forms so let me tell let me tell you this first angular has two types of forms template driven forms and it also has reactive forms for me personally i prefer reactive forms but it's not like they one is one is bad one is good it's not like that they both are powerful it's just on based on your use case what you prefer or based on what flavor you prefer right so we will go through both we will create forms using template driven forms as well as reactive forms and you can choose while working on your application which suits your team which suits your application so let's start with template driven forms first so what the agenda is we will set up template driven forms we will see how we can add validation we'll see how we can submit and reset forms we will uh see some examples if you remember we uh we saw pipes and we saw directives so here we will see uh how we can use custom uh for how we can write a custom pipe how we can write a custom validator uh and how we can also write a custom directive so validator part it's related to forms how we can validate forms so let's see uh and let's go ahead and see how we can actually set up a template driven form and how we can create our first template driven form but what we will create so remember we performed some crude operation card operation right and we took an example of adding a room so let's do that let's create a template driven form for adding a room so first thing we already have some functionality available so let's close all this rooms we have rooms list and if you remember we had this add button somewhere add room so what we need to do is we need to take this add room functionality out and put it in a different component so what i'm going to do is i'm going to call it as a new component so let's say open integrate terminal and here we will say ngc and let's call it as rooms add okay so it's it will be used to add and grow that's what we are planning we are trying to do and let's see so we got our component and let's go to the slides right let's go to the slides and let's see what are the steps which needs to be performed so first we have to add forms module to module and then we have uh we have uh template driven forms so that's next step so how we create the form so we'll come back to this first let's do the first step so first import forms model to module right now we have one module so let's go ahead and add this to this module and into imports area as it's a module remember and let's format with prettier and add forms module and it is auto imported for me so from angular forms and this is what we wanted to do now let's go ahead and create a form so to create a forms we uh we will be using html forms so we will be writing html form you don't have to do something extra here i mean if you know html you know how to create a form in html that's what is needed to create a form in template-driven forms so let's first see what are the values which is required to add a book room and for that we already have this add room functionality so we need room type we know we need amenities we need price we need photos and check-in time checkout time rating right so these are the things which we need so let's go ahead and add a form for this so i'm going to add form right so this is uh sorry not from form right so this is how we create a html form nothing fancy here and let's add some divs let's see how many fills we had one two three four five six seven so i'll add seven tips three four five six seven and i will add one more for submit button so it that's it and now here uh we i'm going to use some bootstrap classes so uh bootstrap has something called form group so let's use um group so for all the tips we can use form group what it will do it will just add some space so that's what it is going to do except the last one because uh that will be our submit button so that we already gap so from group and now we need controls we need our controls to be added so let's go ahead and do that so we have room type so i'll say input and we have to say type uh so input type will be text and name let's give a name which will be room type and here we are going to use a class of type form control and let's format the document so uh what we will do is we will create a route for adding a room and let's go ahead and do that here so here and just add path we'll say its rooms slash add and component is rooms add component and once done here we need to add this into our routes uh sorry our navigation bar so let's go to navbar go to html and here we will add outlink store rooms slash ad and we'll say add room let's verify this functionality first let's say add room and we have this input text available here so first step is done we added a forms module we just created an input field we added a uh route that's it and now let's complete our form so let's go to rooms slash add and let's add the other inputs okay now before we actually move ahead and talk more about forms why we create forms remember in case you have an enterprise application there will be some use cases where you have to collect user input so that's the that's the reason you will be using forms mostly for example let's say you have some filters which you need to show you need to collect some user input in forms of feedbacks you need to uh collect user profile information that these are some cases where you may need forms it's not mandatory right you can still have an entire application without forms what are the use cases like the applications where you just need to display the data for example you have internal revenue system and uh so what you will end up with so some charts and all those things but still you may need some filters as well so that those are scenarios where you will be using forms and let's uh move now and let's add other controls so i'll say this is and we can add uh one more thing we can add placeholder so we know what we are we are supposed to enter correct so let's say this is room type and let's see so you have a nice uh placeholder available here so it depends so a lot of applications uses label but a lot of mobile first applications does not use label they use placeholder so it's up to uh your design system how you want to proceed with it so and what we will do is let's see if i can add okay let's uh let's take css later and let's see what else we have here amenities prices photos or amenities so it will be let's say this will be text as well and this will be m and these and placeholder will be installed and then it is let's add to let me just it's here so i can just refer quickly so i'll see this is input type this is price so guys to save type is number price i'll say this is placeholder room price for that night so because most of the prices are perfect then we have photoboos and this should be text and placeholder photos and we can say provide link right so this is done and we need check in and check out time so this is our date time right so we can actually use date time and let's say check-in time and place folder because all the hotels actually have a check-in checkout policy right so you have to check in by three i mean it can be part of policy but let's try to keep it minimum so i'll say this this chicken time and check out time and this will be date time as well and then say this is placeholder and this stage report time and this is rating so it will be again number rating and placeholder ulcerity you can in future actually replace this with some rating component in case you come across some some component library which has rating system or rating component you can use it and here i will say button okay so we will have a submit button available here so you have button button button primary submit let's go ahead and verify our forms okay this looks nice i think this is some things which is missing from input class form control from group okay so i think the spaces are missing let me verify okay class form group okay this is correct so now control this is okay so now we have this form available but let's see uh we are still not able to do one thing what's that so we need to collect this information and send it to our backend that is something which is missing how we will do that so to do to achieve that we need some two-way data binding which is uh which needs to be available how we do two-way data binding so angular forms provided by default so in case you want to do it do two-way data binding we will discuss about what data binding is uh but let's see it in picture and then we will do that so first thing uh we need a model uh what we uh the model which we are talking about is we need a interface which tells us how my room information is going to look like so to do that i will create a room which is type of let's see room list i think is equals to yeah this is the uh so remember id room number we have made anyway is optional so let's add some uh other things so let's say room type this this will be the default values which we are adding right now amenities and check in time check out time and then we have photos we have price and then we have rating so these are the default values whenever we are supposed to enter some values into the form this will be the default values which will be available now we need to connect this model this represents our forms fields right so now we need to connect this model to our form so we can pass the information from template to my ts5 and vice versa even i if i change something in my typescript file it should reflect back into my form so these are the that's what we are supposed to do here so let's see how we can do that we have already added forms module into our and module so it it unblocks or it gives you some functionality what is those functionality it gives you info functionality true achieved we're determining how we have to use something known as ng model so remember this so you have to say ng model is equals to uh room which is my property dot your uh sorry room which is uh my model dot property name so here we are supposed to get room type right so this is done here let's add for others so i'll say room type this will be amenities this will be price this will be photos this will be chicken time this will be check out time so and this will be rating now we added this now what what next how we can verify that two area binding is working fine let's see that so what we can do is as room is my property which is supposed to update whenever i enter some value value here i can just do something like this room by jason let's see and you can see uh it has room type amenities check in time checkout time photos price rating everything is available let's add something in room type you can see the value is getting changed it means now i have the power of two-way data binding available with me so whenever i make some changes here it will be reflected back into my ts file so let's add a valid room type and then we will add we will provide a submit button or we will add the functionality to actually send this data to our backend which we have already done so here we have a submit button right but how to submit this form let's go ahead and do that we can see uh ng submit is equals to a function which will actually add this data or send this data to our backend so i can say this is add room function which we will implement which we don't have right now and let's go ahead and do this so let's add room do we need to pass some information to this form of course no because we already have all the information available as part of this model because whatever value we enter is updated into this property so we can just do something like this so i can go to room number ts we need to get the reference to our service which is let's where is the constructor yep this one so i will say room service i don't want to i can just avoid skip self and all those things because we already discussed about it and then in add room i can we can do this dot room service dot add room uh where we can pass this dot room and we'll subscribe we'll say this is data and you'll say if [Music] let's do something like if okay so right now we are in we are actually giving all the data back so we can just do something like this i'll just do console.log well let's do one thing but even better so what we can do is i say success message just type of string is equals to this and you can add a deviate and we can add a class strap you can see which class we can use right we can use alert here so you can say alert alert success right and then we will set this message and say this dot message success masters is equal to let's see what room added successfully this is what we needed and let me just format so everything is visible here so now we have uh add room functionality uh we injected the service we added a success message which will display in case our room is added or not let's go ahead and verify so here i'll say room type is economy i mean it is is we have wi-fi uh ac and price is let's say 5000 photos provide link which let's say leave it right now and and this is 23 let's make it 10 [Music] and 30 23 let's provide rating for let's do submit and it says rooms added successfully but why should we trust it right so let's go ahead and verify in the console and let's go to the network tab and let's add another one right economy and this is deluxe room and we will say 6000 and let's click on submit and rooms is added you can see you have two extra values available room type amenities and everything and this is it so what we have done is we just created our first template driven form we attached or we added the functionality to send the data to the back end the only thing is the spaces are not working properly but we will fix those not an issue and you can say that rooms added successfully was already there which doesn't look good so we will see how we can actually avoid that as well we should get it once the submit button is enabled or sorry once the form is submitted and also if you notice there is no validation so we can just empty we can just enter an empty form so i mean i can just avoid all the values click on submit and still we are able to add the room you can see price is null rating is null and there are no amenities so let's go ahead and add validation next time then we will see some more functionality related to our template driven forms let's go ahead and add some validations to this form because we haven't done that right and we can just we can just submit a blank form as of now to add validation in template driven forms we have to use the html5 validations so in case you are not aware of what html5 validations are let me just uh go back to so uh we as you said we will be using html5 forms and uh sorry html5 validators so there are multiple validators which exist so let's go ahead and uh see them first so the first and i think first and i think most of the time you will be using this validator which is known as required so let's go ahead and see how we can add that so to add a required validator you have to just say required that's it that's uh that's you are done so you have added a required validator and now this field becomes required but it's going to be verified does it look like it is required of course no because we have to add some extra checks we will talk about it let's go back to the code let's add the fields right now so we'll say okay right now required this is required this is also required this is required that so all the form fields are required right now but we can still go ahead and submit the button now let's see how we can actually uh i mean we can still go ahead and see the submit button so let's see how we can actually disable this control until unless we have received all the values and valid values let's go back so uh to actually get the status of my form whether this form is valid or not we need to get an instance of this form how we can do that right i mean we have talked about classes to create a instance of a class we do object equals to new and then whatever class name is and it will give you instance but what about this i mean this is the form how you will get the instance so remember we discuss about something known as a template variable right so we said hash and some name and then equals to a hash some name and then it gives you the instance of that particular uh particular html control right we we discussed it for div so here also we can actually use this way so i can say this is a rooms form is equals to you have to say ng form remember this in g form and now you will you get an instance of this form to yourself now how we can verify so let's avoid let's remove this and use rooms form here and let's see what we get let's see what we have here so [Music] console and we have some errors because uh this json has a lot of properties so right now what the property which we need is rooms form uh we need errors double rs yeah we need rs property let's go ahead and see so it says null vice versa so [Music] so we have tombstone okay so uh the property which we need is valid so it has two properties uh all the forms all html forms has this all these properties so it's not like it is available only for angular no it's not it is available in normal html as well you can actually access this properties via javascript in case you want to if you're writing a normal javascript or typescript code so let's talk about all these properties which we are going to see so valid will tell us whether this form is valid or not let's verify so it is false so the current form is not valid so this is how we are going to figure out whether to submit or not whether we need to enable the submit button or not enable the submit button so let's uh talk about few other properties which we are going to use so here i'll just copy paste right now and then we'll replace so we are going to talk about something known as pristine then we'll talk about something known as 30 valid invalid and we also have something known as value well if not values let's see let's see what we get here so we have true false false true and then this is your forms value right whatever you enter here will be available here you don't have to necessarily uh take the value from form dot value you can also get it from your uh of course the model which you have created so here uh let's go ahead and see what these values are false true false true right let's see so this is pristine this is 30 this is valid and this is invalid so what are these values so pristine and dirty are real uh good use cases i'll talk about it let's talk about valid and invalid right so they are like opposite of each other so if your any of your control has some validation error it means your form is not valid so valid will be false as soon as all the form control becomes error free it means they don't don't break any validation rule which we have provided it means they are valid which will be true and invalid will become false so here if you see currently if you see currently it says uh valid is false and invalid is true which is true right so let's see how we can actually disable this first let's you uh handle this use case where how we can disable this particular submit button before i go ahead and do that let me tell you one thing very clear in case you have some validations don't just add those validations at your front end your back end should also have those same validation because what you are going to do is end of the day there will be an api call and if your someone figures out how to make your api calls and without passing the data if you he'll be able to break your system so make sure that you add validation at both the places not only at frontend so here you can we can use a property called invalid sorry we will be using disabled and i will say rooms form dot so we want it to be disabled in case uh perform is invalid so let's say so it should be disabled in case our form is invalid so let's enter all the values and let's see and now our form becomes valid right you can see this so if i remove this value it means my form becomes invalid again so submit button the submit button becomes disabled so this is how the required validator works and these are the values uh the these are the properties which you can access by using this particular form so pristine dirty invalid value and value as well so now here also let's to check so i'll say this start ng if is equals to we can say success message is not equals to blank so and let's see now so this the success bar should be only available after the submit button is clicked and in case we have some message otherwise it won't be enabled or it won't be displayed on the page so now what we have done is we have taken care of two cases which we discussed about now let's go ahead and add more validators the next validator which we are going to talk about is uh we will see min and min length and max length so what is the use cases for mean length and maximum so in case let's say you want amenities right for example let's say amenities so you want that amenities should be like minimum five characters and maximum 200 characters so in this case what you can do is you can use min and max let's let's let's go ahead and do that so here i'll we already have required so i'll say min length is equals to 50 or 35 and we'll say max length is let's make it 20 as of now let's send the room let's enter amenities but let's not enter five characters and let's enter photos what you can see uh the form is still invalid right so but the problem is here it it actually introduces to uh us to another issue we are not able to display the errors based on what the actual error is we should right now we should display the message saying okay this particular for value or the amenities which you are trying to enter is it should be minimum five characters but it is not the users will of course will be confused what's going on here we should display uh the messages so let's go ahead and see how we can do that so this message is actually right now or this error is actually available right now with the control so here what we need is the access to control how we can do that yes let's go ahead and see so to get the access to this control we can say hash and whatever property name you want to set it so let's say this is amenities right so i'll say this amenities it's a room i mean it is because it will conflict with another variable room amenities is equals to you have to say ng model remember this and now let's go ahead and see i'll place another div here and we'll say amenities dot errors as json let's go ahead and see so it says right now uh the error is required too but let's enter something right so now you can see it says mill length required length is 5 actually in this one if i try to enter more than 20 character i won't be able to do it because it is supported by the browsers so it says okay maximum length has reached 50 characters or 20 characters and we cannot enter more than 20 so it it has stopped i mean i'm right now i'm still typing but i'm not able to actually enter the values and if i go below 5 it will again give me the same error let's see how we can display this as a message right so here we can use so here i'll just say first star in g if if it has errors right you can also uh do errors dot which type of error we are talking about so here let's say if we talk about mean length right so i'll say okay if the errors okay so it says it should be accessed as this main length and strength it is possibly done yeah so i'm trying to access uh the let's say it's i'm saying if it is mill length error so what we can do is we can say and we'll just add a class right so class alert alert link let's what was this uh success right so it should be alert from a wrong danger and let's see uh emanate peace be minimum or should be minimum minimum five gas so this is the information we want to show let's go ahead and see let's enter one character and you have the message available here it says i mean it should be five characters and as soon as we go beyond five characters the error is gone but yeah so this is how you can display the errors on control level so we have this and of course you can also say errors of required and then you can also say okay this amenities is required this room type is required all on your control level that is also possible so we saw min length and max length what's next what's next so we have uh the min and max as well i'm not sure if it still works but let's see so it's a mean uh which is one and max which is five let's see this is okay i'll not do it here i'll let's do it for rating right i mean i um i don't want anyone to rate me less than one a lot of services a lot of business do that right so one two three four five now i won't be able to actually go beyond five i'm just still still pressing the up key but i'm not able to go so let's go ahead and say lc0 and let's enter all the other details and photos but we are still not able to submit as soon as we move to one because this is the minimum required we are able to proceed so i we cannot go up beyond five i don't want anyone to rate me um more than five because that's the max so this is how you can do with min and max so we learned about required min length max length uh then we talked we talked about min and max what else what other uh validators which we have in html5 so we also have a validator for email so email of course you can mark any property as email and it will be considered as an email so let's try right now we don't have anything for email but just for an example right so we just make it email i think email is enough let's see and let's display all the errors otherwise we won't be able to figure out right which kind of error is this so you can see uh it says okay min length max length and then now it says it's uh there is this particular text whatever you have entered it's not an email so if i go ahead and say the rate now we have actually a valid email that's as per the html5 validate validator this is an actual valid html uh sorry valid email so this is email and what other so there is also something known as format so format takes regex so you can actually use ah okay sorry it's not uh so the next validator which we are we're going to talk about it's known as patent so pattern is something where you can provide a regular expression for example i don't know what this rejects is thanks to our github co-pilot uh which gave me this rejects for some some reason so let's see what this pattern is so here i can just provide this pattern a regular expression and my text whatever i enter will be actually validated against this pattern so this is regular expression let's see so it says okay required pattern is this i'm not sure what required pattern is it starts from a to z and then there are number so one two three ah then there is plus at the rate okay i still don't understand what this pattern is probably we can search for this regular expression and see but yeah you can provide any regular expression as a pattern and this will be validated so we learned about required mid length max length min map min max we talked about email we talked about pattern so these are different validators which we can use while working with template driven sorry while working with template driven forms and all these are built-in validators you don't have to do anything extra to use them so this it this is it from the required validator part what we covered is we also saw how we can validate your entire form how we can validate your specific control and how we can actually show errors based on specific uh controls as well so that's it in this video we are going to talk about few things uh we talked about valid invalid but we didn't test pristine and dirty so let's talk about these two states because they are really important to understand and to show you an example let me just open the um let me just open the view and you can see here right now this required true error is already there right so once again let's go back to our code base and this errors so if i do something like this div and star in g if errors dot required [Music] and here let's say please provide the amenities let's see the output so you can see this error message is available here of course and we have not provided the class but yeah this error message is available here but as a user i haven't actually touched the controller i haven't entered anything so using pristine you can actually avoid something like this so you can do here remember this this property is available on form as well as control so i am going to use it on the control so i can say if dot pristine so let's say dirty and this two so i'm combining these two properties let's say uh let's see what we are going to achieve using this rate so you can see i don't have the error when the view was available at the first time so i'm providing the ability to enter some text before i go ahead and show the error so in case i remove it i delete the entire thing i will get this error which is really valid right i mean as i have entered something and then i removed it i should show this particular error message so how does pristine and dirty helps so let me talk about these two properties so pristine always means fresh state to your form control it means no one has actually touched your form so let me just refresh this page and you can see the pristine value is true why i'm saying this is a pristine because of course we have actually logged pristine first so pristine is frustrated as soon as i interact with any control inside this form let's do that it becomes false and it will be false remember valid invalid can change the state i mean a form which was valid can become invalid in case i remove some values or delete some values from some control but a form which becomes pristine to dirty will never come back until until unless you reset it the thing is we are about to go ahead and see how we can reset our form that's why we are talking about dirty and pristine so remember pristine means frustrate i have as a user no one has actually touched anything no one has entered anything inside the controls provided once you do interact with it it becomes dirty so this states are actually really important in case you want to understand or you want to see if user has interacted with your form or not you may actually have let's say form where you want to collect some feedback but you really want feedback so sometime you may get an requirement that okay users should not be able to move out from this form until unless they provide some feedback so how you can do that so based on this state so if it's pristine or dirty so let's say user entered something and then he decided to move out you can just restrict him okay uh you have someone save changes or let's say it is a really important form right you have stepper control for example in case you are from india you might have filed your taxes so at each and every steps it asks you to save the data but in case you don't save the data so it will give you some effort right so something like that can be implemented using this form control values so pc in order t now as you understand pristine and ready now let's move back uh sorry so let's go ahead and talk about how to reset the form right if you see this right now uh we have let's say go on wi-fi ac and let's say this is 5000 this is anything and you might be wondering why this is not daytime because uh the datetime control is actually broken on i think this is chromium browser so i i'll replace this with material datepicker we will do that we'll do that together so just wait right now it's it's the default date right and then we can do i have to remove one thing remember we added email sorry we added pattern yeah let's remove the pattern so we can actually go ahead and save the data so we say okay this is economy i think i have wi-fi and then ac and let's say this is 5k this is random data and let's say this is three star let's see so room added successfully now this room got added but what about the data the data is still there don't you think this is wrong yes it is wrong i mean we should reset the form so i can as a user i can enter new data right it may be possible if we still show this data the user may actually just duplicate the data by by wondering okay why this data is still available here so let's see how we can reset the state reset the state of this one so to do that we can say here let's go back so i want to reset the state after the operation is completed right so i can do something like this here so i can let's this remove and then we can get the access to this form control how we can do that so we can actually pass this rooms form as a variable here and now here we will get this rooms form which is which will be type of ng form and let's see if i am uh accessing the current yeah control container so after this i can say rooms form dot reset so let's see how it behaves and let's save both so i'll say this is deluxe amenities and five tv pc and then this is six games random data four star and save now you can see your room is added successfully and now your entire data is actually resetted right so now we have a fresh rate you can see also the most important thing to understand here is once you reset your form you set your form back to form straight back to the pristine that's why it became true otherwise it will never become true so this is this is how you can actually reset the state of form as well and there are few more methods so you can also do preset form and here you can actually pass the default data so i can just do here i can just copy this and i can say okay once you reset the form just go ahead and treat this as default data so let's see i'll say this is deluxe now or you can say this is double room mnt 55 ac two beds and let's say this is 500 and let's say this is four star right submit and now you have a reset state as well of course because you can see pristine became true and you have this default data which you provided so these are two methods which we can use to reset your forms using template event form so let's remember how we do this so we are passing this ng form as a reference to our type script file and then we are saying okay this form is actually type of ng form because remember this this ng form is like uh extended or you can say it's a top level form group which will be available so under which all the control will be available and then after you have added successfully you can just go ahead and call the reset button reset form and your state is receipted now so this is from uh this is how you can actually handle the states and how you can reset your form so next thing which we are going to talk about is custom directive with forms you might be wondering where the pipe part went so pipe part will be actually covered in reactive form uh because it's it's almost same so i don't want to actually repeat it again so that's why we moved it there and right now let's see how we can actually add a custom directive uh with forms and what we are trying to do is we will be uh uh we will be creating a directive which can modify the behavior of an element so what are the use cases so uh let's see let's let's see that right so we will talk about them so for this what we are going to do is as we are going to need a login form in future we will create another form i will not touch this form as of now we'll keep it as it is and let's create another component we will call it as login component so i'll say nggc login and we will be using template driven forms and so let's go ahead and do that so form div let's say class form group so i think form group is not working because of some conflicts with angular material so let's see and we will add some controls so this is input uh type is text from control name ng model and i'll say this is email let's say type is also email because we are going to treat uh username as email i mean provide your user so we are not going to implement any api for this we will actually just mock and that's it so we'll just mock this entire service with some dummy data and we'll move so here it is password email and i'll say this is password provided enter your password enter your password right so we are done uh now we just need to create the model let's go ahead and do that so i'm going to create uh this is username which is type of string which is equals to blank and this will be password which is again type of string uh let's call this as email so because we have already uh yeah we have uh used it as email so let's do that and then we need a button uh so button and we will create a login button so let's go ahead and write some logic here login and we'll say if this dot email is equals to admin gmail.com and this dot password is equals to the best password in the world admin admin right so username and password is admin and let's see and after this we have to go ahead and let's uh right now use an alert and we have to actually go ahead and implement this uh with some other functionality of routing we will come back to that later right now let's just do this and here we will add route we will redirect we'll say this is path since the path is login and component is login component and now here we will redirect the users to login so we added a new component and let's add a comma here so yeah so perfect so we added a component login component we created a form for login and we now change the route so by default it will go to login let's see so i'll remove this and here we are right so provide username and password and this login button so right now of course the admin and password does not match so it will not show you another but let's try that out of course we wrote some logic so let's verify and find gmail.com and password is admin and yep login successfully ray we created our login page right i mean of course you can design it in a better way i'm not that great into a great using css but yeah i mean you can uh you you can design as per your knowledge so here what we are going to do is we are going to create an directive which can modify this element so we will try to modify this input element and we will see how we can actually work with directives because we have not seen how to create a custom directive right so we saw build directives so far so let's go ahead and create a new component i'll just try and say ngg to create a new directive you can say ngg directive d and we'll call this component directive as hovered so uh what we want to achieve is whenever we hover above this particular elements it may change the background color right so uh a minimum example is to give you a real-time uh field of how you can actually write a directive which can modify your element of course in real-time application you will get more advanced use cases but i mean this is this is one of the examples which can help you when you will plan to actually write some of the directives like this so not done now we can go to [Music] word directive here so let's go ahead and create a folder so or it will be we will do that later so when we talked about directive we said directives are sorry when we talked about directive we said directors are similar to component but they will never have one thing which is template so here uh let's see how we can actually get an access to the element which is of course uh this hover directive right so this over directive will be kind of an helper method to your element where it you can apply it so let's see how we can do that so here we will say uh we are supposed to use host listener but we will do that later on but let's try to do first thing first we will say let's apply some color so i'm saying the by default your when whenever we try to let's say when we apply this particular directory we are not talking about right now how to use host listener i mean host listener is something which we'll talk about so let's not get confused so right now we are just trying to see once we apply this particular directive it should change the background color to red right so here what we can do is we can implement implement on init let's take a look the reason we can actually use life's uh ng on it on all the lifecycle looks is as you said directives is similar to what your components are apart from this template but it can still go ahead and use all the lifecycle looks as well so here now what we need is we need this color to be applied to the element which is available outside right it's uh i mean how we can do that so let's see so here we will see we will provide we will inject element which is type of element ref and let's do a console.log here and see what this element is on init why okay so let me just add this so what we have done so far we have just injected element ref and we have just done console.log now let's go ahead and apply this particular directive how to apply it so we can go to the component this input element is where i want to apply it just add it like this h i and v and let's apply it here as well so we are we we can use directives it's uh reusable thing so let's inspect let's go to console and here is the interesting thing which we want to discuss about so you can see a native element it gives gives you access to the native element so what to simplify this i mean of course we can see that okay it is referring to the login component you can see the context so it says okay it is coming from something called login component so to simplify it let's go ahead and say this element dot native element and let's see what we get so here you can see you are actually getting this input element how you can actually just go ahead and see i mean you can just click on it and see okay this is the email and this is the password so we are actually getting the reference to the element on which you are applying the directive so this element riff will give the access to the element now you can actually go ahead and do whatever you want to with this particular element let's do this so i can say this dot element dot native element and i can just write in store to dot style dot color is equal to this dot color let's see but okay nothing happened because of course color is not a property so i can say back ground color let's see okay so it was small g so now you can see i i just change the background color of this particular input control by using the style property directly but you can of course do better you can actually go ahead and do it using the document object right so you can go ahead and do using that so let me show you an example so i can say this dot document [Music] or let me use the class actually uh there is a class which is available so uh let's grab that class again we just go to angular dot io uh it's document i'm not wrong yet okay so anyways that's that's the api which i wanted so you can actually just inject this private document which will be type of document let's see it's an injection okay it's an injection token so i can do something like this at the rate inject now using this document so uh let's talk about this document object which we are talking about so remember in web so let's say if i inspect this i mean this is normal html if i try to access this document right so it gives me access to the entire page i mean whatever control which is available here so you can see i get access to html and body everything and by using document dot get element by id these are some apis which are which is available here so i can just go ahead and say i can get access to any element which is available here for example let's say this aio shell right so this is one of the element if i do this okay this is not id okay sorry this is an uh tag this is not an id let's search for something which is an id and class this okay there is nothing there is no id so let's try to do this mac toolbar by using document dot get element by tag name and i can just put the tag name here and you can see i can get the access to this html element so this is a web api so this document is actually a wrapper around the same and by using this we can actually just simplify this so you can say this dot document dot uh you can say get element by id so not getting metal you can get element by id but i can just to let's see what we can use here create element very selective let's see if i can pass uh element here let's see what it takes so it says html of type or html element as well so let's see probably this is not the one also we are looking for okay there are few more properties i'm looking for when let's see stylesheet replace very selective different plugins okay on something related to class detailing the class name and child contains focus create element okay let's see document so uh let's go ahead and see this i mean using multiple ways so there are something which we can do set uh we can actually do it using the dom or we can actually i mean this way style dot color or background color which we have seen so back background color and let's see the application again now yeah but there is another way as well another way possible let's see that so there is another api which is available and we can also use that api to simplify this uh which is known as renderer 2 so i can just do renderer or just name it renderer and you'll see renderer 2. why render 2 because there is already a api called renderer so renderer 2 is something which you can use and we can actually simplify this by using rendered api so you can say render it dot and now you get access to all the methods there are set style set property so this is something which is property if i'm not wrong here oh sorry this is the style so we can say set style and the first parameter which we have to pass is the element so we can pass the element and then the second parameter would be the property which you want to change and the third parameter will be the actual value so i can say with this dot color and let's see we will achieve the same thing so we have now same available uh the background color available as red so this is this is the sim uh simple api simple example right how you can actually be change the behavior of your dom element by using the element ref and the renderer but in case we want to actually do something based on the event which will happen on your parent control a simple example can be let's say whenever you hover above your rows right so you have a table and whenever you hover above your rows you should probably change or highlight that particular row so common example right so how you can do that so i'll just take an example of here host listener so host listeners are actually used to listen to any event which is happening on your parent component the component where this particular directive is applied so let's see what we can do here so here i just copy the same and i'll say okay whenever you hover change the background color to green so on mouse enter my background color will be changed to green let's go ahead and verify and you can see one of over let's refresh it again and you must refresh it again and on here the background color is changed to green similarly we can listen to mouse leaf event so we can say okay on mouse leaf just go ahead and make this to white so as soon as i leave it becomes white so you can see i can actually go ahead and do that as well by using the host listener so host listener will listen to any event which is happening on the component where this particular directive is applied what else so you can also pass the properties input properties to your directives as well as output properties because as i said it's same right i mean the only difference is it doesn't have a template to deal with so here let's try to convert this color so now the user or developer can decide which color to pass so i'll say okay this is now input which is of type color and by default it's red in case some one does not pass it if i pass it so let's say this is input oh sorry this is color we can actually just avoid this box property i can say color equals to and because uh this is going to be a string only so i can say okay for this just use color is equals to green and for this use steel blue another my one of my favorite colors so let's see and here it is so you can see uh let's refresh it again so now we are we are able to pass the default color to your directive by using they may uh by making the input as input property what else we can achieve i'll show you one more thing which can be done so is it possible that i can just combine my input properties with my selective as well how let's do that so there are multiple ways i'll you can actually just do by using this so you can keep your input name and same as your selector and let's change this and concept is done here we will go to this and now i'll say h green and same here so i'll say okay this is equals to steel blue let's see if it works you can see uh still works right so we are now uh what we have done is now we are not using any extra variable so we are we are using the same variable name to actually capture the color as well by using the same input property as of my selector property this is something which can be achieved so or there i mean there is another hack but i will not tell you because that's uh what you can say that's a linting error in most of the application that's a lending error you should not do it but yeah so this is this is another example how you can actually deal with directives so what we did here is we created a directive we applied the directive to our components and we discussed about element reference renderer to or the apis which you can use to change the behavior of your dom then we discuss about host listener how you can actually listen to any event which is happening on your components where your directive is applied so directives are some what what directive is it's a helper function for your components or for any dom element so in this video we will see how we can utilize the custom directives to create a custom validator for your components this uh technique can be applied on any template driven forms so let's go ahead and do that so first we will create a directive so i'll create folder and let's create an email validator so uh as we said our username is email so if we detect a text called test in the email we will say okay this user is not valid user so let's see i'll call it as email validator and then we have to create sorry and the g b and i'll call this as email value so how to add this so remember so in case you are trying to implement a custom validator for your template driven forms you have to implement something known as a validator finally one second it should be it's a class so it should be extend if i'm there are two things so let me just tell you so there is an interface validator which will be used for our use case there is a class called validators which we will use with reactive forms so let's implement validator and see what we need to do so we have to add something like this i'll just copy this and then we'll talk about it so here you can see i'm adding a providers and we are saying provide ng validators use existing where you will provide this class and then you will say multitude what is the purpose let's we will talk about it and this validator class actually gives you a validate method which has signature like this so it gives you control validation errors so this is uh the interface right so this is the function which is provided by interface let's talk from top to bottom what we have done angular already has like all the built-in validators right which we have seen email required and patterns everything in case we want to actually add our own validator we have to actually let angular know that we are adding our own validator by using an injection token remember we did it for http interceptor we added our http interceptor as part of the angular's interceptor queue so here similarly here what we are doing is we are adding our validator into all the existing validator which exists and for that we are saying whenever i try to use this particular selector you have to go ahead and add this particular class as part of the validators which exist that's why we are saying multitude because it's not object it's an array it's an array of all the validators which exist now here you can see it returns whether null or validation errors validation errors is type of key and value so here we can do something like this this abstract control actually gives you the value of the control this is base class for most of the classes related to forms remember this one thing there is no difference between template driven and reactive forms right because the apis are same so the core apis are same it's the only way the flavor changes right i mean what we have seen till now is template driven form where we did everything on html we will see reactive form and you will know the difference but right here we'll do something like this we'll say control and as as uh this is a input control so i'll say okay if this uh control dot value now you can see i'm not able to get anything after this why so so if you see the value is type of any if i need uh or if you want the typings i will suggest doing this so you can actually do create control dot value as we know that we are going to get string just type cast a test string and now we can do something like this value dot now you can see uh i'll say okay if it includes the word test i will return so this is how you will return an email validator so you'll say email validator and then it's key value so i can say email valid email [Music] true right and so let's say invalid email true and if there is no error it means we can return null so you can see the uh typing error is gone here and let's apply this validator now to email and see if we get the uh error we are looking at so now let's go back to login component apply this to this one and i we will take hashtag email equals to ng model right so we have seen how to get the access to this particular control and now here we can do div email dot errors and pipe json let's go ahead and verify the code now we have this uh top type test at the rate g mail.com let's see ah there are some errors cannot assign value variable email template variables are read only where i'm trying to assign a value email dot errors in email that's probably the name after let's stop the server and start again probably i changed some variable and it crashed let's verify it again so i'm saying email control because probably i said email that's why it crashed but it's verified yeah so now we have null so it means it's valid so i'll say test.gmail.com and you can see invalid email true so we have the validation error available here and what we just did is we added our custom validation to this particular control by using a custom directive and now you can just go ahead and add this validator it is reusable right so you can actually go ahead and use this custom directive anywhere you want within your application and this is it from the custom writing your own validator using custom directive now we are back to the routing part remember i said we will create some views using template treatment forms and then we will be back to the routing and the place where we left is router service so let's uh go ahead and see an example how we can actually use router service and a small example so far we have done some navigation right so we have used router link to navigate to whatever view we want to but in case we want to do it programmatically it means let's say we have some logic and after that logic is satisfied we want to navigate to some other view that's why we created login component so remember we just added this alert login successful but in case uh i want to redirect to rooms after we are logged in how we will do that so angular has a service called router so let's put in c we'll use route which is type of router and it comes from angular slash router so you can see this and now let's see how we can navigate there are many methods uh which this particular api exposes so i'll say route dot and we will be using navigate so in navigate you can just pass the url where you want to redirect so i can say i want to redirect to rooms and the thing is you can pass the commands as well so for example if i want to say room slash ad i can do something like this let's try this out we already have a url called room slash ad so let's provide admin ad gmail.com and this will be admin right so and let's click on login and you can see we are redirect to room redirected to rooms slash ad so this is how you can do it programmatically there is something called there is another api called navigate by url as well so you can see uh in this case you can just give the url so you can say it will be slash rooms slash add and let's see let's uh remove this and go back to the login page and now we are back to the room so only thing is the difference is uh between navigate by url navigators navigate by url will take the list of commands so whatever you are passing inside so let's go back to navigate so here we are passing the list of actions or you can say commands and navigate method will create the entire url for us if we navigate by url we are saying okay this is the url just go ahead and redirect so that's the difference so this is about cloud service we will see more about router service soon but not right now in this video we are going to talk about feature module and routing so remember so far remember so far what we have done is we have we have single module right so we just have an app module which is available inside our code and that's it but over the period of time the app module becomes like a huge code base that it really becomes difficult to manage it so that's where the concept of feature module comes in so feature module the concept of feature module is you should actually wrap all the features together in a single module for example if they are related sorry i just missed that part so if they are related so for example rooms so what i can do is i can create another module move everything related to rooms inside that particular component sorry inside that particular module the advantage is in case i want to use that particular module or some logic from that particular module it becomes really easy to share those things also in future in case we want to lazy load that particular module which is the uh which we will talk about lazy load so don't worry about what lazy load is right now but in case you want to do that do that it really becomes easy to achieve lazy loading if you already have feature module i always suggest whenever you are working on some application try to create your components and wrap it together using feature modules or you can save modules there is also concept called scam which is a single component and module which prefers that you should have for every component you should have a module that's also a very uh good thing to do i mean in case you have a large application with like thousands of component uh where it really becomes difficult to difficult to actually see where this particular component will be used and then we ended up we end up with like huge code base uh with a single module with thousands of components inside it and all the components being loaded by default increasing your entire application size so always start with like think about okay if i'm creating this component where this component should fit in does it need a module separate module just go ahead and do that in case it is already related to some feature just go ahead and add that particular component to that feature module so let's start by actually breaking our rooms uh component because remember in most of the application let's say uh if you get assigned to any project this may be a problem that some feature is already created but everything is registered inside a module so the first way i'm going to show you is how you will fix the scenario where you have some such concept right where uh you have uh everything available into app module for this example are rooms right now everything related to rooms is actually registered into app module we can actually remove that feature and create another module for rooms right so let's go ahead and start with that so here we already have rooms folder what i need to do is i need to create a module how you will create a module is nggm4 module and then just give rooms and i will pass a flat equals to true otherwise it will create a folder which we don't want to i we want that room's model should be available here so we got our rooms model uh we want also wanted one more thing we wanted uh that rooms should have a routing module as well similar to what we have outside here app routing module so we want that rooms also should have a routing module and we will say flat true and let's see [Music] so there is a flag to actually overwrite i'm just looking for that particular flag force so i'll say i have an f1 force so it will overwrite the existing file so we will have uh rooms module routing flat true unknown option okay sorry this is like an effect flat equals to true and then we have iphone force merge conflicted rooms module let's see okay let's delete this file right now [Music] okay so what we got there's rooms module and room sorting model similar to app module and apps app routing marketing but remember this uh we will talk about this part for child let's uh hold on first let's talk about this room's module now what we have to do is we have to move everything related to rooms out of app module to here so let's go ahead and do that so we have rooms rooms list component let's do that and what else we have my employee rooms booking room set so [Music] and let's remove this code so you can see just uh by creating another component i have removed like almost 10 lines of code from here from your app module so now this is step one so now let's go ahead and add this all this here so all these components are added here and our application will break right now so let's go ahead and see what is happening here and let's try to click on add room rooms you can see nothing is getting loaded and you may get some exceptions so a native element but it's okay but you can see i mean there's nothing which is getting loaded because of course uh there is a lot of errors a lot of compilation errors so let's go ahead and try to fix those i mean don't the one thing about refactoring i'm also trying to show you how to refactor the code base you are uh probably i mean it's it's a good thing you should always re uh revisit your code base so i'm just trying to figure trying to tell you how you generally i generally uh go ahead and refactor the code base so now we have a lot of errors don't be scared whenever you see such errors don't be scared i mean it's absolutely fine uh that's the first step if you are scared i mean of course you will end up like you will roll back the code base and you will be in the same mess as you were earlier so now let's uh kind of close this and let's try to see uh what what needs to be done more right so we have moved all the components here now right so we we have all the components here and now as we have created just a feature module what we can do is we can actually go ahead and register this rooms module into this app model so what we have done is we have removed some code from your app module and then we created another module and as we want that module to be available everywhere we have just registered that module here rims module so let's go ahead and compile this code again so what you can do is you can actually put some of your reusable code inside a module and then you can just use that module wherever you want to in case let's say you have a component to show a table right and what you what you can do is that's what that table is getting used like at many places so what you can do is you can just create that particular component with table and a module and then you can just use that module everywhere where you want to now let's go ahead and see the errors so there are multiple errors so it says roomsat component no directive on for ng form now once you create a module there are few things which we have to which there are few things which you have to keep in your mind now this components which are available here they are using some specific modules for example uh this error sorry this error which says okay this is no directive found with export as ng form it means we are using form functionality here but that form functionality is not available how you can do that we have already learned about it so what we have to do is we have to go ahead and add into imports we have to say forms module so you will see each error gone one by one so now the first error will be gone so it will be recompiled failed to recompile and now there is another error it says this header component is not part of this module now we are using this header component in rooms component.html this is uh this is really really good use case for a reusable module as rooms component sorry this header component can be used at multiple places we cannot just register in inside the inside the main module app module otherwise it won't be available for other modules which which is created for example rooms so what we can do is in such cases the same example which i was giving a table a reusable table which can be used so here what i can do is i can just go to header i can say open an integrated terminal and create a module here so i'll say this is a header hyphen fn flat but i don't need a routing module here because this is a just a usable component it does not contain any component which can be accessed by route the reason i created inside room is there are components which can be accessed by route by urls so we will also move the logic related to the urls inside its own module to avoid writing so much code inside your inside your app module now let's register this header component here now once you do this you will start getting an error so the thing is one component can be registered as part of only one module remember this keep in your mind so here uh this header component is actually uh if i if i do this if i do [Music] here i register the center module and let's add the setter module here so the thing is your imports or your modules can be added into multiple places right and that's the whole that's the whole uh uh you can say the that's the whole core about creating the module so you can actually reuse things around your entire application into multiple modules but i cannot register or i can i cannot actually uh import sorry i cannot register a component multiple times so if i have added declarations uh header component into declarations are here i cannot add it into here so if i do this that's an error so here let's remove this over header component from here right so header component is removed and now it's only available at one place but let's see if it fixes our issues so let me just compile compile it again it will not so the answer is it will not so we'll see how how we can fix that so now let's let let it give us the error first now it says okay this header is still not found the reason being in case if you are using a component outside of its model so this header component is actually used inside rooms module so you have to also add it to exports it means i am exporting this particular component so anyone outside this module can also access to this particular element remember this whenever you are creating reusable components this is the thing which you should do you should always add it to exports array so it can be accessed outside otherwise it won't be available now let's go ahead and see our output and it is compiled successfully so let's see how if our application works rooms ad rooms worked employee worked login worked let's try uh the functionality okay just looks like something is broken but it says uh includes test this is ah right so it is it is giving us error uh what was the admin it was admin right and now it works as well so so entire functionality is working again what what we have done here is we have created we created actually two feature module one to show the scenario where we will not have any routing module we will have a component which is reusable and can be accessed outside of its own module so it's not going to be used inside its own module here right header module and then we saw another example where we created a rooms module we moved all the components which is related to rooms module inside its own module and that's it and then we also added the modules which is uh which is required here for example it was using the forms functionality it was using the header component so we added both the modules to make it successful always read the errors remember whenever you are refactoring the code always read the errors what is that all the errors are readable so you know what is going wrong now let's go ahead and let's move ahead and also try to move this rooms related routes to its own module so we already have this module available we'll remove it from here so you can see how easily we are able to remove lot of code from our app module and app routing module and we will add it here so [Music] rooms component room sat component and booking component once done you will see a difference that in app routing module we always use for root and whenever you have a feature module with routing it will always use for feature sorry for change the reason being uh your for root is like it's a singleton service so you are adding all the routes inside a singleton service so we are saying for root it means this this is these are the routes which are available globally and all other routes is part of your feature modules they can be accessed from within your feature or once they are registered so here we have three routes which are available and the way it works is routing module is actually registered here you can see imports in uh we have added a rooms routing module so now this routes are also registered but there is a catch there is a catch let's see we have added rooms module here let's go ahead and see if our application works it will break so just to give you an idea so you can see if i try to access employee it works if i try to access rooms it says resource you are looking for does not exist same for ad room what's happening here the routes exist yes but why we are getting 404 let's go back revisit the basics remember when we were talking about this routines right we talked about this wildcard we said it will go sequentially from top to bottom let's go to app module and figure try to figure out why it is happening so all the import statements are also executed sequentially so you you can see it goes to app routing module first and go to approaching module it says okay employee login this default route and then start it says okay the any other route is not available here right now so how to fix that so in case you have feature modules with its own routing you should always register this uh you should always register your feature modules before app routing mode just remember this because of course when you start learning angular you will get this error you will get okay why my routes are not working that this is this might be one of the reason that you are getting four or four pages let's go back and that's it everything back to normal and your functionality works so this is how you can create a feature module and uh and also how you can create a feature model with its own routing module so remember right now what we did is right now what we did we just did is we refactored a code base to make it more uh what you can say flexible more uh extends extensible so in case anyone wants to actually make changes to related rooms they know that they have to just make changes inside this particular folder that's the whole idea about creating this small small feature modules right people know where to make the changes they don't have to touch the entire application they don't have to make changes into app model every time that's a really bad structure in case you get into some code base where everything is added into a module of course you should the first thing which you should suggest is to refactor that code base by splitting them into different feature modules the advantage is of course the code is more maintainable and we can also do lazy loading which we will see later on now in this video we will see how we can do nested routes and we can load child routes so let's see let's try to understand what we mean by nested routes right so we can load another route inside an existing route that's nested routes and it can have some child routes as well so let's go ahead and try to figure out a scenario so here so you have this book room right right uh so right now if i click on this book room it is going to another view altogether right so all the existing view is lost so what in case you get an requirement that but in case you get a requirement that when you click on this book room the another view should open below this particular table so you can just fill out all the details and complete the booking you don't have the form of course we will add the form later on but let's try to fix uh let's try to build this scenario using the nested routes concept let's go back to our code let's see where the routing exists so our routes are here so what we want is this room slash ad should be loaded on below sorry not on but below this particular table so we can do that so here you can use something known as children property and you can move this route inside this children property so this is step one once we did we have done this let's see right still i mean it is getting loaded on another view because we are referring uh to the wrong view all together so this is the path which we needed room slash id now let's go ahead and see here you can see uh when you click on this it goes to this room slash one but it says the resource you are looking for does not exist this is strange because we said room slash id is already configured and it should go to rooms booking component but this is not happening so now we have to do one more thing we have to go ahead and tell where to actually load this room's booking component by placing another router outlet so let's see how it behaves now so let's go to rooms let's click on blue chrome let's see what's different here okay so now as we are already inside rooms so we have to remove this okay let's see rooms so because it's child right so it's uh it's child route so we have to okay let's remove this slash as well now let's click on rooms and click on book room you can see this component is actually getting loaded here let's uh put some more content here so i'll say booking this is edge room so it is visible right so you can see so booking room 2 click on any room you want to book and it will be displayed just below the table wherever you have placed the router outlet so remember to do two steps which is needed in case you want to do nested routing so why it is nested routing because you can see this is already available inside a router outlet and then we are loading another router outlet here so let's try to understand this uh template right so here we can see this is our first uh app and then you have the sidebar and we have first outer outlet here and then there is another router outlet which is available here so it is nested right so what you brought so understand the nesting needs one thing same thing again available inside same thing so router outlet again available inside router outlet that's nesting and as it is getting loaded as part of this existing component it's part as it is treated as a children routes so you can see this is children and then we are saying when we click on room slash id so we don't have to specify room slash id again here we can just say colon room id and that particular component will be loaded wherever we place this particular outer outlet so if i place it above here so you can see uh booking room this one right so whatever room you select it will be loaded here so this is how you can achieve nested routes and children routes you can play more i mean you can actually uh experiment by creating more child component and see how we can load them you can you can load multiple so it's not like only this will be loaded you can actually add multiple here i can just do uh i can just test routine i can also move this one inside this array and i can remove this and i can say slash so now it is also child component so the only thing is actually add room is available here so if you try to click so let's go to room and let's click on add room you can see let's let's do it on this one let me just do this and here on rooms component.html on add room this one right so on add room let's do router link so we'll say this is router link and i'll say this is room slash ad let's verify if it is correct rooms okay it's rooms slash ad and let's try to add a room let's click on add room and it says room slash room slash ad the reason being because we are already here okay let's see as we are already inside child probably that is the issue and here it is all right so we click on add room and booking uh and what is there inside room ad room set okay this is the form room slash at where is this form gone [Music] okay this is good that we came across this issue uh here so uh the thing is right now uh if i say room slash room id or i say room slash ad this slash ad can also match to this the reason being it uh it's like it just uses that okay i i can say room slash any place holder and this will be called so to avoid this just make sure that uh you place at this uh this before and then you have dynamic crowds after this that's a really good thing that we actually uh came across this issue because this is also one of the uh reason where a lot of developers get stuck so what we have done is we are saying that ad is first so it will match to add but if we place this one i mean it's a wild card right i mean it's a it's a placeholder so if i keep this first it will also match to room slash ad and it will always go to the booking number and that was uh the thing now if i click on book room you can see i'm getting going to this if i click on add room i can see the add room functionality available on this view itself so this is how you can play around with multiple children components you can add a number of children components in case you want to display them on the same view you don't want to redirect to somewhere else so this is how you can do it and uh let's move so far we have seen how angular routing uh can help us to create several routes and in last video we also learned about how you can create modules so as discussed modules are something which where we can actually wrap all the functionality related to a feature into its own module right in its own angular model but once your application grows there will be many modules and so the application size will grow as well and one point of time you will probably end up with huge main bundle size so this is where we will talk a little bit about uh the build which we create for deploying on protection so so far we have been using a command called ng serp which is used to run this application locally and debug it now we will use another command to create a production build which can be used to deploy your application on production so to do that i am going to run a command called ng build and you can say c equals to production now what this command will do is it will build your application with production mode so this this uh whatever files which will be generated it will be minified and it can be deployed on your protection server so let's see it will take some time to generate the bundles you will get several files and we will talk about one main file which is called main.js so here you can see uh you have main.js which is around 476.91 kb right now our application is really small i mean it contains an app modules a few components and one module consider it like a huge enterprise application consider uh now in future you will end up with a huge enterprise application here you will probably have hundreds of modules you will have thousands of components even not that big let's say in range of hundred right so this bundle size will increase and this main.js is the file size which will be served to your customers now 476 kb is it's okay right i mean it can be it will be pretty fast on your 4g network but what in case you have this bundle size in mbs and that's where the problem comes in now you will have a big bundle which needs to be loaded whenever your your user comes to your portal so they have to wait they have to wait based on uh how much speed they have right how much the bandwidth they have what you can do is using angular mod angular router you can also split the code if let's go back to our application so if you see here the functionality related rooms do we think i mean this room's functionality should be available by default to the users the answer is no right i mean of course we we have to actually go ahead and add few forms more functionality to our to our login screen and that will be the first page which will be served to our customer so without login they cannot even use this room's functionality even employee functionality so it doesn't make sense to actually give all this views with your main.js bundles i mean all this code is something which is useless at that time probably your user just comes to login page and goes away and this this code will never be used so this is where actually angular router can use angular router can help us to split our code based on several routes it has some advantages of course this code will never be downloaded in case your user never comes to this particular route and once the user visits this it will be once it will be downloaded only once so it's not like i mean if i just uh go to another route this all code will be um removed and then we will be added back once we come back to this route that that's that's a no so but there are few requirements which you have to fulfill to achieve this what are those requirements remember whenever you are trying to create a module as lazy loaded model or you are trying to separate that code from all entire application the first thing which you should think about is what are the things which needs to be reusable if it's reusable probably you have you have to rethink about your architecture let's say there is one component which is reusable from rooms in that case i will remove that from the rooms component i will put it somewhere else which is with where we will put reusables so i can use it inside rooms and other places as well never do something like this where you have rooms module lazy loaded and then you are there is one component which is being used somewhere else in that case you have to go and import rooms module in that particular module which will fail the purpose of having a lazy loaded model so a lazy loaded model should be isolated i mean it should not talk to any anyone else it should know everything about itself and once loaded it should be able to perform all the functionality and your application should not know about this module until unless it is requested so here we are talking about this code will be downloaded based on user interaction so once i interact with this rooms module or rooms url the code will be downloaded so let's go ahead and see what are the prerequisite so first thing is now as we have chosen the rooms module to be lazy loaded the first thing is no one should know about rooms modding remember last time what we did is we created a feature module for this room's module and then we added here so first step remove this now no one knows about rooms module and it should not work right i mean if i recompile the application you can see there are a lot of errors because of course the list uh this room's module is gone i mean no one knows about rooms module anymore now what's next now here in app routing module we will add one part remember we have already fulfilled one particular step we have already isolated everything related to rooms module in its own module so we are not sharing anything outside rooms module right so just keep that in mind keep that in your mind whenever you are designing uh this lazy loaded module for your application just keep this in mind here i'll say path rooms you might be wondering why we are doing here and we'll talk about it so rooms and then you have to use a property called load children and here we'll say we will be using an import statement so i'll just let me just talk about this and okay something is missing what oh okay so what we have done here is we have added a path rooms and we are saying load children and then some import statement we'll come back to this let's go back and make some changes to your room's routing module here we will remove this path we need to book it put it blank and let's go back let's go back and talk about this so now we rather actually directly importing the rooms module into app module so what we are doing is we are trying to lazy load it so uh the lazy loading means now we are providing the path inside the routes array because of course this is your you remember app routing module right the main routing module so now my app routing module knows that there is a path called rooms and whenever someone tries to access rooms what i have to do is i have to go ahead and download this particular rooms module remember this is the module which we created earlier so i have to go ahead and download this rooms module which has a angular module called rooms model right so this is this import statement is something which is native into a to the browser so at runtime at runtime remember i'm not talking about the compile time compile time is when we are actually building our port right at runtime it will whenever we click on rooms it will go ahead and download all the code which is related which is available here inside this rooms folder and make sure that you are not using anything outside rooms module right so here we have we got we did this we can do some similar thing for employee that's something which you can try what you can do is you can create another module for employee and then try to lazy load that module you have to just create a routing module and then you have to create a angular module that's and those are two things which we have to do and then you can in similar fashion you can download the employee module in case you are not able to do it just raise an issue and we will help you now this is also done we have removed this because why we left this path blank because we have already defined this path here so when this particular module gets downloaded and it goes to its default url i mean the first url so it will check okay this is the component which i have to download so rooms is my default route i don't have to do anything and then we have the children which we already configured last time now let's go ahead and verify the application so two things we will verify but there are two things which will verify uh first let's verify the build let's see if there is any difference in the files which got generated earlier right so earlier we got four files now let's see after making these changes how many files we get and how it impacts uh impacts the bundle size as well so you can see it says there are some initial chunk files and there is something which is lazy chunk files so you can see uh now we have another module which is of 11 kb and it will be downloaded separately once i interact with that particular router let's go ahead and run the application now and meanwhile let's see if we are missing something here and okay so let's verify how if our lazy loaded model or lazy loaded functionality which we did is working fine or not how we can verify of course in build we can see there was a different uh bundle altogether but we can actually verify it from here so you can go to the sources you can go to webpack. and go to src app and here you can see okay so here we can you can see we are actually using room service somewhere so one file is already downloaded because we are using it outside probably uh in app module or somewhere else but let's see the main functionality let's click on rooms now you can see all the files apart from services are downloaded as i clicked on this rooms and now i can just go ahead and visit any other url that won't impact this files so this is how you can verify what are the files which are downloaded uh lazily right i mean apart from services everything is being resoluted right now and it will be available as well inside your network tab so let me just remove it and let's refresh let's go to employees and let's refresh this page and let's clear and let's click on rooms so you can see src app rooms rooms module so this is something which which is telling you that okay this all the file this code is actually being loaded separately and when is happening when i click on rooms so this is how lazy loading works and you should as i said there are there are many things which goes behind whether this module needs to be lazy loaded or not few things we already discussed one more thing which we need to uh make sure is you should i mean it's not like in us if this is a functionality which is available we should go and down sorry we should go ahead and implement lazy loading for all the models it's not lazy loading lazy loading is useful for the modules which are really big and which you think won't be used frequently by your end users remember not developers developers can just go ahead and add anything right uh because it's uh it's based on the business requirement i would say so whenever you are implementing this you should go ahead and ask business that okay what will be the frequency how many uh users we are expecting this views to be used by it's okay in case you don't get don't implement lazy loading at first that's absolutely fine i mean it's okay because you don't know your user behavior right as you know your user behavior you can actually go and implement lazy loading but at least have feature modules in place uh and there will be of course there will be many modules which you will realize even while developing that okay these modules are not probably going to be used more frequently for example let's say you have uh a profile section how many times you do you think uh your users are actually going to use the profile section probably once in a month that's rare right i mean in case they have to update some mobile number or email id which is really rare so those are the modules or let's say you have some kind of reports which will be uh let's say which are month and report so you know okay this this reports will be actually will be downloaded only in a month only once in a month so you know that okay this frequency will be really less so you can go ahead and configure is a loaded model so it's like whenever you are thinking about lazy loaded modules it's your developer mind as well as the business needs or the business uh idea which you get how frequently it is going to be used so keep all those things in mind before you go ahead and implement lazy loading mode lazy loaded module for your code base so this is it from lazy loaded model try it for employee if you don't if you're not able to do it just let us know now we are supposed to actually uh now we are going to actually discuss about round cuts but we will hold this topic for a few few more things which uh we will cover and then we'll come back to the route cuts so i'm going to show you a few more things related to the lazy loading uh right now what we have done is we already had an angular model right we what we did is the approach we took is we created the all components we created everything inside rooms and then we added a module then we did a refactor and finally we ended up module which was lazy loaded what in case i want to start from the day one i have the requirement right so i spoke to my business team they're saying okay this small this is something probably won't be used a lot but we need this functionality or probably this functionality is really huge and in case if we include it in your main module it is going to bump our bundle size so you decide that okay we will lazy load it to so uh the bundle size is less and it will be loaded faster for the users and you want to start with lazy loaded module from the daven let's try to do that so what we will do is we will uh create a module so let's create a booking model which will show all the bookings which can be done which will be done using the rooms module right so this is rooms booking but i mean it's a great module so this will be used to see all the previous bookings which are made and we need to download to make sure that it is lazy loaded so what you can do is there is a command to do that so i can say ngg module i can say a model name so i can say booking which is my module name i can say hyphen f and route is equals to booking and hyphen iphone routing uh to make sure that there is a routing module which is created so let's go ahead and enter and see what happens uh module option required module option required when iphone module is equals to booking let's see or i i think let's see so specified module booking does not exist it's okay sorry okay so uh there was a problem with the command now uh let me just talk about this particular module so what this module is so it is asking me where should i go ahead and register this particular lazy loaded module right now we have two models rooms module as well as app module so we have to provide the module where we need to go ahead and create a lazy loaded route like this so right now what i need is i want to create it with app with app module so uh it will now go ahead and create you can see uh it created a path here so you can see booking load children import booking module and booking module so if i go to booking module now you will find several things you will find a module you will find a component and all the related files as well as booking routing module as well all this by using a single command so you don't have to go ahead and do whatever we did earlier right so go ahead and create component then add a module and then do this no you can just do it with a single command also i'll show one more command which we can use so let's say is there any other screen we want to create okay so let's say uh i want to create a filter uh functionality right so where we can search for like search functionality so we we want to search for rooms and we what we want to do is we want to create a module first and then we want to add components and we don't want to lazy load this remember this one we wanted to resolute this one and we don't want to let's load so what we can do is we can create first the module so i can say ngm and i can say search so it will create a module first right so now we have the module now i want to create a component so what i can do is i can just go ahead and say nggc search now this will create a search component inside the search folder so you can see uh it created the files inside search folder as well as one more thing search module will register this search component so this is all all done automatically you don't have to do it manually the only reason i went through or i went through the uh the path where i did everything manually is probably you won't be writing uh the code from the scratch in your application you should know how to refactor the application or how to revisit the code right i mean what's wrong what's right in your code base otherwise you will be lost so that was the whole purpose of actually doing that exercise in case you are creating new code this is the way you should be doing it so first create the module and then create the component in case it needs to be lazy loaded from the day one just go ahead and reuse this command and that's it and you can define which on which module i want to actually register it i could have given it as rooms as well remember this so in case i am going to actually access this from the rooms module i can do that so i can actually lazy load any other module inside rooms that's also possible probably we'll try one exercise with that as well now we have our booking module and this is loaded as well so now i can just go ahead and add navigation and we can say this is bookings and what was the route booking and let's revisit the application and you uh let's go to sources pack dot slash src app and you can see we don't have anything related to booking let's click on bookings and now you have everything related to bookie so this is another command another way to do it and we will of course go ahead and add a form where we can see all the bookings in um in upcoming uh videos right so we will be using angular material table we will show you an example of how you can utilize angular material table to do that so yep that's uh that's another way to implement lazy loading well so when discussing dependency injection if you remember we left one thing i mean we said we will be discussing about it once we go through the lazy loading so let's go back and uh do that so we discussed about provider types we saw a route right we said okay in case it is root you can actually go ahead and add use this particular sorry you can use that particular service as a singleton service across your application now we will talk about the other type of provider type which is aiming now you might be wondering where this any is useful so let's go ahead and talk a little bit about it there are there are multiple use cases and i wrote a blog post on the same so i'll be trying to cover the same example here but let's figure out what is the use case for using any so here let's say we have a service like we uh what we will do is we'll create a service we will call it as a config service we already have app config so let's create another service and for that i will be creating a services folder so this is like a reusable kind of services and let's open the integrated terminal snggs and i'll say this is uh what should we name it config let's call it as config service i don't i don't think so we have anything called config service as of now and here so we have this config service let's go ahead and change this to any and one thing which we will be doing is we will be uh let's do uh console.log and let's see how many instances get gets created so we know that whenever a service is configured with provided in root we get a singleton instance and we in case you want to create multiple instances you can just go ahead and use providers property as we saw earlier now using provided in any let's see uh what happens so i am going to use this service inside the rooms component we will just inject it as of now and so this is concrete config service which is type of config service and let's go back to the application let's see if uh it is compiled here now let's go to console and this is where we will we want to see an interesting thing so here uh let's use config service services at one place other or is it okay okay let's do ctrl f5 let's click on rooms and here i see let's see we have this room service initialized conflict service right so [Music] config surface initialized and we will be using the same config service inside app component the same way i mean we are not going to use it we'll just inject it and see how it behaves constructor this is this and let's see if we have any other module that's okay okay these two modules are enough more than enough let's go back to the ui and now you can see uh here it says config service initialized so we have config service dot ts line number nine it means one instance of config service is created right now and we cannot see any other instances which are available ah okay go to one more thing i'll just clear this and let's see the messages so we have this config service initialized so now [Music] why actually uh moved away from rooms because on click of rooms i mean it is supposed to create another instance so let me tell you why we have not done providers property we have not added to provide this property why should it create a new instance so let's go back go ahead and talk about how any place an important role here so we have config service initialized here let's go ahead and click on rooms and you will find that here config service is initialized again one instance two instance by so so when we say con this providers so when we use this providers at provider in providing as any it will create one instance for the entire code base where there is nothing lazy loaded right and it will create separate instances for each lazy loaded module in case it is getting used for example it is getting used in rooms so it will create another instance for rooms module if we go ahead and inject it inside let's say we have another model called header if we inject another instance in header it will not create an another instance because it is not lazy loaded but let's go ahead and inject let's try to inject it and see right so how many instances we end up with so here uh we have copy this header so as as per expectation header should use the global instance which is available which will be created and we'll create one for booking because booking is lazy loaded so let's see now rooms has so one is global instance config service initialize then rooms has another instance config services initialize two and now let's click on bookings and once we click on bookings booking has another config service initialize so we have how many instances right now three instances two used two separate instances used by two different lazy loaded modules as we said provided is any and one which is global instance which is available everywhere what can be the good use case so let me just uh give you an interesting use case which actually wrote a blog post on and it is great it is actually used in uh one of my friends uh book which was launched let me just stop uh so uh which was launched last year yeah it was launched last year uh it is a book based on angular iv so it's it's a little bit advanced right now you are on basic so i'll say i suggest once you have the basic idea or little bit idea about angular how it works then just go ahead and purchase that book so it's on angular iv which i actually profit so let's go ahead and talk about the use case which i was talking about so here what we will do is i'll create another so we already have service and i will create one injection token and say this is uh config or let's call it as route config so this interface uh this will be the interface and we'll say this is export interface without config and we'll say this is a [Music] title this type of stream so we have just single property and let's create an injection token so let's say this is cloud config dot service dot is and here we'll say export const without config which is equals to new injection token which will be type of this particular interface and i'll say this is a route config and what is this route configure first of that is being used as a type name section token which is type of route config okay let's see what i'm missing here ah this route config which is looks like uh this is something which already exists in angular core and let's import this import the interface dot slash without config and we'll say this is the interface which you are looking at and it should be fine config token great so we created our token and now we have an interface let's see how actually it helps in case we are using provided it provided in as any i'll use this route config token in app module we know how to do that right so we already have an example here so i'll just add provide and we will use value which will be let's go back to our module and we'll say which will be having so we know the type so we have this title which is home [Music] and we will be using this route config token we let's go ahead and use it inside the config service so now we know how to do that so we'll say inject and config cloud config token real quick config token and out something right so we'll just import this as well and let's print the value i think this is our extra console.log this is not conflict token let's verify this functionality as of now so we have this uh service which is now injected in so what we did is we created a config service and we created a token we uh provided a value to this particular token we said title is home and then we use this particular thing in service and we have tried we just we are just actually logging the top token value let's see what we have done so far and there is something unexpected which is app model.ts line number 68. let's see probably x just mr common then let's go ahead and see so what we have here so config service right now has few uh few instances right so we have this config service initialize and then we have title home you must be wondering what we have done i mean this is something which we have already done again why i am covering this this thing again i mean and we know how to use injection tokens but there is a difference when you use provided in any here let's try to pass this value to rooms module and what we will do is providers and i'll set our title is room so remember right now we are saying there's another we are just changing the title let's go ahead and see so we have title available as home available here right let's go to room and let's see what is the title available right now so we have title as room it changed let's switch back to any and let me show you what will be the value in case we use any sorry we use root so let's go back to the rooms sorry config surface and change this to root and here it is so you will still get for rooms even for rooms we are getting the value as home let me show you i mean probably let's move into uh another module so we can see the value so we have this home of course which makes sense click on rooms we will still end up with home why so because when we say root it's a singleton instance which will be available when we are saying any it will create a new instance for that particular service so we ended up with the new value which we registered into the module otherwise we will just get the previous value as which was added into app module remember this this is a really interesting uh interesting thing which landed in angular 9 and uh it's really useful so a lot of developers don't know this functionality which is available but can be can be really useful in case you want to actually go ahead and pass some other configuration which is which or you want to overwrite some configuration inside any of your lazy loaded module very interesting use case so as i said my friend has also covered it in very much detailed way in his book and you can also go through that use case as well so this is it about any and i'll just change back to any because this that was the purpose of having this particular service and we are done so now we will end up with whenever we click on rooms we will end up with configuration as title room you can pass any configuration for separate or you can just override the configuration for your lazy loaded module using in so uh we saw both the example using just a service how it behaves and then inject we added injection token to show you how it behaves in case we pass an injection token let's go ahead and talk about route cards so as per name suggest writes its cards what what you understand by cards so you have many type of cards and you might have seen your in your real time or real life as well right so let's say atms they have guards banks they have guards what they're trying to do they are trying to secure something of course in that case it's money so what route guards do so it means they these guards are actually trying to secure route but how so there are multiple guards which are available and they do different stuff so we will go through one by one and we will talk about resolve guard at the end and before we talk about resolve guard we will create our booking form finally and we will fix the date picker issue which we have uh in our earlier form right we if you remember we created our rooms uh add rooms form and we said okay this date time doesn't work then we will be using the angular material date picker so we will fix that as well so let's see uh how route guard behaves but before we go ahead and talk about how route card works we need to understand one thing we need to understand the routing event how does your route works right so we have not seen this we have seen okay how to configure your route how to do your default route how to do your wildcard route but in which sequence they are called i mean what happens when so you click on route so let's go ahead and talk about that and to do uh that we will be subscribing or we will be using the router service which we have already used but we'll be using some different properties let's go and see that so here i'll say private i'll say this is route and this is router now let's call it as a router right that makes sense and now on ng on init live cycle look i'll say this dot router dot events and it's an uh observable so i'll be subscribing to it and then we'll say this is event and here we'll just do console.log event and let's go to our ui let's see if it's compiled yes it's compiled and i think that is something bigger which is available so let's move on i can just let me just disable and let's go to console and here we want to hm so here you can see line number 34 so let's go ahead and see how it starts right so when in this case the navigation happened if you remember let me just do this one thing i'll just remove this and let's go back to employee right so we have the only route cards or route events are blocked so there are multiple events which gets fired when you click or in case a navigation happens so here you can see it starts from navigation start and if you see there are few parameter which your navigation start has so it has a url it has a unique id generated for each and every navigation event which happens these ids are really helpful in case you are getting some issue during navigation a common use case or a common issue which we generally get during navigation is by the time the first navigation gets completed you are trying to navigate again so you can only figure that out based on the id so navigation started then it tries to recognize the uh route so it says okay now this route is recognized so i have to uh there are some states which is uh available so remember a snapshot that's part of this you can see router snaps uh router state snapshot so you have url url after redirects then we get a get guard check start and this is where the route cards come into picture so it says okay now i'll be in go ahead i'll go ahead and check whatever guards you have implemented so this is where it will start then it will say okay now let me go ahead and activate the child where we have seen the child's so if you go to rooms click on add room so this is child right so it will go ahead and check if this child uh it will go and start activating this child routes then activation starts it will say okay now everything is figured out now i can go ahead and activate this particular routing or route now here all the cards have checked all guards check have ended so it says okay now it's fine everything is okay all guards said uh so all all the cards which we have implemented they are saying it is okay to allow this particular user to enter into this particular route guards check in right so nowadays when you try to enter into bank or atm what they do they check your temperature they try to see if you have any symptoms right so and then they allow you so that's where guards check end then it says okay now let me just resolve uh this particular route right so it will it will try to resolve this particular route where we are redirecting to room slash at and then it says okay now this is also fine this all ended then it will call activation ended and then it will say okay now child activation also ended and navigation finally it says okay now everything is fine let me just send the navigation and uh the last event which we have is scroll event scroll event is something which you can use in case let's say you click on a url and now you want to scroll your uh scroll your this horizontal bar right somewhere or top bottom wherever you want to you can just go ahead and subscribe to the scroll even task so this is related to this is related to your router events how they are called in sequence and now we will go ahead and talk about the route cards while working with router events it is also possible to listen to a specific event as we saw there were multiple events which were getting fired right but in case i want to let's say show loader when navigation start and show up and i mean remove the loader when navigation ends how you will be able to do that so we can actually achieve that by using something like this so i'll just rewrite this code or let me just keep it here so you can refer this while revisiting the code and let's try to listen to the specific event navigation start navigation and that's it so we'll say this dot router dot events dot now as we said we need to listen to specific events so i don't want to go ahead and listen to all the events and then filter out we will be using rxjs remember little bit difficult but with some practice you will figure out how to use rgs so here i'll be using pipe and inside pipe i'll be using filter operator so you let's see if it is here it is from alexis and in filter i will say this event which is instance of i'll say navigation start right so i'm just listening to the navigation start event and then i can subscribe and here uh let's say console sorry i'll say this is navigation start and we can remove this i think let's see and we can say console.log and now you can actually write a code here to show a loader navigation started right and then i can just use another given where i say navigation end and i'll say navigation completed let's go ahead and see if it works right so let's inspect go to console and let's go to [Music] default route first right so we can just remove all the comments which we have and let's click on employee and you can see navigation started navigation completed so we are listening to only this two events so this is how you can filter out uh the other events in case you don't want to listen to them so uh just to give you an idea how you can actually achieve this as well now we understand how the routing event works and how we can listen to specific events in case you want to so now let's move on to the route cards so we we discuss what guards are what route guards are and let's see what this different guards do right so as you know in banks also they are there are different guards in case there is a guard who is like standing in front of your bank there if there uh there are some lockers or some uh yeah some lockers in bank they have different guard available right to secure that area so similarly router has different cards for different uh areas to secure so let's start with can activate and for connectivity we actually have a very nice use case already let me show you so remember we already have this login page but is this login page usually useful the answer is no this is useless i mean this is like some uh guard who is standing in front of bank but he is not checking anyone he is just letting the everyone go so it's pretty useless right so here uh what we can do is the can activate guard let's relate to can activate card so can activate cards uh guard actually tries to c if i'm sorry if i am as a user of course at the end as the as a end user is a valid entity to access this particular route or not can i activate can i activate this particular route that's what can activate is all about it means that guard is actually checking if no one has fewer right i mean that's what they're supposed to do in in days of corona so they're supposed to check your temperature and everything so if you have a few fever they are supposed to let you go and the same thing will uh is same thing can activate will do for us here so in case we are logged in we should be able to access the different routes which we have in case we are not logged in we are not supposed to do that so based on some conditions you can secure your own let's go ahead and create cards how we can do that so i'll just what we will do is as we are supposed to write few other cards as well i'll create a new folder i'll just call it as guards and let's go to terminal and you can see ngg card so ngg and i'll say this is login card as we are supposed to check if the user is logged in or not i mean it can be anything right it can be your scenario so we have can activate we will be using can activate child but we will be using it for rooms so we will not add this and can activate we will use it for another form which we are supposed to create and can load we will use this one so we can select you can select which of these if router guards you want to implement one why resolve guard is not there we'll talk about it don't think about it right now so we are supposed to we chose two words which we need to implement can load we will talk about it later but as is it is supposed to be part of this particular file i just added it here so now let's see so what we have it's a interface it's an interface which has a function called can activate it gives you some data we will see what we can do with this particular data and it returns some parameters let's talk about this later on so here uh by default this route guard returns true it means this is the useless card which we have so he is just letting everyone go without checking the fuel so but let's see how to apply this guard right at least let's understand how to actually put that guard in front of the bank so here in your routing configuration you can just go to route configuration and you can choose what are the different areas which we want to secure so we want to secure employee we want to secure booking we want to secure rooms right and we don't want to secure login now if we secure the login game over right i mean no one will be able to access login so here you can use can activate property and it's an array it's an array remember this it means i can just add any number of cards so let's say i have a login card i have a role guard for example there are different types of roles which are assigned to access your lockers right uh as and let's say someone from admin i i'm not supposed to access the lockers but someone from the accounting i am supposed to access the login let's see access the locker so those are those are the uh criteria which you can put you can create another card and just add it afterwards so here we just have one so i'll say login card that's it i'll just apply this to all the places which we have which we want you to secure so let's say this you get a guard you also get a guard but as we said right now everyone will have access to everything right now let's go back and change that true to false and here it is we don't have access to anything and let's go to login we should be able to access login because we said okay this is something which is not secured as of now i mean there is no guard in front of login so it works but what in case i mean here so it doesn't work for anything else and even if i try to do this will be redirected to login but you saw right i mean we were on employee route i think and then we got kicked out and there was an empty page we will see how we can actually dis uh uh handle that scenario as well but let's do first thing first so what we need to do here is we want to actually write the code so we want to write the code so once we are logged in and we or the end user is logged in and it's a valid user that particular user should be able to access the routes so we can redirect to wherever we want to for example let's say we will redirect to brooms right let's see let's put that logic first so in login what we will do is we will create another service i will call this service as login service and here i am going to put a flag which says is logged in and which is type of boolean and false and then i am going to put a method login where we will just copy the logic which we have already available so i'll say this is email and password so i'll say email which is a string and password which is also string but rather than doing navigate here right so we'll just keep the navigation part here and say this dot is logged in is equal to true so i'm just setting up flat that okay this particular user is logged in now and as this is a singleton instance everyone using this particular service will get the latest value for is logged in you can do it in multiple way do you want to use uh some behavior subject go ahead and do that but let's try to keep it boolean uh as of now and if this is uh not logged in or we can just do something like this right so set this and return this dot is logged in so if it is not true of course it will return the default value which is false and now let's go back to our login code and here say private login which is like login service and we will just check if this dot login server start login and we will pass this dot email and this is not password let's see if there are extra so if this is true we should be able to navigate to rooms slash ad let's try to go back go to rooms right we don't want to go to room slash yet so but still it will not work right so let's try that out the reason being uh we have not made changes to our guard our guard still returns false so i'll say this is admin at gmail.com and this is admin right so nothing works you can see here navigation started but uh there was a guard which said okay you are not supposed to come here just go back go back and that's where we will just write the code to our card now i can use login service here so uh remember this is a service right so it also has a constructor and then you can say private login service which is type of login service so now we have access to login service server here let me just close this and rather than returning false what i can do is return this dot login service dot is logged in so remember you uh it can be observable as well because it can return observable or it can return url tree it can also return a promise which we are not using anymore and also it can return a boolean which we are using right now it's a boolean value so now let's go ahead and verify the functionality so i'll say okay this is admin and password is admin and let's click and here it is we are on rooms page let's click on employee let's click on add room and everything works fine right so because now your guard is saying okay i checked you you don't have here let's just go go into the bank and similarly here our login service is saying yes you are logged in just go ahead and enter and access the urls you want to so this is uh one way but let's try to do one thing let's refresh this page remember now it's a blank page we are not even on login page the reason being once we refresh of course you lose the state of your application in that case you be your locked in state becomes false but your guard does not know where to redirect to you so it says okay i'm not sure where you uh we want to redirect to you because you have already passed you have already uh you are already past the login uh sorry the routes right so you uh you have already checked the routes and you failed the what guards you failed the card state or you failed you failed the guard check now where to redirect to you so this is where you can do something like this so you can say written if logged in then i can say okay return true or you can use throughout the service so let's see inject private router so you can say this dot router dot navigate and i can say just go ahead and navigate this user to login let's see now and here it is so we are on login page but you might be saying okay this that was by default why us why you're lying i'm not let me show you so let's go ahead and say login and same thing we will refresh and we are on login so we fix that particular issue as well so this is from can activate card let's go back ourselves now now let's go ahead and discuss about can activate child so it has something to do with child as it says and lucky luckily for us we have already seen some example how you can use the children property in your route right so we did it for rooms let's go back to the code so here we have rooms and then let's go to the routing and we have these two parts so now what we want to apply is we want to say in case this logged in user is admin i should be able to access children otherwise i should not be able to access children possible right as i said i mean even in banks you can have a guard who can who is responsible for checking what kind of role someone has who is trying to access this particular logger locker if you are a teller of course you should you you can get the access if you have uh if you're a user you should get the access to the locker but if you are someone who is not authorized to access the locker you can get into the bank so you pass the can activate guard but you should not be able to enter into the locker room that's what we are supposed to do here so here we will be creating another folder we'll call it as cards and this is related to rooms so i'll just close others here and let's close this as well because there are too many files which will open and let's go to integrated terminal and g g and i'll say this is room card related to room so in case in future we want to add more we can and the only guard which we want here is we want can activate child and that's it right now it's true but let's go ahead and apply this card so here you can say can activate child again this is an array so you can have a number of cards applied here and you can say room card right so everything great so far and we should be able to access once we are logged in so i'll say this is admin admin and we should be able to access rooms and add rooms you should be able to access book room and works fine now let's break it so to break it we have to say return false let's provide admin admin and click on employee click on rooms bad room now we don't have access click on book room we don't have access and it says navigation started but it never ended because because of course the guards kicked us out let's now fix it so we can go to login and now we are supposed to have two types of login so one is user logged in a user login and one is admin so i'll just add i'll say this is admin and which is boolean and which is false by default and if someone uses this so i'll say this is admin which is true and i'll say else or not else if else you can just use it right yeah i'll say this says user i can say okay this is logged in is true now but is admin is false so now my login service knows who is admin who is not let's go ahead and use this into our cart so we can use constructor facebook login service just type of login service and then here i can say if return this dot login service dot is admin so if this is true written truth that's it in case you want to add some extra check go ahead and do that let's figure out admin first add room yes works select room select book room works let's refresh this page so we'll go back to login now and now you will use user and gmail.com and we will use user right and let's click on add room we don't have access to it select books and we don't have access to it either so this is how you can prevent the access to child drums next card we are going to talk about is not candy activate but we will talk about can load and then we will come back to candy activate and resolve card so why i mean in candy activate we need a form so we will go to the uh another topic which is reactive form which is pending right now and we'll create a form and then we'll come back to candy activate because the scenario is related and i don't want to skip that let's see can load we already have an issue which is related to where we can apply can load so let's go ahead and refresh this page so we will be redirected to login and let's go to sources and let's see what are what is the code which is loaded right now so you can see you can go to apps and rooms what's this possible let me just refresh again so yeah rooms is gone right so we don't have rooms available here which is okay right i mean we said we already tested this then you might be wondering why i'm talking about it talking about this rooms again which is lazy loaded we know that it is not supposed to be loaded let's go ahead and click on rooms so this room says loaded are we redirected to rooms the answer is no but still have access to this particular route the reason being we are not redirected because of can activate card so we are not able to activate this particular route but it is loading the code because it doesn't know what to do in case i am not authorized to access this particular route this is where can load this is this is where can load route guard comes into the picture so this is where the can load card comes into the picture so it is itself say it is saying that can i load this particular route it is only applicable for lazy loaded router remember this so i can apply the scan load card so i can just go to cards and i can apply this the same apply the same so i can just say if logged in right and let's apply the card here so this is rooms i can say can load and then i can pass the card and you might have a question again i'll come back to that point but let's go ahead and verify this one so i will go to web pack src app rooms not available let's click on rooms and still not load it because now it knows that okay in case if i am not logged in i am not supposed to do anything i am not supposed to allow access to this particular sorry i am not supposed to load this particular uh lazy loaded module so that's what we are restricting here now let's come back to this point you might be wondering that for can activate and can load both i am applying login card i mean i can just go ahead and have uh can activate child here as well and i can have sorry we don't have child but in case we had right so we can also apply um resolve guard here the reason the thing is whenever uh it tries to actually apply or run particular card it checks for which property so here though even though we are passing a login card for both in this case it knows that i have to go ahead and activate this scan load function in this case it knows that i have to go ahead and implement ah so we call can activate method that's all so that's absolutely fine so don't get confused here um that i have to go ahead and uh create multiple guards for multiple use cases even the even though the code is same no you don't have to before we go ahead and explore the other round cards which we had we'll go ahead and create a form so we already have something called booking which uh we want to uh create so we want to create a booking form where users can book a room right so as in someone who is working in that hotel you will you should be able to book a room and that will be the form which will be created so we will be using another approach called reactive forms we already saw a template driven form and here in reactive form as well we will go through a step we'll do step by step we'll set up reactive form then we'll talk about so we'll uh we'll see how to create a form then we'll also see how to create uh add controls dynamically then we'll talk about the built-in validators we'll talk about submit and reset form we'll talk about how you can listen to the changes on a form which will be of course using template driven form we will also talk about patch value set value which is really important uh important question in case you are giving an interview we will talk about few rxjs operators and then we will also add a custom validation so let's go ahead and start with setting up your reactive form the first thing which we need to do is we need to create or import a reactive forms module we will be doing it for booking and for booking we already have a module separate module so what we'll do is we will add a reactive forms model here and remember in template driven form what we saw is we created the in template driven form what we saw is we created entire form using html right in template driven form you will see another approach we will see that all the forms will be created using st using typescript and we will just be rendering the those forms which is already created so now first step is done reactive forms module added now let's go ahead and see what else so we'll create reactive form using typescript and this is a good approach in case you want to have like more control on the typescript site of our of your form and uh in case uh sorry the apis are same as i said but you will be using something like form group form control form directives uh so let's go ahead and do that so here let's first see how our form looks like it means we have to have a model so here i have created a model which will which will show you how my uh how the form looks like so let's paste it here so we'll be having a booking id which will be order generated so we can remove this we will have a room id of course because we will book a specific room then we will have email we will have check-in date checkout date we will have booking status which will be generated uh or we can send it so booking amount booking date we will have a mobile number guest name guest writer is city state country and zip code and we also have uh guest count which will be type of number and in case it is number of guests are more than one right so we have to have that cash list so we can say guest list and some random thing right some random object so let's go ahead and add let me just add this into my back end because i have not done that and it's a guess list which will be the array okay so i'm not creating an interface here but it's absolutely fine but yeah i know this is these are the fields which we are supposed to have so let's go ahead and see uh how we can create this form using reactive forms so the first thing which we need is we need uh the first thing which we'll do is we will do one thing i'll remove this connectivity card from here i don't want to actually log in every time and let's do it here as well and we'll put it back thing is uh here i need let it be we can keep this and let's do it for booking so booking component the first thing which we need is we need a form so how we'll create a form so there is a class called form group where you can actually go ahead and add multiple controls we will see some other variation as well what in case i don't want to actually have entire form we need a single control we'll see an example of search so here i'll call this as booking form which is type of form group so this is the first class which we are using form group and we are saying okay this um booking form let's use this so we don't have the error available here and then we now we need we have we got our form so it's an empty form what else you will do after you got your form you will add controls how you will add control so let's go ahead and see that so there is a class called form builder the name itself suggests that okay this is something which will be used to build the form let's go back to our slides here so we will go through form control later on for another example but here so we can use form group to group multiple forms multiple controls and we will be using form builder to build complex forms so uh it can be used to add multiple controls to that particular form so now let's go ahead and do the step two so we want to use form builder so i'll use this is a service remember so form builder is a service so we are injecting it we will say okay this form is form builder and then we can say this dot your booking form is equal to fb dot group we are grouping the form there are multiple ways we will talk about how we can create a control because this form builder allows us to add multiple things so you can see it says there is a group which is my widely used you can say there is a star in front of it means it is widely used and then we have array and control we will see all the examples don't worry about it so right now we are saying okay there is a group and now in this form group we can add multiple controls so let's go ahead and add so it's a room id so let's replace this semicolons with comma okay and i'll copy this and then we'll talk about it okay and we will add this guest list later so we have this one form group closed here we'll just remove this two commas uh with single comma okay let's format this and somehow this is not close uh okay let's remove this now so format document so we got the form and now we have added some controls first up let's go ahead and verify this we are talking about we are saying that this is a form but is it really a form let's go ahead and talk see that how we can verify if it is a form the simplest way is to go ahead and check the properties which are available generally on forms so remember pressing the d values so let's try this one so booking form dot value pipe json and then we'll also talk about pristine and dirty and now let's go back to the ui and of course this uh these routes is not supposed to work but bookings will and you can see uh in values we are getting all the values or all the properties which we have defined and all the values are by default empty empty string right so let's talk about this first so this is a shortcut to uh this one so you can actually use new form control and provide a default value so either use this syntax or this syntax i generally use this syntax because it it is it i mean i love to tell them okay this is a form control and because of typing right so otherwise you can just go ahead and use this particular syntax as well so now we have all the controls defined so what we did so far is we created we uh sorry we added the reactive forms module we created the form using reactive way by using form group form builder now next thing sorry the next thing which we have to do is now we have to go ahead and render this form remember as i said the form is already created and this is the proof right so form dot value it means the form is created pristine dirty it gives gives us the values as well so it means the form is ready now the next thing which we have to do is just go ahead and render it now let's go ahead and bind this form to our html right so how to create a form of course we have to use form tag there is no other option the next thing is uh you have to define that okay now this form is already created so we have to somehow tell the html that okay you don't have to create a new form if you don't i mean it will create a new form right so the way to do is you have to use a directive called form group and now this form group directive is the booking form which we have already created so this line of code will tell the angle compiler okay look uh sorry look we have already created this form just go ahead and bind this form to this booking form which is already created and which has this controls so step one done we said that um now let's go ahead and apply a div but here we will be doing something so here we will be doing a different thing we will be using materials control so we can go to uh sorry components and we can go to form right so there are multiple ways to add your form input text so let's go ahead and see how what needs to be done so here the following element doesn't work inside the mat form field so we have uh sorry input we have text area and let's see the code here so we have mat form field uh mac label uh select button we have text area and then there is should be an input input as well so we use mat input here so for input we will be referring this but this matte input can be wrapped inside the form field so we have to actually combine both the apis and we can see it here uh html right so we have this mat form filled class and we will copy the css as well from here so let's do that i will just copy one and then we will repeat it for this so here uh now we are getting some error we'll just remove this let's get a get rid of this div now because here mat form field is what we are looking at so i'll just say for my document and just ignore about the error we'll fix those we'll copy the css from here and so the they have some my uh error states okay i'll we'll remove this will not make this much complicated i'll remove this one from control is what we need mat label is what we need mat error okay matte and okay i'll remove mat hint matte error okay and now let's talk about this so here uh what are the apis which we are going to use is mat input and mat form so let's go to the form control field control and let's see what we need to do so we need to import this mat frame mat form field module let's go ahead and add it so now matte form filled error should be gone then we have label and input so let's take input second and now all the errors related to input should be gone and then we had label so let's go to [Music] okay looks like label is part of this particular api so we don't have to do anything and that's it now here in form field we will say this first property let's see what is the first control which is room id so i'll say okay this is uh text and i'll say this form control is room id room id is something which is available here so apart from this so room id is i'm not getting this is string so i have to save this okay so yes we will be using form control name and let's see from control name room id it should work and now let's go ahead and comment this mat error for time being okay so what we have done is we are saying this is room id and let's see how it looks like so it says okay we have this uh room id a placeholder and so this is home id and let's enter something here so you can see room id is actually which is getting mapped here but there is some problem with css let's see what is this did applied the css example uh full width where is that example full width and okay we have not applied the form so let's do that as well so i think it should be input it should be applied here so so this is class example form so we applied the css as well now let's see so let's go to bookings and still not the thing which you wanted so it says width is hundred percent but someone is actually stopping it from okay so this is hundred percent the stave is hundred percent this is hundred percent okay this is not an impression so mat form filled in fix let's see uh width okay no this is okay this is also says its width is hundred percent someone is actually stopping it uh let's try to do this let's add it in global css okay so not what we wanted it to be so let's remove this and let's remove this classes as well and let's remove this appearance as a little bit uh okay so we have this form filled uh okay so now it is not even applying the material css so let's go ahead and see so we have the styles available here and let's go to angular.json indica pink i'll just remove this bootstrap one for time being and let's restart the server probably they as we are using both it is actually causing a conflict so let's save this event okay let's hope it works now ah okay so i was right so it was it was just due to the conflict because we are using both uh angular material as well as uh bootstrap css so now you can see it has room id and this is this is how you are actually material can component material control should look like uh i am sure other forms is broken now because we were using bootstrap but we can we can actually replace everything with material control we will do that we will do i mean you can try it as a practice for other controls but here we will be using just the um just the material form so let's uh go ahead and add other controls so i'll just remove i'll just keep this but i'll just come okay let's do it for mac uh form field and then we need the input control right so we'll just add this and then we'll replay uh just with multiple so we have a lot of controls so let's do a copy paste as of now and then we will see which control to use right we'll just need to figure that out so we this was the first one uh let's open the model so we have this many controls and let's put it here somehow i think not everything was copied let's see okay room after room id so we need guest email so the next one is type is email guest email and we'll say provide and email did we have name okay sorry so name should be the first one right so we'll use text and let's save it and we'll move this before email now we can have other things uh which is mobile number so this is mobile and then we have checked in date so we'll say okay this is from controlling it but uh interesting uh so check in date and second uh checkout date right we need uh control i mean uh date picker control so we will use date bigger booking status we will uh sit later booping amount looking amount and type is number because it's an amount looking amount booking date it will be again date picker mobile number we already create and then we have guest address city let's do it later because i can see uh i think this can be another form as well so we will see that i mean we can how we can actually uh put this entire thing as a different property as an address so let's see that later on uh let's wrap it by commenting the other controls as we are going to need it so we'll just keep it here and let's see our form okay unexpected tag looks like i compended the form as well okay it's here but something something which is not closed properly yes here it is okay so now we have room id guest name email mobile number booking amount so these are few properties which we have let's enter so we can see okay guest name is something which is getting updated here email is getting updated here mobile number is getting updated uh here and then we have booking amount which is also getting updated just to verify the form i mean if everything is fine or not so done so all these properties are actually mapped to its respective controls right by using something called form control name which maps this input control to the control which is already defined next step we need date pickers let's take it from here so we have something called date picker available here and which gives us some nice state picker so let's go ahead and see the api so it says okay you have to add this you have to add date picker module so let's do that and do we need to do anything else the answer is okay no let's see the uh here um okay no so we don't have to anything we we can just use mat there are okay there are two things uh we also have range do we need range the answer is yes we could we can actually uh provide start date ended by using the range control but let's let's see we will use the date picker so we have two different properties so here mandate picker so let's see how to use it we already have this mat form filled i'll just comment the first one mat form filled from here to here okay okay let's copy this and move this commented thing to here okay so we have mad date picker which is speaker what we need to do is we need to map the uh map the control so we will be using here form control name is equals to we have check-in date and let's format this and let's verify okay so it says uh matt date because center is internal property of input so we added mat date picker module here and it is not saved so you can see there was a white dot line it was it means it was not saved and let's see the form now and there is again some error okay so it says mat date picker no provider found for date adapter interesting because yes we need to set something and it is already provided in the documentation there is nothing uh this error is not wrong because we have uh this you can see here internationalization properly no no provider for data so you can see it is already uh given into the documentation so so it says no not provided for all injectable data it's choosing a date implementation so you can use multiple uh date implementation which is available and what we will do is we will use native one so i can just use mat native date this one module okay i think this is not part of this so let's see from where it is it's part of before let's see if it fixes our issue and bookings yep so you can see uh it doesn't it has nine nice date picker and which you can choose and it shows you uh uh do or allows you to access a calendar right so our date picker so you have available just shows a date you can we can actually change this and say this is chicken [Music] date right so here now label will be changed to check-in date and you can see when you click on this the label goes above it's it's a mobile uh first approach right so whenever you are using material it's a mobile first approach so now we have chicken date and all other controls which are available so we also added and we also added a date picker so we can just go ahead and create all other controls what we will do is we will add all the all other controls and then we will see how our form behaves and then we will add more controls so i have created the forms affiliated with form uh we i have added few more fields for example we have not checked second date checkout date booking date booking amount mobile number and email and guest name and room id which is right now our text box but we will uh change it we will do something like where we click on rooms and then book rooms and the id is actually retrieved from the url which we already know how to do that so here let's do something right so we already have few more fields where we have address city state country zip code and we'll talk about guest account later on so what we will do is we will try to cover as much scenario as possible here so for the second step we will add this address information in our second form you if you are wondering what is second form so we will be will do nesting form nesting which is that one feature which is available inside the angular forms which you can do so uh this form right now as we know that this is a form can have a nested form controls so we will create another group form group inside this existing form but before that let's go ahead and talk about few more things let's go ahead and see how to submit your form okay so we will see how we can submit the form and then we'll be back with some uh few more things for example how to add uh these this message control nested form control then we'll talk about how you to add controls dynamically and then we'll talk about built-in validators so uh let's go back to bookingcomponent.html and to submit the form we have to use the same uh event which we had used earlier if you remember in template driven form we used ng submit so we'll say this assembly submit equals to and i'll say this is add again [Music] right so here let's see let's just uh and then we'll do console.log to see what is the value which we're getting so if you might be wondering how to get this values right now so you can do something called this.booking.bookingform.value and let's verify it right so one thing which i want to show you here is let's say if i enter a wrong format here right so as this is already date picker i mean you can see the validation error is already there and this is how actually angular material shows validation errors it it becomes red so just to let you know in case so uh let's go ahead and see props so before we can submit we need a button as well so let's add a button which we missed and we will be using angular material button now and to do that let's go to material dots right so in on material.angular.io we have lot of components there is a button component as well and we will use this primary button so i can we can just go to example and see the code and let's copy this primary button and put it here which i will put inside another tab and as we are using material button we need to add also the api so we will say import map button module which right now is used inside this one looking module in case i'm using it uh in other forms you can also add it to app module let's go ahead and see uh this compilation is done let's see the form and we have this button available here so everything works even the css works and we'll say uh book room let's go ahead and see in console let's clear everything let's click on book room and you can see you have all the properties right now it's empty because we have not submitted anything let's click uh let's provide the room number guest name provide an email mobile number booking amount and then we will have check in date checkout date and booking date book room and you can see you have all the information which you have submitted so you have booking amount you have booking date book check-in date check-in check-out date this will be the guest name email uh mobile number and room id so everything is available but there is a catch what in case uh so let me show you what what the what is the catch here so here you can also do something like this so you can actually say uh that okay your default value is 2 and that and you want this see the api so form select okay so so you can submit a form state which looks like this and we don't have any typings here so that's what the problem is and you can say value and uh a disabled state let's see let's see what happens in this case so your form control will be disabled so you can see the value 2 is available here but the state of this control is disabled so or you can i mean you cannot type anything here so it won't allow you let's now submit that form and see the catch okay so can you see something is missing here let's zoom in [Music] any property which you think is missing yes the answer is room id you cannot see room id available anywhere even in the object even it's in form we are not able to get this particular value which was available earlier this is a this is one thing which is not available when we try to access the value dot value property so try to use another property of form which is known as get raw value so get raw value will also give you the values of the control which are in disabled state so let's clear it let's enter the email mobile kingmont so checking date check out that and booking it and click on book room and now you can see room id is available as well so remember when you submit this submit form and you want to get the data out of that particular form try to rely on get raw value to get the correct values rather than just dot values so this is one thing which we wanted to show you now let's move on and let's add the next part as we said we will be nesting the form what we mean by that so here you can see i have lot of controls right so what we want to do is we want to do something like this so we want to have another form control which says address and then this address contains the values or you can say the form controls and so this is how we want it our form to look like so there will be an address object which will hold uh i can say this is let's remove this guest right so we can say okay this is state country zip code and here we can actually break this into two address line run because most of the i think uh booking form has like address line one address line to address line three so we want this form to look like this and let's verify this form is created in such a way you can see address and yes it is right so you have address and then address contains all this object it says at this line at this line okay i have to mention one address line one address line two city state country and zip code let's see how to render this particular form on our ui right now so the first thing which we need is i'm going to wrap it inside div and let's add a accordion control so here we have something known as let's see expansion panel so angular material contains something known as expansion panel which we can use so we will be using this api and let's go ahead and add this all right so we added my expansion panel and now we want something like this right so where we have we can click and it will just open all the addresses which we have so let's see the code and this is two buttons and these are the form controls right so we will okay let's see okay there is okay this is the expanded collapsible button we just don't need that anyways so we need from here mat expansion panel accordion and let's see i'll just put it as it is and we'll close the accordion and we are also using mat icon so let's add that as well so mad icon module and this is it let's see let's see how our form looks like right now so you have this personal data so we'll let's let's replace all this object right now right away so we will say this is address and here we want to add matte panel description we will remove this or let's remove this mac panel description so we just have a title right so cool sounds looks good and then we will add the other properties inside this so let's start doing that and we will take let's see where is the diff con because that's really important here okay so i'll move this matte accordion inside the diff i'll just tell you why i did this let's first create the form okay so we have this address information available here and let's copy this mat form field i think the closing of is missing and let's try to use this address line one as form control name here and placeholder is address line one so let's format it again okay so what we have done is right now this mat form field anyways does not mix right now it's not used but this is the one which we added right now so we are saying at this address line one is the form control we are looking at but here let's see something which is available here cannot find control with name address line one and you might be wondering i mean this control is available here but can you see if i type anything here it is not getting reflected into this particular control and there is also an error which says i cannot find this control with address line one but you might be wondering okay i mean this particular control does exist here but how it is not available so this is where we have to understand one thing this is another form within a form so to access this particular controls the first thing which you have to do is that's the reason i place this thing you have to use form group name remember we have already used form group here and there can be only one form group on a single oh oh sorry there can be only one form group on a page so this form group is available now anything which you want to add inside a form can be nested form and another form right so it's okay i can create another form using this fb dot group and that can be another form altogether but if i'm adding it inside a form same form it can be form group name now so we'll say okay this form group name is equals to address and we are saying any control which will be available inside this particular tab will be related to the address and you can see the error is gone you will not see any error its address enter the address and you can see it is getting applied to this address line one property similarly we can add address line to city state country and zip code all those controls so now your form looks little bit better right i mean it's it looks much better i would say we can actually uh also move this section the entire section into another accordion or expansion panel and it will look really nice so we we will have list information displayed while submitting the form so uh what we will do is we will add all these controls uh let's go ahead and do that so we have address line 2 this is across line 2 and what was next city state country so let's say this is city okay and the final is zip code so let's see uh yeah see code or we can we could have just said zip it's absolutely fine let's see the form so we have uh there's no error it means we added all the controls successfully and now let's submit this all together so i'll say okay this is this booking announced chicken date so called date city state right and let's click on book room and now you have all this data available let's see the address one right so you can see the address line one two city pin code everything is available inside and properly formatted address property right so you don't have to do anything so yep this is how you can add nested control and this is how you can do submit let's move on to the next where you will see how to add controls dynamically to your form now let's go ahead and see one amazing feature which is provided by the angular forms we will be adding and removing controls dynamically and we you will see how many uh number of lines of code we have to write to achieve this because it's not that much as we end up generally doing in regular forms in case you have created a dynamic form in past using jquery you will understand the pain or you will understand how easy it is to actually do that i mean sorry for using the term easy because i've been doing it from a long time maybe it's easy for me but yeah you will understand at least the basic difference in the api both angular and other uh sorry other framework has to offer so let's go ahead and do that what will be the scenario what we are going to do here so we will add a functionality where now while booking of course it's possible right you can have a number of guests you can have more i mean three for whatever number of guests you want to so we will provide a functionality where you can just click on a button which says add guest and it will add more controls as you go right so here rather than guest count i'll say this will be guests which will be this dot fb dot array so we are saying now the control which we are supposed to provide will be area of controls not the uh group so it won't be a nested form but it will be a nested form array of a form so here we can do something like this so you can pass like one two three something like this right so you can pass a number of values here or we can also pass this sort fb dot group but not control and here i can say okay this is the guest name so it's let's add the controls so we have guest name what what we generally uh what are the information we generally take so we take name age right so let's say this is new form control remember you can just use whatever way you like you can also mix both but follow one i generally use this form control to get the intellisense part running so uh yeah so we get the guest name we get age uh what else i think this two is enough let's see as of now so let's verify this one form so there is no error but you can see guest has this array right so if you have guest name and h it means this area of a control has actually two controls available within it and we can have ad we can add n number of it let's do one thing let's add a button first so remember one thing uh the this div is there for reason so i'm not going to add this new controls inside this as uh as they don't belong there they belong to uh this form right so this booking form so i have to add it inside this form right so i'll just do it after this particular div and here i'll pop this button and i'll say this is add guest and this will be type of button because remember if i don't give a type it will also submit the form which we don't want to we can have only one submit button within a form and on click of this button i want to add guest so let's uh go ahead and see do this we'll write this functionality first so let's add guest and here you can do something like this what we can do is we can create a get a property here so i'll say this is guests is equals to this.bookingform.get you can see this you can actually access any controls by using this api which is available inside angular reactive forms so we can say bookingform.get guests which is referring to this and we will type cast it as form array we will tell that okay this is an array this is not a single control or this is not a nested form so once this is done we can do something like this so we can say this dot guests dot add [Music] okay let's see the set controls set validator status test okay so we can say controls dot push okay so we will be using this controls dot push to push a new control so we can actually do something like this so as this is and what we can push we can either push a control or we can push a group so right now it's not of course it's not the control which we are looking at we are looking at a group so let's save this and let's verify the functionality first okay there is some error let's see what is this cannot read property of undefined of get let's see why the start because this what i'm doing and we have to say pretend okay sorry i've had written some wrong syntax for getter which changed why did that so we have getter um guess so now let's go ahead and see get from http no we don't want this kit from http we want to use getter let's go to booking and we have this add guest available here right so right now of course we have not added this uh or we have not rendered this particular form group or sorry for mary on to our view so we can click here uh on add guest okay something happened and guessed why it is not doing anything one click now we have add guest let's see if it is doing something strange no guest dot controls dot push by that actually we need to add it to this area so guest dot push because we don't want to go inside the controls let's see if it works let's click on add guest and you can see we are able to add the guests so still they are not rendered but yes we are able to actually add those uh controls dynamically right so this is something which we uh we are doing uh we are actually adding this controls with a single line of code remember this so if you count this as a line another line so two lines of code right so we are doing it in two lines of code now let's go ahead and do the next part let's go ahead and add it uh on your form right so we need to render this on your on the form at the end so again we'll start it with a div and here we will do something like form array name because we have already uh sorry we don't have this as a form group we have it's an array so we will say okay this is the guests area which we are looking at and now here we have to go ahead and add multiple so uh i'll just let me just write this code and then we'll talk about this so here uh not the guest form but [Music] we'll say looking form uh let's write this and then we'll talk about it or it's not we already have this guests dot controls okay and let's remove let's do this form control name i will say this is this is stiff and let's remove this it's and here we wanted another div where we will use form group name is equals to i uh so let me just complete this code and then we'll talk about what i have done and ctrl x remove this extra controls and let's see if we have matching divs so this dave closes here this dave closes here this div does not close anywhere so we need to close this div and okay now it's look fine it looks fine and here we will put uh from uh so what is the first property which we have inside guest so it's a guest name from control name is the guest name and we will use this and similarly we will place another form field which is of type age and which is h and which is of type number and let's go again so let's go ahead and see it so you've got guess the email is sent or something and uh looks looks like there is an error so it says okay uh cannot find controls with path guests i and guest name let's go ahead and see what it is referring to so we have a form area name guess and we are saying within each control go ahead and loop over this then we have form group name and this is where the problem is we have to put it in box we'll talk about that as well let's enter and done right so we have our uh form working right now let's click on add guest and you can see you have another form control which is again you can see the value available here click on again another guest right and you can just see it is it is in working state so we created the form of course we created uh this controls dynamically but we need to discuss about this what we have done here i mean this is really important to understand this we know that okay we are referring to that okay this guest is in one of the for for mary which is available inside the form that's why we did this what is this logic what is this magic so let's go ahead and talk about it let's go to the booking component so here what we have is uh yeah so what we are doing here here first so let's try to understand this so we are saying now this array this is an array how we deal with array in angular we have seen that okay in case i want to access an area of controls or sorry array of values generally we end up doing or end up writing ng for so this is the same thing which we are doing here so we are using ng4 we are saying go ahead and loop over each and every control which is available inside this array you guys said it then this part is clear and then we are using the index value for next line of code which is available here so form group name so remember let's try to understand the structure so we have a form group the main form group then we have format and then inside that form area we also have a form group so technically i have to go ahead and use a form group name again here but do we have a form group name the answer is no right we don't have a form group name we are actually just adding a form group here it doesn't contain a name so i had to create a form control name dynamically so i am saying okay this i will help me to control that form group name dynamically because form group name should be unique so it starts from 0 1 2 so that's how it this line will help now once we know that okay this is form group name each row will have its own unique name the next thing which is pending is your controls then we are just placing this controls inside this particular mat form field and that's it we are done so this is what this code is so similarly in case you want to add it in your case of course you have to do the same line nothing will change so once this is done sorry let's go ahead and see we have this control let's put it inside same accordion right so let's try to do that and i'll remove this commented code now we don't need it so this is our matte accordion mat expansion panel let's put it on top of formatting name and that's right and then we had some closing mat expansion panel and accordion so we'll put it here so this added this ends here this ends here okay and rather than address we'll say this let's see done so we have guests and you can add number of guests so within this accordion also right so you can create multiple panels if you want to that uh it should be guest one guess two guess three something like that we can do that as well so try it by your own otherwise we will add an example so here we will say guest whenever you click on guest it will say guest one guess two three something like that so we are done uh adding the dynamic controls as well we will talk about one more api uh which is very useful in case uh you want to add some extra fields so let's take an example let's say uh there is an optional field to add a passport okay so let's add a form and let's add a button here on top and we'll say this is that passport and let's implement this function so we only want to add passport in case uh we click on this button right it's optional so what we can do is we can just add this dot let's see the api first so we have something known as add control and remove control in case you want to remove that particular control so here we can say this dot your form name so this is booking form dot add control and as it says control so we'll be using adding one control so we can say okay this control name is passport and we can choose to have a default value right so let's go ahead and see so of course it's not available here right now let's click on the button and for that we have to save this form and let's see so we click on add password and you can see a new form control called passport is available here so this is just in case we need some extra information right so you can actually do that by using the add control api which exists you can remove the same using remove control but let's let's see how to bind it because but in case this control does not exist right so here let's see we how we can add it so i'll just add one mat form filled and we'll say this is passport and we'll say this is the control name is passport and place folder name is passport number but if i try to add this right now let's see so if you try to add this right now we will get an exception because right currently this form control does not exist right so it does not exist and it will throw an exception if you click on the password and now enter as there was already an error it will not work how to handle this scenario so we can use ng right so we can say in gf we can say okay this dot sorry not this booking form dot control dot okay let's see which api we have contains that value get value dot as control i think so here we can just check get and put the control in so we can use this get method to uh get access to any control so in case this particular control exists then show go ahead and show this otherwise don't so let's see if it works and now we don't have any error click on add passport provide the password information it works so this is how you can handle uh such scenarios where you want to add a control dynamically and you want to render it adding is okay right we saw that okay we can just add it but how to render it so you have to go ahead and check first whether the control exists if it exists go and then add the control otherwise tone so using this code uh you can also remove i can say delete passport and here we can call the other api remove control so first i have to check whether the control exists so i can say if if this dot booking on dot get the control name uh passport then go ahead and remove the control so let's see and we have to save the form as well okay it is safe so we have add password delete password and the functionality works as expected right so you can see it's it it's not like it's only getting deleted from uh ui right it's getting actually deleted from the form so platform add password delete password and we are done one more thing uh as we are already talking about the reactive form or sorry dynamic forms here also right we have multiple guests and we can add as many as one we want but what in case you want to delete y card so we added one extra what can you do right now nothing you can do you probably have to reset the form so let's see uh let's cover cover this scenario as well so to remove our control from the list of controls we need the specific index from where you want to delete the control remember this keep this in your mind so what we will do is we need access to this form group so we need access to this eye actually so i have to add this button inside this div so here we'll add one more div which will say button and i'll say remove guest so this is remove guest button which we have added and let's implement and we are passing the site we are passing the index from where we want to remove the control so here right we can go to [Music] remove cast and yeah so we can just do this dot guess dot uh remove at so we can pass the uh pass the index which we are receiving in this function so we are saying i which is of type number and we will pass this index here and the control will be removed from the array so every uh row so here we will see every row will have a remove guess button so as we add one more add one more and it remembers from which index it is removing the control right so if i remove let's add some text here and if i remove this one it remembers that i had removed one the first one so it will not change the values remember this and you can add one as many as you want and then remove as many as you want you can remove all and then add more so this is how you can actually do dynamic stuffs with this particular api so what we learned we learned about the form array we learned about how you can add multiple uh sorry controls dynamically using form array then we also learned about how you can add done controls dynamically using add control and then you can remove them using remove control and then similarly we saw how you can remove controls from an array one more thing uh you might be wondering that okay this code and this code looks same yes they do look same so what we can do is we can actually go ahead and export this so we can just go ahead and say right factor and we can say let's create a method let's create a function so i'll call this function as add rest okay and let's see okay somehow it got added inside this for some reason okay something wrong here i think i had guest function already exist and i just named it the same so we'll say refracted [Music] accept to inner function in method no i want to actually extract it in the function let's write it add the guest control and here we'll just use this code and we'll see written return written and here we can add this dot add guest one rule and similarly we can let's format we can use the same line resort and guest control here let's verify so we have we don't have any errors uh the guess is available here let's add and see if the value is available here and it is and let's click on multiple guests and that's it so we don't have code duplication as well now in this particular code base now what we will do next is we will add some validation right now there is no validation we completed our form we wanted uh we want we added all the controls which we needed to create a booking form and uh let's go ahead and add validation now because you can see i can just go ahead and submit without anything and you can see it said it's all empty values all over there now we will add the validation to our form but right now we don't have any validation so let's see how we can add validation to reactive forms we have already learned it for temporary driven forms remember we can just use html5 validation so in case of temp sorry in case of reactive forms let's see how to do it so it is actually a second parameter which is available here you can see uh you can see the typings so it says uh the second parameter is validator or options you can actually pass it something like this you can say validators and then there is a class called validators remember validator was an interface which we used in previous video while talking about adding a custom validation to a template driven from here we are talking about validators class which comes from angular slash forms and it has all the validations uh built-in validations which we have seen in html5 validation so you have main max required everything so let's see how to use them so here we are saying okay validators validators dot required and similarly you can also add it here in similar fashion you can say okay validators dot required and i am using two validations here uh which is validators dot required and then we are also using email else what else we can apply uh you can also play with min max so let's uh check we can have guest name as validators dot required and then we can also have a mill length of 5. and let's go ahead and see our form so here you can see a star so at some places uh or some properties you will be able to see a class available here sorry a star available here it's actually you don't have to do anything with angular material uh whenever you add validation you will also will get this star when it's default behavior and it tells you that okay this form is not valid right now and it's easy to figure out the validation error as well right we added it for guest name and email and for room id right so which is already true and you can add more validators as you want so the validators are a different type of validity validators which we have has been matched required required so i mean i'm sure you know uh the others because they are same as we discussed about by working with template driven forms let's see required true so for required rule it's like let's say if you have a check box right so let's actually add a checkbox and we will go to material and we'll see how checkbox can be used so here uh c so we have a different api for match match checkbox let's add this remember why the reason i always refer i'm referring to the documentation is to make you a habit of referring to the documentation whenever you are working with any ui control because there are chances that in some like in next release they can add something extra and if you get into some issues you will be able to easily figure out that issue by by using the documentation so now we have this checkbox available let's go ahead and add our checkbox so we will say match checkbox and rather than uh using this let's add a property first and we'll see this is pnc right so terms and conditions which is new form control and we'll pass false and then we'll pass required to so before you can proceed with the form you have to submit or select this tnc so we will place it after this match box we will not use ng model so we will not use ng model but we will use form control name as we saw and we will say this is t and c t and c terms and conditions let's see so you can see you have this checkbox available here now so we have to check this check this box uh to proceed with i mean to proceed with submitting the form but we have not added that check as of now let's go ahead and do that so we now add some validations but our form is still we will be able to submit our form so let's use the same approach we used earlier so we'll say disabled and then you can say this is booking okay somehow typing is not working for this dot keep it disabled in case the form is invalid the same things the same controls are same properties are available here so now you can see the book room is invalid let's provide all the values mobile number i mean these are not required values so we'll just move on to tnc and okay guest name should be five character and you can see the button becomes valid and you can click it now so we have some validations in place and we have added a required true validator as well and now you can play around with other validations uh in uh so you have been max email we already added we have pattern in case you want to uh have a control where you have some rejects you can also apply the pattern property as well so this these are few built-in validators and now let's move on to creating our own validator before we learned how to submit the forms right we also added the validation now for pert reset right so we have not seen that scenario so as of now we know how to uh do reset we already learned about if that if you remember we did it for template driven forms so let's go back to the code and see how we can do it so we will go to our ad booking method and here you can do something like this so this dot booking form dot you can call reset so you can see you can pass all the values so it's a value is optional so by default it will just make everything to null which we don't want to so you can provide the values for each and every control which we have available here so let's do that here so remember we are providing the values not the control value right so we can just have the default values for each and every control and this is guest name here we will just remove this and put a curly bracket here we can just pass an empty array we don't want anything to be available and in dnc we can just say false so let's go ahead and verify so we are using reset method let's provide the values so we can say okay this is tom oh we need five characters so let me just enter my name okay i just spread my name down okay uh we'll just use the uh values which are required rights and let's do that let's save it and you can see now the values are actually it's back to the original state so we know we have like default values available here right now right so whatever we pass so you can see uh tnc let's say tnc tnc is false guess as we said it's an mtr address again we pass some default values and this is how you can reset the form one thing which we have not seen so far is what what is missing what do you think so we have not seen how to uh validate the controls uh sorry how to show the errors on control level remember this is some one thing which we did it uh with template driven form here for example uh the guest name is required but it also has a limit right so it has a max mill length property which says it should be at least five character so let's go ahead and see how we can actually add those validation messages here so uh now let's see how we can add control level validation we already have some code available here so we'll uh uncomment and we will talk about it so let's see uh angular material also has something known as mat error so if i go to material dot angular dot io and components and let's see is it's part of form filled and you can see it's and there should be an example this one form filled with error messages and it has something called mat error so which we are going to use to show the error so you can see it says not a valid email so here let's do it let's copy this and move it to guest name right so we have uh check that it should be minimum 5 characters and how the way you can do it is let's copy this so it has a api so this booking form has an api where you can check has error method so here let me just remove this because we just needed one validation we don't need both and has error which is min length experiment and we can let our users know that okay in case it has a main length error we can say please guest name should be [Music] five characters should be minimum five characters right so let's go ahead and test this and then we'll add few more validation and guest name so let's see okay somehow it's not available let's is that not saved let's see here probably it has to do with booking form dot uh errors ah okay so uh you can see here uh we are actually looking at the booking form which is not true uh because this mill length is available with this particular control and let's see we can how we can do that so you we can do something like this so working form dot get and you have to say uh the control name so which is guest name and then we can use has error so we will use as it can be null let's see all right so we can actually do something like let's print this dot errors let's put question mark so in case it's not null and that's it let's see so it says object object right now and the reason being it's actually an object so uh let's see uh we'll just do json because it's right right now require true and you can see now it has mean length error so uh m small and we should not have this error message you can see guest name should be minimum five characters so we are able to display the error based on your current control remember this so uh we'll remove this one command this one so you can what you can do you can just so use a booking form to get the control and then use has error method to and check if it has this specific error and that's it that's what you need to do so now uh if i try to move and if i enter less than five characters i know the exact error that okay guess name should be minimum five character so i have to enter one more character now you might be wondering okay this is okay i mean this is my top level control what in case i want to validate this address line one address line two how to mention uh the errors based on the control so let's go ahead and do that as well and we will do it for errors so here let's first add the validation so we will add validators required and let's add it to few more controls so we have cp and let's add it to state so three a few more controls which are required now and you can see okay the validation is already applied so that's not an issue now let's go back and see how we can show that error so we'll be using mat error and let's go to the address so address status line one here uh we will add mat error here and we will say now you have to actually combine this so you have to say address get address dot address line one and has error uh let's say required and we can say our address design fun is it quiet let's see oops this is fine so you can uh see uh it says so you can see it says address line one is required right so we just added this this validation so remember for top level it's booking or whatever form name you have dot get and the control name for nested form you have booking form dot get your form group name dot your control name and then whatever error you are looking at now how about the inner sorry array right so for array now we uh we do have your form group name but we also have form area name so let's see we will add for guest name let's go ahead and add this guest name and we'll say this is validators let's copy this so we have this guest name as required and let's see if it is required and yes that is required now let's go ahead and add the validation so here we can let's copy this matte error thing again matte error come back inside form and this is mat form fit where we want to add this edit so here now it will be little bit different so now because this is an array so the thing is you have to pass it something to pass it like this so first is your form area name comma and well so but already it's first is your guess so this will be string then form group name which is i and the third one will be your control so which is guest name which is again string let's format this so we have guest i and guest name and then has required let's see to guests and you can see uh right now of course we just copied the same so we can say request name is required and let's try to enter delete it and move on and you can see the guest name is required so this is how you can actually display the control level validation based on what field you are trying to validate so we started with the top level controls then we went to the to the nested form and then finally we went to the array so ah this is from the uh this is it from the validation part because the sorry built-in validation part so we learned about uh how you can reset your form and how you can uh go ahead and add the control level validation we are going to talk about two important apis which is available with angular reactive forms which is known as patch value and set value so first let's understand where it is useful so right now we have this form let's say what in case we have this form values coming from some api how to bind that value here so let's try to do that first so let's say we have um get um looking data this is a method so we can achieve it in by using two values two apis the first is uh patch and second is set so i mean first is set and the second is patch so we'll talk about both so let's see how set behaves set value and then we'll see what patch values can do first so here we can use this dot booking form dot set value so this is the api and it takes so if you see this the api so it says values and it says key and value right so remember this key so key is the form control name which we have and then this is values and then you can pass some other values which we'll see which we don't want to see right now but yeah so here you can pass the default values let's say it's coming from back and right so second date right now it will fail but let's see and let's call this after our form is created so this is where we will call this this red uh get booking data inside ngoninet remember so i am just calling it after our okay sorry wrong place so we need to call it after our form is created inside ng on in it so here our form is created and then we are calling get booking data now let's cut and see so we have all these default values right available here because we provided all the remember we provide all the values but here you see yeah that's fine we don't have uh yeah we have an error here so must apply a value for form control at index 0 this is what i wanted to show you uh but let me just do one thing let me just remove any of the property see this error must supply a value for control with name checkout date and why so the thing is whenever we use set value property or set a value api it expects us to pass all the values for all the control which it has keep this in mind set value we need to pass the value for each and every control patch value it makes it little bit loose so in patch value you can you are allowed to skip some of the controls so now you can see we don't have the error anymore and everything works right so if i just provide guest name it will work and we already have this value which is provided or set using the patch value method so this is the difference otherwise there is no difference between set value and patch value set value makes little bit strict that you you have to go ahead and pass every uh value for each and every control patch value makes it little bit flexible so i don't have to pass everything form api also allows us to listen to the form value changes in real time so how it is possible so you can use a value changes property which is a stream remember we have already discussed board stream so which is a stream and which looks for any changes which is happening in real time on your form so let's go ahead and see how we can actually utilize this api so here after my form is done we can actually uh use booking form dot value changes as this is a stream we are subscribing to it and it will give us the data in real time let's see so console.log data and let's remove this and enter the value so you can see as soon as i enter a value it is actually giving me the data mobile number and now we have this mobile number available so it will be called for each key press remember so if i enter 5 now let's enter 0 0 0 right so for each and every value which is getting changed you can capture that value in real time using value changes but it isn't it an overhead i mean why should i need i need to know the value changes which is happening in real time but remember it means in case i have any validation or custom validation it will be triggered for each key press sometime it becomes a little bit it can give you performance issues sometime in case you we have a small form doesn't matter but in case you have a lot of controls and every control has some validation which is getting triggered it may make your forms little bit slower let me tell you angular is really fast so probably you will never get to see this issue but just just in case so how we can avoid it so let me introduce you to another property which exists on your form controls which lets you control the behavior how your form values will be changed so right now values get changed on each key press that's a default behavior to change the current behavior you can do something like this so here we have this validators.required validator.email right so here we can change this to validators so we will say okay this is a value and there is a property called up dated on once again form control let me say see where we have used form control so we can add control yeah so uh we have validators and update on sorry not updated on so update on move this and let's update on blur and we need to change this to an object so i prefer using new form control rather than this but yeah it's okay we will do update on this is okay this is okay and this is done and we haven't this as an extra let's see uh then we can pass you can remove this and yeah let me just format so here with this we are passing an object which has two values update on and then we have validators so now for email and let's add it for some other control as well let's add it for mobile number so i can just do something like this i can alright so i'm saying this is this will be updated on blurry so blur is an event which will be called once you move out of the control so let's see let's remove this let's enter mobile number so you can see no values is being captured in real time so as soon as i press the keys it's not happening press the tab or move out of this control you will see the values being changed for others it will be same i mean we have not changed the behavior for entire form can we do that yes we can you can also pass this value here as the last option after your form is created and you can pass the same properties so you can say update [Music] update on blur and then in case you have some validations which we will use you can do that so let's test it now let's enter booking amount and you can see it is not getting called as soon as i move out of this particular control it is getting called so this is the for template driven form this is how you can be uh change the behavior uh based on uh based on how your user interact so there are three values which it has so you have blur change and submit change is by default submit is really useful in case you don't have any errors or any validations or you want to show the validations once your form is submitted so you can move to submit so in that case let's try to understand how it impacts right so for change let's say you have one of 10 controls where i average users enter five keys so 10 into 50 times your change even it will be called in case we move on to blur it is number of controls right so if you have five controls and uh sorry ten controls and let it be any any your users enters any a number of times or any number of values only 10 times your changes will be called on the control value changes submit one events you might be wondering i mean is it possible to control uh the same for template treatment forms yes it is i just wanted to wait till this time to let you know that okay this is possible for template driven forms as well and to do that we will go to rooms add here so we can use ng model options here where you can pass the properties so you can say update and you can say okay this will be plus so this is how you can control it for your uh template driven forms so uh remember ng model options and you can see here so it has three properties it has name standalone and update on so update on uh is referring to these three values which is change blur and submit so you can set it for um or set it to anything you like yeah so this is how you can control uh so this is how you can listen to the control value changes and this is how you can also control how you want to listen to those changes so this uh this is it from value changes now we can talk about a few arrangements operators which we can combine with value changes and we will discuss about few map operators which exist in rxjs and we'll try to understand each one of them because that's really useful in case you are working with rxjs in some big project so let's go ahead and do that to the thing is now we need to connect to a real-time api and what we will do is we will use the uh jsonplaceholder api which we used in past because we want to post this data and in jsonplaceholder actually you can post anything you like so let's not json video json placeholder and we will use post api and let's see so we can call slash post and that's it so here let's go ahead and create a booking service first i'm going to send you gs and booking service and we'll use our http service and we also need to register should be module so let's do that that should be declined module and let's save this and here we will use the http service studio p client and we will say uh book room which is which has booking data so right now i don't we will not create the interface so let's do it as any which we should not but yeah i mean this is anyways uh dummy apis right so we can say this dot svp.post and we will replace this with placeholder jsonplaceholder slash posts and we'll pass this booking data here and let's remove the subscribe and let's return whatever we get and next we will inject this particular method where is this component so it's a private room booking service or just call it as booking service and we will do it here so we'll set this dot booking service dot book room and we'll subscribe to the changes so let's say this is data and we will listen and we'll remove this reset as of now because we want to see different scenarios so this is one place and this is on submit right so i'll just go console.log data which will be using in some time but let's go ahead and control some update this right now and so to see the example of how this uh map operator works different map operator works we will be calling our submit method here let's see so i'll say this dot config our booking service dot book room and we'll pass the data here so you can see actually what we are doing is we are subscribing or um okay so what we are doing here is we are subscribing uh the book room method within subscription which is not a good practice but we want to actually see the different be different behavior which we have while using the map operator so this is not the way we are going to use it so how we are supposed to do that so here uh let's rewrite this and we will be using it uh doing it via the map operators so we can do this dot booking form dot value changes dot pipe and we will be using the different map operators so let's start with merge map and in merge map we will say okay this is data and then we will be uh calling this dot book room let's comment this out and let's see the behavior right now and let's comment let's remove this and let's go to the network tab because it will give us clear idea how the merge map operator works so remember we have right now um the form will be sub uh like value changes will be called when we move out of the control because we have sent said uh this updated on blur so let's remove that this as well and say uh rather than blur i will go back to update on [Music] okay so now as uh we have moved on with the default behavior which is change let's see how it behaves so network amount and okay see what's wrong here okay we have not subscribed so let's do that and let's subscribe to this data and we'll just do console dot log it let's see now because as we discussed i mean of course we need to subscribe it otherwise nothing will be called so let's remove this network tab and let's enter the guest name and you can see post requests being made in parallel so you can see it doesn't care so now trying to understand different merge merge operators so first is merge map so in this case merge map does not care about the sequence so it will try to post the data or you can say subscribe to the stream as soon as the data is provided sequence does not matter much more let's move on to the other operator so we have mergement which says okay i don't care about the sequence as soon as i get the data or a stream is as a stream is emitted i will just go ahead and pass this stream to whoever has subscribed now next which we will use switch map let's see how switch my behaves clear network tab yes can you see something uh which is different so let me just explain this behavior now so you can see there are a lot of requests which are being cancelled what what is happening here so in case of this switch map switch map will wait sorry a switch map will cancel any existing request if it receives a new data so let's say if you care about that whoever has subscribed to your stream should get the latest data only and should previous data or previous stream which is raised should be cancelled you switch map operator is the way to go now let's talk about the last one which is exhaust map let's enter you can see i entered multiple characters exhaust map cares about the sequence so it says until unless the previous request is not completed i will not subscribe to any latest changes so it takes its time to complete the previous one so you can see it has uh so here you will see uh the data let's talk about request header response and right so you have your data available here so it says okay until unless the previous request is not completed i'm not going to call anything else so this this api is i think it was never called but you can see here so this api started here it says 204 okay so these are two apis which are called you can see the first api request and you will be able to see the values requested a response editor payload where you have all the data so we entered the guest name and then it waited until unless this request was completed to make the second request so you can see the rest of the values actually went into second request so in case you care that okay the previous request which you made should be completed before i can make a new request this exhaust map is your operator which you are looking at so we discussed about three map operators which are really useful as i said you don't have to use all the operators like more than hundred operators which exist you have to remember uh um list10 operators which we have already used in this particular uh uh in this particular course and if you use uh all these operators if you master all these operators it's more than enough and once you move uh or once you get more scenarios you can actually explore more operators but you don't have to start like learning hundred operators on day one now we will talk about how to write custom validation for reactive forms so we will learn how we can add validation for control and we will also see how we can add validation for form level which is a little bit interesting because you may get this issue and i'll talk about few scenarios where actually this is useful but before we do that let me just start before we do that uh remember last time we got some issue and we had to disable bootstrap so what i have done is we have just added this we have actually enabled this input which seems to fix the issue where both angular material and the bootstrap seems to work so if you see uh this is the form and this is the table right so it both works we'll also do one more thing we will do a little bit clean up because we if you see i mean on all the pages we have lot of junk data for example this which we use just to just to uh show you right how the data looks like so let's go ahead and clear those first and then we'll move ahead so i'll just i'll just keep it here it's not like i'm going to remove it so you can always refer uh these values and gone and let's do one more thing let's clear this as well uh we'll just keep the table that's it so this is our rooms component so let's get rid of this let's remove this let's remove those and let's click keep this and we will use btn between success let's remove sorry we'll keep roams list the reason being okay and will disable those buttons too let's see room is missing following property rooms list okay and looks a little bit better right i mean now we don't have a lot of junk uh data which is available here right now and let's comment this one too i'm just doing it because you should know that what are the changes which we have done and that's it so now we can click on book room and this is the book room component which is available here so what we will do is let's go ahead and add few custom decorators are sorry not because sorry uh let's go ahead and add some custom validations to this reactive form and let's see what are the different ways in which we can do that so let's start with a simple validator where what we will do is we will validate a control let's say example guess name same same scenario which we'll take remember in uh we wrote a custom validator where we said okay in case there's a test in name uh go ahead and reject this particular value so it should show the validation that okay the name is invalid same we'll do it for guest so we'll add a validation but using the custom sorry reactive well i mean so we'll add a validation where we'll say okay in case this name contains value as test we will just give a validation error how to do that so i generally try to follow the same approach which is uh followed by validators class so let's go back to the booking and looking component and remember we have already used some validation right so we have added the built-in validation right now which is which uses this validators.requirevalidators.email if you see the implementation of validators class it's a class with some static methods so we'll try to follow the same approach and to do that let's go ahead and add a folder we'll call it as uh valley directors and let's create a class so [Music] let's see ng generate um if it has a class uh i'm using uh this is okay let me just show uh talk about this as well i have added a extension for called nx console which lets you do that so um i'll just say this class name is custom valley dater and project name is fine this is the folder where i want to do it and that's it run and we have this class created and here we will add some static methods so let's add some validators we will be adding all the validators in this particular file so i'll say this is a validate value date name and so let's talk about this now so we have a validate validate name function and it takes a parameter called abstract control so what is this abstract control is so abstract control is base class for everything from group form control form array so it's a base class so it knows it has all the information which your all form control form group can have and you can get the value by using so control dot value so this this will give you uh the value uh which which which is entered into the control right so let's try to validate name so first thing first thing which we'll do is i'll say const value is equals to control dot value as a string because uh if you see the value is actually type of enemy and i need some uh as we know that we know that okay this name is going to be string so we are type casting it as a string and we'll say if value dot includes test and it's the same so if remember we can return an object in case there is an error so i can i can say validate uh not this one i can say return in valid name truth and if this is not the scenario return null so once you return null it means there are no validation error and let's see how to apply this validator now so we can go to our component and we want to apply this to name so let's see where the name is this as well and you can add your validator in this list of array so you can say okay this is custom validator dot validate name and let's go ahead and see save this and here let's go to the name the guest name right so we will enable this to see the list of errors which we have and let's go ahead and say login let's select the room and here we are and let's enter a name which has like test so you can see invalid name troop so uh now this is this is the simple validator which we also wrote for uh template-driven forms so where we are just checking if this particular text exists in this particular control just go ahead and give this in validation message so now the next validator which we will write is something where we we can pass some value so it's like let's see here right so you have mean length and we wanted to pass how much the length should be so we will try to write a similar validator and what we will do is let's say in case we want to restrict the special characters in guest name i mean of course it's not possible guest name should not have contained special characters but in case someone enters it right or let's say mobile number so in case someone enters anything apart from plus what's that oh i and let's let's not take that scenario but because it's it should be number i mean you can go ahead and directly use the pattern uh so it doesn't make sense but yeah let's see uh guest name let's take guest link and what we want to do is we want to pass uh some characters which should not be allowed so it's it happens right so perfect scenario for your passwords let's say you have a password control and you want to uh you don't want to allow some specific uh special characters and you want to re write the custom validator for that so what we can do is let's write one and say this is static validate special cat right so we are saying okay uh let's see so we are saying okay uh this value but you might be wondering right now it seems similar to this so what we are missing so let me just show you what we are missing so rather than passing the substrate control here this will change we will return control like this and here we will and we we'll pass a character here so it's okay this is character which is type of string and we will check for this character if this character is available okay so let's see what we are doing so rather actually passing uh the object directly we are returning the function so it's a function inside a function right so this is the main function which will take the parameter and then it will return a function which will return either invalid special character or return null and to use this there is only small syntax change if you see so rather than passing this control here we are just we just moved it inside here so let's try to use this and we'll apply it on the same guest name you can say custom validator dot validate special care let's uh say uh we are not supposed to use stuff okay so we pass start and if it so if this uh if someone enters a star into this particular guest name it will be invalid name so let's enter to do that so we are entering the right name i mean a valid name but we entered a star so it says okay this is the invalid special character so you should not use star so this is how you can do that you can of course implement your own whatever you want to pass i mean so whatever character you want to pass now third scenario which we will talk about is perform so where this type of validation is sorry where this valid type of validation will source so let's say you have two controls right which you want to validate for example password confirm password here also we have an example we have the second date and checkout date right now i can just go ahead and say that my check-in date is 20th and checkout date is 10th which is not possible right so what in case we want to write a validator which validates this which validates okay this check-in date cannot be greater than checkout date right so let's try to write a validator for this how we can do it let's go back to our validator class so let's say this is static uh we'll say validate date but rather than actually passing abstract control right now i know that this is this is a form group and here we will get the values for both so we'll say okay give me the control call checking date and why this is keeping an issue ah okay so uh we i'm saying give me the value of checking date and check out it let's verify the names i mean because this this object should object name should match so we have check in date check out date days capital in both the cases yeah looks fine but let's put the logic to actually calculate the date so i'll say this is new i'm just typecasting it to date and this is new date and we'll take difference between two dates okay first we need the timing uh check-in date check out it let me just type cast it to any right now so we can see the stiffness is less than equals to zero i'll say this is invalid date and otherwise let's return let's verify this logic right so what we will do is we will just do a console.log for all the values to see if this is what we are expecting div days and div time and let's use it so what we have done is we wrote a validate date function which takes form group and we are checking uh getting the two values checking date and checkout date from this and then we are calculating the difference let's go ahead and apply this on booking component.ts and what i want to do is i want to call this particular method once my update on value is blur and i want to call validators and which is custom validator dot validate date okay let's inspect and we'll add a breakpoint so we can see what is the value which we are getting right now so i can say here also to search a file you can let me show you some shortcut as well so you can press ctrl p ctrl p on your keyboard and then you can just start entering the file name so i need customvalidator.ts and let's add some validation sorry breakpoints here let's choose chicken date which is already there let's choose checkout date and let's see so we have checking date as this monday feb 20 2020 and then we have checkout date which is right now jan 18th let's say the difference 708 days and if div days is less than equal to zero then invalid otherwise valid so right now the form is valid let's provide a date so this is 18th right so let's select our check-in date after january so let's see now so we have check-in date checkout date and then dip days should be my minus right now so okay somehow it is 21. how come checking date minus checkout date okay let's try to select 10th so jan 10th jan 18th because we are doing absolute that's the that's why it is okay probably something wrong let's see okay so we were right i think this uh it is happening because of this math dot absolute let's go ahead and remove this math dot absolute because it is it is returning as positive value and in case we need the diff in minus we should let's try this out and it's disabled and run it and let's enable uh now let's provide our date so we'll just select 2020 jan 18th so uh right now okay this is not a number that's that's okay and let's select a previous date and dave days is 18th and 10th okay so it should be checkout date minus checking date if i'm not wrong let's let's try this out so if i put this date on 26th i think we should now get a minus value yeah so yeah so we just need to now change the position so i can say check out date minus second date and we are true so now we have added a validator which validates to date right and this is something which you can also take and apply to password and confirm password so let's supply jan 10th and if i try to check out early and let's apply uh give all the values valid values mobile number let's let's see just want to give the valid values so our required values right so even though we have provided all the valid values for required fields there is still a problem with the form validation because the date condition is not satisfied we cannot check in sorry check out early so let's go ahead and see this first so here i can apply let me just close others so you can right click here and say close others booking form dot invalid and we will do one thing so right now it's it's really hard to figure out right where the problem is because uh we are saying okay this date does not match but we are not displaying any errors so it will be really confusing for our users to figure out the actual error so what we can do of course we can add a control level validation so let's do that let's try to see how we can apply this to a control level uh i mean how we can actually apply this error to control level uh property right now uh this error is actually available on form it's not available on the control so what we will do is we will add here so we can do something like this so we already have access to the control so if you see this is uh control checking date and checkout date so here we can add something like this get dot set error and we can save [Music] in validate true and of course it can be null so just put it here and now this error will be added to your control let's go ahead and try to figure out if it's true so we will go to checkout date checking date checkout dave this is our checkout date and we will use the same approach to print the years booking date checkout date here it is so we'll take check out date dot errors check out date and let's see let's see if this particular control is applied to the uh checkout date or not so [Music] let's select a date 2020 jan and i'll say 18th and checkout date is 10th so you can see it has a invalid date error which is applied to the control right now so this is how you can actually also show meaningful messages to your end user so they know okay what we are doing wrong now let's go ahead and print fill in all the valid properties and let's try to submit this form and dnc and looks like there is one more validation error which is not satisfied which one okay which which property is that guest name and here it is so now this book room is valid we submitted it let's see and this is your guest email data which is available here ids101 mobile and so remember right now we are actually sending this data to our dummy api right so which we which we wrote uh and which we uh took it from jsonplaceholder so we are just sending this data back that's it and this is it so uh this is how you can add custom validator to your reactive form we covered all the scenarios all the scenarios which we can think of and which is useful in case you are writing the validators for your application so ah this is it from the custom validator part let's go ahead and uh talk about one route guards which we had left we actually have two left uh we will come to resolve but let's see let's talk about candy activate guard sorry so candy activate guard is something where we are saying that okay now you have entered the route but can you exit the route so we are trying to see if user our user is actually uh authorized to exit the uh route right so here example can be let's say you entered into theater but can you exit the theater i mean probably you need some authentication to exit so you are locked until unless let's say move finishes or you have interval so to generate or to have a real-time scenario here what we will do is we will create we already have a booking form so what we'll do is in case there is some information or let's say our form is in dirty state it means as a user i came and i made some changes into my form and if i try to exit we should display some message let's say saying you are not authorized to actually or you have some pending changes you can display a pop-up saying you have some pending changes do you really want to accept some kind of message right so we will be trying to generate the same scenario so let's see with candy activate the fun thing is you can do it for a routed component so if you see our booking is actually one of the routed component which is available here so i'll just change the path a little bit okay i'll make it as uh booking slash room id so we are booking for a specific room okay and here on rooms we had a route so if you see uh we said okay this should redirect to booking component and it's it's another booking component right so actually we never did anything here so what we'll do is we'll remove this okay so we removed this particular route we have booking slash or room id let's go back to the rooms list component here and here we will say redirect to booking slash room number let's verify this change and then we'll proceed and to do that we have to log in let's see and let's click on book room so we are here booking slash one right so we are getting the book uh room id for which we want to book so this is first we are here next step we will try to get this id here with this room id let's go back to our booking ts and how we can get that data so by using activated route we have seen that we'll say this is private and this is route activated route and we can uh do something like this here so we can say once room id and we can say okay from param just get me the room id and now i can pass this room id here as we are inside the ngo unit we don't need to do this dot room id let's verify this in this behavior click on this and we have this two and this two but you might be wondering okay that was the default one let's try to use it for three okay it's still two let's see what is wrong here room id this is a reset i think uh get booking data yeah remember we hardcoded this get booking data where is this function here i'll remove this because we don't want this default value for room id so it's empty room id and let's go back to rooms let's login again let's click on room okay so now this value is not available let's see why so we can debug let's go to src app okay and booking component and this is the line number so let's see what's wrong here click and f10 to my d is okay param id it says it's room id available but params.get room okay high capital okay cool so the code was correct only problem is the uppercase and lowercase so let's fix that and we will say okay this is room type remember the key should match let's refresh this page now and let's see and now we have the id okay great let's move okay i'll probably close this and [Music] open it again and let's click on this and works right so we have room id3 and now we are looking for a specific room so this is the second step so first we fix the route second we are sick we are saying okay we are we wanted to book it for specific room we are here and now we want to add the card to make sure that in case there are some unsaved changes on this form we should send a message we should show a message to the user that okay there are some unsafe changes so let's see if we can use some material control to do that so i think material has something for us material angular material so we can use this let's see yeah we can use this matte dialog to show and dialogue saying you have someone say unsave changes but let's do it later first let's add a card here we will create and i'll say this is ng g g and this is booking guard and what we need is we just need can deactivate and that's it so you can see in can deactivate we are getting one extra parameter so we have something known as component so this is the routed component so we will pass this booking component as one of the parameter here which is unknown and same here so let's go ahead and see what we can achieve using this so now we can put and check so i can say in case this component dot the property which is booking form dot if it is dirty so if it is ready so go ahead and so yeah so it's if it is dirty we should not allow the user to exit if it is pristine we should allow user to exit so i'll just go ahead and save pristine and let's verify uh by applying this card so we will apply this can deactivate to the smoking guard this and pass the booking out again it's an array so you can pass multiple let's verify this functionality so far and then we'll add the dialog so we have this let's try to click somewhere else we are not able to redirect right so you can see i cannot um let's try again with login you might be wondering okay probably because the state has reset we are not able to but let's log in and see right so we have three let's enter something let's try to move and we are not able to do it let's reset this form so i'll refresh so it's in pristine state let's try to move so let's see we are able to redirect this is it so we it means our guard is working perfectly fine let's put the dialog now [Music] so here let's see some example open dialog okay cancel let's see the code and open dialog we can pass some example dialog here or let's uh not do this i think there is another control which where we can just directly pass the message uh there is that divider date picker chips let me just go to the default page i think there are there should be slider buttons okay uh no we are not looking for chips we are looking for you know progress bar elephants okay stripper tabs toolbar duty okay let's see okay this is not let's see there should be a way to hmm let's and pass some data okay so we will we'll be using this one we'll be using dialog to uh show that okay uh we'll show the message that okay you have someone save changes this is what we are going to do here now let's go back to the booking card and here uh let's use import the api image dialog module and let's go to the example so it says okay you have to pass an component so let's create a component [Music] okay we can use snapper okay this this will be uh the easiest one so snack bar is something where you can display a message like this so let's say here right so we can display a message it's a simple api and then dialog because we don't need to create a component but we will add this try to use dialog module if you can if you want to try this out and here uh in the thing is you can just inject a snake mat snake bar into your service so let's do that we'll do a constructor and then inject the snag bar and here we can do before we return this message right so we will say if component is pristine return this else what we are going to do is we are going to return false anyways but we will open this dot snack bar dot from template open we can open and then we can say okay you have unsaved changes and that's it let's verify this one click so admin admin and click on booking room and let's do this and try to move okay let's see what's wrong huh so circular dependency for booking guard okay so how the how is that a circular dependency book module it says booking guard is no provider for matt's name bar okay let's see let's see the api so in case we want to we have to provide something so um so we had to actually just add matte snack snack bar module into app module as well somehow to uh make sure that it works so now let's go ahead and verify this functionality so you can see let me just refresh this page so we uh go to login admin and then be logged in click on book room go to employee works go back book employee now let's make this form dirty let's try to move and you can see you have some unsafe changes so we are not able to redirect but we are also displaying this message that you have someone save changes and you can just discard complete the form and then once your form is in pristine state you can just go ahead and redirect or move from this particular url so this is how you can uh use can deactivate card this was a real time example which i can give you sorry this was a real-time example which i can give you you can find more uh more real-time use cases in your application as you go but you don't have to probably you will not get the scenario i mean once you start the application so yeah this is it so now next what we are going to do is we are going to discuss about how you can use form control you might might be wondering okay we already saw form group and we also saw form control now why we are talking about form control again so we will see that example and we will apply that with a pipe so we will write our own custom pipe let's talk about the scenario where we are going to use it so on this page right so if you see this on on this page what we will do is we will add a text box here which will be like kind of filter where we can enter the room price and it will filter the values based on that roon price okay so let's see how we can do that so this is our rooms page let's go to the rooms component here so if you remember this values is actually coming from this particular service so we are calling room service and from here we are getting this all these values so what we will do is we will apply a filter something like this so let's let's let's try that out let's do uh let's write the code first so we are going to use reactive form here so we will add react deforms module first and let's create a form sorry form control because we just need a single control and to do that what we will do is we will create we'll call it as a search or price filter sorry which is is type of or which is equals to new form control remember this we are seeing new form control and we are passing default value as 0 let's render this here we will say this is div and we will provide our input input type which will be number class which will say is form control place holder we will say this is twice and here as we don't have form group we will be using something known as form form control is equals to the price filter and let's do this so we will just put price filter here to see if whatever value we enter is getting applied or not so let's go ahead and test that first and then we'll apply the filter so we'll save this is admin and so uh you can see this value right this value is getting changed so as i have right now it's a control right so control will have all the properties pricing dirty all this all those properties what we are interested about is value so values getting changed that's it the first step which we have done is okay we are able to apply or sorry we are able to get the values from this particular control step undone now the next step which you want to do is we want to apply this value filter to this rooms list how we should do that so here what we will do is we will create another property called price filter so let's see how we can do that rooms list html and we will apply uh we'll pass that value here somewhere with a new pipe which will create so let's go ahead and create that pipe and so we can say ntg type and we'll see this is filter so i'm creating kind of a filter but remember never do that no never do that on a real-time application always go ahead and uh do filter sorting at your back end i mean at your api level just don't do it at your front end i mean this is just an example and now uh we can say okay this pipe will have multiple parameters so first parameter is something which will have the list of rooms so i'll say this is rooms and which will be of type let's see the type here room list right so we will say okay this is the array and the second parameter would be price which is type of number let's and here we will return we'll say okay this rooms drop filter where price is less than this price or sorry where rooms dot price is so if you enter 5000 so yeah it looks correct and then we can apply this filter pipe so let's see this rooms list we'll do one thing i'll just avoid this change direction strategy on push and then we can apply this pipe filter and we have to pass a value so let's pass 1000 right now no more phones let's see unknown was not assigning let's see let's fix this issue so it says uh unknown okay so here if you remember we are actually passing unknown here so we will say okay this will return an array we can remove this an empty array in case uh this that is this is not satisfied so let's go ahead and test this because it should work i mean we have we are passing hard coding this values right so let's go ahead and see our ui and we will say admin admin and you can see it only displays the values which is less than thousand less than equal to thousand right now we are not passing this value so let's go ahead and now fix that so this value will be our filter so we will take another input and we'll say this is price which is equal to 0 and we will use this price here and let's verify again so and okay so there is nothing which is less than zero so i think our filter logic is wrong we should do this right so i want to filter everything which is above this particular value so yeah this looks correct and now let's pass this filter which is now a new person not filter but price which is the new property which we have added is equals to price filter dot value let's see and let's enter um 500 so you can see now i can see only values which is greater than 500 let's enter 5000 now we can see only values which is greater than 5000 so which is 15 there is only one record which is available so this is how you can combine form control with a filter so this is a real-time example which i can which i can give you and you can utilize that in case of you want to just create some filters on your page you don't want to have a form basically so in that case just utilize the form control that's it you don't need to create a form group so this is the flexibility which reactive forms gives you and then we apply it we added it with a pipe custom pipe where we wrote a logic that whatever price we provide it will filter out all the room first price which is greater than this price which is provided so this is it from reactive forms and let's move on now let's go ahead and talk about the last card which we had left and we said okay this card is little bit different from the existing cards we saw that okay can activate can deactivate connect with child and can load cards are related to the routes but what about resolve guard and why it was not available when we tried to create a guard and it was not available in the in the list of options which we had so this one card is actually related to data featuring okay let me okay just uh i said data fetching but it's not data featuring its state of prefetching so might be wondering what is data prefetching generally what we do is whenever we want to display some records or display some data what we do we go to the component and then we make a service call to get the data that's what we generally do but what in case let's say we have a requirement that okay this user should not go to this particular view until unless the data is available in case something goes wrong there is no point actually redirecting the user to that particular view so this is this is a scenario where resolve guard can help you so resolve card can help you preface the data let me show you an example we need some records for this and we will be using uh we'll let's do one thing we'll create another component and we need some data so we don't have some dummy data available right now we need like more than 1000 records or let's see how many records this json placeholder got so it has comments which has like 500 records okay let's uh see let's uh use this comments api and to do that uh what we will be doing is we will be creating another component and let's do so it's a nggm and this is post comment i'll use iphone fill route is equals to comment and hyphen iphone routing and i want to use um app module i want to register this in app module so this will be lazy loaded of course and we got this component and now what we will do is we will create a service for this and let's verify the routing so we have our route available here and okay everything is good now let's go ahead and create the service ngcs and then this is command service we are going to need a certificate module here as we are going to make an http call in service let's inject so it's private um http srdp inclined and we'll call get comments this dot http dot get and written this is the api so we'll use this done and let's uh do one thing i'll just put this and let's create a table and it's the class is table and then we will have pr where we will put our headers so we will have bunch of ph and say this is let command talk comments this is the property which we are going to use and then we will use some tds okay let's see how many properties we got post id id name 1345 so let's go ahead and create an interface i'll call this as comment dot ts and let's create export interface we have id which was of type number post id which is the gain type of number is capital players we have name which is string we have email which is again string and then we have a body we go which is again string let's go to service and say okay this http get should return the comment array and this comment remember uh there is uh somehow there is an comment api which exists inside inside typescript itself so let's name it as comments just to avoid this issue which i faced in one of my project actually and let's go to component and here we will use the service so say private let's close this and we'll see this is command service this type of comment service and then we can just say this is comments is equals to this dot command service dot get comments okay so now we can use it here with the sync pipe and let's use comment dot id post id and your name [Music] so okay command of name and then we have email and let's not put body here and let's apply the same id post id name image it says okay so we are missing 5 async and let's format this format and let's add a navigation here and we will not apply any [Music] guard and this is comment let's go ahead and see so we have comments that will be here and it says this is not available comment is not available so okay i made a spelling mistake somehow comment okay so let's see one thing let's see a behavior here so you can see when i click on comments there is an empty page and then the data is getting loaded so what in case uh i don't want to show an empty page so this is also one scenario where you can actually use it that okay when my view is loaded it should be loaded with data not without data but remember keep one thing in your mind you can use resolve card with a use case where your data will not change after it is loaded okay so now let's try to fix this issue by using the resolve card so we will create a new folder here we'll call it as guard let's go to integrate terminal lcng and this is comment comment that so let's and you can see i don't have any option so i have to at least choose one so we'll use can activate but we'll remove it and then let's remove this one and we need resolve card so this is i think this is the one yep this will resolve that and we have to define what kind of data this resolve guard will written so we will say okay this will return the commands array and here let's there's an extra okay so you can see right now what i'm saying is it will uh return a value of observable of type comments or promise of comments or comments so we are saying this resolve interfaces which is coming from here okay so resolve of type t so which type of data you want to return so comments of array and this is it now let's go ahead and apply this command card and see how it is so you can see i'm just calling the same command service which which we were calling from the component earlier so let's go and apply this guard first so how we can do that we can go to the card and we can say resolve now resolve the way a result works is it is a key value player so you can say comments this is the key and then you can say okay this is the comment resolver right it's not available comments coming back okay great so now this will be returning the comments data and let's see how we can actually access this so this is the key remember this and to access this data now we can go to component and here let's use what do you think which service will be used here remember when we talked spoke about router we spoke about a service called activated route we said anything related to data you should use the activated route service so here we will of course use the same and first try to see if this data is available so we'll what we'll do is activated route dot sign we'll say data dot subscribe and let's see what we get here and we comment this out or let's let let it be as of now let's see and we can see this comment component.ts line number 19 which is actually giving us sorry which is also giving us this key so you can see it has a key comments and then it has 500 records so let's try to access data dot um we can do something like this and let's see so now we will get the 500 records rather than that which just missed the console.log and here it is so we have all the 500 records available and we have this data prefaced it's not like we are actually navigating to the route and then getting the data no we are prefetching the data so here we can also do something like this let's try to use it as a stream so i can say this comments stream is this dot activated route dot data and then we can use pipe of data and here we can do by map data and we can use plug to get the comments let's see let's try this out let's see if this is the correct use case okay no we can apply lock here uh sorry this is not the way to use it so we can just use this plug operator here and then we can define what key want we want to access this is it so we can say okay this command is we are getting this comment from activated route data dot pipe and then we are plugging this particular key from the stream and we can remove this now we don't need it i was just writing it to show you in case you want to subscribe how you can do how you can actually do that let's see the stream now so rather than comments i'll be using comment and see if it works so let's save this and save this okay now let's go ahead and move from comments oh sorry move from any other route to comments you can see there is some delay but actually data is getting loaded without any blank page so because the data is already prefaced it just need to render it generally the approach with tag is we take is we landed on the ui and now you have to uh wait until your ng on init lifecycle event will be called and then it will go ahead and call your service and load the data now now we what we are doing is we are just using the activated route data to pick uh sorry plug this uh data which is already provided into your route so we already added this uh into our resolve card so we are saying okay before you migrate or sorry before you navigate to this route go ahead and preface this data so this data should be available before my user will navigate to this so this is another use case for using the prefetch or you can say resolve card so i am keeping the same uh both the ways feel free to use whatever fits your scenario i have also this code available in case you don't think that this is something which you need generally we should not use this let me show you a better way to do this you can actually do uh something like this you can provide the type so you can say okay this is this will be my comment comments which will be type of comments array something this should work no load matches this call when so create anonymous function comments and comments is type of this area let's see if it works somehow hmm strange this is the best way we can do this let me just remove it so we can say data and here you can type cast here so you can actually create a common create a property comments which is type of comments array is equals to this and then you can say that this dot in comments is equals to data of like this so this is how you can uh do it and you will get the typing after this so in case these are three ways here we call the method to get the data after we landed on the view this is using the resolve method and we use the stream we uh we have not used uh the subscribe method we have not manually subscribed which we did here but uh choose when which fits your scenario now in this video we are going to talk about how you can do global error handling we have seen like how we can do error handling for http service but what in case we want to do it at global level okay so let's go ahead and try that out so angular provides you a class that's a class sorry so angle provides you a service which which is already available called error and handler so what you can do is you can actually extend that particular service and you can provide your own info your own implementation so here let's uh go ahead and do that so i'll create a class here called error handler service parties and we'll create this class export class and we'll call it as global error handler which extends error handler and now uh you can just call the handle error method so let's see this must have an overwrite okay let's see so we have error handler implements error handler and handle error which does something so i'm just wondering what's wrong here that should be okay you looks correct to me okay sorry implements implements error handler and then it's it's a actually you can see it's a class but you can also implement it because it provides a single method which is just like a method definition not the implementation so i can just go ahead and implement it and then we are just doing console.log right now now to handle this to register this you can of course go ahead and see how we can do it so you have to go ahead and add it into providers like this so let's copy this and let's go to our app module because we want to actually handle the uh error at global level and we'll say okay this is provide error handler and then this is our global error handler class now we need to introduce some error let's do that let's verify if it is working fine right now so okay nothing uh no issue so what we will do is we will go to this comment abn command service and then we will just make some mistake here right so this api does not exist and it will throw an exception now you can see uh there is an error handler line number of five which says http error response and this says okay this api does not exist right or the status code is 404 it means it is not able to go ahead and catch this particular api or go ahead and access this particular api so it says again it does not exist and we are able to handle this exception at global level by using our new global error handler class and you can do more right i mean it's not uh in our example we are just using the console.log but you can actually send it to your backend or you can actually send it to your whatever apis which you have and you can save this error somewhere so whenever you are revisiting your like error logs to see if there is some problem which your users are facing because there are some edge cases right we generally miss out so just go ahead and add error vendor class and lock all the errors until unless your application becomes stable and then you can remove it let's talk a little bit about testing of course when whenever you are working on some application you need to also write unit test cases that's the developer's job but there are many types of testing which is uh which is done so we have unit test cases or unit testing which is written by developers and then you also have something known as integration test or end-to-end test which is generally done by the testers so the tools are a little bit different so for example for end-to-end test tests you can use something known as cypress or other tools like playwright which is also available you can use and a lot of older applications used to have a protector so protector is discontinued now angular team decided to drop maintaining it so they are not maintaining it anymore and they have also dropped this dropped creating an end-to-end application with angular cli so before before angular 12 they uh whenever used to create a new application there used to be a end to end application as well which used to be created but now uh it is not created anymore so you have to go ahead and add any uh compatible uh end-to-end uh test suit to your application so cyprus is preferred which is used by many large organization it is open source project uh there are some paid features which is like dashboard which is which which probably you you will not need that much but yeah it's an open source project so you can go ahead and use it for free so let's see what we are going to cover here so we are going to talk about unit test that's it so we will introduce you to tests and then we'll talk talk about how you can write your first test and then we'll see how we can test a component and how we can test test a service let's go ahead and do that so angular by default gives the setup for unit test so remember this karma converges and we spoke with we said while going through the project structure we said this is the file which will be used by uh your task runner that's it but we never discussed more more about it so angular uses karma plus jasmine to write the test case so you can actually do ng test you can run this command and it will run all the test file which is available here which ends with dot spec dot ds of course right now if we execute it you will get a lot of errors so let's see i mean so it's starting the chrome browser this is how it looks like it does there are many type of reports uh reporter which we have available right now this is html reporter which uses chrome and it it will open everything in chrome and it will show you how many tests are getting passed how many tests are getting failed so let's go ahead and see that so it says incomplete no specs found somehow because there are some errors right so you can see there are some errors which is making this so let's see what this error is it says expected to argument right now what we will do is we will just remove this and let's see so at least we get the uh feel right how your ui looks like once you run the ng test and how your report looks like sorry testing is a whole topic all together so it says there are because there are different tools which are available so we are not going to go into that much detail here it will just we will introduce you to the testing and let's see probably there are no errors you can see right now so uh there it says there is 32 specs which out of which 21 is failed so you can see spec list the green ones zoom in so this green ones is successful and this red ones of course it shows that this this is a failure so this is how you can figure out okay which test is getting passed which can which test is getting failed uh so here in command service should be created so you can see okay it's not uh it is giving me error right now so you can just click on the test as well to see what's going wrong so it says okay it says no provider for stripping line so while testing we are not providing the http line module so that's the problem so we can fix it so let's see let's try to do that so here in command service uh service dot spec we can do [Music] test configure testing module and then we can say import http client testing module so there is something known as stupid client skippy testing what's that called html let's say the p client module let's reclined okay let's try to pass the stripy client module right now and see because this http client of course exists inside http line module so [Music] okay uh let's see specialist okay it's green failed and let's see failures and now you can see there are 20 failures so earlier there was 21 failures so probably let's go to spec list and see comment so you can see comment service created passed but uh i mean this is just to show you how the report looks like and how you can see uh what is the error you can just click on this line and it will tell you uh that okay this is the actual error and why this particular test is getting fit so let's go ahead and try to write a little bit of test cases for a component and a service see how we can write a sample test case using jasmine so the idea is to give you uh sorry so uh the thing is uh it will give you a little bit idea how you can actually write adjustment test cases and let's create a test file so i'll say this is test test.spec.ds so here uh generally what you do is you write a describe block where you will describe that what you are trying to test and to do this i'll create a file as well so i'll say this is test dot ds so let's see if there is another test.dcs so i'll say this is test service dot ds so the first thing is you will write that okay let's let's add a class which is uh calculator class and then we will have some functions which will say one is add and then we have subtract and multiply okay so there's a few uh few implementations which we have inside this calculator class let's go ahead and see how we can test it so the first thing is uh we need to import what we are trying to test so it's okay we are trying to test service so it's okay this is describe and we'll say this is test service and we'll see okay this is where we are writing the code so your tests should look like a story so we are saying okay we want to test this so in describe we are saying okay we are trying to test this particular service and then you will write the steps what you are trying to achieve so first is of course i will say uh should add two numbers right so this is one of the tasks or one of the test case uh for our particular this particular service so i can say okay const uh service is equal to new uh test service which really take it uh sorry import it from here what was the name not calculated sorry so we created a new calculator service and then we can do something like this so we can say expect so uh we have to write our expectation that what this test case should do so we are saying that okay whenever we run this test case just go ahead and add this to number and the answer should be 4 that's our expectation so similarly i can just do it for uh should subtract two numbers and then we can say if this is subtract and we'll say answer should be zero let's go ahead and run this so we can just to insert test and it will go ahead and run all the test case because this file matches the format which is dot spec.ts it will open it in browser so a lot of projects also use something known as uh just for testing which is little bit faster but right now it's not compatible with angular 13 that's one of the issues okay so uh we are saying we are seeing now there are 34 specs and let's go to spec list and let's see calculator one i'm sorry we said test service right yeah so you can see uh these two these two tests are getting passed so should add two numbers and should subtract two numbers it's getting past so this is how you actually will be writing the test start with describe block and then you will be writing the story that okay what now this this should do so it should add two numbers it should subtract two numbers so this is a simple test case and see how we can test our service so here let's try to do a service let's try to test this shared data service right so we already have a spec file available here and there is something known as configure testing module which we don't need right now but let's see what we can achieve using this so here i will say it should emit the message basically what we are going to do here is we are going to test the uh send message right so if you remember in shared data service we said send message which actually emits a new message right so i'm sorry so if it emits a new message so we will check this so here we will do this dot our service dot set message okay and once we do this the expectation is we should get a hello message in this stream so we will do something uh simple right now so we can say message dot subscribe and then we can say uh expect this message to be hello so sorry this will be service dot message stream and then we'll say message to be hello and now let's stop this let's uh disconnect the test we will also see something uh ng test hyphen iphone code coverage let me tell you about this as well while testing you can also test how much code is being covered by your test cases so there is no hard rule i would say i mean it depends upon how much code you think is worth testing sometime of course we set a hard target that we should go for hundred percent test for uh coverage or we can uh go to eighty percent code coverage i think it's it's a false uh alarm i would say most of the time you may get a false alarm the thing is you should concentrate on what logic is worth testing i mean do you think this this should be tested if it is not i think it's okay to skip so here let's see what is wrong i think there is an extra bracket here so message then it should close here and then we have the outer one and closed let's see so it's completed now tests are running and you can see the one which we are looking at is shared let's go to the spec list first shared so you can see shared uh data service and it says this was successfully so should i meet the message it means uh what our expectation was that whenever we send uh this set message whenever we call this set message it should go ahead and message whoever has subscribed to the message should get this hello message and that's what we tested and it worked so here you can see uh the code coverage is of course right now pretty bad so we have statements which is covered at 43 lines 38 of 9 38.9 of lines are covered and then we have functions which is like 34 percent covered so uh now let's go ahead and see an example of a component so we already have some components which is getting failed right so let's see rooms component should create now let's see how we can actually fix this particular test case and you can click on error and see what is the error so it says okay the thing is you need to provide an injection token okay let's see how we can work with this there is a few there are few errors so let's see let's go to what is this not room service but which component was this room it was at rooms component let's let's go back i think it was rooms component so let's go back to rooms component prospector keys okay so we have this it says okay we we have not provided the config service because remember uh you have to go ahead and provide all the services which your component is using right now so it uses room service it uses config services you it uses shared service so we can uh go to our site we can go to this and here we can add providers so we can say okay providers parry and let's add all those providers which are being used so we have room service we have config service and we have a shared data service and let's import each one of these and let's see now uh let's see what's the error we are getting right now it says also activated route is not provided and http client will see some uh the errors will be gone one by one so it means we need uh to import imports that should be client module let's see http i think that was testing as well and institute we can use the testing module rather than actually original module we can say okay i want to use the testing model not the original one so once this is done let's see let's refresh so now we will see less number of errors here so it says now let's talk let's see http error it's gone right so we don't have http any any more then it says okay uh this one from comment component we don't need this so let's go to the special list look for rooms component and let's go to should create and see the errors so now the problem is it says room service which uses injection token so we have to provide the injection token now let's see what how we can do that so rooms service and this is the injection token which is being used so we can actually mock this we can do something like this here you can say okay provide app service config and then you can we can say use uh value so let's see uh what this app config is so it has api endpoint so we can go back to our component.spec.ts and say okay this is atm point is this dummy value so you can provide any dummy value you want to and now let's see okay it's getting disconnected let's rerun and let's go to specialist rooms component should create and let's see the error now so we have now the thing is config service also uses an injection token so let's see so config service it uses injection token call config token let's provide the same so we can say provide cloud config token and we need the value so right title so here we can go back let's and say use value title as booms and let's see so now this this injection token should be also resolved so you can pass uh values like this you can also re replace these services as well so you can create an empty service let me show you that example as well let's refresh this it says it disconnected again let's go to special list rooms rooms component should create and let's see what is the error now so it says cannot set properties of modified undefined setting title so now it is trying to call the methods which is available here so you can see it says uh here so these are the methods which are being called so it is trying to now execute all those methods so here it says uh after viewing it line number ta130 so line number 130 is this so it says header component or title rooms which is a valid failure if you remember what we did is we have removed header component from here so it doesn't exist anymore so uh it was a valid test case uh valid failure which got uh captured so we can actually do something like this right so we can actually uh enable this header component so we we can put one header component and see if it works right so i can say hi and b header and you will find now another error being replaced being rendered so let's refresh so as soon as you are like earlier we were getting some error because the services which we provided were not correct so now we provide all the services all everything and it is trying to execute engion in it and it is trying to execute ng after minute so it will start calling all the life cycle looks so looks like there is some issue with this anyway so we can do one thing as we know that this is not the scenario this won't be available anyways we'll uh save i mean replace this and comment this out and let's see [Music] so now we should get a different error ah okay it's completed so you can see should create so now your component is initialized now you can go ahead and check for the methods right so we can add another let's say uh method so let's for example uh let's try the toggle so i'll say it should toggle so uh so uh what we need to do is we have to say component.toggle and expect what should we expect so we should expect hide rooms right so we can say uh here we can set component dot hide rooms is equals to false and once we call toggle we should it should become true that's what the expectation is so let's go ahead and see if it works again build the connection that's why uh people use just and or we we can also use the reporter as your command prompt that's also fine and let's see so now rooms has our rooms should toggle right so you can see should toggle is also completed it means now this test is also passed so similarly you can call different methods and see if they are getting completed or not in services as well we uh saw an example how we can work with observables so you can just call the method and see if this observable is limited or not so this is just a basic understanding of testing because as i mentioned testing is a huge topic in itself and there are some courses which are i mean we can probably go ahead and create another course covering all those scenarios so this is it from this particular course this video we will see how we can deploy our application on netlife so there are many providers many cloud providers where you can actually go ahead and deploy your front-end application network being one it's it's really simple to use so let's go ahead and see how we can do that right so first thing which we need to do is we need to push this code on github we have not done that let's do it so i'll go ahead and create an account uh sorry my repository first thing which you have to do is you have to create your account that's the that's the step one and now i can go to my repositories and i can create a new repository from here and here i am going to name it as hotel in mandatory let me just zoom in yeah so hotel inventory this is the uh and let's see i'll keep everything as as it is let's see if we have hmm right now i have made this repository public but we'll move it to private as the netlify will charge me for deploying and repository which is private so i'll just use it try public right now and once this is done i need to actually push the existing code base so i'll do this here get this as a branch this is final code and you get i'll commit this changes git commit and we'll say first let's add all make sure that all files are added and then we'll add a commit and we will say this is final code and let's move back to the master okay so this somehow this change was left add means changes and let's move back to the main branch and as we already have the code available so our repository available on my local machine we'll be using this one this command so let's add then we need to do is push actually this command was to change the branch name domain but we already were using the branch name as main and now let's push this code and look let's refresh this and then right so we have this this repository available now let's go back to netly file sorry let's go to netlife if i login i already have my account available in case you don't have it just go ahead and create one so just login and in package.json i am going to add a command which will be build rod so to build the broad uh plot bundle we have already seen the command so we we use ng uh build hyphen c is equals to production so this will this command will be used so i'll just add get add get comment add pod build okay somehow this file was not staged properly okay so let's see if latest changes are available and this okay i have to push okay so i pushed i have post all the changes here and now it should be available so add plot build the list commit is available here let's go to the nutley file and you we can what we can do is we can go ahead and say uh add new site import an existing project from github and it will uh i'm already authorized and let's uh find this repository hotel inventory select and the branch to deploy is main okay and uh it says okay if you if you are using uh something else i mean some if you're using monorepo this base directory is useful right now it's not i mean we are just uh having a single project then we need to provide this plot build command here so i'll say npm run build plot and publish directory is something which you can get from angular.json so if you go to the production sorry build and here configuration production you will find what is that some somehow it is not available here but generally when you create a production build the file goes to dst slash your application name so this tst slash your hotel inventory amp so this is where my files will be available so i want to publish this directory and let's click on deploy site and now your deployment has started and let's see it is building you can see the log here so it will start deploying the application it says it is using node version 16 which is now available and somehow i already have back i also have package log file available i can remove this if i want to we will remove it and and uh nutify also has this great functionality where you can actually play a game until unless your code is getting deployed right so this is like card match you can play let's see uh it is taking some time if it doesn't work we can actually yeah it's done so build command from netlify app and vm run build prod which it is actually generating the bundle right now and once this is done you will be able to see uh a link okay so it says preview deploy and you can see uh this is the master code right i mean um we have we don't have anything available in our master code so this is how it looks like i mean this is the default page which we had so now all our changes are actually in this file final code folder so what we can do is we can actually raise a pr so i'll just do one thing i'll just push uh this branch so you can see it says okay you have to push this particular branch i mean so i'm pushing this branch right now let's go to the github and let's raise a pull request so it goes to the final code to the fro to main let's create a pull request and the only thing which we have to do is now it will fail so you can see uh right now i we did nothing so whenever you will raise a pull request it will auto deploy it will auto deploy your changes on netlife so this is what csd means right so you you should be able to do continuous integration and deployment so you don't have to wait till your code is merged into the main branch to see the latest changes here we are saying okay as soon as you open the pull request it will deploy it will merge and give your temporary url so right now it is failing because we don't have the publish uh sorry build command which is available here so if you remember we made that change in master so we can actually go ahead and add that particular command here and then we'll push it again to make it work and then we'll see how your temporary url looks like right so i will say this is move it and build command okay somehow get ad is not working right now so let's space changes from here and let's push and as soon as we do push let's go back to our branch and it will try to build this code again right so it started the build again and once this is done it will you can see this is the depaul deploy preview processing so it will give you a link once you click on this details link it will open the page it will open the application which will be having a temporary url so netlify gives a random generated url to every application so this is our random generated url for this application but our preview branches will have a different url so let's see it will take few minutes uh sorry few seconds to complete this deployment and once done we can see this code is available i mean the latest changes are available here i mean once you merge it right so once we merge the code back to the main we'll not merge this pr so you can go ahead and see the difference between your master code main code which was just uh like a startup or you can say start template using angular cli and the final changes so you can see click on deploy url and this is this is the application which we created right so we have this booking form available we have this login which was available earlier right so admin and we can to admin and you can see you have your view available here you can just click on send message which is available here rooms where this message is available also so you can see deploy preview condensing so this is your preview branch so this is how you can actually set up your ci cd for using netlify uh go ahead and deploy your application netlife is free for open source i mean right now i'm just going to make this as private so uh you you you can go ahead and get the access to this code later on so in this video we will see how you can also use utilize github action to build your application so remember we are just talking about building because we have already have cicd available with your netlife so github actions is something which can help you to automate the stuff so here we what we are going to automate is on every pull request a new build should be or your build should be done right so here we can just go to node.js we will use node.js to build our application and it gives you a nice template so it says okay which branch to on push to this branch build on pull request go ahead and build which server to use so we are saying okay we will be using ubuntu which node version to use we will be using only 16 because we don't want to utilize much of resources remember for open source net uh this kit of actions is free i i have the pro license so it it is uh it gives me some 3000 minutes if i am not wrong 3000 minutes worth of build time for free and then we have this uses so it uses some github actions to check out my code so checkout is some term which we use in github in git to copy the code and make our own version so we check out this code and then we use this node version which is 16 and then we are caching the npm version and here we are running npm ci npm ci is something which will install all the node packages so we already have let's go and check if we have this package lock file available yes it is available so we can use npmci if and package lock is not available you can just do npm install and then we are saying that in case the build command is available just go ahead and build so we do have uh the build command which is built broad so we'll copy this command and we'll post it put it here and team run build and we'll remove if 500 present because we know that it is available and we will call it as uh build dot primal and we'll start a commit we will create a new branch because we want to see how github actions triggers the changes right and we'll say okay added github action to build and let's propose a new file and let's create a pull request on pull request it will start building your code right so here let's go ahead and see now you can see there is a new step which is added here node.js ci and you can click on details to see what is happening here so you uh it started a new job starting a new job and it is setting up your job and it is executing all the step which you mentioned in that one yml file so you don't have to become like a devops devops expert to do this git of action make it really easy for us so we just need to choose right template and then give the right commands to execute or to build your code base you can also run your tests on ci so you if if you want to run the test you can just say npm run test and that will run your test on your ci so you you can verify all the changes before you go ahead and merge your code remember netlife is good it will uh it will check if your build is completed and it will give you deploy url but what in case we want to do more we want to run the tests we want to run the end to end tests so github actions can help you with those you can just run go ahead and run that con give those commands in sequence and it will run all those right now it is building the project it is saying okay uh i am running this command ng build type and c equals to production if this is completed i mean it will just complete the step and then it will give us green signal that your code is good too much that's it so this is how you can use github actions as well very useful in case you are like working on your site project and you want to make sure that everything goes fine before you merge changes or you are collaborating on a project with someone else and of course every time you cannot go ahead and verify everything right so in case you have tests you can actually go ahead and verify it using github actions and it's free for open source projects so go ahead and utilize it