Angular Tutorial for Beginners | Learn Angular Step by step | Angular Tutorial

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 go and type this command ng new project name is test so ng new test and then just press enter 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

Channel: Questpond

Views: 146,078

Keywords: Angular for beginners, Angular Basics, Angular 13 Tutorial, Angular step by step, angular projects for beginners, Learn Angular in 2 Hours, Angular tutorial step by step, learn angular, angular project step by step, learn angular from scratch, angular, angular tutorial, angular course, angular tutorial for beginners, angular crash course, angular course with project, Angular complete project tutorial, learn angular step by step, learn angular step by step for beginners, trending

Id: -9VcW7MBDs8

Length: 137min 22sec (8242 seconds)

Published: Mon Jul 18 2022