Angular Course For Absolute Beginner | (A to Z Fully Explained)

hi guys welcome to angular course I'm very happy to bring this course at this time hope you are too so before we dive in let's quickly look at the course outline so we'll be looking at introduction then the anculation light tool then the angular 5 structure then the angular components then the data binding how to get data and populate it to the viewer the event handling had to handle some users operation they will look at the angular directives and we look at routing how to move from one page to another Etc so these are basically everything that has to do with angular for you to be able to build responsive and solid application so these are basically everything you need to know so let's dive in before we dive in I would like to say this course is going to be fun I have yeah I observe most of my courses are usually very very strict so I'm gonna make this a bit fun so let's Dive In okay guys this is an overview of what we'll be doing so first of all if you go to the login page if you go to the login page you can see if I try to log in you can see it's telling me wrong credential okay if I type in direct one unlocking you can see it directed me to the Post page this is fully angular implementation for redirect for navigating for routing and everything is angular you can see we're here in the post page if I click on post page if I go to home page you can see um in the I automatically get directed to the post page because if I click on this since it did something there we used angular event handling to do that so if I type in something here okay and submit it we use angular data pending event I need to do that we'll consider list of students this is coming from our component that we got passed and you can see list of students posts each of them and while using the angular index to indent each of them and we're using a conditional statement to render this okay so these are all angular pigmentation and if we go back here if we go try to go to a wrong URL a wrong route we can say test you that look you enter the wrong route and okay if you go back to home again go back to home go back to posts if you try to log in um I'm typing the wrong value you are not able to login I does not redirect if you type in a right value okay we can see we got redirected and you can see everything there so this all argumentation we are based on angular um they were done the angular way it says all Co angular way of doing this so this is what we'll be learning and by the end of this course you have understood basically more than 80 percent of angular arm but then you can start building Advanced application and doing a lot of things in angular so see you okay what is angular angular is a JavaScript framework for building web application or websites Some people prefer to call to use application so that's fine so if we go through the angular official documentation we'll see official documentation okay Angola was built by Google the same way react was developed by Facebook so Angola is recommended by Goku for building web application now for the website architecture to build the responsive website we have the front end and we have the back in the front end make up of HTML your CSS on your JavaScript right for the back end you can use other programming language to build your backend like your notes your python your Java Etc now the front end application runs on your browser such as your Chrome while your backend application runs on your on the server so Angola is used to build a front-end applications react is is angular is a JavaScript framework using which is used to build front-end application okay so Angola is component based so get to see what that is let me go to my Facebook page to explain what component is if you oh if you if you are here you see that there are different pages on my there are different sections on this Facebook okay like the upper one here this is a number section so this also can be referred to as a component so components are basically sessions of our of our application so this is a session here so over here we have this managed Pages a section so this is a component okay so what we have below here also so have people here again is a it's a section or a component so if you go to the angular documentation we also have similar things here we have this session over here and the one here and like that so those are components so angular is component based so let's proceed okay let's talk about the angular CLI tool the angular cli2 is a tool it's an angular 2 which we use to develop to build to scaffold and to deploy our angular application so for us to be able to compute stats to create an angular app we have to install the ancolab CLI 2 globally so if we go to angular.iocli okay this is angular documentation page we'll see the how to install the angular CLI to here so I can just copy this but before that make sure you have your node your npm installed if you don't have npm just go to your and go to node download and click on the downloads icon then whenever you download load then you get you the mpa will get installed so if you copy this you have to install the angular Client First you copy that so you go to your terminal so let me create a new window here okay then you you copy you paste it does npm installment of g at Angola slash CLI then if you're using a Macbook which I'm currently using a Mac if you do this it's not going to work it's going to trade permission error so you have to add the sudo to it before you click on it then as when you add a suit though you ask it for password but if you're using a Windows machine you don't need to use a sudo just write npm install minus G at ankola CLI and your angular CLI will get installed on your machine globally so let's wait for this to install when it's done installing then we'll come back and start creating our angular app okay as we can see it has been installed we saw 26 packages added to it and now we have our angular CLI on our machine so now we can begin to build angular projects so see you in next session okay now our CLI is installed now let's create an angular project using the angular CLI so in order to create an angular project let's go back to our documentation we're going to be using our documentation a lot okay because everything spread down here we don't need to cram anything when you go to the documentation you get everything already outlined there for you so to create an angular project we can see here you drag the NG new then your app name this engine means angular we're going to be using a lot in the project the new then your your app name so let's go back here first of all let me make sure I'm in a particular directory let me bring me take bra and let's go to angular projects okay okay so I'll do NG new then let's call this app and cooler picking up in I'm not going to Facebook beginner picking up so let's call it angular beginner app okay so let's click on enter Then it is going on do you want to have to address type yes then here let's select The Styling we have we see if you want to say let's say use the bottom arrow down up you can see we have the CSS scss the other scss and services are order styling platform but we're going to stick with CSS so we'll make sure our address on the CSS bus will hit return and we can see our CLI is bootstrapping our angular application so I'm gonna pause this video until it's done so when it's done installing we'll come back and we'll head on to the angular 5 structure okay as you can see we can see that our app has been successfully generated so we're going to open this on our Visual Studio code and we're going to look at the angular file structure so I'll open my visual studio code editor so if you don't have video can't download it online then I'll go to Open folder I will look for the I will look for where this is here then angular tutorial you can see ocula angular picking up okay so this is the app I'm going to open it okay you can see this is the app here it's been open so let me let's go over the file structure before we go over the fact structure let me go to my extension please make sure you have the angular language service installed and the alcolas methods installed so whenever we are at the angular centers it will be automatic it will get automatically completed for us in order for us to save time so make sure we have this and this other one put installed so let's look at the angular app the angular fan structure so before then let me add a new this is just my vs code configuration it does not have anything to do with the angular app let me add my settings.json okay so let me go to my Dock and copy let me just copy a set in order to make my okay fish Studio code okay let me copy this so you'll make my terminal a bit a bit visible for you guys to see so I will do you can see nice it might be picker so that you guys can see let me just make these 10. okay so that's that so now let's look at the angular effect structure if you go below here which is the tsconfig.spec.json this is our test strip configuration for testing purpose so if we click on it we'll see that the fortifies the test of TS and the poly Fields these are used for testing so this is our general transcript configuration for testing we'll not be looking at testing most so we won't do more testing but all these facts that are all over here to this Source we're not going to be make touching any of them because they have automatically been configured for us so this the next one is tsconfig.json so this is the test script configuration for our entire project you can go for it you can look at it and it's already be comfortable for us so we won't be messing around with this so the next one is the tsconfig.app.json this is our test script configuration for our app you can see now he's telling us that the main.ts is the file that runs our app okay so that's that so the readme.md this is generated by angular this is probably giving us a hint on how to run our app if you can go back here you can start to test engine tests to build NG build to run NG save so these are are a little bit documentation for us to look at if you want to play around our app so the packet.json info familiar with no to consider package.json yes so this is what contains our dependency whenever we install anything using npm they are saved that in our dependency and the module is stored in our node module over here okay so that's our dependency all the dependency that we are using app is saved here so if you go to our package log.json this is this gives us more information on the on the JavaScript dependency installed so it's more of like a lock of that dependency and Depends sorry about the fashion the um every other thing so all the locks are here we don't mess around with this just leave it as it is so the command or config.js this is used for testing it's a comma if I used to come I'll know that camera is for testing so this is where the configuration is okay for testing will not be making use of testing so leave that here then the Apple large adjusting this is a is a angular configuration for our project it's specific for angular only well for the other one is for test so this is for the ankle life will look at it you'll see a lot of things here so they have already been configured for us will not also deal with it so you get this helps to hide things that we don't want to put to the remote side like for using GitHub bit pocket so this is this helps also to control things that we don't want to get pushed in so the editor conf editor config file so this is more of a configuration for our editor okay so it also has not nothing really to do with that project so if you can see now it's saying now that uh trailing space white spaces is not allowed so it's just month an hour our code environment configuration so the browser lists browser list three so this is more of a list of the versions The angular supports who can look at the support Chrome Firefox Edge Safari and other browser functions that are appcar room on so that's that so that is basically that to this dot vs code this was generated by my vs editor okay it just has something to do with angular okay now for the sroc this is the source folder okay we'll be working on this app only on this app folder so for the search folder let's look at the things below it so this is the test.ts is used for testing this type of CSS this is welcome this contains our Global style so any style we add here we affect our entire application so this poly Fields so this help us to if we want if there's some certain functions that are not supported by Uncle that we can write the configuration here okay but most fashions that are used to browse the website I already supported by angular so that's the use of the only field then the main.tf this is the entry point for angular application when we run our angular up this minute of TS files what this will execute our entire application so the interest of HTML this is where this is the index fight that has been wrong okay this is father is strong we also not talk to mess around with this we don't touch it we also not touch the mate or testify these intense fights already because you go for us we can just probably change the title um like that but all this other one won't add anything here it does the way it is the five favorite con dot IOD is just our icon angular icon the development photo that we have for our environment production environment and another environment then the asset package this where contains where we can add our static files like our image file our video file that are static we can keep them here okay so this so that's for that then for this app this is where we'll be messing around with so this is where we'll be writing our our code so let me quickly go around with what you already have here inside our app we said we have the app dot module for now everything will look very weird and confusing don't worry just don't bother around this I'm going to explain every of them in details so this app.mochie.ts okay whenever we import anything we register it here don't worry for now the app.component.tsc app dots corporate or spec whenever you send it into the spec you know that it's used for testing this is for testing okay this app dot component.html file yeah the app dot component.cscsd operating dot module remember when we are creating an application we said when the assets should we allow that thing we said yes that was when this operating of module was generated if we have said no this won't be generated so that's the app module now if you look very well you see that there's everything has dot complement.dis.complement or this that's more like that's what I call the angular way okay that's the angular way of doing things so the angular have a very Street naming convention and everything you have to follow a rule unlike react where you can do this anyhow in angular things have a definite rule so as we go along we are going to see how to name things and how things be done so before we move further I'll talk about component let's run our application and see how it looks on the browser so so let's open our terminal to run your application you do NG save I think this is a bit small so let me increase my terminal size here let's make this 15. okay it's a bit up now so if you click right NG save or npm stats it's going to run how do we know that NG service what runs our our application if we go to our package.json you'll see that if you do npm start it triggers engine safe which is used to run our application okay if you do NG save hit enter oh so that's not where we are hit enter we'll see is is going to build our application and then runs it okay so he's bootstrapping our application let's give it some time to bootstrap and run okay Casino doubt if you look over the top we have dot angular files which is being generated for us okay when we run around our NG save so let's leave it okay now our app is running so see where astronomy will go to localhost look at it here it's running on Port 4200 so let me click on it and follow it okay so now this is these are this is our ankola app this is what is shown for now so where are these things coming from if you go back to our code they are coming from this app dot component.html so all these things here these are what is showing on our page so these are what we stream our page so we'll not be needing any of these are going to get rid of everything I'm going to get rid of everything and let us write something here it works okay so we'll go back okay see here now it's showing it works so that is that so let's look at components so before we look at components sometime if you run yourself as sometimes your application might be running on a different port okay so if your application is running on a different port it's going to show you an error that is already running so in order to configure a port you can do NG save dashboards let's say lesson on 55600 okay okay um I think that's that's what let me just make sure that it's correct okay um okay you can see now I think very soon it will soon be up okay I don't really know why it's taking time to come up you can see now you can look at it if we go back we'll see that it's running on local 5600 so I just want to show you guys that in case you have your 4200 is already it's already let's go back to our default pots so next we'll be looking at components let's look at components there are two ways of writing a component first we can do it manually or you can do it using the command line too so let's do memory first let's create a component called navbar so remember we'll be working inside this app folder so in the folder I'll create double click right click it's pretty folder let's call this nav bar okay so that's so this this will contain our nav bar component so to create a components let's go to new create new file we call it nav bar dots components dot CS is with our test script file inside the same now bar we'll see navbar.com components dot HTML this will be the HTML file again we'll say navbar.com components dot CSS so this is going to be the CSS styling so so what what exactly are these so this TS now by the complaint that's our that's his style the angular way of defining things if you want to create a Company the company name dot component.ts this will be the test referral controls the component the then the name dot component.html then the name navbar dot component.css so this dot CSS file will be the style peculiar to just this navbar components which will be this now this number to HTML file okay why this over than why this style of CSS let me start with the friend over here will be applicable to entire the entire application whether it is enough bar it is a app or it is a post okay so that's the angular way of doing things so in the number component that create let's let's create a class you see class do now components okay so we'll just add export to it so it can be used so that's our classma in order for us to send us it then also we have to import angular we have to import components Imports come pull next okay so now I imported this component from angular slash core now we have to annotate this class with the component we imported at components okay so now I'm rotating this class with the component we imported help Angola to know that look this is a component class an angular automatically do whatever you have to do at the hood so now that we have the find this class Master component how should we how will the class know that it's going to use this HTML and it's going to use be using this CSS so in order to do that we do something like this I will create an object and we say selector then we say selector we are going to give it a selector which will be app dash nav bar okay the selector is and it's all used to identify this component we will see how to use it in a few moments then we do the template to URL this will be d dot slash mouth bar dots components dot HTML so these signals are look this is the HTML attributed to this component they are going to be using templates styling that's that's not still being paid that's called should be style yes style URL table array we can pass it multiple URL to drop your array of of things let's just give this null part of components dot CSS okay so what's going on here okay component.css okay okay let me make sure that this is foreign which is here that we will be using on this number so let's go to our component and let's create a a more like a navigation so say nav so we see l i just say home okay then requested all these posts and let's call this login okay so we'll go to our CSS styling and we'll say nav I will say test align Center go to and I add stats or Li um we'll see pages to display to be inline block activities a display to be inline block and let's give this a padding of 10 please TVC okay I think that's fonts let's give it additional CSS course do for let's just quickly do some things here okay this security background color of let's just see blue fire legs color see white so now if we go back to our this you can see that the number is not showing so how are we going to make this show so go back here and since this is the selector we're going to this selector is so this is the selector will go to our app.component.html okay Gmail we are going to we're going to put the selector here okay we're going to put the selector here and let's go back let me see okay Napa is okay sorry it's not there because we have not exported it so whenever you create a component you are going to export it so now to export it to go to our app dot module you import the component here import nav bar components then you register the component in the Declaration putting the comma here register the component there then it has been whenever you create a component you registered in the app dot module.ts you register the component there then when you are done you go to your Apple HTML and put in the component selector there okay so when we are done here we can see now the we can see the our login our navbar is showing up there so let's give it some more style okay here let's see wheat should be like give the hundred percent okay so we can see our nav hour our number is showing it's not too fine so we are going to probably manage it this is not installing costs so it's more of an angular course to know the Underwood architecture so not necessarily styling so over here let me puts let's say let's just see MI over let's just see Hoover here let's see background color let's see to be black if we hover right it should be black okay I think it's if it's okay here like this so let me give this a more and skip this a party to give us a pattern of temperature okay so this seems a bit it is a bit okay here so um so it's a bit okay like this so here's our mouth bar I successfully created the number and it's working so now let's me teach you how to generate our components using our angular CLI too so do com command J to bring all your terminal or you go to underhood here you click on this icons then you go to your terminal okay so I create a new window so make sure you are also in the in the encoder in the app folder so to create generate a component using the angular you do NG that's angular G that's Miss generate c means component and the component name let's call this a post component let's call it the post so we can see now we created our poster component.css.html dot spec the testing file.ts and here was updated our update module so that means it was imported on our app dot module so if we look at our first structure again if we click on the on the Apple see that the post was our module was created inside our app folder if we open it the post component will see that we have post he created a deal look at the name convention he said positive component.css post the component.html post dot component.spect this for testing fine winning that and then these post dots component.ts you see it automatically imported a component model it annotated our class with this components and added the selector the temperature RL and the style URL for us so this was what we did manually using the nav bar but over here it was done automatically for us so we also see that it also implemented on image what does it only does it means helps to keep it helps to observe the state of our component to check if it is mounted if it is being in use if it is not currently used it helps to automatically automatically corrects and handles that state so if you click on it we'll see that it have you can see now we see we have a few States okay we can see that you have a lot of methods theater we are waiting for us who can we have a pipe decorator and things there so this helps to automatically enter our state so don't really worry about that that is there so that's those are so that is that so in our next course we'll look at data bending and event handling okay so we'll be looking at data pending and event handling so before we Dive In one created our component using the we observe that if we go to the app.components we saw that we did not render the post components okay so in order to render the post component let's go in back to the post component again we'll see the accelerator is app dash post so come to the app.html let's get rid of this then let's render our post app so if we go back let's see what's inside is it post work that's what's inside the HTML file so if we go we can see now that we have successfully rendered the post the post component that was created which is this the upper one is the number component the other one is the post component so let's talk about event handling using this post component so the post Dot component.ts so let's first of all let's create a variable here let's just call this message which is a string remember test script is as a type safety say well come let's say we've come to post page okay so how are we going on display this message in our post.html so that's where string interpolation comes to comes in so most of the time when we are working on projects we'll most likely be getting our data from the database okay we'll get our data from the database we pass it through the the controller which is this component.ts and they will then render the value in our in our com in our HTML file so let's assume this message now is welcome to post page how we're going to show this on our HTML so it's very simple using string interpolation what we'll do is we'll go HTML over here let me just use a H1 tag here we just do a double curling brace okay I will say message hope I'll copy is respect message and if we go over here you can see the message is showing so it's very easy PC so that's that remember this post is already if you go to our post-op component we see that it is already tied to the component.html file so by using double curly brace we are actually creating a test script or JavaScript environment and whatever we put in here it is automatically referenced in this our class file so it's going to check that so that's string interpolation for us so nicely we'll be looking at property binding okay so let's assume we have an image URL okay let's assume you want to display an image first of all let's call this image let's say image URL which is a string let's say we have an image coming from somewhere let's go back to our browser let's just look for a random image on on on Google let's just get this new tab okay let's get the URL for this seems to be pretty long okay let's just save it here let's say this is our image file that's pretty pretty long okay so if you want to get this image let's use we can use tricky calculation to I put this image or we can use proper you can use property bending so for let's first of all try this so over here let's create an image tag IMG so the source here we can just put in a if Javas use string interpolation say image URL if we go back who's okay that's not in the back if we go here let me get rid of this if you go you can see the image is displaying but they also we can also use property binding because this is actually the property we can bend this directly instead of using referencing this image object using string interpolation we can get rid of this okay you can get rid of this then put something like this just use double bracket to wrap up this sroc item automatically refer to this image URL as um as a variable so if you go back here we can see it is also displaying okay so that's that then we can also get data using class bending okay for example let's just create a a let's Click A P tag um let's see and post one says this for an example so um let's say the class that you'll see the class if you want to style we know that if you want to style just say class equals to the name or if I put in the normal we will start in HTML if you just say whatever it is let's say test to test let's say color so if we go to our so if we go to our post dot HTML dot CSS I will say dot this and say let's just say color to be blue okay if we go here we can see the color is blue person says this is explained there okay okay but what if we want to what if for example we want to to dynamically style this if something happens let's give it this time or let's see if it is how we're gonna do that so we're going to be using class bending for that so in order to do that let's convert here and let you see let's just create a bull which is a Boolean alleged cities to be true okay so here we can say if this is values true give this a particular style or if it was not true then don't give you this text so to do that we'll go no get rid of this okay to do that no do something like this we'll say class DOT test 10 bull so if this value is true it's going to assign this test color to these objects okay let's go back to it we can see the text color is blue but if we go to this Boolean and turn this to First and go back we can see that it's not black they start the class was not applied so that's how to dynamically use class binding okay so let's look at style bending okay so this order also similar okay they're so similar so let's create let's create another like okay let me see class by the example here so you clear class binding example so over here let me just make this H3 so it will be a bit bigger for us to see So Below let's say history again let's see let's call this Style I don't know star painting example so in order to give a style who can is same as the normal you can do style let us saying display to let us say none okay if we go down here we'll see that okay let me refresh okay I think it's displaying um display is that displays uh okay let's see 15 I hope that is the display property for steady okay okay let's say display none I think it actually worked in Norm if we refresh we can see the step ending is not showing down here because we said if you did the space should be known so that's how to use Stars how to like keep it's inline style it is definitely elastically now what if we want to conditional give an inline styling to our elements I want to conditionally give it exactly what we did in the class variable the class band over here so this is just similar we will also make use of the same pool with here we'll say start okay here we say Style we say stand dot color let's give this a color equals to when this value when this value question mark when it is there I want to destroy then we give it a let's say we'll give it green green s will give it the green should be in quotation we give it a green s we give it a red okay so um what is wrong with this voice from what we did here okay if this value you can use this value is it's true we give it a okay I'm going to look at the past and expected outline six okay six okay so so let me so I don't really know why this is conditional expression required to expression at the end of the Boolean this this okay I think it's not getting something okay so okay I think let me go fight again so I think probably I didn't do something well okay so we'll see Style thoughts color see standard color equal to if the Boolean value with the Boolean value is true then we give it a red is we give it a security clue let's get rid of this if the Boolean value is there we'll give it a red s let's say we let's give it a green uh so give it a red okay so I think that's it let's go back we can see it's a red because we are saying if the Boolean value is true which is currently false so if I make it true oh I make it true now you can see that it's not green so that has to conditionally pass in a to constantly pass in is an inline styling okay okay so that's that so next we'll be looking at event handling okay let's look at event binding so before then let's mirror up every let me wrap this image in the div so I can move everything to the middle because as it is now it does not look okay so come off everything to the middle because it is now you can see it does not really look good as these things are here let me put everything at the window so let me go to my post or css I will say apply let's say test a line to be Center to all we can now see everything up now in the middle so now let's go back and talk about even underwater event handling event handling is what happened when you when the user does something with on the page for example when it is a click on the page what will happen Okay so those are event handling so first of all let's add a let me let's add the click event let me say see click me okay so if if you either click this button what will happen so here in order to add event handling what would simply do put something like this like I'll say that I don't think it should be inverted I don't know what is this boss so you can see you can see everyone so do something like this ah don't then say click if you want it to be click we say click if user click it then or you write a method that will get executed when a user click it so this methodologies countries and go click OK you can see it might be fine so go to our post.component.ts okay over here and create a method and do click here let's just say alerts I was click I was clicked okay for go to our page um go to our pitch uh it's okay um I think it should be um let me just wrap this opening this so you'll appear the middle okay okay so it's nothing so if we click on this you can see it there was an alert I was clicked so this is how to handle events so there are different type of event handling okay so next we'll look at imputer to collect impute from a user how to manipulate input you know look about form and that would be a two-way bending so let's look at that okay let's continue our event handling and we'll be looking at two-way data bending so all of this actually only part is a way to collect data from the user let's assume we have a phone a form where our public chat app where these are typing a message they will collect it they will send it to the second person so it's a way to collect user compute so there are two ways to do this okay so let's just first of all create a formula create an input form let's say placeholder let's say enter your first name then let's create a button to sub mits okay let me just give this time and just give this class so what singles putting two I'm gonna be styling this because I'm gonna be stabbing this in mind you can just ignore this so it's just a way to style to sell all this so go to our our this same Mansion let's just give you 20 pixel I say pattern five pieces not supporting two let's give it a party please see weeks of let's say 41. 7 percent okay then foreign okay so I think that's all so let's just see how it looks like okay it doesn't it's not good in the eyes so let me give this a background color of that I call this blue um now front end let me give this a brick so yep I think it's a bit better now so so let me give this if color of it is a white um that's okay so I think it's a bit okay like this okay so it's a bit okay when you start typing a value then you hit on the submit button Okay so um 31. 30 okay so it's a bit okay now so let's do that um over here so the first way to do that is just to use the angular first way here we just say first name so what this does is it collects this entire object and save it at first name okay so here I'll just create an event and say um I just say key press I just say key press equals to on layer C hand to first name I'll do first name so here I will say first name dot value okay so this first name is the entire event object of this input so the value means that we're collecting the what is being typed in the value which is what was typed in and we'll pass it into this method okay so this method I will go to the Post components and create the method there who take it if take a first name which is a string and here layer C console.log let us say first name okay and at the same time let me create the first name object say first name variable yeah string equals to empty and let's say when whenever it is handle this DOT first name equals to this first name that has it passing and say this dots okay so what this does is let me quickly go fight again this is a method that whenever that whenever it is called it collects what the value that is he passed in it saves the value so this variable that has this click that is declared outside of it and then it console log the value of this variable so whenever we we type in a value into this input it collects the value and then passes it into this handle form handle first name which then saves it here and it console locks the value so let's quickly see if that will work let me go to my inspects go to console let me scroll this okay it's not scary but let's just say dnnis you can see the values they are being console logs that means that limitation works so that's the first way to do that so the second way to do this is by using the the form module this is and so but when you so let me quickly just comment this let's say so let's see first method okay then commit everything out let's build this again and see second method so in case I push my code you guys want to go via the first method again so for the second method let me do the same thing let's get rid of this and get rid of this so let's get rid of everything here okay is back to normal okay you can see now he's back to normal whenever I type in anything here you can see it's not console login in fact click nothing is going on so let's look at how to use form module to do this so first of all to do that we'll go to our app dot module file then we'll import the form module import from module from this app then any module that we import that is not a component we declared them we register them on this Imports so here I put a comma and register the form module okay if it was a component that would determinantly we register them on this declaration path so all these other things that are coming from the core and cooler module so we put you print the four modules and we register it here so when we are done with that so go to our postal HTML over here will do something like this we do sorry we took curly braces we do our event handly and we use Ng model okay so when putting this NG model it automatically um capture the value of what the user types in okay here we're not saying call to the one that's in first name so what I've seen here now is that whatever the users have passed in should be automatically saved automatically saved in in this first name that is here so I can now let me con comment this how this is no longer useful for what so whatever I use I passed in will automatically be saved in this variable instead of passing through this other rafter we took so this make our code more cleaner so now one of these are click on some means let me write a method to let's say handle submit okay so let me go here and write a method that handles submits so whenever this is done this is let's just say a lot these dots first name so sorry I think is tradition this I see as an objects I don't know what's going on here okay so just get rid of this under submits okay a lot these turns firstly okay so that's that so let's test our implementation so what we basically did here was that whenever I use I click on this submit it causes method uh in this method here we see that it's I've put this variable first name that's you see it any value that he says what is or with this it is what it are put so let's go to our let me write show share and submit you can see George is being outputed so phonetic I have more of Indian subscribers to my channel so let me use an in let me use it more Let me let me use an Italian name let's say Hassan is a universal name okay you can see it says her son so let's say sovik okay so you can see now it's in suffix so that's a two-way data pending and a way to handle user input and all of that using angular so the next step will be looking at angular directive okay here we'll be looking at angular directive so what are angular directive angular directive are way too much to kind of like make changes to our our Dom Elements which is our domestically document object motor which is actually your your page so it's a way of manipulating the page let's say for instance we have you know we are creating the post a a Blog Page and we have posts or list of posts coming from the back and if you want to populate our front end how we're going to do that are we going to know unless we're having like millions of posts coming in I want to populate the front end according to how the posts are so how we're going to do that so we'll be using our code and ng4 and ng4 we have ng4 have NG if and all so let's quickly see how that is done in example so let's go quickly let me write this heading here let me see list of two things okay okay then let us see UL and that of that so let's go to let's see let's assume we have um let's say we have let's say list of students it is an array of string equals to of course to let's say we have demons Josh has some Miriam there is Pets okay let's just leave it that way let's we have a list of students an array I want to display this on my front and how we're going to do that so in order to do that so there's an uncle now way of doing things let's just create an airline here so right here we say dot Ng 4 we see dot ng4 equals to okay ng4 equals to say let's students of this then here we just use string calculation answers to things so what exactly what we did here was that this engine for example and directive using which is which helps us to do a for Loop so it's saying direct students of so this list of students here let's assume this is coming from our bank and this so what it does is that it collects this it looks over everything here and he saved each of them as students so whenever we put in the student it automatically look at this and also can you replicate this list itself to the number of students available so if we go to our our application we can see that we have list of students here we can see Dennis Josh and everything was displayed here okay so that's that so what okay what if for example we we have a list we have an array of objects so let's do that let's say for example let's say we have a blog post list of students posts let's say we have a blog posts which is an array of array of objects so sorry currently if you say up you see objects and do this is going on for nice the uncle have not been able to handle this so it's going to throw an error so most of the time we just say area of any okay so um let's say these are this is an array of object let's say we have a post let's say user has an ID then it has a let's say the username and layer say this is Dennis I'm the one then it has let's say a post type 2 what was that let's see how I'm sorry I think I did some type to cook food so I think there's a I did a blog post on how to cook food then somebody else also they just operate this somebody else has an idea of two someone has an entry of three so I have idea for that is Miriam at this piece so weak let this be let's just be Gene okay put start to how to this is gonna be hard to it's this is gonna be how to keep fits keep fits f80 this is gonna be how to train dog okay let's say we have this app object of objects coming because most of the time this hard data come in from it that is actually form of objects so how we're going to know list them out so over here we are going to stay make use of similar things okay so we'll see that you'll see this off so intense posts okay this is just supported lists no this is about that so let's see another list then we do the same thing here we'll see see the same thing NG for we say let's students let's say let's post off what did we call this again list of student posts of list of student posts over here I can say um posts dots you can see the post.name then post.name I can just put column posts you can see posts dots let's get the title post dots post title okay so let me see if we go from here we can see now that is giving the name the post title the name you can see now that we're able to look over them I give an item so what if we want to give an index of each of them there's another way to do this one to like assign index instead of simple so they want to like the index so here we can say let's invest equals to I let I equals to index sorry okay so here we can just say I it it just currently it automatically gives us the index zero one two three but because if you use zero it will be confusing for the use of I just say plus one okay I can see enough start with one two three four okay we can see it let me Zoom it we can see so that's that okay so so that's for the ng4 and the NG if okay okay so no that's for ng4 so let's look at NGE if what if let's say for example want to write a conditional statement I want to say if this is for example most of the entire world we don't just want to do this we want to do this if something is true so now to do that to say over inside on top of this inside this F they will say Ng NG if we say if this dot length is greater than zero then so if if the if there's a if there's a value here you will render whatever is in this content this line of 33 is going to work yes if this value there's no value that's if the length is not greater than zero it will not run this code so let's so if we look go down now we can see is is running so let's also write another condition P let's say there is no contains so let me go back now you can see that the code is showing there's no contact so if you want to put a conditional statement we'll say if say If energy if list of students documents is not is greater than zero let's say if not okay that does not work if that length is is not greater than zero okay so if if this is smaller than zero so if this length of certain is smaller is smaller than one then zero so if this is smaller than one then I put there is no content if you see now that there's still content is not showing because this list of students is greater than is not smaller than one that is greater than one so if I go over here and I comment this all this out so that means this list of student Port now is now lesser than one that will is now zero so if I go over here now this code is not true and if I go to my browser you can see now there is no content it's not showing that means this Edge if conditional statement is working and if you go from here we'll see that this is no longer showing because although normally it could not show because there's no value so I just wanted us to see how this energy if worked over here okay so that's used for conditional statements so if you go to the angular CL line I think I have not really used this angular documentation here we have everything is here we can just whatever we want to do we can type it here we can say NG if let me type in engine if you can say if you see it okay this is the documentation for NG you can see now it's technology is a directive okay you can see it's NJ if so this is how to use it let me just check if there's an example okay so yes you can see now this is exactly what we did if this condition is true it's gonna whatever is inside here is going to get executed if it is if this condition is not true it's not going to execute this so okay I think the one here we have an S statement okay we have an S an S block okay so here let me go copy this and see how what it does okay see they say if this condition is true okay do this s as if it's not then you have to do this okay so let me copy this okay so you can see this and even make this one easier than we're doing a writing long code before Okay so if condition let's say let's go over this again if this if this um let's say let's just says list of let me comment this out um see if lists of student labs let me go go down and look for something that can easily use that is more I don't want to write long seems to write long quotes Okay um okay so let's just do this let if let's just cut this um let me go over here and just call let me get let me bring this back let's go find it I just see Boolean let's see condition let's just see this Boolean close to true okay okay the condition here is true then pretty value s with four okay so let's see that um we can see here now is true because the condition is true we can say if this condition which is all declared there is true okay we just saved it as a value as do this if we look at this this s block here is a reference to this s block dice so if we can if we rename this differently we have to name have to be the same here then s if this is false then you should render this so you can see now it's not it's telling us through it is trying to drink this value here because this is true so if I go here and call this first that means by now you should render the second value which is down here because this is first so if I go back you can see it says content to render when value is no it's not rendering the second content so that's a piece of uh that's just an explanation of what happened from the documentation that we did there so you can see okay so that's that's the document so everything is in the angular documentation so whatever you need just search it here and you get a piece of it so that's it so next we'll look at look at routing and then we'll round off okay guys we are gradually coming to the end of the course so let's quickly talk about routing so if we go to our app we'll see that for now there's a login page there's a post page and there's a home page so let's create a routine where you can go to the post and when you click on the post you go to your post when you click on the login and go to the login page so first of all we'll be creating a login page so we can see how it works but before then let's quickly get rid of this dot icon um give a color to this heading so that our app will look presentable so over our post.tss here we say list type ladies to be known and then we add the H1 each one and we see color to be blue okay so over here now we can see our application looks a bit better to decide so now let's create a login page so we remember how to create um components okay U2 NGC component g generate then the component name let's just give the columns login okay do you mean um or not command do you mean b okay Ng components generates NG generates component login okay so we can see a login component was generated for us over here let me quickly close this um it is kind of very very it's kind of very very nothing is in there well I don't understand what is I won't go for it again so let's quickly create a a login page so far here we'll let me create a div and so let me create an input um as we did earlier let's say please soda enter yo your names not just his name is kind of more like a dummy it's more like a dummy it told me um a dummy page so that's a button um so meet okay so here let's give this [Music] um let's give this a class um so okay let me see how it is just create a break here so then the login enough for us to see the login we have to register this it's already if you go to our app dot company we see that the login automatically registered because we used the CLI tool to generate it if we had to do it manually we have to register it here so now let's if we can see that if I go here we can see the login is not displaying until we we until we do something to eat let me cut this login so you won't get confused okay so let me register it in the app dot components over here let me log in so if I go here now we can see the login page is down here let me add some styling so it will be visible so let me copy this style for this post for positron inputes let me just copy this style and put it here supporting okay so if I go back we can see the login page is done here let me just let me differentiate it by making this color to be green so it will not look like that the same thing so let me make the color to be green okay creamish like yellow now that does not look good in the eye so let's just leave it as green we can see the login here is green okay so so that's the login enter your layout say email okay then over here let you see test align Center so everything will be at the center so if you can see now we see that the login page everything are in the same page here there because you know what is here because in the we already started in the app dot component all our components out here are here and the app that completes the page that is behind that so when you go here you see that everything is Big here because that's what this parent that okay so let's so now let's create a situation so that whenever you click on the login it only renders the login page and does not enter any of all this thing whenever I click on the post it will it only went up the post page also so in order to do that this is very simple there are two ways to do this although the angular already have when we are creating an angular app we saw a place where they said should angular creates a a router for you we said yes whenever we click the yes this app router dot module was created for us okay so don't get confused about this thing so I'm going to do this from from scratch if what I said no this will not be created for us okay so let's just assume this was not created for us and this thing that was created are proactive mode if you go to the app module this is where it has been imported and it was registered here so let's get rid of it unless wrap our module ourselves so we'll be importing will be importing the router module router module okay I will register it on our Imports below this will result inside it there then over here we then save dots for roots then this taking an objects an array of objects okay here I'm array of objects should be like this okay I just want to specify this out take them out of objects so here it will take me apart okay that part is it should be a part okay taking a part of logging the part is logged in then what components shoe and it takes in a components let's say log in components okay the computer company is already imported here okay so by doing that we have we have already done that so let's create another part let's see posts if we suppose the component will be post components okay so that is that and okay so that is that so let's put the comma here okay so now if we go back we'll see that what is happening everything see as it is why is it so because we have not added a redirect so in order to do that we'll go to our nav bar where everything's been listed here we go to another bar on our post we say re router link equals to slash posts and our login we say router link equals to slash login so whenever you hit this it goes to slash post which is equals to your um up it goes to the posts and right click on the posts here it goes it's render your post components when you click on the login to enters your login component now this also for now is not going to work if we click on login you can see I'm close notice it's going to happen although it's already changing on our on our URL that is on the post but not least going to happen so in order to execute this final they will go to our we'll go to our app.app our app dot component.html I will get rid of all this okay I will replace this with router Outlet s okay so that's that so when we go back here now we can see when the login page if we go to post to see when the post page you can see it's working and go to login where you can see everything is angular is it makes it very simple let me quickly give this um matching top let's see say 50 pixel so it will look pretty onwards should you have done that um okay let's see if the pizza okay man it's a bit pushed from up okay so let me I think I like um let me see H3 blocking from a kind of like it when things look a bit good in the eyes okay so that's that so now you can see if we go to the login it's on the log if I go to the Post it's on the post form you go to the home page okay nothing happens to the home page because we have not configured that go to the posts log in home page okay nothing does nothing happens if I'm on the home I'm going to home it doesn't do that why okay because if we go to another bar we've not um it's enough by again okay let's put a rafter here return link to slash now if you go to slash we are going to home how do we know that slash is home or go to our index.html down we see here there's a base navigation already which is slash which means home so whenever there's a slash it goes to home so over here whenever they say slash it comes to home so let's go to home again handle that when the posts when the post page login login page home home page is not in the home page okay now in addition to that we are going to be looking at a redirect so that whenever you are in the home page which does not continue to want to log to want to load the post page so that whenever user comes to the website it all automatic categories it automatically sees a post already and you know you can do whatever you want instead of just coming to the home and we can also see that whenever the inside see the home it should show the login form either of them is fine so let's just see whenever you guys in the room it should show the posts and page so in order to do that you'll be using a redirect and collab with that redirect so to do that we'll go to the where we declared the does the the app module for root again we declared so I'm going to add we're going to be adding a redirect so here we'll say when the part is empty that's when there's no visible thing in there okay then redirect to the ribs don't save it through direct to should be full okay so let's go fight again you can see when when the home page it's direct to the post page when the login is in the lock key and the post is in the post when we're in the home it's automatically redirects to the post page so if somebody just coming can see if I just do and look out 4200 it just kindly redirects to the home page because we said you should do that here okay now let's what if a user goes to what if a user enters a wrong thing a wrong thing you can say this is nothing good happens it just goes back to an empty place okay that's also a bug on our application so how should we handle that web refer user enters any rubbish it not show it should show a constant something that look where you are going is not right so first of all you can easily do that let's generate a component to handle that let's call this components I just call it for error say NG generate components page let's say page notes found okay let's just generate that's a page not fund okay we can see it was automatically generated for us the page not fund has been imported there if we go over here we see the page not found it's a page not found so let me just press in the hitch once say oops on P the page you enter there you see you are you entered [Music] the wrong wraps please it is okay so let's just as let's see this what we should render whenever a user typing what is not correct a different page that does not exist so how can we make this known how can we execute this so what we'll do is first of all let's take a look at the selector this is the selector page not found selector so what we'll do here is we'll go back to our app dot module and um so where's the selector again I'm saying selector where is the component okay this is the component so go back to our app dot module and over here we'll put in another thing and we say if the part is and we'll see if the path is is taster means that if if it's not there the component should be page not found okay so that's all so let's go back and see so if a user typing what is that no you can see say oops you enter a wrong route okay if you go back to home it's at the home if you direct support to post login if I type in word doesn't you see it touch you see oops you enter the wrong route so let me quickly start this to make it a little bit phone um let's see test and what tests online Center okay you can see nice a bit okay now so that is that for that so now let's again make use of let's again make use of the custom router that was created for us okay now we know how to create route from scratch so let me make use of the custom router first of all let me copy this quantities so let me get rid of this all right get rid of this prata module okay I mean put this up so it's gonna so you can do the right thing um let me check here this ends where this ends it's ends here okay let me copy this I'm gonna get rid of this skip module okay let me print party app components and get rid of module so this very simple what we are going to do now is to come to our custom where is it our custom app.writing module and inside this route remember this is the route we are doing for root which is exactly what we did there and we're exporting me so just come here and just put everything here and we import all these two one after the other and say Imports and say Imports login components okay import post components Imports page page not font components so so let's go back and see post logging home and rubbish is there so this is the entire course so there's a link to the repo where you can view all codes if you have any question you can ping me but also please subscribe and like so I'm planning on I'll be releasing a a a an e-commerce an e-commerce tutorial and I'll also be doing a a flutter tutorial also for those who want to learn photos so if you want me to do a flutter tutorial I'll do an e-commerce tutorial using angular you know nodes using angular Springport using and using angular um use so different different technology for me to do them then I just want me to do flutter course then do where to subscribe like and share so if I have plenty subscribers and like that will give me more motivation to do more course but if I don't have subscribers I like I will feel like no it's not to watch it so so also thank you and if you want to support me you can support me via any of the myths below so I also appreciate all right so this is a very free course and I try my best to explain everything and make sure that you guys understand so you can get you know your hands dirty so also remember practice is everything if you practice the more you practice the more you understand and the more you get good at coding see you in the next video okay before I almost forgot something let's add our footer and validate our login so as you can see here if there's currently no footer and if somebody tries to log in nothing happens so let's validate login wherever when somebody logged in correctly when you click on the login it takes you directly to a post page or your home page okay so let's quickly do that quickly so first of all let me change this to enter change this to email okay then let me so could we add images tell me here I give this font size to be clutch sorry it says something like that then fonts waits to be 600 front rates okay so I just make sure that it's okay on his own okay that's a bit frame so so where's the login CSS okay I added the magic top magic button here 30 piece okay now let's generate the let's generate of our footer okay it will do NG generates component footer so let's generate our footer so it will look like a resemble a a so let's quickly put a diff here let's say copy right okay spelling uh 2022 November okay um so let's quickly add some styling to this then let's see background color they just say black okay then let's see test online test online Center click C padding layer C party soap let's just give this 10 pixel set parting bottom okay Zoom let's give this matching top let's just give 40 okay you found sweets so here is 600 font size let's give it larger I write this okay yep so let's for foreign so let me quickly get rid of this to make it show up we let me copy this A letter again so it is selector so I'll go to my closer up to this email they put it below here put it below here so who can see now is showing up okay let me add the color so color white okay if we could see our distance showing if we go to the login page you can see it's showing map below okay we'll do the piece you can see our foot out so that's really added our footer so now let's add a redirect whatever when you click on when you validate this and login it takes you to a post page so to do that let me quickly type it on Google to do that manual redirects of angular I wanted to see if lots of things very interesting route okay let's click on this okay angular manner I just justify started to carefully to tutorial okay first you need to import angular.js so to do that we import angular.js inject it in your Constructor completed Constructor and finally call the navigate method to do the okay that's cool so first of all how we're going to do this now first of all let's go to our login page over here let's say we just did this just now so first of all let's collect the user input here using the NG model so we see Ng model that's equals to record this login because email and here let's see on click please I click this handle confirm login confirm login and returns okay so we go over to our login and do this and then we see looking in me personally this okay so whenever I use our types in anything the email okay if it's been saved as the login email here so that's it okay then when a user click on the slogging it you have to validate if the image login correct and have to return it so how should we do that first of all we are told to import from our documentation over here we have to import router from angular. router so could we do that pots routes you see router Router let me look import routes okay after we have done that in the Constructor we should inject our this inner controlled or private routes or router we should do this in our Constructor so here's our Constructor here we should do this then then over there then we say this is the raptor.navigate then you want to navigate to our parts so this so I have to write the sentence over here we have to check if the email login email is correct so for now the default login email is let's say the default login email close to pennies at gmail.com so here I will now see if these dots um login email request to default login email okay if it's equal to that then this dot navigate to hosts as if it's not alerts if not or not long okay refresh Roblox so let's test this out so we'll understand what happened here so what will detail was that whenever you start typing anything it is saved in the login email whenever the user click on login you have to whenever click on login you have to check if the login email this is whatever user type in if it's equals to default login value if it's equal to default document value we have to use the router we imported here which we are in the Constructor we are creating an object of we have to use it to navigate to these are post page only s if it's not correct we have to like alert say look bro you are not correct so that's our detail so let's test it out so you can see how I was able to when I was stuck I was able to go go and see how to use the use and things online so that's basically how we do most times when you come across problem you just have to Coco and you get the answer how to do that so let's go to our login and let me just type in the wrong email here you can see wrong login credential okay let me type in the right one family.com you can see we got redirected to our page so that's that please don't forget to like And subscribe um so see you the next time

Channel: Tech With Den

Views: 215

Keywords: angular tutorial for beginners, angular project, angular directives, angular routing, angular navigation, angular redirect to another page, angular event handling, angular data binding, angular cli tutorial, angular two way data binding, angular tutorial 2022, typescript, angular 14 tutorial, angular 14 tutorial for beginners, angular 14, nigeria, ghana, The Net Ninja, Simplilearn, Traversy Media, brad traversy, codecademy, freeCodeCamp, angular tutorial 2023, africa

Id: SB7JQopQF7Y

Length: 103min 2sec (6182 seconds)

Published: Tue Oct 25 2022