Angular Crash Course for beginners

we [Music] hey did everyone have a shear back again to the other video and welcome to Internet's one of the most easiest and follow able crash course on angular whenever anybody tries to learn angular there's a lot of confusion with it some confusion regarding the version some confusion regarding what should I know before starting with the angular and some confusion with the terminologies like directives and modules and a whole bunch of other things so yes it can be a little bit intimidating first for when you are getting started with angular but no worries this video is gonna solve a whole bunch of your problems if you want to get started with angular this crash course on angular is designed specifically keeping in mind that a lot of big nerves might be watching this coach Wigner's who have no idea about react or view or any other framework big 'nor who really want to follow what I am doing in this course exactly and want to repeat that after them and also you want to create a simple project after this crash course so we're gonna keep everything in mind and we're gonna follow along exactly the same procedure to understand angular this video this crash course on angular is divided into two major parts the first part is all about the talks the things that you should know before getting started with angular like what programming language what this framework is most confusing myths and so on the terminologies and jargons and a whole bunch of other things the second part of this video is about when we move on to our computer and we try to install angular on our system regardless of if you are on Windows or the Mac is just really an easy process and we will create a very simple basic project to understand the architecture of this framework itself and how we can write some of the basic code in angular it's gonna be a whole easy process and I highly recommend you to follow along with me it's gonna be an absolute fun journey so let's get started now one more important thing all of the exercise files and the code that I'll be using in this angular crash course are actually available on my website learn code online dot in and along with exercise file this video is also plotted on my main website which is learned code online dot in and also I have enabled the discussion sections so that in case you face any problem or you want to discuss with your same like-minded people who are interested in coding and specially in the angular I have opened up the discussion section so that you guys can interact with each other and I'm pretty sure the programming community is really kind enough to help you out in these crash courses so don't hesitate visit learn code online dot in and take advantage of all the exercise files code files project files that we are gonna create in this course and in case you are still showing up to hit that subscribe button don't do that please hit that like button as well as that subscribe button it gives me a whole bunch of motivation and amazing feeling that yes somebody is watching these content and are really enjoying that now before we move head on to the very first section I would like to ask you an important question based on your suggestion on my previous crash courses I picked up this crash course topic so in case you want me to create any other crash course or any other subject please go ahead and mention that in the comment section below I read all of them and I'll pick up the subject for another crash course based on your comment so enough of the taught now let's talk about angular the very first thing which is really a big thing when we get started with the angular is its version and I totally understand this version thing in the angular is so much of the massacre it has stopped so many of the developers of jumping into angular itself now let me clear this up angular 1 is something which you don't really want to learn anything which is after angular 2 is something that you want to learn anything after angular 2 is almost similar to is to version 3 its version 4 5 6 7 8 9 and a whole bunch of others as well the important point is here after angular 1 angular team decided to rewrite this entire framework and after that the version 2 and onwards is just some minor subtle updates which definitely are worth understanding and reading but it's not something groundbreaking that's gonna break entirely your project so all the things that you're learning from angular 2 and onwards are actually really great and that's the only thing you want to learn angular is of course everybody knows is one of the project by Google and which focuses mainly on SP a single page application now it's not a really a jargon thing nowadays applications are moving more over on to single page application and it's not really a big thing only thing is of course it's a big thing the only difference is in multi-page application you have multiple pages which renders again from the server reloads and whole bunch of other things in the single page application the browser is kind of a fade-in just having one page of the application of course there's a lot of content a lot of server rendering goes on but only the content which actually is changed actually that only rerender so it saves a whole bunch of time for everybody on the user side on the server side so it's a really good way of adapting our application into single page application and angular is one of them now angular is big and there is no thought about it angular is definitely a big framework it's not something like react or view or any other framework that you have heard around angular in itself consists of all the packages that you need to build an application and you rarely need something support from outside the world of angular surely sometimes you do but the major thing with the angular is that all the things most common ones like routing or the state management or maybe if you want to interact with web like api's and all these things are actually done directly in the angular itself in the world of react or view we have to install third-party libraries in support to get started with something like routing or state management like redux surely redux is possible in angular as well but you actually don't need it much all the things are actually bagged in one framework and if you're gonna pack everything into one framework it's definitely going to be a little bit bigger now one more thing that you're gonna hear about this angular is it follows the MVC concept now to be very fairly honest with you MVC is moreover a practice of how we write our code and can be followed up in almost any modern framework it's not like just a thing or advantage of angular surely angular does support it pretty widely and pretty openly but it it is possible of following MVC pattern in almost any other framework as well so I would not consider this as a special gem that is only in the angular okay the one more important thing that you should know before getting started with angular is we write all of our code in angular in typescript now some of you might be worrying I don't know typescript now technically most of you don't actually need to understand the typescript because you can adapt the typescript feature if you know JavaScript a little bit now for example this is JavaScript and this is typescript I know you we might have heard this too many times that typescript is a superset of JavaScript which is fairly an accurate definition means everything that you do in JavaScript is definitely possible in typescript as well even you can write your entire code just with JavaScript but typescript gives you some of the more advantages like defining the datatypes and a whole bunch of other things to get rid all of the weakness that is present in the JavaScript and move into a very subtle and rock-solid programming language now one more thing with the angular is it's command-line interface now this command-line interface you definitely are gonna find in something like react view or any other framework as well but in the case of angular this is more powerful I'm not gonna say like super heavy powerful like Superman but a little bit more what it does in the world of angular whenever you need to create any new component or any new file or any new component or anything else it not only just installed that package for you but also creates on the template files for you and a lot of people love that that I don't have to create a bunch of other files what are the required files is automatically being generated for me that's actually a good thing in some cases and equally bad in some cases but moreover people actually love this feature in the world of angular the jargons are no easy and you're gonna find them in all of the places things like directives modules and the whole bunch of injection dependency injection observables these are the things which can scare away a lot of people but trust me they are no big deal eventually you understand them automatically when you build couple of projects now surely we can talk about the definitions of directives and modules and a whole bunch of other things in fact in the documentation of angular they heavily differentiate between the modules and ng modules and a whole bunch of other things to be honest I think that is like too much for a beginner and you should not go much into the depth of that in the initial level I recommend to create instead couple of projects so that these directives and these injections automatically becomes clear to you okay so I will not go much into the like depth of these jargons like directives and services and modules but I'm gonna say just one thing surely we're gonna understand them more into the Code section but there is one thing that I would like to talk here is modules angular is packed with a whole bunch of modules so let's just say you want to take input from the user we mostly use forms for that we have a module for that let's just say you want to interact with some API on the web we have a module for that you don't need to install much of the third-party things just call something from the core of angular or maybe some modules of angular and it's gonna be all done so that's the only thing you should keep in mind surely that's gonna become much more clear in the later part when we're gonna code actually a project in angular okay so now that some of the bits and pieces about the angular is absolutely clear it's absolutely that time to hit that subscribe button first please go ahead and hit that subscribe button and also share this video with your friends so that they can at least get started with something like with this crash course and don't forget to hit that comment section as well I'm reading all of those comments if you have some time please write some comment about what should be the next crash course it really motivates me to do something and I really appreciate that okay enough of that now let's go ahead and move on to my computer so that we can actually code something on angular you don't need much of the tools and you can be on any system Mac Windows doesn't really matter as long as if you have you have an access to a command line interface and some code editor like vs code it's gonna be a howl okay that's the only thing we are gonna need it's a super lightweight so you don't need to have like gigs and gigs of ram you can work on that easily so now without talking much further let's go ahead and move on to computer and create a very simple very basic and amazing project in angular on my computer catch you there welcome to my computer where I record thousands of video every year so let's get talk on let's get started with the talk on angular and in this part this is the second part of the crash course we are going to actually understand some of the basic documentation and we're gonna create a simple project using angular that's gonna give you a head start and understanding the directives the injection and a couple of other things it's gonna be draw the simple project I highly recommend you to follow along with me so what do you need to follow along with this now since angular is little bit dependent on the node GEOSS you don't need to be a master of no GS it just needs to be installed on your system it's available for Mac Windows and Linux and there is no such a big tricky thing to install it it's very easy so go ahead and download the latest version for your operating system and just go for the LTS version once you have got node installed then we are going to work on it in a minute and the next thing that I highly recommend you to visit is angular dot IO the official website of angular where you can find a lot of things that's going on with the angular including some of the features that angular are openly openly just admits that these are the amazing things we do and a whole bunch of other things now well the quick thing that I would like to point your attention on this website is on the very right side the github button of the angular now github is a very good resource to find out what's happening in the code itself for example if you'll go a little bit there at the bottom you're gonna see learn about the latest improvement and you can see here that what is the latest version that is going on in the angular does these revamps in the update itself is going to affect your project or not this is a nice way to keep a track on that and of course we do have breaking changes they always mention that that what are the breaking changes that are going to be happening that might impact your project itself and as you can see the latest version is nine points something up here which is going on and they have a pretty insane cycle of revamping their code these are like one of the fastest team that is managing any framework they just roll out back-to-back updates and new features and all of these amazing so see you can see that in 2019 fifth it was the 8.1 beta and you can see up here at the top in 2019 on the ninth month they have rolled out another version so it's a rapidly growing framework in itself now moving back onto our angular website itself let's go back back there now another reached the point another thing which I would like to here is actually their resources now most of the time we are going to be working with the vs code our choice of editor surely it can be sublime text or any other but this angular actually gives you a couple of other resources on which you can write your code well the most popular one is MX EO which is a web-based drag-and-drop IDE but most of the coders actually prefer to use either vs code or maybe web strom to work with that so these are the most popular one but surely there's no shortage of that for the tooling most of the time we use the angular CLI I don't worry it's gonna be installed in your system within a minute but there are others as well most of the time this angular CI is the most common one which can do most of the job so these are the basic ones and I highly recommend to check out that maybe you are interested in finding some of the data libraries or UI components so it's mentioned up here but only a few people actually check it out on the official website up here ok now another thing which you will be using quite a lot is the documentation up here now angular documentation can be really really massive and it's pretty easy to get lost in the documentation so I'll point out some of the things that from where you can get started so that you don't get lost out there the first and foremost is not to check out the get started know you don't want to check out directly this one you'll find yourself lost you want to start directly from the setup so this is the one that we are having here now first and foremost is installed angular CLI and if you just check it out angular CLI let me assume that a little bit it's gonna say that NPM install - GE at the rate angular slash CLI this is the first step the second step is to create a project which is done by the ng as soon as you install angular and new command is being allotted in your system which says ng and yes Angela angular stands for ng the a is just remove the a and then this is ng so this is it's coming up from and then we can run the application by browsing into the application and simply saying ng serve - - open so there we go no big deal pretty easy now here's a quick gotcha for all of you when you're going to copy this command NPM install - G just click up here at the top now the Gotcha is only for the Mac and for the Linux user Windows user please open up your terminal or command prompt from the administrative privileges if you're using the git bash absolutely awesome a big thumbs up for you for all other people just make sure you open up your command probably using administrative privileges a Mac user don't have any such thing so you have to use sudo for that so I'm gonna write this command in the terminal but first and foremost on my desktop I have created a new folder which says angular crashy because that's a classic name for having a crash course and when I do a quick LS means dir on Windows it does nothing it's just an empty folder now what you have to do is just paste this command up here which is NPM install - gee by the way - she means I want to install it globally so that I can access it whenever and wherever the folder is I want to access it from anywhere so just go at the very start of this command and just write sudo if you're on a Mac and Windows Mac and Linux windows users you don't need to do that again Windows users don't need to put this sudo once you're gonna hit that enter it's gonna ask you for a password just go ahead and give it a password mine is already installed so I'm not gonna run this one command but for you it is very important to run this okay let's go ahead and see what is the next in the setup in the next setup it says you can use ng and new to create a fresh new project I'm gonna click copy on that and I'm gonna go ahead and on this terminal I'm gonna paste that so ng new and then it says my - I'm not gonna call it as my - app I'm gonna call this as simply YouTube a and G for angular just a random thing that we have come up here we're gonna hit enter now it's gonna go on to the github and it says would you like to angular routing now surely you can add angular routing here which is gonna give you aspect of how you can write multiple pages but we are creating a very simple page we don't need routing but you definitely can add routing later on as well no problem in that if you know your application is gonna be big gigantic from the very start then surely add routing for that it's just a matter of saying yes sir now I'm gonna create an here so I don't need routing as of now because it's a very simple project just having an extra file is not gonna make any sense for this small project so let's hit N and hit enter it's gonna ask you that what are the style sheet format would you like to use now just to give you a brief idea I do have course on s CSS not has CSS on the sass on YouTube as well so go ahead check out my playlist or visit learn code online I do have a separate library there as well to understand more about the sass which is like CSS on steroids but as of now just to just to just to directly talk to a wider audience we're gonna keep it to the base CSS only we're gonna hit enter and now it's gonna go on to the github will fetch some of the files from the github and we'll create a small template which is just ready to go we can start that project directly means everything is configured properly and everything is just awesomely working fine and one thing I really appreciate with the angular guy is how they have modified the template which is given directly to us compared to the previous template previous template was ugly this one is much more beautiful not a big deal usually we just delete this template but it looks good to have a good template okay now it's gonna take a little bit while to download all these stuffs for us in the meantime I would like to walk you through with a couple of things which are also important now if you'll check on to the documentation which of course you are gonna do a lot you're gonna look on to the fundamentals here now they have created a hero app which helps you to walk through with the angular and they talk about a lot of things for example in the architecture they they talk about modules components service and a whole bunch of things there are also forms an observable observe A's observables forking sorry for that and bootstrapping and ng modules and a whole bunch of other things I don't recommend you to directly watch this or to read that one first I recommend you to watch this video complete that and then only to move into what they are these modules and how to use them and all a bunch of things directly walking into three into these modules may actually create a little bit confusion for you so surely it's important to have a idea of what these are but we're going to talk about them a little bit later so my recommendation is to go into the architecture a little bit later okay so that's all I wanted to talk about that surely they have a very very detailed and thorough documentation but that's also the reason of some of the confusion okay so let's go up here our package is almost installed and come on just last few minutes would you like to help Google with the privacy policy probably a video for another day about how much privacy is being accepted here right now I'm gonna give all the yes settings up here otherwise it bothers us a little bit okay okay so it says everything is done nicely and rightly I'm gonna hit this clear screen do a quick LS to see that yes there is a project in my directory I'm gonna walk into that project by saying CD YouTube - a and G hit enter hit an LS again and you're gonna see a whole bunch of files are available to us so what I'm gonna do is I'm gonna open up my code editor happy here so what I can do is there are a couple of ways I can do it from the command line as well but I think it would be much more easier for a whole bunch of other people if I just open up my code editor and just open this up and drag and drop it here okay that's one of the most easiest way to open that up file shortly you can write up here just say code and a dot and it's gonna open up an editor in directly in this file but I want not to be in this file I want to be this way okay now let's go back on to the set of introduction because there is third step being involved up here so let's go into the setup and the third step there we go it says walk into your project and then say ng serve - - open so we're gonna do exactly the same let's go on to the command line terminal and we are gonna say ng the space serve and - - open by the way ng serves a whole bunch of command which you can check out by having an ng help I'll talk about that probably in some other video not right now we're gonna hit enter and now it's gonna open up a browser a project into the browser which actually to be honest looks absolutely beautiful and I love it I just love it how they have crafted this page compared to the previous one nice SVG graphics some of the new things how to generate the component this is directly being given to us this is how you generate any component the beautiful part is it's also gonna create the template file for you so you can just click on this new component angular material dependency run watch test build for production a lot of things that you can have a little bit of walkthrough and reading and also in here it says YouTube Eng so somehow it's taking the project name appear and app is running also notice this YouTube ang is also at the top so from somehow this is actually looks like this is coming up from available now let's go ahead and take a look on to our file that how it looks like so it's time to just expand the screen with our vs code take advantage of the full real estate there we go okay so of course most of the time we just directly jump into the source file there we go and we can see a whole bunch of things in the source file it's it's a really gigantic thing that's going on up here so let me walk you through with the architecture of this angular in this angular project you are always gonna find a to JSON file both of them are really really important so the first JSON file we have actually many JSON files up here the first one is the package dot jason this package dot JSON file actually involves all the packages that are required to run this angular project for example the most important one is angular core which includes core functionality of angular but we do have a angular router as well we have got animations compiler it's I told you it's a gigantic project so there we go there is some dev dependencies as well these are not being taken into the production itself but these are like for your owner things like some of the jaws main stuff and all these stuffs so these are like developer dependencies and a good thing is we usually don't touch this file we usually interact with this file using command line if you want to install anything new so there we go this is the most important file number one another file the most important file number two is angular dart Jason this angular dot JSON file is one of the file where you mention a whole bunch of other things for example these are style sheets where you mention again these are global style sheet I'll walk you through the difference in them between them as well there are some things like assets being the do you want to import and a whole bunch of other things that you are having so this is another important file that you should actually keep an eye and in some of the bigger projects actually we touch this file a lot okay so now that you understand what are the two important files that you have to take here you can actually in the initial level you can ignore the files like RTS config app Jason RTS config Jason shortly they are important but they are just there you don't need to worry too much about them until unless you are specifically editing them and we are not going to talk much about this get ignore because I have talked a whole bunch of things about it in my other get course right now V it's not gonna impact as much okay now moving on to the meat part of this application which is source in the source again you're gonna see a whole bunch of things including an index dot HTML file which is pretty good we just have to notice one thing here which says app - root apart from that we can ignore everything here okay just keep in mind that okay this is all good we have a main dot TS as well we don't actually bother much this file as well just keep it there just keep it there and then we have got style dot CSS and this is the global styling remember I told you in just a moment ago that in the angular JSON this file is mentioned this actually impacts the entire webpage the single page application say is that it's gonna be just one page in the entire application so in our index dot HTML it just says I just have one component in my body which is a prude so everything is injected or inserted in this app root itself pretty easy not a big deal ok moving further we usually don't touch this environment we usually don't touch in the assets until unless we actually want to insert some of these assets up here okay and then we have got this app as well which is a little bit tricky part up here so this app is now currently serving a component you can add more component here remember we just saw the command to add components here which say is ng generate component and XYZ so XYZ is the name generate component is a command to generate the component and whenever you are going to generate a component it's also going to generate relevant file for that compose and what are those relevant file every time a new component is being added it adds a CSS file for that it adds an HTML file for that component it's also adds a dis spec TS file which is moreover a testing file and you can find that out using these described before each and it I have talked about extensively that why these files are being created why it is being called it and everything in my MongoDB series so in case you want to check that out currently in this one we are not going to touch the testing part then we have app component es which is more like a brain of this component so everything that is happening like changing of the variable names some calculation that is being done is actually gonna happen in this component dot TS and then we have got finally the module dot TS which is like the main modules and you might be thinking a lot is going on here and you're right a lot is going on in here we're gonna come back on to this later on first and foremost we want to play around a little bit because playing with the file gives more of a confidence feeling so what we're gonna do is first and foremost let's have a look on this component dot TS file by the way every file is gonna have an extension of dot TS which means it's a typescript file but you can actually write almost the JavaScript up here in fact this right now here is like more over the JavaScript instead of simple typescript and what would be a type script in that type script would be something like where you have mentioned the datatype up here for example this would be a more accurate version of a typescript but surely we can ignore that as of now not in a real angular project I would highly recommend to use the or take the full advantage of typescript so right now let's just get rid of that let's not make too much thing bucky up here so we can see we have a title that says youtube - ang we can verify that this title is coming up here as well youtube - ang now let's go ahead and change this and have a little bit fun here so i want to change this title to something different i want to call this as project oops project CC for crash course not Creative Cloud of it okay so we're gonna save that and let cohab it automatically renders the project and we can see project CC up here okay so it's good that we are able to see or change some of the things not much but I want to add more fun stuff up here and in order to add more fun stuff I need to understand this component file so I think it's a good time to talk a little bit onto that so first and foremost we can see that we have got an import statement which is importing a component from the angular core this angular core is like a meat part of the angular which includes major of the functionality of angular and from that we are just importing a component then after that this is something known as decorator now this decorator is a concert which is available in couple of other programming languages like Python as well and it's more like a templating stuff and right now you just need to understand that every component needs to have a decorator and some of the properties being in being available appear the first and the foremost very important property is the selector remember the selector that you can see up here is the app root so what is gonna do it's gonna look into your web page where this root is a prote is almost like an h1 tag or P tag or any other tag remember let me just show you in the index dot HTML you saw this app - root so in our regular HTML we don't have app - root but in the angular react we can actually not react actually but in a couple of other frameworks we can actually define our own selectors so this is the where it's gonna look for so this app component is gonna go into your web page will find and will look for this app root wherever it finds the app root it injects your code there so that's kind of your injection then we have a template URL as well where your template URL is right now it's in the current folder which is just the HTML file then it says the style URL as well this is component CSS these are the styling and HTML for your just one component it can be just a button as well it can be anything but it's not a CSS for the entire webpage you're gonna see the difference in a minute okay so there we go this is what we are having then we are having an export of the class which is app component itself and it's calling a title or project CC okay good so far good now how we can create more stuff now let's just see we create more stuff we gonna call it as date and how do we define a new date in JavaScript we're gonna simply say new date and there we go we got a new date appear so pure JavaScript shortly it's not gonna give you the exact date it's gonna be a long string mode over that but shortly we're having something here so let's just save this now what we want to go is we want to go into this app component or HTML and we can see it's it's a lot of things going on up here a lot of things first and foremost I can easily spot that this is a pure CSS going on okay no big deal as I keep on scrolling keep on scrolling we can see some CSS SVG's are going on I'm looking forward to find out where things are going on so we can see that there is something learn angular and CLI documentation so I want to change some stuff here so one good idea is that I want to change something just with below this resources so I have to find that one good way is just press ctrl F or command F and just look for the word resources there we go I can find it online 353 in case you are still lost and we can see just below the h2 I can write some of the stuff that that can be totally mine and also if you'll scroll a little bit above there 344 you're gonna see in the title it says all the curly braces and then title and something app is running like that so we have no idea what that is right now so what we're gonna do is we're gonna create a game an h2 tag okay and we're gonna write something up here that says like it works it works with a couple of exclamation let's just save that and see if we are doing some right editing there we go it says it works okay step one is okay now look into the app component or TS we have got this title but we have got a new variable which is date so let's go ahead and inject this date appear so how we can do that we're gonna remove this it works and in case you want to inject any variable you have to use two curly braces up here a little bit weird syntax but yeah that's how it is and then you can use any variable just right here so save that date and let's see if we are gonna get the date here huh there we go we got a date a Monday September and it's it's a pretty long date according to Indian Standard Time because I live in the beautiful country of India moving further here is a quick assignment that all of you have to do now you have to do something really awesome you have to create available in the app component which is gonna be your name so just create a variable name and insert your name in that variable now go ahead in the app component I want to create just below this P tag just create an h1 tag it's little bit weird but yeah just below the P tag create an h1 tag and inject your name there it's gonna be absolutely fun so just go ahead and do that yes I'm waiting for you to do it okay I hope you have paused the video and you have done that now let's move forward and talk a little bit more stuff onto this app component now that you know how to create variable now variable has a lot of data types in the typescript and that is moreover a concept that we can discuss on some of the typescript course but right now we are just going to be ignoring the types of that remember I told you title column string something like that yeah okay moving forward since it's a class and in case you have studied any of my course we have talked onto like object-oriented programming you know that all the classes have a constructor and in this specifically the type script you don't need to name the constructor like we usually do like constructors should be named exactly same as the class name in here we don't need to do that we just need to call constructor it automatically understand that you want to just call the constructor okay so in the constructor we can actually log something like something constructor called something like that which would be an amazing thing to do but surely you can do more stuff like you want to fill a array with some data coming up from database or anything you can actually do that pretty easy and fairly easy stuff you can also create your customized method like something like do something if I can write that's correct do something and there we go this is like the basic method that you can have you can accept parameters in that for example you want to accept a value which is going to be of type string everything is in lowercase and what this method is going to return it's not going to return like for example if it returns any number you can write a number up here if it's not going to return anything you can just simply say void that's also a good thing and once you have accepted this value you can do whatever you like you can change its casing like upper case lower case or you can change the value totally itself for example I just want to call it as awesome so how you can just go ahead and do that whenever this method is being called so there we go please e stuff and not at all a big deal for example the date is right here but as you know the constructor is the very first thing which is being called when you call any class or instantiate any object from it I can call this do something up here and just for some bizarre reason maybe you want to pass on a date up here so you can just go ahead and just say maybe you can pass on a date directly or maybe you can pass on some value like something my name probably my name so you can do all these stuff but again this is something that you know already the basic stuff that you can define any method up here we're gonna surely do that okay now let's go ahead and get rid of all of this this is all the basic stuff that we want it to have and I think you got a little bit of the confidence that how things are gonna be working up here now one more thing that I want to talk about is the styling which is a common misconception so notice here app component CSS is totally blank but we have this style dot CSS at the top so this is like a global style and this app component of CSS is the component specific styling for example right now our page is pretty big and pretty long so it's not gonna be differentiable but always keep in mind that think that you want to apply specifically to component maybe a button maybe a form that should be written only in the app component CSS if you want a styling to be applied to the entire page maybe body maybe HTML that should majorly or that is impacting like all of the buttons that should actually go into the style dot CSS keep in mind the style dot CSS is globally the component dot CSS is for component only a very common confusing point okay now we are going to do some of the amazing stuff let me close all these files we're gonna do and work on some of the amazing stuff okay first and foremost what you have to do is go ahead and download the style sheet that is being provided to you it's available at learned code online in my crash course as an attachment so go ahead and download the style sheet because this is not a crash course on the styling this is rather a crash course for for the angular so we're gonna just paste a simple styling sheet so go ahead and paste that it's not a big deal that we are doing up here we are having some of the stylings for the logo we are having some of the stylings for input dot input text some of the list items some of the add button app title unordered list and a container not at all a big deal so this is what we are having and make sure you save that as well okay that's the step number one now for this particular exercise we are also going to need a logo so the logo is also given to you in the attachment so please go ahead and download this logo where we want to place this logo we want to place this logo in other assets so go ahead and directly paste that into the assets okay so I have gone I've went ahead and I have pasted this logo dot PNG file just right there so you can just go ahead and do that and we have actually got the logo styling as well so we don't need to touch this file again this is just a classic CSS okay moving on to the app component or HTML now shortly we have played it with quite a lot and we can do all of our working just right in here but actually right now I really didn't want to do that so it get a little bit of scary but just select all of this and remove everything up here so this is what we want to do next just remove everything up here now we're gonna write some of the styling for this up here so let's go ahead and do that first and foremost we're gonna have a little bit of the division up here now in the component itself it is recommended that you use just one division and that should comprise all of your things surely that can be one case but again it depends on what type what kind of code you're writing what kind of project you are building up then we are going to have an image so there we go the source of the image is gonna be dot dot slash means I want to go into one directory back which is going to be assets and then logo dot PNG and I'm gonna hit enter so that everything is on its separate line much more easier for us to actually just take a look in the LT I'm gonna say L see your logo make sure you always put an L - because sometime it's harder to find that where where where is my logo and something like that it is gonna be just 100 and the height is also gonna be hundred so we are hard-coding that value and make sure you also don't forget to pick up a class for logo up here okay and what we can do in this division is we can just write a simple line of style that says text a line to be Center there we go okay so this is all done our image and logo is up here and it should be appearing on the webpage itself so there we go nice little small logo okay moving further just after this image we are going to insert a title that what this application is all about so we're gonna have an h1 tag h1 is also going to have a class that we have created app - title there we go and we're gonna simply say lco to do list there vehicle shouldn't be a much big deal as of now and then just after this division we're gonna create another division surely after that you can wrap this entire thing into a further division to follow the guidelines but I'm gonna just go ahead and create another division which is gonna have a class of container okay there we go and after this container we are going to simply write add edit to do with the triple dots there we go save that and let's see how does that look okay we are not able to see that but it is just right there so it is just up here LCU to-do list we are going to fix that up in a minute just go ahead and just work on that looks like actually we can fix that up by having a color of this class AB - title let's go into the CSS and look for the app title there we go the color is this one we can actually change that to c1 c1 c1 which is a nice grayish color should be easy to see there we go pretty okay pretty okay moving further we're gonna go into this HTML part we have now what to do so first and foremost let's have a line break so that it doesn't bother us much and then we want an input so and this input is going to be of type so input callin text there we go and I'm gonna again hit everything on to the next line because it's much more easier for you to understand and see everything and we don't need an ID as of now so I'm gonna get rid of that okay so we have got type and we have got actually don't need the name as well but we definitely need a class so there we go class is going to be input - text and further we are going to place a placeholder which is gonna say type to do okay there is a little bit more things that's gonna come up into this input segment up here we're gonna keep that a little bit on to the later phase so just keep a reminder up here that this input is not done it requires a few value for example I want to add a feature that whenever I hit enter it should also behave like I have clicked on add item so we are going to fix that in a little bit later okay and I'm also gonna add a slash so that input is complete now we're gonna add a button up here so let's go ahead and add a button this button is going to have a class of ADD - BTN and this is gonna just say something like add to do now surely this button is also not complete because we haven't added the functionality of how things gonna add so there we go this is a nice diaper to do very small one and we have got add to do so styling is also checking in nicely now the next thing that we are gonna have is another division which is gonna which is gonna like keep up a stack of all the - dues that are going up so let's go ahead and hit enter and we are gonna just have a div of class list which is also already gonna kick in because we have styling and we're gonna have an unordered list inside the unordered list we are gonna have a list item which is not gonna have any class as of now but this list item is surely going to have an input of type checkbox checkbox there we go and it is also gonna have a name that is gonna be is done we can actually manipulate this is done by using the database later on but right now we're not gonna do much into that and just after the input we are going to have a value I'm gonna call this as task 1 this is hard-coded as of now surely we're going to fix that later on and just after that we are going to have a button which is gonna have a class of BTN and we're gonna call this as delete right now it's not gonna delete but only the CSS is gonna kick in so there we go and this is how it looks like right now we have a check mark we are not gonna manipulate the CSS like to check it off or something as of now surely we can do that later on right now we have the CSS and this add to do now I want to show you something really really very specific up here so let's go into the app component CSS actually app component CSS at the very top and I want to do something crazy up here I'm gonna select a body I'm going to apply a styling to the body which is gonna be background color that is gonna be zero zero zero so it's absolutely black when I save and run this notice up here it's not actually taking place why is it happening and this is exactly I was talking about the confusion point of people because this CSS is actually just for the component and your component doesn't actually comprises off the body it just starts from the division directly so this kind of CSS if you want to apply something to everything this actually usually goes into your style dot CSS so here if I apply this one and save that now notice the styling is actually kicking in directly so these are the things that you should always keep in mind whenever you are applying surely in the CSS you can do a better job of expanding this more but again this is not a class for CSS this is more over a class for angular itself okay so the design and the styling and the template part is all good now let's go ahead and talk more on to the functionality part which is actually the part that I love so for the functionality part I'm gonna introduce a couple of more things to you save that and we can actually close all of this to avoid confusion okay now I'm gonna go into this my app folder and I'm gonna right-click on this and I'm going to create a new file this new file is gonna be called as to do dot TS make sure TS is important because it's a typescript file okay now what we're gonna do in this now you might have note is that I told you in the earlier video segment that angular actually follows a lot about MVC this is almost a part of it but we are not keeping it in a separate folder calling models itself now in the angular we want to create a to do so what are the properties these to do should have so these are the things we are gonna define it's almost like defining a class but in the class we add functionality in this type of data type we don't actually add functionality we just add a definition of it for example of course I want to export that it is known as interface and this concept of interface is actually very well explained in the Swift documentation but I'm pretty sure you are not gonna go there so let me tell you how this actually works first let's write it to do interface so in the to do interface what I want to do my to do should obviously have an ID that should have a number okay that's nice what else should have it should have a value that is gonna be of type string obviously and then we are gonna have is done which can be manipulated by a variety of things and that should be a boolean there we go so this is my to do in the interface we usually never write the functionality part like for example if you see in the class when we were talking about the class we created a constructor we created a method in that in the to do interface or any interface we never write the functionality part we write how it should be it's just general properties about it that these are the rules that this is gonna follow and it's never going to break we surely can add more things like required not required and MIT should be absolutely compulsory but right now is just as okay we're gonna close this so this is a very easy thing surely we can add more properties but we have to deal with them as well okay now let's go head on to the brain of this component so a quick question what is the brain of this component and in case you answered module tortillas you are absolutely wrong in case you answered component or TS you know you are absolutely right in that case so now we're gonna work on this app component RTS okay so in this component what we're gonna do in this one if we're gonna write some of the functionalities appear first and foremost is you have to import your template that you have designed for to do how do we do that and by the time template I mean that interface we have defined so we're gonna simply have an import statement and from where we want to bring it up dot slash to do now if we don't need to write dot slash to do dot TS because it's already compiled in the angular framework that whenever there is a TS extension you can just avoid that what is the file name that you want to call it I want to call it as to do you can actually call it anything lower case to do upper case but I'm gonna call this has to do so save that this is the step number one that we have to do now in the component we actually in case we want to generate a new component also these things like these entire this code is actually being generated automatically by the angular itself so right now we are not doing anything extra here ok moving further into the app component we can actually get rid of this title title is good actually I'm not gonna get rid of this all the way are not using it but still for some reason I just love it we're gonna add a couple of more our variables in the first variable that we are gonna have is to do value this is gonna be actual to do itself so we're gonna call this as simply string string and we also need a list now what is this list for now you might have already guessed that we have this to do here and this to do is gonna be a list that means an array so we have to loop through this array so that's why we are creating and list here we're calling it as a list which is gonna be a list not of any type of array but actually an array of to do so that's how we define it there we go pretty easy I hope you can understand that pretty easy now comes up an interesting part which I really want to discuss now in recent most of the libraries and frameworks that you are seeing up here you might have noticed they actually comes up with something known as lifecycle methods these lifecycle methods are very much inspired by the mobile apps in the mobile apps we have many methods like what will happen as soon as the app is just opening up what will happen will app will go in the background or is about to just go in the background or is coming up from the background or is just about to come live from the background so there is these life cycle method that was first introduced in their mobile apps but later on web applications find out that this is an amazing concept and we want to have it so that's why you're gonna see these lifecycle events quite often in these frameworks and one of these a life cycle event is on in it so in the world of angular we have on in it in it so this is the method that we are having but since this is an angular method usually most of the things you're gonna see are prefixed with the world ng for fun purpose I don't know what else they had ng serving up here okay so this is an ng on in it so as soon as the on in it means as soon as this component is about to be initialized what we really want to do first and foremost since we are not taking up anything from the database or anything we want to flush out this list so we're gonna say list is gonna be just empty now if you are if you are bringing up lists from an API or from a database we really want to populate this on this on init method and also I want to make sure that this dot and again in case you want to refer any variable we use this here so what we want to do is we want to say this dot to do value means the value should be empty so we're gonna just empty out that so that there is nothing typed already into this surely we can put up a value up here that is gonna be already typed up into the box or the input box we really don't want to do that okay now moving up here let's just save this come back up here now there are two functionality which we want to focus more what happens when I click on this add to do and what happens when I click on this delete button that's it shortly we can incorporate more handling api's database MySQL MongoDB but that would be a full fledged course not a crash course and it will definitely scared you off so we're gonna create just two functionality what happens when to click on add to do what happens when I click on delete let's go ahead and add these functionality it's gonna be absolutely simple so for that we define a method add item let's call it that way and there we go so what happens when I click on add item first and foremost I want to check whether somebody is trying to add empty value in that so I'm gonna create just a simple if statement I'm gonna say this dot to do to do come on suggest me to do value is not equals to empty if that is the case then only I want to do certain things what are those certain things I want to create an object of type to do and I want to add all the properties that I have mentioned into do dot TS so let's go ahead and do that Const let's call it as new item and this new item is of type to do and what are all the values that's gonna store of course I know the value is gonna be ID then the next value is gonna be value itself and finally we are gonna have is done so these are the three things that I have to take care the ID surely I can incorporate more modules into that so that they can generate a unique value for this and stuff now I can just go away with saying date dot now and simply there we go we have just got rid of that in a very very cheap manner surely we can actually there's a semicolon there's a comma okay surely there are better ways of handling this but I right now my goal is to keep everything simple so that you can follow along and understand everything understanding is very important so then this dot to do a value this is how we actually fix that up and is done by default we're gonna click it as false but surely we can manipulate that later on and I forgot to come again my bad ok so this new item which is in in itself is kind of an object is being up here now what we need to do next we need to push this new item into the list of array or list of to do types of array so for doing that it's pretty easy just access this list and just to use a method of push and then we are gonna go new item surely there are more efficient ways of handling this but right now we just want to do this once this is being done I want to get out of this this if statement and once everything is being settled and done I want to call this this dot to do value and I want to mark it as empty why am i doing this the reason for doing this is as soon as user actually enters anything and hit enters that value is being now saved into the array but nobody is clearing out that input box so this is exactly what we are doing at line number 29 so there we go pretty simple pretty simple this air item is a pretty simple thing okay another thing so one button we have handled which is add to do another button that we want to handle is delete which is actually super easy to do because only because we have this ID being associated with that so we're gonna call this as delete item there we go and there we go so whenever a delete item is being called we want that you should pass on an ID which is of course a number number if I can write number okay number there we go so this number is being passed on to us automatically when we have this delete item so all we have to do now is we we are already having a list of items that we are like looping through now we want to create another list of item which is not having the value equal to this ID pretty simple stuff so we're gonna say this dot list and we're going to update this list with this this dot list and apply a classic JavaScript method which is known as filter which actually allows you to pass on any kind of a call back up here call back function so it's gonna be simply looping through all the items that are present in the list itself and just don't put air one item which is following this criteria which is item dot ID not equals to ID so there we go pretty simple in just one line there we were able to do that pretty simple pretty basic stuff and of course don't forget the semicolon save that and there we go delete item has done what it's doing it's actually rewriting the entire list or kind of modifying this list and filling up all the values except the list which is matching or the value which is matching this ID pretty simple basic classic stuff of deleting an item there we go so brain part is all done now we want to inject all of this functionality into this app component dot HTML so how we're gonna do that now it's actually not a very big or kind of a rocket science is actually pretty easy so first and foremost I'm gonna walk you through with how to agda button so for having the add button we just need to find that if I can look it there we go at line number 15 we have got this add button so we want to add a functionality and here comes the tricky part about the angular the syntax of this injection is absolutely weird and I'm totally with you on that part for example I want to add a functionality on this button when somebody clicks on it so obviously to invoke the event of the click I have to use a pair of parentheses and inside that I have to right-click how do I know it's a click of course we have to read the documentation for that and there are many other events that you can trigger and this you just say equals and then you just say add item in this add item of course with parentheses is the same one which you have written in your app component remember this add item this is exactly the same okay so this is being taken down how can we take down this delete button as well it's almost a repetition so we can go up here again an event that I want to trigger which is gonna be just like that click and then we can just simply say equals and then we have to mention that which is delete item and of course we have to pass on the ID as well how we're gonna pass on that item is gonna be a little bit tricky which we are going to talk in a minute I can actually shrink that can I yep okay so this how we're gonna pass on the item ID we're gonna talk about that in a second first and foremost let's talk about mode stuff remember I told you that we are having this image and everything going on all absolutely awesome but we want to have this input as well so this input is actually very tricky I'm gonna enter a lot of enters up here so that we can see what is happening on every single line there we go so in this we need to enter this input is the classic part from which we want to take input from the user and we want to fetch them so for that we have to first and foremost enter now here also I want to add event and that event is when anybody says that I want to use a key up there the key down and everything so key up enters so anybody just press the key enter and just release that I want to have a functionality what is that functionality and again that functionality is again an item we don't need to rewrite the code for that there we go pretty easy stuff so that's one event that I want to trigger there is also one more thing which is absolutely important that you want to inject the EM model up here now this model can be a little bit tricky concert but just understand that I want to inject this to do value functionality up here so notice appear in this we are having this to do value so in order to have this to do value in my app component I want to use this so this is an array and a kind of a module that I want to inject is ng module which is coming up from the core of angular and that is gonna be simply fetching the value to do value so there we go and of course this to do value is going to be entering into the array and all those stuffs so this syntax this square brackets and curly braces this is definitely weird but I haven't even got started up here surely I would love to discuss and talk little bit more but this is a crash course and we're running a little bit out of the time okay so this part is all good now comes up the reputation part that what you really want to loop through of course I want to loop through here this list item should be looped through again and again so how do we do that and here I would like to welcome the king of the v8 syntax which is looping through how do we loop through any item in angular we use an extra Cline then we used the classic prefix which is ng and then we use the actual keyword which is for yeah I told you kings of the veered syntax and then we use this like value assignment kind of things and then we say let item of list okay this is absolutely bizarre but what we're trying to do is we are trying to loop through through it each item of this list and this is when I first time saw that I think wow this is something absolutely weird totally agree okay once this is being done what you really want to do is loop through the values which are inside up here so in the input we want to inject this couple of things up here so in the input value we can actually inject the name is done is all good I'm gonna hit an enter to just go on to the next line and comes up again this weird same syntax which we just saw whenever we want to have an NG model up here we have to just go through with this weird syntax and then we have to say now this item what we are looping through is having three properties the all properties that every time we are creating a model we are defining it remember ID a value and is done okay so we are saying ng model this is going to have an item as soon as I put a dot that means we are able to access that property so that property right now is is done okay and then instead of this task one I really don't want to have a task one I want to inject available so how do I inject it just like this and I say item dot value this time I want to access a value and once that is being done the another thing that is going to be used as ID and remember we are using ID two being passed in this method to delete the values so I'm gonna say item dot ID so this is being abused up here so this entire list item wherever we have actually injected this for loop is gonna be looped through this entire component so this is gonna be looped through again and again let's just save that and see if I have made any typos because I am pretty prone to make a lot of typos doing okay so I just noticed that a small type of here I wrote this as ng module because I was getting in a hurry to talk about the modules anyways I have written it correct here ng model so this should be ng model up here okay now this is all good so we have injected everything and almost everything is working fine but now we need to talk about one final file which we haven't yet touched so this is all injection is done so we have done the brain part absolutely correct we have done the modeling part of everything absolutely correct to read RTS module da ta not model the component or TS and that HTML and CSS but there is one file which we haven't yet touch which is module dot es so what is this module dot ES and why we are just talking about this module and why we haven't yet talked about so as I told you in the angular we have a whole bunch of modules that you want to do anything there is a module for it and we can actually work on that so let's just say you want to interact with the web there is a module for it there is a module for when you want to interact with a user and take some input from it but the question is you might be saying hey we have got this input but we haven't actually done much up here in the input so can we use directly these input and the answer is no you cannot directly use these inputs you have to actually tell this angular that I'm gonna be using a module that's gonna take input from the user and we have to work accordingly for example one of the module that we are using is plat from browser and some of the modules that are coming up from the angular core so similarly we have to actually mention that so how do we mention that I want to use a module for the user input so let's go ahead and do that so for that we have to first invent for most mention that I'm gonna be using a module of angular which is coming up from the forms so whenever you using any form even a single form you have to come up here in the app dot module tortillas and have to mention that and what do we call that we call that as forms modules so there we go so once this is being done then we have to do certain things oops then we have to do certain things whenever there is a new module that is coming up we have to to be honest actually this this actually ng module is divided into multiple parts the first one is the declaration then we have got imports and then we have got provider and bootstrap and this declaration is for all the components that you are creating and actually we don't touch that much often because angular CLI automatically does that for us so just put a comma and if you're inserting a component manually just mentioned this component here as well if you're importing anything any module then you have to mention that module here whether that's an HTTP module maybe a module for handling API specifically or maybe a module that is for forms so we're going to just put a comma and we're gonna say I want to use a form module as simple as it sounds then we have some of the providers as well we're not talking about them because that is probably a little bit deep concept and I think I would require another 15-20 minutes to explain that and then we have this bootstrap as well which is an app component now this bootstrap is not the bootstrap that we use for the CSS kind of stuff this is moreover a booster that helped us to bring up template kanafeh stuff so these templating stuff that is automatically being Reger rendered is actually coming up from here let's just save that and hopefully I I'm pretty sure I have made some of the other typos as well so we're gonna fix that up let's go back on to the page itself looks like I haven't made much and we're gonna go back up here so we see else here to-do list up here add a to-do and we're gonna add simply task 1 up here and we're gonna click on add and there we go we can see that task 1 is being added then I'm gonna add a task 3 I just click let's just hit enter this time and it's working fine as well let's just add a gibberish and the gibberish again I had a gibberish again and now I want to just delete the task 3 click on the delete and that is gone and automatically the list has been read rendered how that's possible that's possible through the magic of angular we don't need to worry about the rear-ending of the component once your task is being done now surely we can talk more on to adding more featured like clicking a here and editing that by using the ID we can check mark that and do some additional CSS for that again there are a lot of components available in the angular but that is the most basic and the most simplest thing that you can follow now again all of these exercise files are also available to you at learned code online and dot in I hope you have enjoyed this and I'm pretty sure you're gonna be able to do that now I'm gonna give you a challenge here now I know some of you will not be able to do it some of you will be able to do that but again in case you want to find out any other resources on the web or anything now what I want you to do is I want you to simply create a method that can not only delete this but add a little bit animation while deleting it for that you have to read a little bit onto the documentation part of angular that how some of the animations can be done so and surely some of you can do that using just pure CSS as well so what I want you to do is just click on this delete right now it's just deleting like poof but I want you to delete it with a slow animation and something like that if you are able to do that just tag me up on Instagram at my ID I would love to know the know that how you have actually done that so that's it a really long video for a crash course that's it for this video and it's a really long video make sure you hit that sub it's actually worth it now that's it that's it for this video and let's catch up in another one [Music]

Channel: Hitesh Choudhary

Views: 165,167

Rating: 4.8884168 out of 5

Keywords: Programming, LearnCodeOnline, Angular, Angular latest, Angular crash course, crash course, angular javascript tutorial, angular javascript tutorial for beginners, angular javascript projects, angular javascript for beginners, angular javascript framework, learn angular javascript, javascript for angular

Id: T_Fe4IaG0KU

Length: 69min 19sec (4159 seconds)

Published: Mon Sep 09 2019