Transcript for:
Angular की मूलभूत जानकारी और स्थापना

good morning good afternoon good evening from  whichever location you are watching this video   you are seeing this video so what are  we doing today today we are going to go   and learn angular fundamentals  angular basics in flat two hours   now i know that there are many youtubers  out there you know who will say that i will   make you an angular pro in two hours one  hours and some even claim like 10 minutes   no comments no no comments about it right i've  been a trainer in angular for past 10 years i   started from angular 1 and now i'm doing the  new version of angular i have taught a lot of   corporates you know been a speaker in angular  conferences and also handled big projects in   angular and one thing i can say you need to  go slow you need to go steady to become a pro   so one thousand one percent guarantee that if you  go through these two hours the fundamentals the   basics of angular you should be able to do it you  should be able to create a ui you should be able   to do the bindings you should be able to show  the data in the grid and so on right so this is   completely a beginner's tutorials and i'm going to  go very step by step you can see out there right   on my screen um you can see the syllabus right  so i have divided this syllabus into 10 parts   right so i divided the syllabus into 10 parts  right from basics you know what is angular i   have started with the definition of angular after  that i've gone through gone to the installations   then we have going through typescript and then  we'll be creating an angular project we'll be   understanding the angular file structure will  be understanding the fundamentals you know like   decorators components modules directives and so  on we'll be looking at the whole flow of angular   bindings expressions interpolation and different  types of binding right so go through this two   hours and i can one thousand one percent guarantee  that you are inside angular right and remember   that it's a two hours of tutorial definitely you  will have a lot of problems right so when you get   any problem you know what you have to do is down  below in the youtube comments you should go right   over there and just put the time stamp you know  saying that okay this is the time stamp where i'm   facing a problem and i will try to answer to all  the youtube comments right please when you put a   youtube comment especially about a problem make  it very detailed you know saying that i got this   error here i got this error at this time stamp  and so on right here's a small request to create   you know such kind of content it takes lot of  efforts think about it you know for this two   hours you know we have to do so much video editing  we have to have the right source code at place the   trainer has to sit you know and and make sure that  everything works right we have we have to have the   notes at place and so on right so if you really  think you know that someone should benefit out   there someone should learn angular please go ahead  and share this video on your linkedin must be   on your twitter on your facebook right and here it  is if you go and if you share this videos anywhere   on your linkedin on your twitter anywhere right  i will give you this angular interview question   ebook for free right so go ahead share this video  and send us a mail at correspondent questman.com   and i'll make sure that you get this ebook for  free you know this angular interview question   ebook actually covers more than 50 plus questions  with detailed answers and so on please remember   that one is that you should be able to do the  practicals right another one is that you should   be able to clear interviews why do we learn  new technologies we should get a job right   we should get some money isn't it so one is that  you should learn step by step at the same time you   should be ready for interviews you should practice  interview questions so if you go down below in   the youtube comments out there i have pinned  a youtube comment you know where we have one   hour of angular interview question video please  go through that it will help you to prepare for   angular as well right so do step by step as well  as do interview questions go in a balanced way   so go ahead share this video get this ebook happy  learning happy job hunting let us get started   so let us first start with the definition of  angular what is angular who made angular and   so on right so you can see here i am here on the  official website of angular which is angular dot   io so angular dot io is the official website of  angular so when you say that you want to know   anything about angular which is officially  out there then this is the website right   first thing angular is created by google it is  maintained by google it is funded by google that   is the first part right and you can see here  i am on this official website and there is   a small note out here what is angular so let  us read this let us try to understand it and   let us try to get you know what exactly is  angular right so you can see here it says   that angular is a development platform so it's  a development platform to build applications   and specifically the ui part of the application  so angular is a development platform   and when you say it's a platform that means that  it will provide a very well structured framework   it should provide you know libraries it should  provide tool sets and so on right and that's   what exactly this development platform has first  thing you can see it has a very well structured   framework here a component based framework  by which you can go and create wonderful uh   ui applications right second one you know it has  very in a lot of ready-made libraries for example   if you want to go uh if you want to move from  one ui to another ui it has routing if you want   to go and create the ui part of it it has forms  if you want to go and make an http call it has   you know http client and so on so a lot of  libraries out there by which you can expedite   your development and the last one it has developer  tools in order to build to test and a lot of other   things right so basically angular is a development  platform and it is built on typescript we are   going to go and learn typescript in the coming  one or you know in the coming 20 to 30 minutes   so angular is a development platform which is  built on typescript and this development platform   helps you to helps you to create the ui part of  the application remember that angular's main focus   is to create the ui part of the application and  it has three things first one it has a very nice   well-structured framework which is actually called  as a component based framework second it has   a lot of reusable libraries right so it has  a lot of reusable libraries by which you can   go and make http calls by which you can go and do  validations by which you can go and do routing and   the last one is it has awesome developer tools out  there you know to build to test and so on right   so that's what angular is it is a platform which  has a structured framework a reusable library   and well-defined tool sets now in case if you have  not understood the definition in case uh if you   have understood the definition partially don't  worry about it later on you know we are going to   go and revisit this definition uh by by looking at  the code so at that time that would be more clear   visibly right um now before we start uh you know  the installation of angular and so on i want to   make a very important statement and this statement  especially you know people who are new to angular   they have to get this statement you know because  i've been teaching angular for past now almost   10 years 2010 angular 1 was launched and after  some years angular 2 family the new family was   launched right one of the things you know which  i've learned about angular when i whenever i   have t whenever i have been teaching students  is that angular is very easy to learn it is   very easy to understand but it is very tough to  start okay it is very tough to start learning so   it is actually very easy to learn but it is very  tough to start learning you know in other words   the prerequisite of angular's angular the previous  requisite of angular is something you know which   sometimes you know makes a developer  really tired or they lose stamina right   so uh the first thing you know what in the  prerequisite is you know the installation   right the installation is not that complex you  know we need node uh we need vs code we need   angular cli we need typescript you know but you  can get you know some of those exceptions and some   of those exceptions are so weird and so bad right  you know you can if some of the versions don't   match right it can really lead to a problem so  the first part is the installation the second is   you know we have to understand a node right and we  should be able to use npm very effectively right   so the second thing is that we have to understand  npm right we have to understand little bit of node   now remember that node we have to just understand  what is node but npm part the package.json part we   have to understand in detail right after this  you know we have to understand uh something   called as typescript you know because the complete  angular is based on typescript so this is again   uh you know one more prerequisite you should  learn and at least the basic of typescript   uh how to compile typescript you know what  exactly is typescript you have to understand   and then you know you have to uh understand  the angular cli so basically how to use   angular cli how to install it and so on  and after that you can start learning   right so what i mean to say is you  know the angular is easy to learn but   it is little bit i'm not say tough you know  but definitely you know there is a long way you   know to start learning right so these are the  prerequisites so what we'll do is we'll first   in the first one hour right so let us let us keep  a target at least for the coming two hours so in   the first one hour we will do the prerequisite we  will understand uh you know all these things and   then in the next one hour we will do the learning  right so this coming two hours is divided into two   parts the first one is the prerequisite right the  learning of the prerequisite the installations and   so on and then the next part is we will start  learning right so if you look at the syllabus   so here's the syllabus i have for the coming two  hours you know this is for the coming two hours   my syllabus we have already done with what  is angular we have looked into prerequisite   so the first 25 minutes you know we'll spend a  spend on installation then after that you know   we'll try to understand node and npm that will  take 15 minutes then we will look into typescript   you know that will take more 15 minutes then we  will go and install angular cli we will look into   how to create a project that will take 15 minutes  and then after that we start understanding the   project of angular we start getting into important  basic concepts like decorator components modules   and directives and then we will look into angular  bootstrapping flow we will look into bindings   we will look into different type of bindings we  will create a simple simple uh project out there   you know where we will do table binding logic and  so on so this coming two hours you know i have   divided this complete lecture into ten sections in  that you know the first fifty percent of the ten   sections will go into the angular prerequisite  right and the next fifty percent you know we   will learn right and let me assure you let  me assure you one thousand and one percent   that if you do this two hours religiously  religiously right you should be inside angular   and what you can do is you know to complete the  first two hours what you can do is you can go   really slow so you can say that okay today i will  just do the installation 25 minutes just do the   installation go back relax have tea coffee have  fun go for a movie enjoy your family then after   two three days come back and say okay let's do  the next 15 minutes and then let's do the next 15   minutes and then do the next 15 minutes go slow  go nice don't lose stamina the next 15 minutes   and you should be able to achieve your goal right  so with all that right let us get started with the   next part the installation of angular so the first  step is to install vs code so go ahead and google   vs code and you will get this first link out here  visual studio code you can click on this link   and you can see this is a visual studio code  or code out here and you can see the small link   out here download for windows table build so  go ahead and it will start downloading right   now very important note out here until  our until vs code gets downloaded there   is something called as vs code and there  is something called as visual studio right   so you can see there is this visual studio out  here now you shouldn't be installing visual studio   visual studio is very good you know for shisha  for mvc definitely it can do angular as well   but for now you should be installing vs code  and they all belong to the same family they   all come from microsoft right but this is what  our choice should be vs code right so please   make a note of that vs code is different and  visual studio is different so vs code is this   right so once you once you download vs code you  will get such kind of a setup so if you go out   here you will get a setup like this now remember  that at this moment my machine is of 64 bit so i   have 64 bit in case your machine is not 64-bit  then the appropriate download should be made   and if you have any problem with the  installations you can please send us   a mail at questpond questpond.com i'm more than  happy to help you so i'm going to go and run this   i accept now remember that vs code installation  is damn simple you have to just press next next   next it's it's just a very smooth installation  so next uh do you want to create a desktop icon   yes why not add to path variable so all  that keep it checked say next and install now once the installation finishes right so you  can see your installation finishes and you can see   that there is a small check  box out here saying launch   visual studio code now either you can  click on that check box or you can just   say finish right and you can go out here and  you can search if vs code has been installed   if vs code is installed you should get an icon  something like this you can see there is a   there is this app out here visual studio code  which has been installed now one very important   point whenever you are opening visual studio  code for coding right either angular or react or   anything right i would always advise you to open  visual studio code in admin mode right so always   run in admin mode so i'm going to go and say run  as an administrator this is a very important step   specifically for angular a lot of time you do  installations and for those installation you need   admin rights so i would suggest that run visual  studio code as administrator so i'm going to say   run as an administrator and there it is so that is  that you can see vs code is now running right so   uh first thing what you see you see something  called as get started out here you can just   just just close it right now let us go ahead  and create a folder so i'm going to go and open   a folder now remember in vs code you don't open  a project you don't open solution files you open   a folder right so all your source code is into  a folder so i'm going to go and create a folder   out here so very quickly in my d drive let me  create a folder out here saying learn angular and   whatever code we write right  we will be writing in this   folder out here right so i'm  going to go and select folder   now you can see there's a small box out there  it says do you trust the authors of the files in   this folder yes i trust right i trust and i'm sure  that you know there won't be any viruses or there   won't be any kind of code you know which will  harm my computer right yes i trust the authors   right and we can close this so you can see now at  the left hand side you have an explorer out here   with this learn angular and you can go and you  can create files in this folders out here right now in case you're new to vs code  you don't have to worry too much   whatever i'm doing in this demo just try to  follow that right so one is this explorer out   here you can go and you can create a file here for  example you can go and you can create a file here   let's say index.html right and you can say control  plus in case if you want to make the fonts bigger   and you can write html code out here so you  can see it does have some basic intelligence   out here so if you say doc that is a code snippet  as well it just gives you the code snippet right   so basically in vs code you open a folder and  then you right click you create files you create   folders right if you right click and if you  say reveal in file explorer you will see that   that index.html file is out here right so one is  you have to understand how to open a folder in vs   code how to create files right and the second  important thing which you should be knowing is   how to use terminals so if you go here  there is something called as a terminal   so just click on new terminal what is the terminal  a terminal is nothing but it is the command prompt   you know from which you can fire commands you  know so for example in this command prompt i   can go and i can write commands like directory  and i can see my files i can go and fire my node   commands and so on right so two important things  in vs code one is open a folder create files   and run the terminal and you should be able to  run the commands now the next step is to install   node.js so go and google node.js and you will  come to this first link out here nodejs.org   and then you will see that there is  something written about node.js over here   at this moment don't worry about what is  node.js what is npm what is typescript you know   just focus on the installation part  once the installation is right you   know later on i'll be explaining all  of these concepts very much in depth   now if you see out here you will find that there  are two downloads there are two links out here   one is recommended for most users and  the another one is the latest feature   right now if you are working on live projects if  you are working on serious projects right i would   suggest to use this one which is recommended for  most users why because this is a stable version   it has been time tested bugs have been removed  and so on but when you're learning something   if you're doing something kind of a hobby project  you know if you want to test things test new   features right then you can go and install the  latest feature but please note that there is   a probability that it can have bugs right now  because we are learning and i just want to make   sure that this course stays for a little bit of  long time right uh what we'll do is you know let   us go ahead and install the latest current latest  feature right so i'm going to go and install this   18.0.0 now please note at this moment the version  is 18.0.0 later on it can be 20 or whatever right   but i think you know whatever i'm teaching here  at this moment in angular for angular right those   things won't change as such right and if you  think that something have changed right please   send us a mail at quespondquest1.com i'm more  than happy to uh tell you how to overcome how   to go about those new things right uh those new  uh new changes so i'm gonna go and download this   so if you go and download it you will see that  it's uh it's downloading down right down below   and let us go and do the installation again the  installation of node.js is pretty straightforward   you know that is nothing you don't have to do  anything big out here it is just a smooth next   next next screen so i'm going to say next i accept  next you can change the directory if you wish but   at this moment i will just keep it c program  files node.js next just keep it as it is next   automatically install these tools like chocolaty  and so on chocolaty and so on no i don't want it   let's keep it let's keep it unchecked we say  next and install so there it goes and you   can see node.js has been successfully installed  great now let us go ahead and check that if our   node installation has been done properly or not so  i'm going to go and first search out here node so   i should be able to find this small app here  installed so i can just go and click on it   so it says here version 8.18.0.0 which is right  that's the version i had installed right uh   and the other thing which i would recommend  you to also check is go and run the command   prompt run the command prompt in admin mode  run vs code in admin mode remember that   i will not repeat this thing again but it  is the most important thing a lot of lot of   those issues of admin rights will get resolved if  you do this a lot of the issues of installation   can be overcome you know if you just say run this  admin so i'm going to say run as admin out here   and let us go and check you know the version  of node so i'll just say node hyphen v in case   you are not able to see this let me go and  make the fonts bigger a little bit larger   right so there it is uh it's not hang on  font let me get seven the 72 is too big   24 right so you can see here guys i hope it is  more clear now node hyphen v and just press enter ah sorry clear screen let me again say node hyphen  v so you can see here it is showing version 18.0.0   now also one of the other things you know what  we need with need for angular is npm node package   manager now this node package manager you know  gets installed with node so with node this npm   uh module gets installed right so let us go and  check you know if the npm mode is also installed   so that it so there it is you can see we also  have npm now you can see the version of npm is   different than node this is very important  so don't think that the npm and the node   version will be same because they are the same  software but they are different actually so node   is on zero point zero and your npm version is on  eight point six point zero right so good so that   this this actually confirms that your node has  been installed properly right the other thing   what you would like to do is we would like to go  to vs code and just check the node from vs code   as well right from the terminal so i'm going to  go and launch this terminal out here terminal new   terminal and let us check you know can we run  the node commands from here so i will say node   hyphen v now you can see here it's saying oh  like i don't understand node what happened you   know and so on the term node is not recognized  and this and this and this right now uh a couple   of things out here uh first thing if you see at  the right hand side now be very careful out here   it says powershell right it says powershell so  i would suggest that uh to not use powershell   but use a simple command right so i'm going  to go and delete this command prompt out here   and delete this terminal right and uh i would  like to uh switch to simple command prompt   right so you can see a simple command prompt so  now you can see there are two command prompts one   which is a powershell i will talk about powershell  later on but at this moment to make sure that node   is installed we don't need this powershell command  prompt we just need a simple cmd the cmd which   we ran from outside that's what we need right  so let us go and check out here node hyphen v   if it is running then it is good you can see  again it is showing me an exception saying   that no i don't recognize it right so that means  there is something else now what happened is you   know when i installed node my vs code was open  i repeat this and i did it on purpose actually   so when i installed node my vs code was open so  i'm going to go in and close this and restart my   vs code right so i'm going to go and restart my  vs code now remember again run as admin i'll not   repeat this again but i'm still repeating it you  know for the good of everyone so i'll just say run   as administrator and now let us see so you can see  there is cmd out here let us do a clear screen cls   clear screen and let us say node hyphen v and now  you can see our commands are running npm hyphen v   our commands are running right remember that you  can also run this through powershell but sometimes   you know for some reasons it does not run for  example now you know even the node commands will   run from powershell right but i would recommend  that that stick to cmd because powershell   is actually for something else right so  we'll talk about that later on but but   try to be on cmd rather than on powershell right  good you know so this confirms that our node is   installed our npm is working and it is working  in an integrated manner in other words we can   fire the node commands you know from vs code so uh  that confirms that our node installation our npm   installation and our vs code installation  is just perfect so we have now installed   vs code we have installed node we have  checked the version of node and npm   now it is time to install angular cli right  so i'm going to again clear screen out here   and let me do a control plus you know just to make  sure that you can see the clear screens clearly   so control plus to make the fonts bigger  control minus to make the font smaller vs code   right so let us go and install the cli so  we will say here npm install remember npm   is a part of node right hyphen g at the rate  angular front slash not backslash front slash   cli watch this command clearly watch this command  again npm install hyphen g at the rate angular   slash cli enter now remember that this takes  a little bit of time to install because   the size of the cli is a little bit big right  depending on your internet connection it can   take one minute to two minutes to five minutes as  well right so that it is it is getting installed   now if everything goes good right you should  not see any red signs out here so you can   see at this moment i'm seeing some warnings  but that is absolutely fine right i'm seeing   i'm not seeing any red signs i'm just seeing some  blue signs out here or maximum you know you can   say there are warnings right but i don't see any  red signs if you see a red sign then that's a   concern right so that's the you know so you can  see here it's saying added 196 packages audited   them as well and everything looks good right again  i'll clear screen out here now in order to go and   check you know if our cli has been installed we  will fire the command ng hyphen v ng this ng comes   from that angular in the word of angular we have  that ng so that's why you know they kept the same   they kept the cli name as ng the commands of the  cli is ng so we'll go and we'll say ng hyphen v   and let us check oh i'm sorry it is ng version  so sorry you know like node hyphen v npm hyphen v   right so i i i just got carried away so ng  version i'm so sorry ng version and we should see   here the version of our cli so you can see  here uh it says that your cli version is 13.3.4 your node version is 18.0.0 and your npm version  is 8.6.0 and it has installed you know some   angular semantics out here so uh that should be  okay so remember that this is the most important   part so just make sure that you have this version  of the cli you have this version of the node and   this version of the npm right now remember that  definitely in the coming months you know there are   going to be higher versions but you don't have  to worry whatever i'm recording at this moment   is very much true for the coming higher versions  as well in case if there is any changes i will   send an updated recording for it right so  that's that's those three versions out there   if they are all okay if you are able  to fire fire this ng version command   that means your angular cli has  installed properly right ng version   right and remember that you can use the up arrow  key so you can use the up arrow key and the down   arrow key to get the previous commands you know  which you have fired on vs code so you can see   here i'm getting all my previous commands you  know which i have fired in my vs code right so   up arrow key and the down arrow key will help you  to get the commands you know which are written   previously in the command prompt so now that we  have installed the node we have installed cli   it's now time to go and test if we can create our  sample angular application right so i'm going to   (For Angular 17 and above please use "ng new test --no-standalone" or else you will not see modules files.) you would be now prompted with couple of questions  out here don't worry about these questions when we   start learning angular i believe i will go through  each one of these options for now just press   enter enter and enter right if everything is  good out here if everything goes nice if you   don't get any errors you will see at the left  hand side a test folder has been created and   you should see such kind of a folder  structure test src right and you can   see down below it is showing installing  packages npm so let this complete this takes   uh quite a bit of time depending on what your  internet connection is right so at this moment   i have a decent internet connection so must be  it will take a minute for me but in case you are   having a little bit slow internet connection then  it can take a lot of time right so if everything   is good then this installing of the packages  everything works fine and you should see that   your command prompt or your console over here the  terminal over here should not show any red signs   so there it is it is installing and you can see  now everything has been installed successfully it   says packages installed successfully right so and  everything is green out here if you see anything   red out here that means there is a problem and  when you have a problem in case you know when   you have a problem what you have to do is when  you are actually interacting with us on the email   you have to first tell us what  is your node version right this is the first thing you will  tell us what is your note version   right and what is your cli version right  so you know this actually clarifies you   know a lot of things for us that why uh  your project is not getting created okay   because most most of the errors what you  will get out here is because you know   there is a mismatch between the node version and  the cli version which you are trying to install   okay so good now the project has ran right so  let us go and do a directory directory actually   shows us all the folders so we can see the folder  test out here the next thing is to run the final   command and run the angular application so you  will go and you will say change directory test   this is a very important step whatever project  name you have created you will say cd test   you will go inside that folder and you will  fire the command ng server ng serve what ng   serve command will do is it will actually go and  run this angular application and make sure that   your installation is complete so you can  see i've done an ng serve and it has made   the application live in this 4200 port now  please note that at this moment when i did   the ng surf command it was quite quick right but  depending on your configuration of your machine   or depending on your speed of  your machine it can take some time   right so so little bit of patience is needed  so i'm going to go and run google chrome   and let us go and paste this url out here http  localhost 4200 you can get this url from [Music]   this console out here in case not you can  type it out http localhost colon 4200 enter   and if you see your first angular application  running if you see the screen out here this is   this is the sign that your installation of your  angular is complete now couple of important things   to remember you definitely get errors right so  couple of important things to remember first thing   when you actually go and fire the commands from  the terminal make sure that you are on cmd you   are using cmd so basically when you actually  go and say new terminal right make sure that   you are adding a command prompt you are running  your ng commands through a command prompt and not   through a powershell if you are running through  powershell right if you are running through   powershell then you can get certain errors  like you know for example if i do ng new xyz   you can see that i'm getting  this error out here saying that see users share ng.ps1 cannot be loaded the file  is not digitally signed and so on and so on and   it's saying that please set your execution policy  right so in case you are you want to fire from   powershell remember what is powershell powershell  is nothing but it is a scripting language   you know which can be used by administrators to  automate tasks so for example let us say you want   to go and backup a file regularly every evening  you want to go and restart a computer right for so   the administrators can write powershell scripts  and they can run those scripts through the   powershell command so in case you know if you are  on powershell right and if you get those errors   you can see i am actually uh you know having a  stack overflow link out here the stack overflow   link is also there uh you know present in the  notes as well so over here right then couple of   things you can do is you can either go and remove  the ngu.ps1 from that roaming folder right or what   you can do is that you can run the powershell you  know through this elevated command so basically   you will actually go and the execution policy  of the powershell command you will actually uh   elevate it right so i'm going to go and do this  so i'll say clear screen and so you can see   here even the ng version any any commands of ng  don't work anymore right so i'm going to go and   paste here and run this once you run it right  now i should be able to get ng version let us see   so that it is it is working now right so in case  if you are getting this error out here the one   of the things what you can do is you can go and  you can run this command set execution policy   right or what you can do is you can go and  you can remove this ng one dot ps1 and you can   do an npm clear cache also if you want right uh  and that again probably can work so these are   the two solutions which you can implement you know  in case you are getting this error out here but i   would say the best is to run the command then the  through command prompt through the normal uh cmd   to avoid avoid these issues right but  in case you are running from powershell   just make sure that you are running the set  execution policy or you try the ng.ps1 delete   so let us summarize the installation first one  you have to go and you have to install node you   have to go and you have to install node right  second thing you will go and you will install   the cli so you will see npm  install angular cli npm install   hyphen g at the rate angular slash cli once this  is done you will go and you will do ng new test   you will go inside the test folder and  say ng run and once you do an ng run   right you should be able to see your angular  application if you see your angular application   running that means that your angular  installation is proper and complete   so let us first start with node.js let us try to  understand what exactly is node.js right so if you   go to nodejs.org you will see this one statement  out here the one slogan in which they have written   node.js is a javascript runtime built on chrome's  v8 javascript engine so we all know chrome browser   which comes from google right in that you know  we have a very strong compiler or you can say   interpreter which is the v8 javascript engine  right and this weird javascript engine you know it it is it is super fast you know why because  what it does is you know it basically takes   javascript and it generates byte code you know  from the syntax right and then this byte code is   compiled to machine code this is very important  this byte code is compiled to machine code   so think about it if javascript gets compiled  to machine code it can run super fast isn't it   okay now and that's why the engine's name is v8  remember this v8 is not version 8 but this v8 you   know signifies like a eight cylinder engine right  so we have like a two cylinder engine we have four   cylinder engines in automobiles and you know  here we are talking about eight cylinder engine   that means this is eight cylinder engine super  fast compiler which actually compiles the   javascript you know to machine code right and  uh just quickly out here you know if you see   all these statements you know uh by the va team  out here looks like you know they are fan of   automobiles so you can see the ignition generates  the byte code and then the turbo fan compiles this   byte code and this v8 you know which actually  uh is nothing but the super fast eight stroke   engine right out there okay so uh so that means  uh that the best compiler or the best interpreter   for javascript is with chrome right so what the  node.js team did is you know the node.js team   took this uh chrome v8 engine only the chrome v8  javascript engine and created a separate setup and   that's what the setup we have just installed  right so you can think about this node.js is   i'll not say exactly like a rapper but definitely  the heart of node.js is the v8 engine so the one   which we have downloaded in our computer right  during the installation process is nothing but   it is the super fast v8 javascript engine right  now uh the next question comes is then so what   will happen now right so we have installed it what  happens right that means that you know we can now   run javascript outside the browser because we have  the v8 engine or the javascript engine installed   in our computer and we have the best javascript  engine which is installed in our computer   which is in a form of node.js we can say so that  means we can run javascript outside the browser   we can go and we can create desktop applications  uh we can create server side applications and so   on right and one important point you know which i  want to stress out here is if you watch out there   when it comes to debugging javascript 99.99  developers i have seen use chrome to debug   javascript and one of the reasons you know why  they use chrome to debug javascript because it   because of this v8 javascript engine because  it is so so strong you know it can compile to   bytecode and so on right so if you see most of  the time developers actually swear by chrome you   know when it comes to debugging javascript they  go to the sources tab out here and uh you know   they click on this debug tab and they debug inside  chrome why because the v8 engine is very promising   right so uh let us go ahead and do a small uh  demo of node.js right uh so with that you know   we'll understand that how node.js helps you to run  javascript outside the browser so what we'll do is   in the same learn angular folder uh let us first  think go ahead and delete this two files what we   have here remember this was the test folder which  was created right so this was just to test that if   our installations are proper right and index.html  i had just created right so i'm going to go and   do a shift delete out here and i will just  delete this complete two folders out here and so let us go ahead and create a simple  javascript file here so we'll just say   test.js right and in this let us go ahead and  write some javascript code so i'll say here where   x is equal to 0 and control plus and i'll say  console.log and i'll just say show me x right   and we can just do an x plus plus right so now you  can see here i have this javascript code out here   uh you can see now the files got deleted you  can see how vs code strikes this index.html   indicating that this file is not available  right so i'm going to go and close it   left hand side everything is cleared right so here  it is i have this simple uh javascript file here   test.js and let us say we want to now go and run  this so in other words we want to run this without   opening the browser right so we can say here node  and we can say test.js and you can see out here it   has ran ran the code out there so it incremented  the x21 and you can see it is displaying in   the console console.log right right so now this  example you know looks very simple but you can you   can feel the power of javascript running offline  and once javascript can run outside the browser   you can create desktop applications you can create  server applications and so many other things   right now one a small question out here which i  want to ask to everyone if you know the answer   you can either go and send me a message privately  or either you can put down in the comment section   that basically why i did not use your  document.write why i did not use your alert   why did i use console.log right so if you  know the answer uh please go ahead and   send a message to me or if you want you can go  ahead and put down in the comment section as well   now node programming is a very  different big world altogether   and when you say you want to work with angular  you don't need node programming as such right   so we will not be doing node programming but when  you install node we get something called as npm   that is a node package manager so we need to  understand that very well npm you're going to   go and use day and night you know when you're  when you're doing angular right so what is npm   npm which stands for node package manager helps  you to install javascript package in your computer   so for example now let us say you want to go and  install jquery so what you can do is you can go   and say here npm install jquery so once you go and  you say npm install jquery in your command line   and you say enter it will go it will fetch jquery  from online and install it in your local machine   so you can see here at the left hand side it  has created a folder node underscore modules   and it has installed jquery in your machine now if  you don't have npm what you have to do you have to   go to online you have to go to jquery wherever  it is right get that jquery file and then you   can use it in your project right so let us say  i want to go and uh install let us say load ash   right so i can see a low dash and i'll say enter  it will go it will fetch online it will take up   the latest version of low dash and install it in  your node underscore modules folder you can see   this node underscore modules folder is a reserved  folder the name is n o d e underscore modules   all small letter right so you can see here it has  installed jquery as well as it has installed load   ash inside the folder now what you can do let  us say if you want to go and use jquery then you   can go to the disk folder and you can get your  jquery.js from here now remember that whenever   you're doing an npm install it actually brings the  whole github source code so you know the complete   source code of that open source it will it will  bring to your local machine so you can see it it   has fetched the whole jquery with not only the  source code this is the source code of jquery   but also the the compiled files the finally  compiled uh js as well right so now if you want to   use jquery for example in your project right you  will say index.html and so at this moment jquery   final compiled jquery is available here in the  dist folder jquery.js so as a developer you can   go and say script you can say src and then you can  just say dot dot slash uh node underscore modules   uh sorry dot slash node underscore modules and go  to jquery go to dist and take your jquery.js right   so this is these are your packages and this is  your source code right these are the packages   and this is your source code now you will  also find a file here called as package.json   right what is this package.json  file this package.json file has   the list of dependencies which you have installed  in your project folder so this is your project   folder now learn angular right this is your  project folder in case you want to directly   open the folder through vs code right click and  say reveal in file explorer so if you do that   you can see your folder opened out here right  click reveal in file explorer so inside this   project folder you know whatever dependencies  are installed in the node underscore modules   whatever packages are installed in the node  underscore module is present in the package.json   now what happens you know practically is that you  always check in into your source control in your   source control you will only check in the source  code your source code of the application and   package.json that's it you won't be checking in no  underscore modules you never check in java runtime   or dotnet runtime into your source control  right so you only check in the source control   the source code i'm sorry and the dependencies  so what happens now is let us say you go to a   new machine out there and you get latest the  source code and you get latest the package.json   file right and then you have to only go and say  npm install once you do an npm install it will   bring all these dependencies into node underscore  module so you can see here if i do an npm install   it will go package by package and bring these two  packages into your road underscore module right   so package.json has a list of dependencies of your  project folder the last important prerequisite   before we start learning angular is typescript  right so you can see here i have google typescript   and it actually lands up on this first page out  here and if i click on this typescript out here   it takes us to the typescript homepage or to the  typescript's official website typescriptlang.org   and if you see this one big slogan of  typescript which they have written out here is   typescript is nothing but it is javascript  so basically typescript is a language   uh and that language when it gets compiled or it  gets converted i will say rather or transpiled   it gets converted to javascript with strongly  type with syntax for types so typescript is a   strongly typed programming language that builds  on javascript okay so what does it mean let us let   us try to understand it so let us go out here now  when you look at javascript right javascript is a   loosely typed language right in other words you  know it does not care about the data types that   you can change the data type during the runtime  for example you can see this small test.js which   we had written previously so in line number  one when you say where x is equal to zero it   is a number right but you can see in line number  three when i say x is equal to some text out here   okay this becomes a string right so javascript  allows this javascript does not complain about   this means it will not it will in line number one  it will be a number x variable will be a number   and in line number three x will be a text  and javascript will not complain about it   you can just go and run test.js and it's all  okay so you can see here it has displayed x it   has not complained nothing right so javascript is  a is a dynamic language the data types can change   during the runtime right now definitely  you know dynamic languages have their own   positive points you know they have their own  strong points right but there is another group   of developers who believe in strongly typed  language so in strongly typed language once   you create a variable and you define a data type  you cannot change that data type right for example   here let us say if you know due to let's say that  in line number three if somebody says x plus plus   this can be problematic i mean like you can't  increment a text as such because this uh this   increment operator is mostly on numbers right  so now what happens out here is you know   you see you can you you get some you can get some  unwanted results like nan not a number right so   definitely one of the strong points of dynamic  language is that you can code faster you can   deliver faster it is dynamic it is like cool like  breeze right but at the same time you know the way   it is cool right if you don't pay attention  uh you can have bugs you can have unwanted   side effects so there is another group of thought  of people or thought of developers who say that no   we understand that dynamic languages are good  but we want it to be a strongly typed language   we want that the data type should be checked  you know right while we write the code and we   shouldn't be allowed to change this data type  this should actually throw up an exception   that's where actually typescript comes into  picture timestudio says that i will give this   strongly tightness to javascript so typescript  makes your javascript strongly typed right so now   let us see how to go and install typescript so if  you go out here you can see here either you can go   and you can play on the browser and another one  is you can use npm so on your computer via npm   we can go and we can install typescript so we can  say here npm install typescript right uh so let us   go ahead and install typescript so i'm going to go  to my local machine out here and say npm install type script right so there it is you can see  it has installed typescript   uh now you can see that it has installed  typescript in my local folder out here right   uh what i will do what i will do out here is uh i  would like to go and install typescript globally   so that you know i can just fire the commands  easily or else what i have to do now is   i have to go to the bin directory i have  to go and get this exe from here right   so uh let us go ahead and install typescript  globally so i'll just say install uh typescript uh typescript hyphen g hyphen g means global right  so with this what will happen is i can just fire   the typescript command right from here in the  command prompt or else i have to go inside this   folder and fire the commands right so now let us  see let us go and check the version of typescript   tsc hyphen v so that is you can see it  has installed the 4.6 version which is   the latest version so if you want to go and do  coding in typescript you have to go and create   a dot ts extension so we can go and we can  say learn one dot ts so you can see now this   is typescript with the dot ts extension so now i  can go and i can define a variable and as we said   that typescript is a strongly typed language i can  go and i can define its data type so you can see   i'm saying that this x1 is a number right so  when i say this x1 is a number uh and if i try   to give it a text so let's say in line number  two if i try to give it a text out here you can   see that there is a small red wriggle out here  and if you move your mouse on that red wiggle   it is saying that no this is not allowed x1 is  already a type number and you are trying to assign   a string and typescript is a strongly typed  language and it will not allow it so remember   typescript is javascript with syntax for  types so what does it mean that type should   be javascript so for example here now let  us say i go and i say x1 plus plus right   i can go and i can convert this typescript  to javascript so i can go here and say that   tsc remember that is a compiler and if you say  learn one dot ts so compile this ts right what   it does is it actually goes and creates a  learn one dot js so you can see that it has   it has i will not say it's compiled compiled means  basically uh to deal with assembly languages where   you compile to machine code i'll say that the  convert or transpile transpile is the right word   so it has taken this dot ts file out here and  transpile it to js so you can see it has made   a javascript out of it so remember that uh  this typescript is only during the coding   phase it is only for developers who love  strongly tightness you know strongly typed   a strongly typed kind of an environment for  them typescript is there right but at the end   of the day when you say you want to run inside  the browser it has to be javascript okay so   that's why you know this type should compiler  converts this ts into javascript so now this   sentence would make a lot of sense typescript  is javascript first point right and second   but it gives you that feeling of strong tightness  and with that you know uh you will have less bugs   with that you know you will you would feel  comfortable so especially people who are   coming from c plus plus and c sharp and java you  know where they feel that strongly tightness is   important to catch the bugs early to have any kind  to do not have any kind of unwanted side effects   for them typescript you know makes gives gives  like a cover on javascript and gives that   strongly typed feeling now if you look at the  definition of typescript again right there is   one more important word out here which says  that it gives you better tooling at any scale   so what does that scale mean scale means that you  know basically it increases the productivity of   the developer if you look at javascript right  javascript is a functional programming language   it is a functional language right and if you look  at look around right but devs who come from c plus   plus who come from shisha who come from java and  so on most of them are object oriented programmers   at least i feel so eighty percent of the devs you  know love objective programming they understand   classes uh they they can write better code  you know by using those concept of objective   programming like polymorphism inheritance  encapsulation abstraction uh you know they use   interfaces and abstract classes and so on right  so suddenly when you tell them okay go ahead and   have you know the same productivity and write the  code in javascript functions it becomes difficult   you know for a person who is doing functional  programming it is little bit difficult to get   into object-oriented programming and a developer  who is doing object-oriented programming it is   very difficult for him to perform at that  same scale uh you know when it comes to   functional programming so what type suite  says that says don't worry go ahead write   your classes do inheritance do polymorphism  write interfaces write abstract classes   no worries and i will ensure that i will compile  it or i will rather say transpile it and convert   it to javascript right so you can go here and  you can write your class let us say customer   and now let's say a customer has a  property name now remember one very   important thing in typescript first the  name of the variable and then the type   normally what we do we say like int i  but in case of javascript it is first i number so first the name   and name of the variable and then the  data type so i'll say your name string right then i will say code string   right and i can also go and perform  inheritance so i can say customer child extends customer right so i can do inheritance i  can write interfaces right so i'm going to have   a separate lecture on typescript don't  worry about it here i'm trying to just   make you understand that it increases the  productivity of the developer as well right   so if i go and if i compile this learn2.ts right   and if you go and if you just see this learn2.js  my god you can see that uh so it's it's writing   functions it is writing closures it is using iffy  you don't have to worry about those prototype and   so on right so all of that is all taken care of  that so you can see this is a this is a function   inside the function which is a closure i will  not go into closures now i will not go into   uh if he i will not go into prototype right  but the point i'm trying to make here is that   you don't have to worry about it actually  right typescript takes care of all that right   and second you know it goes one step  ahead you know for example now let us say   i have this learn 3.ts right because  one of the other things uh what uh   the objective programmers like is you  know they want to create modules as well   so let us say you have this one file  here learn2.ts which has customer class   and let us say that the learn3.ts has an address  class assumed right so let us say this is   address out here right so what you can do  is that you can go ahead and you can say   export so you can you can have these two files  separate modular right so you can say export   and in this learn2.ts you can say import  so you can say okay go ahead and import from that learn learn to dot ts sorry learn  three dot ts i'm sorry go and import address   class from it so you can see your address  and then i can say okay one customer but this   one customer can have multiple addresses so  i can go and i can create your an addresses array so i can say array of address right a  collection of address and so on so so you can   see here you can also create modular code so  you can write object-oriented programming code   you can write modular code and you don't  have to worry right you just go and say   compile this learn.2.ts it will just go ahead and  compile it right so if you if you just see here   you can see now very smartly what he has done  is learn2.ts is using learn3.ts look at look at   the smartness so he goes and he tries to compile  learn2.ts and he says oh like learn2.ts is using   learn3.ts he also compiles learn3.ts you can see  he has compiled3.ts he has also compiled learn2.js   and you can see that he has also used the address  class inside this customer class out here right so   you can see that is an address out there which is  pointing towards the customer dot address right so   by using the import and export you can create nice  modular physically separate separate files as well   right and finally what at the end of the day they  get compiled to functional javascript very easily   right so just going back to that definition  typescript is javascript yes but it is strongly   typed right the types are checked during the  design time and most important it it gives you   a nice artificial layer you know on which the  developers can go and write classes they can do   object-oriented programming they can  create modular code you know by using   the import and export and typescript  will ensure that it will convert it to   javascript now when the typescript compiler  compiles the typescript file to javascript   i'm not sure if i should use this word compile  because compile means you take a machine take a   higher level language or you take a code and you  compile it to machine language right here actually   we are converting typescript to javascript so we  can say transpile you know so must be transpile   vocabulary would be a better word than compile  so when typescript gets transpiled to javascript   right it's a quite complex process and as a  developer you know we would like to go and take   charge of this process we would like to customize  it we would like to provide configurations we   would like to provide parameters for example i  would like to go and provide configuration saying   that in which version of javascript it should  compile means it should use the es4 version   es5 es6 or which version of es javascript should  get compiled right so in order to go and control   this compilation process or configure this  compilation process typescript team has provided   the tsconfig.json file so let us go ahead  and create the tsconfig.json file for that   we have to say tsc hyphen hyphen init so what  this command will do is this will actually go   and create a ts config.json file you can  see here he has created a tsconfig.json file   now in this you can see there are lots of  compiler options you know which are given out here   like you want to compile into which es  version and so on so let us go ahead and try to use one of them for example let us try to  go and say that whenever the compilation happens   whenever the transformation happens right put all  the javascript into this output directory called   as dist distribution folder you can see here at  this moment whenever i go and i compile this type   script it is actually throwing the js in the same  folder right so must be we would like to go and   put it into a separate folder right so you can see  here i have provided in the tiersconfig.json file   saying that the output directory should go the  output directory is disk so now what happens is   if you now go and say tsc now you don't have to  go and compile the individual files wherever the   ts config.json file is you have to just hit  tsc it will take all the uh ts files and it   will try to transpile it into the disk directory  you can see now it has put all the files into the   dist folder now you can see there are some errors  out here but that's fine i think you know you can   see that there is there is an error out here  and now this is very interesting you can see   uh there is this error out here in learn2.ts  right very interesting and in this learn2.ts   you know the error says it's it's an error it  says that null is not assignable to address right now this is interesting you can see that how  typescript is taking control over the compilation   process you know so for example here now if i go  and if i provide your new array of address this   error will not happen so if i go and if i do this  this error will not happen so if i now go and hit   again tsc you can see nothing happens  here right now what is this actually   now here you know when you actually  specify null in this dsconfig.json file   it is doing a strict check so here you know  basically uh there is something called as a   strict check a strict check is nothing but typefit  goes and says that it will strictly check you know   if you are using nulls uh if you are doing any  kind of weird things you know he will try to   make it as an error he will try to warn you  right so over here if i go and if i disable   that strict check to false so let us go and see  somewhere there should be strict check right strict yeah there it is you can  see it is saying type checking   strict equal to true now what you would like to do  is you would like to say that c like yes i would   like to use the strongly tightness but at the  same time you know don't stop me from using nulls   you know because nulls are important in  many cases right because nulls define   an absence of something so i would like to use  nulls i would like to have my own freedom right   so what you can do is you can go and you can  provide you're saying false if you do that then   you won't get the exception anymore so now the  type should compile will say okay you said that i   shouldn't be doing a strict check you know so when  i do a tsc no errors out there right so basically   this tsconfig.json file has lots of configurations  and you can go and you can control and customize   the type speed transpilation process now remember  that you can see many many configurations out here   i won't suggest to start going through  them now itself you know because that would   you would actually lose your stamina what you can  do is you can do late learning late learning means   you know whichever properties are needed we will  look into it so when we do angular write when   we start with angular actually angular coding  there are some three or four properties we we   need them on regular basis at the time we'll  discuss about it so for now you don't have to   really go into each one of these properties and  try to understand them right but yes basically   overall you have to understand that if you want to  go and provide configuration uh and if you want to   go and customize your transpilation process you  can go and you can provide those configuration   into tsconfig.json and typesfield compiler will  take the configurations from this json file so   now that we have learned so much about typescript  a small quiz on typescript who created typescript   and you know just as a hint i have flashed the  hero of typescript on the screen right so he   is a danish nationality he works for microsoft  right and look at look at our hero right i mean   like he has created so many programming language  so that's really the inspiration for us you can   see that he has created turbo pascal delphi  c sharp and now typescript and you know what age does not matter isn't it so if you  love programming keep coding right so   if you know the answer then please put down in  the comments below who created typescript now   in order to create a project  in angular angular developers   don't create it manually so in other words  they don't go and create a tsconfig.json file   and a package.json file so they don't do it  manually they use something called as the angular   cli this angular cli comes from the angular team  so the cli stands for command line interface   so once you install the angular cli you know you  get nice commands out there you know by which   you can create the angular project very easily  i've already explained in the installation part   you know how to go and install the angular  cli but just in case if you have missed it   you can revisit it and just in case if you know  to just quickly iterate over here i'll say if you   want to install the angular cli you will use npm  npm install angular cli and if you want to install   it globally you can just say hyphen g which will  install globally in your computer right so for   example now the cli is installed in my computer  in in this virtual machine out here so if i want   to go and quickly check you know the version of  angular cli i can say ng version this ng stands   for the two letter word which comes in angular  right so a n g u l a r so that ng comes from that   so if i say ng version it will quickly give me you  know which version of angular cli is installed in   my machine right so you can see it is saying  you have angular in angular cli 13 installed   now remember that in case if new cli versions  have come in this tutorial is still valid you know   because angular as such does not change so much in  inter in terms of the terms of the syntaxes right   so they are quite stable when it comes to changes  of syntaxes right okay so now that you have   you know the angular cli installed right  now you can go and we can create a project   now what my belief is that if you want to go and  learn something then you should do a project a   do a project you know some kind of a project like  customer management system or a travel management   system or a hospital management system try to  create a small screen you know with a add button   with the update button try to complete a crud  application so if you try to complete a credit   application you can learn quickly you can learn to  the point right so i'm going to go here and create   a hospital management system you know i work day  and night with the health care system with the   healthcare domain so i would be pretty happy to  use to create a hospital system wherein we will   create a simple patient management screen where  we can add patients we can edit patients and so on   but in case if you like some other domain please  go ahead and create project accordingly right so   in order to create a project we will say here ng  new and i will say hospital management system so   hospital management system let me create let me  write the whole word out there right so there it   is now once you say ng new hospital management  system it will ask you a couple of questions   the first question it is asking you is  that do you want to use angular routing   what is angular routing angular routing is nothing  but it helps you to navigate it helps you to   define your navigation from one screen to another  screen so when you say you want to navigate inside   angular components inside angular ui right that's  where you use angular routing so it's saying that   i'm going to go and create this project template  do you want to include angular routing why not   yes definitely we are going to go and define  hyperlinks we'll be defining navigation so yes   we want this the next question which it will it's  asking is that which style sheet format are you   using are you using css are you using a css and  sas unless uh frankly you know the other three   frameworks of css i've never used it and i'm  sure that many people stick to the basic css   right so we will go and we will select css  in case you know if you want to use scss and   last sas less what you can do is that you can go  and you can press the down arrow key out there   and you can select appropriately but for now you  can use the down arrow key and the up arrow key   to select these menus but for now i'm going  to use css because that's what i've used   most of my time and i'll say enter  once you do that right it will start   creating the project right so if you  see at this moment inside learn angular   you can see uh this hospital management system  which is out here which is getting created   and it has created this project out here right  and you can see it is the npm is installing the   packages as well right so this will take some  time so give it some time you know until the   installation completes but you can see at the  left hand side the hospital management system   is created with the necessary code base out here  by which we can start angular very quickly right   so let us give give some time and let the npm  install all the packages and then we will proceed   so if everything is good if everything goes nice  you know you will see everything green out here   you can see everything is green and the project  has been created at the left hand side right   but in case you know if you find if you see any  issues then it should be shown in a red color   remember there is a green color  which says everything is okay   there is an yellow color you know which  says there are warnings you know and   developers don't worry about warnings but if  you see a red color that means you know it is   something alarming and you won't be able to  proceed so at that time you know please send   us a message and we'll try the best to help you  out now one very important point to note here is   that whenever we create a project by using ng new  it creates it in a folder for example i said ng   hospital management system it actually  created inside created it inside a folder   so if you want to go and run this project  you have to go inside this folder for example   i fired this command from this learn angular  folder so all the project is created inside the   hospital management system right so whatever  you typed in ngnew you know whatever name you   give to your project it has created inside a  folder so if you want to go and run angular   you have to go inside that folder to run the  project right so i will say change directory   and uh so we'll say here change directory hospital  management system so let us go inside the project   there it is and now here if you want to  run this angular project you will say here   ng serve what this ng server does is it actually  goes and compiles this project bundles it does   everything and runs your project uh on  a on a mini web server on a 4200 port   so if i do an ng server out here you can  see it is generating the application bundles   it bundles the application and it hosts it in  this 4200 port out here you can just copy it   so we can just say control c and  we can run it in the browser so   uh i will i'll be using chrome right to run and  i would suggest everyone to use chrome you know   because when it comes to debugging javascript  chrome is the king of it right so if you run this   you know that there is your first project which  is running right great so engine new to create the   project and ng serve to run the project now some  couple of uh mistakes you know which newcomers do   a lot of newcomers you know they try to run  this run the ng surf command outside the project   directory so for example if you try to do an ng  serve like this for example you can see here i am   now outside the hospital management system so if  i try to run and try to do an ng serve out here   i will get an error saying that i don't see the  angular this is not an angular project you know   i don't find any definitions and so on so this  is a very common error so if you get this error   that means that you are not inside the project  directory so go ahead and change to the hospital   management system directory and then fire ng serve  and a couple of uh important tricks you know which   you can remember out here you can use this up  arrow key and the down arrow key to get your   old commands you know which you fired onto the  terminal so you can see here all my old commands   whatever i have fired into this terminal i  get it right so use the apparel key and the   down arrow key to get the history of commands  which has been fired into the terminal right   so uh i will go and i will say change hospital  management system and if i do nd serve out   here it will work but if you do ng serve you  know where the project directory is not there   it will give you this exception saying that that  the project definition has not could not be found   right now what i will do is you know you can see  here that it's too much noise out here isn't it   because we are also seeing the typescript code out  here so we want to only focus now on the hospital   management system so what i will do is i will  go to the file explorer so if you want to go and   go to the folder you know where the hospital  management system is you can right click and   say reveal in file explorer and we will only  open the hospital management system folder so   that we are focused on the angular project so  i'll say file open folder and i will just give   the hospital management system so that i don't  see the typefit code so you can see here now   we are just seeing the hospital management system  out here and this looks pretty neat and focused   isn't it so we don't see other folders and we  can be focused on the angular code out here right   and please note please run your vs code in admin  mode please ensure that you have proper rights   right and so on already in the installation  i have talked about you know what kind of   problems you can face uh when you run the ng  commands and the npm commands great so now that   the project project is created now let's go and  deep dive into it let us try to understand that   what files are present in this project where  is the source code and how to start with things   before we move ahead a quick quiz name  the creators of angular and name the first   website created by the creators so if you know  their names please pay them respect you know by   typing their names in the youtube section remember  we are learning their creation and if you don't   do not pay them respect that's not human right and  just a hint there are there were two developers   and both of them worked in google so now let us  get started uh with all the different files which   are pro which are present uh in this template out  here right so let us first start with package.json   file so if you look at the package.json file it  has all the dependencies of angular right and   in this you can also see the angular version for  example at this moment i'm using the 13th version   and please note that in case if you see a 14th  version out here or if you see a 15th version   out here don't worry you know this tutorial should  still help you because you know angular team does   not make breaking changes as such at this moment  right so this tutorial is still valid if you're   if you're if you have the new angular version  here this tutorial should be still be valid   and it should still work right so the first thing  if you see here in the package.json file we have   the angular dependencies out here and by looking  at these dependencies you can clearly understand   that angular is a modular framework in other words  the team has created separate separate modules out   here so let us say if you say compiler you know  they are put in a separate module angular compiler   if you talk about forms you know it's in a  separate section if you talk about routing it   is in a separate section and so on so they have  created you know modules so the whole angular   framework is modular right so all the dependencies  in package.json file then you have the ts   config.json file remember this is to configure  typescript and you have the angular.json file   you know which is to configure the angular related  configurations so three important configuration   files out here one is the package.json file one  is the ts config file one is angular.json file   also remember in the in the previous part of  the video i have also explained you know what   exactly is package log.json file right so you can  see this package log.json file where we can see   the exact version uh which is installed by  angular right which is installed by npm right   now you can also see that there are some spec  files out here for example you can see this ds   config.spec.json whenever you see any kind of  spec files out here for example if you go to   src also right you will find there are some spec  files these spec files are related to testing   related to unit testing so so for now  you know if you see these spec files   just leave it at this moment you  know whenever we do unit testing   i will talk about the spec files right  so package.json for configuring the npms   the references uh the dependencies ts config file  to configure the typescript and angular.json file   to configure the angular related things and  the spec files in which you see out here   are related to unit testing now before we proceed  right uh it is very important to understand   you know some vocabularies you know  which are used in the angular community   uh with the word angular actually right so we all  know that there are two families of angular one   is the angular one point x family which is the  old version so you can see this is angularjs.org   which is the official website for the old  version and this is the new version uh the   angular 2.x family when you say two point x means  two point uh two point zero and then three point   of there was no three point so four point x and  then five point x and six point x and now we have   angular 13 and we can have further angular  as well right so this is the new version   of angular so this is the old version of  angular which is angular one point x family   and this is the new version of angular now um  i have seen this you know when you actually go   out there and when someone says angularjs when  they say angularjs they are referring to the old   version when they just say angular they are  referring to the new version i do understand   that the angular team has said to just call it  angular understood that right but you know this   vocabulary still is still there in the market you  know when i go to corporates for training or for   consultancy you know they say that okay we have  angularjs which means the old version and this is   the new version where they just say angular so now  developers have stopped calling you know angular   4 and 5 and angular 6 and angular 13 they just  say angular which refers to the angular 2 point x   family right and this one here is the old angular  which is the angular one point x family and also   as a note you know remember that this angular js  which is angular one point x family has come to a   support end so in other words you know it's like  you know it's it's at the end of life now end of   life does not mean that end of angular it means  that they will not support angular 1 i repeat that   you know this end of life announcement is not  for uh how do you say it uh it is not for the   angular 2 point x family it is for angular  1 so what it means is that well uh you know   the coding of angular 1 is still accessible in  github everything is all out there you know but   only that no issues will be will be addressed  no pull request will be made and so on right   so uh there is a discontinued support of angular  1 and all the focus is now on angular 2 family   and let us not say angular 2 or angular 4 or  angular 5 let us just say angular and at this   moment you know when i am recording this video the  new version of angular is 13 and as i've already   said that in case even if 14 comes in or 15 comes  in right this tutorial should be still be valid   so ts config for the typescript configuration  package.json for the npm configuration   angular.json for the angular configuration  tsconfig.spec file you know for the testing   purpose for the unit testing and this node  underscore modules folder we all know this node   underscore modules folder has all the packages so  whatever packages are listed in the package.json   file out here for example you can see angular  animation and angular common so you will find   that you know this is angular and then you have  the angular animation you have the angular common   you have the angular compiler so you know whatever  dependencies are listed in the package.json file   all of them are installed in the node underscore  modules folder now the most important folder as   a developer as an angular developer for us is the  src folder this is where we have our source code   this is where we write our source code right so 99  times you will be working on this src folder so if   you see in this src folder there is an app folder  and inside the app folder you can see there are   certain files out here you can see some html files  you can see some dot ts files you can see some dot   module.ts file so this is where you'll be spending  your 99 time you know coding angular and creating   applications and so on so let us try to understand  this app folder in more detail now before we look   into this src folder before we look into this  app folder let's revisit angular teams definition   for angular so you can see here i'm on the  official website of angular which is angular.io   so please note the official website of  angular is angular dot io and you can see here   there's a small article on what is angular and  if you read this definition of angular out here   angular is a development platform built on  typescript absolutely all this is typescript   and let us focus now on the first sentence you  can see there are three uh what you call points   out here regarding the definition of angular  but let's focus on the first line out here   so angular is a component based framework for  building scalable web applications component   a component and component in angular is the base  it is a fundamental on which angular stands it's   the basic building block so what we'll do is let  us go and focus on this component so you can see   here in this src folder you know where we actually  will be writing our source code you can see this   app.component.ts you know where you know you can  see the component right so let us focus on this   this fundamental on this base on which angular  stands the component a component is a reusable ui   logic which can be loaded inside html which can be  loaded inside a browser i repeat this definition   a component is nothing but a reusable ui logic  you know which can be loaded inside html which   can be loaded inside a browser so it comprises  of two things one is it comprises of a view   which is which will be html right so view or you  can see an ui part and other is at the back end it   will have logic so this logic will be normally  javascript uh and because we are writing in   typescript so we are using typescript but finally  that will also get compiled to javascript right so   a component consists of a a ui plus logic in  javascript right so if you see out here this   is a component out here this is the class this is  where we can write the logic and this is the html   so a component comprises of logic plus view  a component comprises of logic so this is the   logic this file has a logic app component.ts and  definitely this logic will then get compiled to   js because ts has to get compiled to js  and the ui part is in the html right so   if you see out here this is what a component  is this is a component and this component is   connected with the ui right and this is the  ui so what you can do here now is you can go   in in angular and you can write  some ui logic for example let us say   uh i'm going to go and write a input type button  let's assume we write a simple logic here like   input type button and when you click on  this button so i'll just say value click   right and we'll say here click call some logic  at the back end call some logic and this logic   we write in the backend component dot ts so this  is the ui and at the back end in this class we   will go and we will write this call some logic at  this moment let us just go and display alert hello   right and very important out here you can see  that this class is connected with this html   by using this template url thing and we'll  discuss about this later on so you can see   here this is the ui and this is the logic so  that's what is a component in angular so if   you're going if you run this let us see so if you  go and if you run this if we run this ng server so there our ui is running so if i click on this   you can see the backend logic ui plus logic  so a component is ui plus logic now one of the   doubts you know which can come into your mind  is that what makes this simple typescript class   a component so point number one to remember the  first point to remember typescript does not have   a concept called as component there is nothing  called as a component the goal of typescript is   to make it to make javascript strongly typed to  give you an object oriented feeling and so on and   increase productivity right so as such you know  type 2 does not have a concept called as component   this component concept comes from angular  so you can see here this import out here   which is actually getting imported from angular  core and this angular core is one of the modules   you know which is shipped with the angular so if  you go to your package.json file you will find   that this is one of the sub modules of angular so  this component is a concept of angular right and   what makes this class a component this thing at  the top of the class this is termed as a decorator so this at the rate component is termed as  a decorator and you can see that there are   three things out here uh four thing three things  out here selector template url and style url so   template url connects with the html so you can  see this template url says that this component   is connected with which html style url says this  component is connected with which css right and   finally you know this component you know which  is nothing but the combination of html plus css   plus this logic what we are writing out here  if you want to go and if you want to load it   inside an html we use a selector so this whole  component you know which is a combination of   all this html and plus css and the logic  if you want to load inside another html   then you will use this selector out here you will  use this name you will see like this app root   slash app root so then what will happen  inside that html this html plus this logic   in on plus the css everything will get loaded  inside this html out here right so decorator   component decorator this is a decorator this  at the red component is a decorator so let us   again go ahead and just revise and reiterate  you know what we talked about the component   now you must be feeling that you know i am  repeating the same things again and again right it   is becoming mundane but i feel that this part is  so important for a newcomer who comes into angular   that if this part is missed out then i feel then  you know the whole angular is missed out right   so here it is so we have this component thing  out here right so this is the component right   or i would rather say let us so let me draw here  so this is the component right so the component has what it has a view right so a  component has a view so this is the view right it has the logic right this is the logic this is the view this is the view at this moment  right plus it has this logic plus it can have   css plus it can have uh you know some other class  as well so this component can create an instance   of an http object you know this component  can create a instance of a logger object   so basically when you when you talk  about component a component comprises of   view plus logic plus css plus you know some  other logic you know like components you know   let's say classes like logger plus http so you  can think about you know this component is like a   like a mediator you know who a mediator i  can say connector or like a traffic police   you know who actually gets all the things  together and creates a wonderful reusable   piece you know which you can go  and call inside your html right   so if i go back now let's so let us go back to our  uh you know our code out here so you can see here   this is the view this is the component and  remember if you want to call this component   inside an html you will call it by this name app  root so this app root is the name of the component   so if you see here in the index.html  right so if you just see in the index.html   you can see that this app root has been called  right so this means that he is trying to load   this component inside this html right  so the selector out there is nothing but   the name of the component right  so component comprises of view css   logic and this logic can be called inside the html  by the selector right so this is the selector out   here this is the selector and this one here at  the red component is um is a decorator right   because of this decorator this simple typescript  class becomes a component or else you know if   this decorator is not out there then this  is just a simple typescript class right so   that thing at the top makes this app component a  component and this component is coming from where   from the angular dot core right and this angular  core is at this moment installed inside your node   underscore module so there it is angular dot core  and how did it get installed it got installed   because in the package.json file because in the  package.json file you know you have it as one of   the sub modules right so the component that direct  component decorator logic is there in this ad   angular code in the same way if let us say we want  to do the bindings and we will be using the forms   uh and you know if you want to go into  routing we'll be using router and so on right   so that installation was done uh when you did  npm install right so component decorator selector   right calling of the component is like this right  app root so these are the basic building blocks of   angular now one more important thing you know  which i want to talk here is the directives   what is a directive a directive is nothing but  it is angular code or i will say angular syntax   which you write inside html and if you look at  the official definition of directive directive   is nothing but it changes the behavior of an html  element so you can see this click out here this   click out here is an angular syntax this click out  here is an angular syntax please note this is not   the on click our javascript event is on click  this is not the on click this is a click with a   round bracket so this is actually an angular code  so when you see an angular code inside the html   it is termed as a directive and this directive  what it does it actually goes and changes the   behavior of an htm html element for example  this button out here was a simple button but   now it has a behavior of a click because you have  put a click directive so putting in simple words   directive is nothing but it is angular  syntax which you write inside html   now one more important vocabulary i  want to talk here is template template   right so normally you will hear this word  angular template right angular template   is nothing but you know an angular ui so  this and app.component.html is a template   so angular template is nothing  but it is an html file which has   directives which has angular syntaxes inside it  so you must you can call this as appcomponent.html   but mostly you know inside the angular community  they will call it as a directive so whenever they   whenever you know you will see uh they will  call it as a template so whenever you will see   that you know angular developers talk about this  template url they will say that this is a template   right so just trying to summarize you  know all the vocabularies out here   a component is nothing but it comprises of  logic plus view right a selector helps us   to call this component so selector is the name  of the component this accurate component is a   it is a decorator you know which actually makes  this normal type switch class a component and   inside the html you know whenever  you write any kind of angular syntax   it is nothing but a directive and this html  out here is nothing but it is also called as a   template so these are in some of the vocabularies  you know as we go ahead we'll be using them   the other important concept which we need  to understand in angular is the module so what do we have now we have a component right  so let us say you have a customer add component   right so let us say you have  a customer add component   and what does a component comprises of a  component comprises of a view plus logic   so right so this view is in html for now and  this logic is written in typescript right   in the same way probably you can have  another component out here which again has   a view plus logic let us say that you  have this component as the customer   reporting component so this helps  you to display customer reports   now what you would like to do is that you would  like to go and put these components into a logical   grouping so you would like to go ahead and put  them into a logical grouping logical group so this   logical group is termed as a module so must be you  can go and give a name here saying customer module a module an angular module helps you to logically  group components i repeat this an angular module   helps you to group components so one module  can have many components and in a project   specifically in a complicated project you  can have many modules so like assume that   this is a customer module out here which has  two three components and then you can have one   more module out here which is a supplier module  so you can have multiple modules in a project   so you can have a supplier module and it has  supplier component 1 supplier component 2 and so   on so in a project you can have multiple modules  and every module logically groups components   so there you can see the code of a module  so this is a component this is the ui   and this is the module so app.module the first  thing what you will notice out here is that   the way we had decorators for components so for  example when you take a simple class of typescript   and you put a decorator of at the red component  this becomes a component in the same way for   module also if you take a simple class out there  and if you decorate this decorator of decorator ng   module this class becomes a module so module and  components are created because of this decorator   out here and in this decorator for now focus on  uh two things one is the declaration and another   one is the bootstrap so this declaration is where  you will go and you will write your grouping of   components so for example now let us say in your  project you have two three components like app   component and let us say if you have app component  one assume how you have app component one at this   moment we don't have it and then you have ad app  component two so you will go and you will write   the grouping of the components over here so you  will say app component 1 app component 2 and so on   right so the grouping of the components you will  you will group it in the declarations out here   right now from these components which is the  startup component which will be the startup   component to run first you will define in the  bootstrap so in declarations you will define the   grouping the logical grouping and in bootstrap  you will define that from these components   which component will run first which will  be the bootstrap component right great so   we have component we have a view right and  then it is logically grouped into modules   a module logically groups components let us  try to visualize what we have learned till now   and if you can understand this visualization   you are an angular developer this is  the most important part of the lecture   if you're able to visualize what what i'm showing  just now welcome you are an angular developer   right so we said that we have a component so we  said we have a component a component comprises of a view let me try to draw this view a little  bit big so component comprises of a view and a logic right you can have many components and the grouping of component  is defined in a module the view and the logic is connected now this  logic at the end of the day is a ts file right   a class file this view is an html right now  this view and the logic is connected by the   template url remember so we we have a  template url which connects both of them   inside the view you will have directives so inside  the view you will have directives like we saw   the click event so you will have directives  you will have syntaxes of angular and you can have many such components so  you can have another module like this which is having other logical group of components right so  now when the application runs right when   the application runs which of these modules  will start first so that is defined in the   in the main.ts so that is defined  in the main.ts so in main.ts which module should run first is  defined right so this is the module this is the component this file is the com well  the component is a is a combination of this   plus this right and we also have an index page here index.html so the first ui to run is index.html index.html  calls the main.ts the main.ts says okay this is   the module and inside the module if you remember  we had the bootstrap so we had the bootstrap out   here this bootstrap will say which component to  run first right so this bootstrap will say which   component to run first and that component will be  loaded inside this index.html using the selector   right so if you remember we had this app root  selector the name of the component so inside   this app root that component will run right so  this is basically a visual diagram out here let   me go to the code so that we can we can map you  know both of them right so here it is index.html   this runs first after that runs main.ts so in  the main.ts we are saying that the app module   should run first you can see now there are lots of  code out here like platform browser dynamic don't   worry about it we'll talk about it later on but  i'm just saying that the main.ts runs after that   the main.ts is this module is going to start the  app module the app module says which come which   component is going to start in the bootstrap and  then the component goes and takes up this html   takes up this logic you know takes the whole  thing and this is the selector app root   and it loads this whole thing inside the  index.html right so remember first index.html   main.ts the component runs takes everything  takes the ui plus the logic and loads it inside   the index.html index.html main.ts module  component loads inside the selector   and remember that we have know the directives you  know which are written inside the ui right so if   you're able to get this visual diagram in your  head congratulations you are an angular developer   now the other important concept you know which  we need to understand as an angular developer   is binding binding means you want to go and bind  an input element so you can see this is an input   element a text box let us say you want to bind  this element to one variable often component   right so let us say you have a variable out here  let us say some value right and when an end user   goes and type something on that text box you  want that you know whatever is typed in this   text box should come to this some value and  when somebody changes something in this value   it should go and display on the screen right  so you want to go and do a binding for that   we have a directive in angular which is ng  model so you can go and you can say your   ng model m capital right what is the name of your  variable our name of a variable is some value   again like remember in case of typescript you will  say variable name and then the data type right   so you can see here some value colon string some  value colon number some value colon boolean right   so now we want to go and bind this text box with  this some value right so you can see here ng model   now you know let us now you can also  go and control you know how do you want   uh this binding to happen means  when you look at a binding right   when you look at a what you call a the  binding flow the binding flow can be like this   when you type on this text box you want that it  should it should be sent to this some value when   there's some value change you want that it should  be you know sent to the ui as well right so that   means that you want a two-way binding right so  because you need a two-way binding you will use two other signs out here the square bracket  and the round bracket so what does the square   bracket signify the square bracket says  that the data can come from the component   to the ui the data can come from the component  to the ui so this whenever the some value changes   you should also update the ui right and this  round bracket here signifies that you know   the data can go from the ui to the component  as well so remember the two-way binding here   because we want a two-way binding we want that  the data should go from the ui to the component   and from component to the ui that's why i have put  both of them right so the square bracket signifies   that the data can come from the component to the  ui and the round bracket signifies you know that   events can go from the uh from the ui to the  component right so there it is now you would   like to also go and display this some values  up there so when when you type on this text box   it will go and it will change this some value and  when the some value changes you'd like to go and   display that on a ui for that we can use something  called as expressions so if you want to go and   display the some value here you can use something  called as an expression the expression is   denoted by this double curly bracket out here so  you start with the double curly bracket and you   end with a double curly bracket so this is called  as an expression because you can go and you can   you know write some expression like one plus  one and it will evaluate evaluate to two   this is termed as an expression also many people  call it as an interpolation interpolation means   we can mix html with this data out here  like this so i can say bold slash bold   and i can mix you know the angular directive  the angular expression like this so remember   you can term it as an expression or you can  term it as an interpolation because you can mix   html with the angular variables right so ng model  is a directive which helps you to bind the input   element with the component with with the variables  or the objects at the back of the component right   now you can see there is some error out here let  us try to understand this error so if you go and   if you see this error it says that uh uh error  occurred okay now first thing how should you read   the error how should you read the error right very  important it is you can see here now we have got   we have got lot of red signs out here right and  how do i go and read the error right so first   thing is when you see an error you will normally  be at the bottom so you will be we will be at the   bottom like this try to go and scroll till the top  try to go and scroll to the top and read the first   error which occurred because that's where the most  important information is so i'm going to go now   to the first to the place in event of where the  error occurred first where it showed the first   red sign so here it is you can see here first  you can see that so before this everything was   green and here we had this error so you can see  the error number out here saying angular 8 0 0 2   and what is the error i cannot bind ng  model i cannot bind ng model since it is   it isn't a known property of an input so it is  actually throwing up a error here saying that he   cannot bind ng model or he does not understand  ng model and you can see it says error occurs   in the template remember i said template means  the html5 means means the ui so you can see this   wording's out here it's it's occurring in the  template and it is also saying that uh at which   line it is occurring so one comma 20 so 1 comma  20 means 1 line number 1 right line number 1   and column number 20 okay so 1 2 3 4 5 6 7 8 9  10. so this you know it's saying that it is the   error is occurring uh in the column number 20. so  the column number 20 can probably be this right   so that means that he's not understanding  ng model okay that's the whole point he's   not understanding the syntax of ng model and  why is not understanding because you have not   loaded the appropriate angular modules right  remember uh when we saw the package.json file   so in the package.json foiler we saw that angular  has a lot of angular is modular it has a lot of   modules like angular animation angular common  angular core right angular router you know for   navigation and angular forms for binding so the  the binding magic is in angular forms and it is   and we need to go and load this angular  form so let us go down to the module level   okay at the module level let us go and import  the forms module right so let us go and import   the forms module so what we'll do here we'll say  comma and we'll say forms module you can see out   here now when you tab out here automatically  it imports the forms module at the top   and it puts this forms module out here so in  the ng model decorator you will go to the import   section and you will import the forms module right  and once you do that you know he should be able to   understand the the ng model syntax i'm going to  go and save it and let us go down below and let   us check that if our error has gone off you  can see now the error has gone off right so   it is compiled successfully right so remember  that you know when you actually go and write   any directive out here the appropriate module has  to be loaded from angular so that that directive   can be recognized right so with all that now let  us go ahead and run our application let us see so localhost 4200 so that it is  you can see the first thing is the first thing is this expression  one plus one has been evaluated to two   right remember our click was working  the hello right so that is out there okay uh and now when i go and when i  type on this right when i type on this   you can see the expressions getting  changed so when i type on this   the data is getting binded  to the some value at the back   and also our expression is getting updated this  is the expression this is the interpolation you   can say it is getting updated right so binding  if you want to go and bind an input element   uh to the component variables and objects you can  use the ng model directive so this is a directive   this click is a directive this is an expression  this is an interpolation right and remember you have to load the forms module or else you  know you will not understand the syntax of ng   model and most important whenever you get an error  whenever you get an error you will go till the top   these are important points as a as a fresher to  understand as a newcomer to understand in angular   so remember whenever you get an error like this  you will scroll to the to the to the last point   with the to the first error you know where the  error occurred right so this was the last time   you know when angular compiled successfully so  just after that and whenever you get you know   such kind of an error where it says that can't  bind can't understand right that means you know   that that module has not been loaded right so once  you load the module once you go here and say load   forms module everything works perfectly nice  right so now let us go ahead and write some logic   and uh afterwards you know when we have finished  writing this logic we can go through the important   directives of angular or the different  types of directives in angular right   so the logic is as follows you know the logic  which we want to write in angular is as follows   the end user can go and type on this text box  right and when it clicks on this button here   it should add this value to a table down below so  the end user goes types a value he clicks on this   button out here and once he clicks on this  button it should go ahead and add some   add the data to a table down right so that means  that now this text box is binded first thing this   text box is binded to this some value string that  is the first thing right now if you want to go and   uh show it in a table the first thing what we  have to do is that we have to store this some   value in a collection right so we'll go here and  we'll say some value and will create a collection   some values some values so some value singular  saying that this is binded with the text box   and some values it's a collection saying  that it will be binded with the table   right now you can either go with pure javascript  and you can say some values is equal to square   bracket and this creates a collection or what you  can do is you can use typescript you can say array array of string so you can go and say  array of string is equal to new array of   string right and then in this in this call some  logic remember that this call some logic is   uh present in this click button out  here right so in this call some logic   we will go and we will say add this some value  to some values remember some values is plural   plural right it represents a collection uh  so we'll say here some values start pushed   and we'll say some value and you would like to  also go and clear this text box as well right   so what we'll do is we'll say some value is equal  to empty so this will go and will clear clear the clear the value as well on the text  box right and now let us go ahead   and create a table down below so we'll  say here br we'll create a simple table so some value now we would like to go and loop  this tr so the below tr we would like to go   and loop it until we have data in the  collection you know loop to the elements   in the collection right so these are some values  is a collection so we would like to go and loop   right so to do a loop you know we can use  the ng for syntax so we'll say your star ng is equal to ng4 is equal to let let temp off now what is our collection our  collection is some values right so temp of some   value so what will happen is this mg4 syntax  out here will go and make a loop it will take   every value and it will put it into this temp  variable right and now we'll go here and we will   say display the temp remember the displaying part  is the same as we have used an expression as we   have used an interpolation right so that's it you  know this should work so let us go back to our ui   and let us see so we will say your  shif and let us add we'll say test   and let us add so you can see how simple it is  by using angular by using the power of directives   by using this ng4 by using this ng model by  using these expressions you know by using   this beautiful code of typescript which  is class oriented which is strongly typed   how easy it is to code using angular right  now let us try to understand the different   directives in angular so you can see that we have  written some directives we have written ng model   we have written ng4 right so let us try  to understand these directives so what   we'll do is in order to understand these  directives let us go to the website of   let us go to the official website of angular  dot io right official website of angular that   is angular dot io so we'll do like this we'll say  that [Music] let us google right i would like to   use the notes directly from the official  website rather than showing my notes out   here so we'll say here different directives in  angular and we are very we are mostly interested   to read from angular dot io right so here  we go and you can see here angular dot io you can see the different types of directives  given in angular with the definition right   remember angular dot io is the official  website of angular so whatever you read   from the official website is coming directly  from the horse's mouth right so you can see   there are three kinds of directives in angular  let us try to go go through each one of them   so you can see that these are the three  kind of directors out here component   attribute and structure okay so let us  start with component out here so component   when you say a component directives right if you  remember i said component is nothing but it is   ui plus the logic so it has a template actually  associated with it template means html right so   whenever you hear this word angular template  that means html right so component directives   are directives you know where you call your  component where you actually create a component where you actually create like  how we had app component.ts   and it had a template url and so on  so that is a component and you call it   uh you know by using the selector name so you  can see here this is a component directive this is a component directive right the second  kind of directive is attribute directives   attribute directives change the behavior  change the appearance or behavior right   for example it can just change the color must  be or it will change the behavior for example   if you see this input type button  you have this click attribute a click directive out here you can see this ng model  directive right so what does a click directory do   a simple button now which was first a very simple  button it now it has an additional behavior of a   click right for example this text box which was a  very simple text box but because of this directory   of ng model it is now binding to one variable  right so this attribute directives actually   they change the behavior or the appearance right  of an element so both of them both of these are attribute kind of directives right and the last  one is structural directives they change the dom   layout right so they add elements you know they  remove elements and so on so you can see this   ng4 directive is on structural directive so this  is a structural directive whenever you see such   kind of a star out there it indicates that it is a  structural directive right so component directive   this is nothing but your component where you  have your own html uh let us not use the word   html the own angular template right and the code  behind and you know and you can call uh the name   the selector name out here that is the component  directive attribute directives you know they don't   remove an element they don't hide an element  what they do is the existing element to change   the behavior like ng style that's an attribute  directive click is an attribute detective ng   model is an attribute directive uh enable disable  right so if you are going to enable and disable   that is again an attribute directive they change  the appearance the look and feel or the behavior   and the last one it actually goes and adds and  removes dom element for example this ng for here   adds new tr elements to the dom right  so remember structural attribute   and component i would like to highlight  a very important point out here this is also one of the favorite question  asked during angular interviews right   so uh what are the types of directives now  what happens is you know developers are   you know are a very different kind of people  you know they they work hard they code   they deliver projects right but when  they're asked questions like okay what   are the different types of directives they don't  remember upfront isn't it so here's a small tip   you know if this question is asked during  the interview you can remember this word sac   so s stands for structural a stands for attribute  and c stands for component everything is fair in   getting a job and war right remember guys you  know coding doing a work working in a company   hands-on you know is one thing but cracking  an interview is a different ball game right   for example you saw saw you know in the last two  hours you know we have been coding we have been   we have been trying to understand the concepts  right but when it comes to interviews right you   know when you're asked question you should be able  to express them you should be able to express the   right technical vocabulary you should be able to  give clear-cut answers right so what i've done is   i have floated a very wonderful course here called  as the angular interview question with answers and   code demonstration course right so if you want  to get access to this course you can go to the   comment section in the comment section i have  pinned a comment and in that pinned comment you   can find a one hour of free video this the first  one hour is free out there you can go you can   watch that video and if you wish to buy the full  course you can buy the course from questpont.com   you can buy the course from our youtube channel  subscription you can go to udemy and many other   places those things are also mentioned in the  descriptions right so remember coding is one   part you can code you are hands-on you are a great  developer you are a hero in your company but when   it comes to cracking interviews it is little bit  different right so try to prepare holistically   you know yes you should be hands-on yes you  should know how to deliver a project but   at the same time when somebody will  ask you questions during interviews you   should be able to answer them in an elegant way  congratulations congratulations congratulations   you have completed two hours of training on  youtube i mean like on youtube people watch   i don't know what kind of content right and you  have been learning on youtube there is nothing   satisfying more than this right so if you are  if you are out here if you are watching this   clip if you are watching this face out here if  you are watching that screen out there right   why don't you please inform me on facebook.com  saying that i completed two hours so that as   a trainer you know i feel that i have achieved  something and i i you know it's not me just alone   recording for two hours right there is someone out  there who's also listening for for two hours right   so if you're out there and if you're coming till  here right please go to facebook.com correspond   and please rate me and please say that yes you  know we are here we are watching our content we   like your content so that you know it motivates  me to create you know such more kind of content   okay now said and done right definitely this  was only the basics of it basics of angular   when you say that you want to do advanced angular  when you say you want to become a pro a real pro   right then there are many topics out there right  first one routing how to go from one screen to   another screen navigation routing second lazy  loading load on demand dependency injection   right validations http calls unit testing  view child content child content children   passing data between components state management  you know it keeps going out there so if you want   to really become a pro in angular here it is  you can please go to questpoint.com get the   subscription out there if you want you can also go  to youtube out here and you can subscribe when i   say subscribe means youtube subscription right you  can go and you can go to the youtube out here and   uh by my youtube subscription you get all the  access to these advanced tutorials out there right   of angular second if you are a person who says  no no i want to learn like one to one from you   chev so why not you know come to quespond.com and  we have live trainings of angular on saturday and   sunday you can attend the same and if you say no  like i want to learn offline and i want to see you   and you are with me right we are in a classroom  then please you know you can also come to   our mumbai office out here we have continuous  training of angular offline i i love personally   offline training because in offline training what  happens you sit for like that saturday and sunday   16 hours and you are done with angular  right so any way you want to learn   you know i'm more than happy to help you  right so happy learning happy job hunting   keep learning keep liking my channel channel  keep sharing my channel thank you very much you