Angular 12 Crash Course - 2021 - Become Angular Developer in 3 Hours

how's it going welcome to this angular crash course 2021 well i named this video crash course but it's actually not a crash course the reason why i'm calling it crash course is because i want to teach you actually make you angular developer in about couple of hours a lot of angular videos can be very very complex because angular is a complex framework i'm going to make it very very simple i'm going to speak to you in very simple language and teach you angular in a way where you understand the concept and then use those concepts to learn more so let's take a look at the content of this video so we're going to start with angular basics first we will have this project setup and tooling next we are going to learn some core concepts like modules component services pipes directives templates then we are going to jump into dependency injection and forms dependency injection is one of the complex topic in angular but don't worry we'll make it very very simple next we have a http client module so every web application mobile application require a communication with the server so that's where angular client module comes into play and any code which is not tested is not the good code that's why i said good code is the one which is tested so we take a look at briefly how to test our angular code once we understand the basics then we jump into some angular advanced topics like we talked about angular routing and navigation then we will understand how do we use some ui libraries like angular material or ionic or bootstrap in angular it will involve some configuration another thing that we need to talk about is input and output decorators in angular so in angular we use uh components a lot so everything is basically built off a component now we need to share data within the components or push the data in the component or get the data out from the component that's where this input and output accurately comes into play and we're gonna take a look at that now from here we covered all the core concepts of angular we also looked at some examples we've already built one or two small application using angular then from here the most important thing that i will show you is how to learn more from here a lot of crash courses or even angular courses which are about 20 hours or 30 hours or 40 hours i feel like they are complex they are lengthy and they don't deliver some you know straight away uh knowledge and they don't really tell you how to actually explore the framework by yourself and learn more so we're gonna talk about that next i wanna talk a little bit about what are some prerequisite that you need to know before you can start this video so we're gonna have to understand obviously html css javascript but also typescript typescript is a subset of javascript which is used in angular it's very close to javascript but add some sugar coating on the top of javascript then we have some web apis which are important how to use web apis like storage api how to use browser api like chrome apis that information can be found in mozilla developer network as well now these things are very required like they're just required you cannot start this video if you're not really good with these four things there's a web apis you don't really need to know every single api available in the browser for example api is provided by mdn for firefox you don't need to have a practical experience you just need to know where to find them how to explore more about them and how to use them and general concept of apis next we have this www well worldwide web you need to understand how the websites work what is the client and server communication just a you know basic understanding how to create a client called you you should have already have some javascript experience where you wrote a web application next we have web components well angle will teach you how to create angular components but we can create web components as well and the concept behind web components and the components created in angular are similar so if you understand the concept why there are web components then it's going to help you to understand components in angular next we have this mvc well it's a model v controller pattern there's uh lots of frameworks which follow these mvc patterns so if you have experience with mvc framework uh in the past then this is definitely going to help you the bottom line is that you need to understand the basics about a web development using plain javascript and it's going to help you if you understand any mvc framework now if you understand client and server communication also how the browser act on html and how do we generate html dynamically using javascript so all that knowledge is going to help you in this angular course i'm not going to explain to you basic stuff how to web work because this is the angular course and in about a couple hours i'm going to make you angular developer and i'll show you how you can learn more by just using angular official documentation you won't have to watch any other video after this video so yeah clock is ticking let's get started with angular in 2021 as soon as possible become angular developer let's do it we're going to start by looking at project setup and tooling available in angular you gotta go to angular.io and this is the official website for angular you will find all the resources here documentations new features and blog about angular so this is a great resource i would say this is the only resource that you should be visiting when dealing with angular it's going to have a lot of information instead of going to stack workflow and just copy basic the solution every framework out there has something called command line interface which is a utility that helps you to set up project very very easily so once you have a node installed they need to install angular cli i'm going to open terminal and i'm using mac if you are on the windows the process is the same so on terminal i'm just simply going to type a command here i'm going to type npn install dash t at angular slash cli now where i'm getting this command this is the problem with a lot of videos they don't really show you how they are finding these commands well we're going to go to docs we're going to go to reference and we're going to find this cli reference click on overview and here's a command for installing cli so it says it tells you how to install cli np install dash g angular slash cli that will install angular cli for us while installing angular cli and asking us some questions it's basically asking you would you like to share anonymous usage data with angular team at google under google privacy policy i will just say no man don't touch my data i'll press enter at this stage we have angular cli installed and it's ready for us to use if i have ng space dash version that will tell me the version of angular cli which is 11.2.8 and it tells me the node version and also it'll tell you some of the packages that were installed so congratulations you have angular cli very brief introduction to cli cli is a command line utility which is available for pretty much every framework out there like express view react they all have cli so what cli does for us it provides us with a lot of commands which are very very useful for example if you want to create a fresh project with angular and the boilerplate code will be like i don't know hundreds of files okay and all that configuration that you will have to do if the cli was not there to help you out so cli has a command called ng new which will help us to create a new angular project and cli is basically a bunch of commands a bunch of scripts that are provided by the framework uh which helps you to create like you know framework specific things like in angular we have components module pipes and we can all create those things using angular cli now also it will help us to run a development server as well it also has scripts for running a test and a lot more so cli is a very common terminology it's available for pretty much every framework out there and if you have a basic understanding of web development you should already understand that i'll show you the reference for angular cli and show you some of the common commands that we're going to need throughout this video but also please spend some time on to the reference and learn more about those ground some of the common ones i'll show you right now but you need to go to the list yourself because this video is going to teach you how to learn more and i want you to become angular developer instead of me spending time taking a look at every single command separately and showing you separately you are a developer already so you should be able to run these commands and read the description straight away and then understand what they do so let's get going with the angular cli reference very quickly we'll touch base to the documentation and show you where are the references for angular cli direct url to angular cli would be this angular.you slash cli but you want to click on this docs and then click on this reference and then go to cli reference so click on overview that will give you the command to install and some of the basic workflow that you can go through now a couple of commands that we'll take a look at is going to be this ng new command which will help us to create a new application so you start with ng a command and the name of the application and then some of the options now you can go through the list of these options available to you but i'll show you this one dash try run so this basically runs through and reports activity without writing out the result so if you want to just try out some commands without actually writing out the results this is a really good option now take a look at other options descriptions here and then you will be able to understand what they do not spending much time here a couple of other commands like ng build so it basically compounds an angular application to our output directory called this and then uh you will have that build running through ng serve so here's the ngserv command so it builds and runs your application and rebuilding off on the file changes so very very simple some of the options here as well for example here we have some option for specifying the host if it's going to live reload or it's going to open the browser and if it's going to open the browser then you can specify which browser to use there should be an option here so yeah well take a look at these options here guys it's very simple a couple of commands engineering well we already talked about we have application member classes components directives enums guards interceptors interface library module pipe resolvers so all of these can be cleaned manually by creating right-clicking and creating a new file and supplying the boilerplate code but why would you do that because this engine generate command followed by the sub option you can just create that straight away like you're gonna create a class just say ng generate and then use the schematics well these are called semantics so use like class and then the options that are provided here okay so dry run is here as well so basically this will generate you this directory components or all these options uh straight away that saves us a lot of time so do not do it create this class and use the bottle pretty cool try to learn more about the cli and learn about this ground so while we proceed with the video i'll show you some work of answer but here's the reference read about it and then you're good to go with angular cli let's go ahead and quickly create a project using angular cli using ng new command so let's go to terminal and we're going to use ng new and i'm going to give it a name tutorial and i'll say try run enter and what it's going to ask you some questions so do you want to enforce stricter type checking instructor bundle in a workspace and i will say yes would you like to use angular routing so you say yes it will save you a lot of time because you don't want to deal with the writing by yourself let angular cli do things for you so writing is like you navigate between pages and angular so yes now it's going to ask you an option to choose this css version so you can go with this plain css or you can go with the sas sas less stylus so usually the best one is scss enter and there we go so it says create all of these files for you and it says note the data on flag means no chains for made so if i type ls you will won't see that folder there i'm actually going to use the mk directory i'll just say angular and cd angular so we don't really need to see other files let's use ng new command and i'm going to say my app and it's this time i'm not going to use dry run so enter i'll say yes yes use this sass and it is now uh installing all the packages required for angular in terms of text editor we can use vs code or webstrom that's my favorite but i'll just use the vs code guys let's open the folder and quickly go to the file structure we'll go to desktop angular my app and i'm going to open this now one more problem that i've done is because my desktop is synced with icloud so i'm just gonna have to move this project into some other directory so i'm gonna do that okay so that's a folder that was created by angular cli so let's quickly go through what we have so we got this typescript configuration files little package.json which i'm going to open and here we've got some dependency for angular so angular animation common compiler color forms all of these are dependencies now we also have this development dependencies here so you can take a look at what we have we also have this angular.json file which is a configuration file for this angular project so here's a configuration file quickly going to show you what the configuration is all about so if you look at right above here here we've got the projects and then we've got this app which is the name of our project and then we also have this uh we called configuration a configuration is something that you can specify in the environment file so we've got two configuration let's say you have an application for development and for deployment so you can specify configuration in a uh prod environment file and then environment file for your development so here we've got this configuration stuff happening here and we've got some other options which you have to read by yourself and i'll show you where you can find the reference let's go to safari and here is angular workspace configuration now you're going to go to reference and click on workspace and projects and then here you have workspace configuration and that's what it exactly they tell you at the top level of angular.json there is a workspace and a project section so if we go to vs code here we got this project section and that's what i was talking about now take a look at these options and also it will tell you all the options that are available in that file and how do you use them so basically this is just a configuration file for configuring your angular project within a workspace and also configuration and then you deal with your architects and build the targets in that file as well a very common practice in a lot of frameworks they have a configuration file so in the vs go back so that's a very important file take a look at this there are really cool options available in that file now we have a karma.conf.js file this is another configuration file for our taskrunner typescript is obviously the must-have so you should know about ts config file is a types of configuration for angular the ts need the json file as well well it's kind of deprecated in typescript because they es link down not tslin but the file is still here if you want to modify that you can ignore it's a good repository by default so you have to get ignore file and they've added some of the files like node modules for you so if you didn't have this angular cli you would have to create all of these files by yourself and all of this configuration by yourself and imagine the pain okay so let's go to the source folder a source folder is where your code resides so all of your code is in a source folder you go to app folder which is your application code for your angular project then you have these assets which would have all the images or files that you want to use in your project involvement files i've already shown you here's a configuration for environment files and we also have this scss file which basically a sas file uh which we choosed right when we were creating a project we choose scss for our styles the main file that we'll talk about is a main.ts file and this file is basically an entry file for your angular application it is going to create your application so here you see a code here it says platform browser dynamics bootstrap app module now every application in angular starts from the root level module which is like a parent margin of all and by default when you use angular cli it creates this app margin for you automatically now app module is coming from this dot slash app app.module which is this folder right here and here you can see we have this file called app.module so in typescript when you import you don't really have to specify the extension for the file now it says if the environment.production then enable product so this is another function that angular provides you to in general to enable the production level configuration so this is the main file guys you need to make sure you have the module that is defined here all right so that's your main file now also every application in angular or any web application needs to have a html file so here's a parent index.html file we have this a tag called app dash root and app dash so this is like a parent tag so we by using angular we're teaching a browser to learn more of these tags so everything will be inside this app root so that's the main index storage one is the main ui file for us as well now if you look at the module here's the module file which we will have a detailed discussion about we have a one component that module requires and here we have this app component and then we also have the spec file spec files or the test files using uh karma runner and just as our testing framework we remember we choose these routing options so angle cli create this running file for us automatically as well now component is a built of uh four files uh html file style file which is scs file and then types with file and then you can also add the the spec file okay so here we have this we have three files of four files here and i'm just going to zoom into it so app.component.html after the sas file app.com.spectrum and app.computer.com so these four files are basically making up one component and in that paired module we're using that so if i go to app component you will see some code here this is a boilerplate code written by angular cli now so far we understood the file structure of our project how do we create one we looked at the information files regular and we also looked at uh some of the main files like index and main file we'll use cli to build and run our application we're going to go to terminal and i'm going to simply type ng build once i do that it is going to read the angular.json file for a configuration and it's going to compile the project using angular core and all of these packages and it's going to generate a folder called a disk you can rename that folder by going to angular.json file and i'm actually going to search for list and you see here in the architect build options we have this output part set to dist slash app now you can change that if you don't want to call your build folder as this so see all the configuration are here we have this this folder that is a compiled version of our application if you look at this map.js this is the whole code we get a map file as well to you know help us to debug as well now let's go quickly run another command ng server and i'm going to not leave i'm going to just say no open so this will help me to open the browser myself and go to the exec port instead of it is going to open a default browser and i have many browsers in the computer so that's why i'm using this dash no open flag now it says generating the application that says compile successfully and also it helps you open the browser with the localhost port 4200 so let's go to safari open the tab localhost 4200 engine and there you go our application is running uh so yeah congratulations before we move to the next topic i would like to take you back to the documentation in the reference you have this workspace project structure click on that and then i want you to read through this workspace configuration but also read about the dependencies that you get by default we also have a configuration for typescript here so i would highly recommend to read about the config files for typescript which is your main programming language in angular you're going to have to understand that we have a browser support so we got support for controlling firefox edge ie safari is in android so read about polyfill so angular is built on a latest sentence of web platform titan such as wide-ranging browser so paul will fully fill will help you to make your application compatible with the older versions of any browser so yeah read about that strict one that's very very important you have to read about this make sure you read about it pause this video and read about it and then continue with the video back to base code if you look at the terminal a terminal is constantly looking for changes in your file for your angular project so i'm going to move it down a bit i'm going to open a file called app component.html file and all of this file is basically having this ui for your application so let's talk about removing some of the stuff from the bottom so let's go all the way to the bottom and i'm going to let's say remove this svg save and you'll notice here in your terminal you'll see it says 3 unchanged chunks build out this time hashed with this and it says compile successfully if you look at application we should have a refreshed page automatically and then with the changes so i'm going to try deleting quite a bit now so let's say i'm going to delete this footer and also let's delete some of the tags i don't want to leave the empty tag there so let's save the file compiler is done and you can see now it says app is running but all that page is gone now so yeah let's clean this up i'm going to delete pretty much everything deleting the whole content on app component if we save this file and go to a page i'll refresh and you can see there is nothing visible on the page so just to make sure that we are looking at the application we're just going to write a h1 tag and i'm going to say hello world save the file now you'll see hello world so right now we have application running built on angular we looked at cli reference we also looked at how to create a project how to run it in the browser so from now on we're going to understand some core concept of angular like modules components and services it's a platform for building single page client application using html and typescript and angular is written in typescript it implements the core optional functionality as a typescript libraries so you should be able to write typescript before watching this video and i've mentioned that in a prerequisite of this video there are three main concepts that we need to talk about in angular modules components and services there are more but we will talk about them later in the video so every application angular application uh require at least one a root level module which we have this app module now this root level module will be used to bootstrap the application means to create an application now angular modules are different than javascript plain modules i'm not going to go into details for what is the difference but let's see uh what is the angular module we have a class all of these three things services uh components and modules are basically typescript classes how do we tell angular compiler that we are creating a module or we create a component or we creating a service so we do that by using decorators angular provides some decorators which help us to provide a metadata for that particular class to angular compiler and right now you can see in the app module we have a decorator which is this ng module so in typescript that code starts with add symbol with the name of and then the parenthesis passing an object which is having some keys like declarations imports providers and a bootstrap now the bootstrap key is going to telling the compiler that hey use this module to bootstrap the application and this key makes this module as a root module of the angular application and here we are just basically creating a class so once you decorate the class with ng module decorator that becomes a module in angular about these keys that we're providing like declarations imports providers and bootstrap we already talked about bootstrap now angular module can contain some components well when you create a component you have to put that into a module and then the module's responsibility is to use that component and its views and its functionality depending on where you're going to use it so all the components that we're going to create for app module and you want to inject those into these will go into declarations now also we will have some pipes and directives that will go into declaration as well import key is responsible for importing other modules so module can export their functionality and other modules can import them as well just to keep it simple for example you are trying to create a functionality let's say a storage functionality in your application and you want to share that across different modules so what you will do you will create a reusable module and you will export that with its own functionality such as maybe creating a service we take a look at what is service but let's say you want to export that functionality across other modules this is why we have a concept of shade modules in angular so some modules can be used as shade module which means they have a common functionality that is required in multiple places of your application so you design them into shade module and then use them from that particular module by exporting and importing so all the modules that you will import will go here for example right now we are using a browser modules a browser module is responsible for our dom so we want to create an application for our browser and this browser module will help us to actually render that all the shade module or child module or services components the whole application onto the browser app routing module so every framework uh represents a concept call routing so you go from one page to another page by clicking on a button or by any user event or by any event by the application uh so routing is is created or managed by a routing module in angular so that's why we are importing giving you an example how this is going to help us well if we go to this file app running module now you see it's just a class and it is decorated with ng module now it is it has some a key that it was not available in app module so what is this so basically it is saying i am going to import this a router module for root and we specify this root array and then it is going to export a router module as well so if any module is going to import this app a running module will automatically import this router module sometimes you have five different modules and you want to export them once so what you do you create a sixth module import all five of them into that and then just export that and then exporting importing one that one that module will help you to import all the other uh its dependencies so right now this is working and router module is not created by user because it's coming from this package called angular core okay and we got this ng module getting imported from angular core package as well so this is our own custom made app running module which is just exporting a router module so let's go back to app module now we got some services our services are some classes which are decorated with injectable decorator and those services what they help us to do is to write a logic or any functionality which is not directly associated with the view a view is what you see on the browser okay what what's the ui element that you see that's called view so there is a logic behind that view which is responsible for rendering that view and then we can put that functionality into a service so the way we create a service uh is by creating a class injecting using a decorator called injectable and then just importing it now i would like to create a service right now to show you how we do that i'm gonna go and create a new terminal and i'll take you to a documentation for cli and we are going to use this nd generate and i'm going to create this service okay so that service that we're going to use so the way we create this is by using ngg service and then the name of that and then with options you can actually specify the part where you're trying to create that so let's use that so type ngg service and i'm just going to use a service called storage okay and i will just enter and you will see it says create source slash app storage dot service dot spec.ts file which is a testing file and then the storage file with the you know there's a convention for all the services you type the name of that storage dot service dot ts so here you go we got this service there now if i go to service you'll see we just marking this with injectable decorator and here's some properties we will take a look at them in details once we talk about just services and create a service okay so go back to angular modules and the way we're going to import that service is going to go into this providers array so i'm going to press enter here and i'm going to start typing storage and now we should see this storage service so we scored is smart enough to tell us hey are you trying to import this story service i'll just say yes enter and now what happened is it imports the storage from this package which is at the root level of our application and the name for that and we are going to put that into this provider's array so all the services are going to go into this provider's array so with no declarations we know imports we know services we know bootstrap now let's say you want to export this app module what you'll do is you will have to use export and then have this going now you're not going to export this app module because it's a root level module and you cannot export it so we have to delete this key the best part about this video is actually showing you way to get more knowledge about ng modules you got to learn but how do you explore more because covering that energy module in about 20 minutes or 15 minutes is not enough so i want to take you to a documentation where you will learn in detail information about ng modules and not many videos do that the best way to learn is from angular documentation which is an official documentation so let's explore some ng module documentation we'll go back to documentation and i would like you to go to this reference page and then click on conceptual reference click on that and then we go to angular concepts i want you to look at this intro to module and after watching this angular module part of this video i would like you to read this so you understand more about it so here are some of the keys that we already discussed so we talked about declaration which is like component directives and pipes belong to this ng module that will go into declaration export the subset of declaration that should be visible and usable in the component template of other ng modules imports other modules whose export classes are needed by the component providers create a service we did that and we put that service in the providers bootstrap so this is a main application view called a root component which hosts all the other app views only root ng module should be set the bootstrap properly okay so we looked at this bit but i would still like you to look at some of the other documentation here especially this ng module versus javascript module that will give you more knowledge about what is the difference between that section called angular libraries within this documentation and i would like to point out this browser module from here all it's saying is you can import libraries using javascript import statement and i'm going to click on this browser module once i click on the browse module here you see it's it's belong to api angular slash platform browser so angular not only used for web application it is used for other types of application like desktop application or mobile application using ionic so that's why there is a platform within angular so if you are creating a web application you need to have this browser module i'm going to read out this bit here so it says export required infrastructure for all angular apps including by default in all angular apps created with the cli with new command and it re-exports common module and application module which are responsible for creating an application making the exports and providers available to all applications so there are some information about this providers which i want i don't want you to stress about this for now but just remember that browser module is required for all browser-based application if you're using angular for that also there is an api reference so if you go to april reference i would like you to go to click on this all and go to decorators and here we have the api reference for ng module so here i would like you to go through this as well where it will tell you you have the key called schemas like that what they do you will have a entry component which is another very very important thing in angular okay i want you to read this not at this stage but once you finish this video i would like you to read this reference as well talk about components components are one of the most important topic in angular the word component does not only belong to angular but it is also available in other node.js frontend framework like view or react we also have a web component so if you have experience with component you should be able to know what is the basic concept behind a component let's take a look at an angular how do we create component and what it can do for you i'm going to make it very very simple not going to speak any language but a plain english to make you you know understand what is a component so we talked about decorators here we have one component called app component now every angular application require a root level component and by convention app component is usually called the root level component now in this component we first of all have this decorator which has an object which tells the selector of it template url and style your selector is something that will that angular will understand that way to put this component components can be used in other components so we have a child components and parents components parent components can have multiple child components so the way we tell angular where to inject this component is by using this selector which in this case is app dash root we have a key template urls so component is made up of three things a typescript class and an html view and a style file so if you have html file you want to associate that with component the way you do that is by template url and put that url for that html file into this style urls we have an array for that so you can have a multiple style files for that particular component now we got this property here hello world it's a plain typescript class you have this property for that class which is like a variable and you have that value set to it now component can talk to its typescript file and read data from it and also execute functions within the class file create some documentation for components so you know way to go and explore more and get the full information about components after you know understanding the concept then i will show you how to implement that documentation into the code so let's go to safari and here we go to intro to basic concept here it says every angular application has at least one root level component which by convention is app component we have this decorator it says decorator identifies class immediately below as its component and provides a template and related template specific and metadata okay so we already know what is the metadata selector template url and also styles url but let's go to this documentation here intro to components i'm going to click on that and here it will tell you some you know basic information about it which i'll show you here is a component and metadata so you need to read this this is very very important most of the things we will talk about it but you know having that text available to you and you can go back to this it's it's amazing we go down and here we talked about selector okay so it's a css selector that tells angular and create an instance of this component wherever it finds the corresponding tag in html template so if you have that app root in other component now this is in this case it's basically a root level component so i wouldn't say that but if you have a component which you want to inject into a different component you will use it selected and that component will be injected into other component now read about this i've already explained to you this now we also have this provider's array the reason why angular doesn't put that by default when you create a component is because you have multiple ways to inject providers you can have a root level providers you can have a compo leveler provider so if you want to have a component level provider you use that wireless array and so let me read this actually so it says an array of providers for services that the component requires so in this example this tells angular how to provide the hero service it says that components constructor uses to get the list of heroes and displayed so if you want to have a service for example if we go to the code and you want to say hey i would like this service to be injected into app component so the way you do that is by adding a comma here and your providers and that will be arrayed and i'll type storage service and that will be part of this component now but the reason why i wouldn't do that is because this key here so it has provided in root so this tells angular hey go ahead and make this story service available at the root level of your angular application which means all the components will have that available for them automatically at the root level so you will not have to inject this as a provider right so what i'll do i'll get rid of this bit here and i will get rid of this as well now this is still a service which is injectable in our application but this is not available now at the root level okay so to be able to make it available at real levels you need to have that provided in key press command z to undo that so i would like you to have this at the root level and because we're going to use this in the future in this video so let's go back to app component and i'm going to get rid of this providers as well so next topic we'll go to documentation here we have these templates and views you can read it if you want to but i'm going to explain this very very simple way we have template syntax don't worry about this for now the next topic we're going to talk about is data binding so let's say you want to read some values from this typescript file into your html file which is this one so go to html file for example here we have statically written hello world but i would like this to be coming from that typescript file we go to documentation and here it tells without a framework you would be responsible for pushing data values into html controls and turning user responses into actions and values that is a very lengthy task to make it very very easy for us to read the data from that typescript file now we are going to look at this concept called interpolation okay so it displays the component property value within the html file and the syntax for that is using these curly brackets okay now i'm going to read this title now you'll see the vs code is giving me suggestion that you can use a title from this so if i change this to just t save this file and if i go here now i'm going to have to make a t okay now if i make sure that my application is running so it says app component is declared here okay now if you look at this we actually got this uh removed by mistake so i'm gonna just undo this bit okay i'll save this and i'm gonna just make it to save the file and you'll say it's compiled successfully let's go and refresh and you are still seeing hello world now instead of changing the value from here i could go to app component i'll just say this is the way we do data binding in angular save the file and you'll see this is the way we do data binding in angular so see how easy it is to read the values for a property from a class and show that into uh your view recommendation and then next topic we take a look at this event binding but in the list there was a property binding i'll read that for you says passes the value of from the parent to the child so we have not created a second component yet but this is uh in the in the future uh in the video we'll talk about this property binding with input and output decorator but what we can do here is invent mining so in web application what happens when the user clicks on a button or what happens when user type something what happened when a user drag and drop something all of those are events in web development so the way we do that is by creating a function in typescript app component file so i'll just say handle event function and i will just leave that empty but i'll just do console.log and i'll just say button clicked what is the spelling of click i think this is okay i'll save the file we go to html file now i'm going to use this plain button okay now it in the button we can use this click event so i'll use this click and then equal to we will use single quotes or preferably double quotes and type handle event and that's it i'll save the file now this button will be very very small because you can see here this is the button but we don't have anything there so for that i'll just click uh i'll just add a text here say click me save the file and we have this button now click me i'm going to open the console for safari let's zoom in a bit and i'm going to click on this button once i click on that you will see it says button click so that means it is listening for that event so click click click click click click click it is going to show you the logs so that's really cool but how about having a different event so right now here you can use pretty much all kinds of javascript events like let's just say key down i will save the file and i'm going to just press key down key down doesn't work because this is a button so if i type here type here type here no key down what is happening here well this is not going to read the key down so for that we need to have an input state so i'll type this input and i will just close this bit and within this input i'm going to use a placeholder and i'll just say hello and then i'm going to use this key down event and i'm going to use this handle event okay now let's take a look so we have this hello as a placeholder i'm going to press key down and you will see this button is basically getting incremented i press the key down and you'll see that event is triggering so you see depending on the the element html element you're using you can have uh javascript events right here another concept in angular is called two-way binding so what two-way binding is basically so let's say you have this t variable let's change that to title first we'll make it easier to understand so title we go to app component i'm gonna change the name of this title save this file and then save this file okay now let's just say you would like to update this value of title which is from typescript file using an input field but you want also update the value within typescript file as well and also show that file from that input element as well so the way we do that is by using this called ng model so i'll go up a little bit so here is a concept ng model so this is like a two-way binding used mainly in template driven form so forms are everywhere in web application in mobile application which is the way to grab data from a user and that's what we have in pretty much all the web applications so we have this two-way data binding property that will allow us from input field to update the data into the typescript file property so let's go and try that now i'm going to use this ng model okay and we are going to use parentheses around it and square brackets equal to and i'm going to use title now once i save the file it is going to give us a problem it says occurs in template component app component now it says this title property is not available so if i hover when vs code says cannot bind to ng model since it is not a noun property of input well it is not yet so the reason for that is because we need to use four modules in angular which is like comes with angular which will enable this two-way binding and that four module has to be available in the components module to go to app module and we want to make sure that we import a form module now formwatcher will extend our angular app functionality and make everything available related to forms and also make it available the ng module now i want to talk a little bit about structural directives and attribute directives after showing you this so here in the imports i'll add a comma and i'll say forms module and right now we can see in the import it is importing from this form module which is coming from this angular forms package and now if i go to app component and you will see no longer we have that error right now what's happening is we have this input field placeholder is hello but it's going to get overwritten with the value so ng model will add the value for title within this input field and as soon as we update element this will update the actual value on the typescript file which is again getting read here so if i go to application from input field i would like to remove some text so let's say if i press backspace you'll see i'm removing the word and it is getting updated in the title property as well so it's basically two-way binding from tyler property so if i write something two-way binding and if i click on this click me button right now it doesn't do anything but let's add that functionality as well i would like to go to this handle event okay and i would like to console.log that title property as well so add a comma add a space and then we'll just say this dot title so this is a typescript you should already know this you refer with this keyword the the properties of your component typescript file i'll save this and if i go to app component now i'm going to just get rid of this key down event for now let's save this file as well now i'm going to click on this click me click me it doesn't do much nothing so we'll go and then save this file as well go back to app component and i would like to change this key down event to click when that's where the problem was so let's go back to the code i'll click on that and you'll see the value that is getting printed is this dot this is the way we do data binding in angular now we're missing this text here we do data binding so it says re-data binding so i'll change that to do and you see it is updated but it also updated the the value in the typescript file so if i now click on click me button you will see here it says this is the way we do data binding so here right here you can see it says do data button so i'm going to just remove this whole text and i click again now you'll see no taxes available for title property so that is called two-way binding so go back to the code and i'm going to now show you one more thing so if we look at this property binding okay so it says passes the value of selected hero from parent to the property hero of a child component so now instead of using this bit like that so we got this parenthesis and a square bracket but the way we do the property binding is by just using square brackets so let's say if i go ahead and then change this to just property binding i'll save this file and we'll go back now you can see in application it is now reading uh from that value but as soon as i update it is not going to update that title properly within the tab script file so click here you'll see no change here but it actually read the title properly so if i go and refresh the page i'll go back to the code app component and i will just say just this is the way and you will see this is the way and then this is the way so the way you read the value within the input element from the typescript file is by using this property binding okay so that's the difference so this ng model with this property binding and apprentices within it that will be two-way binding so that's a two-way binding concept in angular topic we are going to discuss in angular is called pipes very very simple we'll take about like five minutes to explain that now let's just say here we have this this is the way value set to title we'll go back to html5 and here we want to make sure we uppercase the value of a title the way we do that is by using pipes you can create a custom pipes in angular and you can also use the pre-built pipes which are available in angular framework and the uppercase pipe is available and there's a syntax for to use pipes in a data binding so i'll press spacebar here after title and use this pipe symbol once i press the pipe symbol then i can start typing uppercase and you will see it is going to give a suggestion that uppercase pipe is available let's click on that i will save the file let's go back and i will see we have the value this is the way uppercased automatically for us if i click on that you will see the actual value in the typescript file is not uppercase it is still the value i'm actually i'm not really fan of safari showing the value like that so but you can see the value right so now it has been up case by using the pipe we'll take a look at the documentation for pipe so it says angular pipe let you declare display value transformation in your template html and that's what we did so a class with the add pipe decorates defines a function that transform input value to auto values for a display in a view angular comes with the built-in pipes as well like this date pi we have this currency pipe so the way we find all the pipes available in angular is by going to this api reference i'll open that in a new tab and i'm going to go to type and i'm going to change that to pipe now these are all the pre-built types available in angular so which part we use we use this uppercase pipe we also have this currency pipe key value pipe which is another very important one date pipe which is used a lot lowercase pipe title case pipe and we have decimal pipe async pipe json pipe so for example this json pipe is going to be very very helpful as well let's go back to the code and i'm going to use a json value so we'll just say json value equal to we create an object and i'll say a property to hello b property to world now if i go ahead and then use this let's create another copy of it and i'm going to say json value and i'm going to just remove that pipe save the file now you'll see it is saying object object well this is an object to actually read this json we need to use a json pi which is very helpful you can create a custom pipe uh we'll take a look at that but right now if i go and add a pipe symbol and i'll say go ahead and use this as a json i'll save the file now you will see it says a hello b hello so you see how easy it is to show the json in your view by using jsonpipe let's go to the documentation now within the jsonpipe here's a usage node we already seen that but you go ahead and take a look at what they what what an example they are giving you we'll go back and one of the other important pipe is let me go back to the list datepad okay this is going to be your best friend when you're working with dates and time in angular best friend let me tell you a best friend so we go back to the code i am going to go and create a new date so within the property we will create new date equal to a new date object okay so if i go ahead and we'll create another one and we just say new date and this is the json i'm going to remove that save the file and make sure you save this component file as well we take a look at that now you will see we have this date getting printed and to format this date we can use date pipe so let's go to documentation and we have this date after the pipe symbol we can also use this formatter like time zone and locale so that's gonna help us a lot let's go to the usage it says predefined format option so for example if you want to show your date like that june 15 2015 and the time you can simply say medium so the way you specify the format is by using this formatter so let's go and take a look at that so we go to html and i'm going to start with the pipe symbol and i'm going to say it's a date file column and then single quotes and i'm going to type medium okay and that's a pre defined formatter that we're using i'll save the file i'll make sure my code is running let's go back to the code application and here you can see it is being formatted for us so angular provides a predefined formatter for us so let's say full long short so i'll use this short one i'll change the medium to short save the file and you'll see it has been formatted for short i have a custom formatter in date part so if you go down you see here it says custom format options so let's say you would like to have a month and you would like to have day of the month and then you also want to have something like hours so the way we can do that is by using this m for month so let's go to date i'll choose m column d date and then edge for hour i'll save the file we go and take a look at that so here it says four month dig is basically not a formatted so let's be fine what is for the day so the abdomen is lowercase d it's case sensitive so let's say lowercase t is saved and you'll see 4 11 16. so four month 11 is a day date so you can see here it's 11 april and then an hour which is four o'clock right now so yeah so you can have this custom formatter and i would like you to take a look at all of these pipes which are really really important and will save your time and paint in angular before we move to the next topic i want to show you how you can create a custom pipe using a pipe decorator you could go and create a new file and we can just say tron kate dot pipe dot ts i'll you can start writing code to create this file as a pipe and all you need is going to be this pipe symbol now i'm not going to do that because angular cli is pretty good it helped us to create the pipes very very simple so i'm going to remove this file let's remove it we open terminal and i'm going to open a new terminal and here i'm going to use ngg pipe and i'm going to say truncate enter and it is going to create a pipe for me now it says it created these two files pipe dot spec.ts file dot pipe dot ts file and also it says update app slash app module so you see angular cli is very smart it actually updated my app module with this truncate pipe as you can see here so now it's automatically imported for our module the way angular cli is going to do that is it's going to look for a module within that part so if it fires the module within the part where are you going to create the pipe file it is automatically going to update that module but if we go to documentation so i'll go to cli documentation let me go to edgy generate and here i'm going to go to pipe command now here it says ngg pipe and the name but we also have options so if i say skip import so this one okay so it says do not import this pipe into the owning module so you need to use this flag if you don't want that to automatically update your module how cool is that let's go back to the code now we have that pipe imported we can use this pipe but let's go and take a look at the class file first first of all we are importing this pipe and pipe transform from this angular core package we decorated our class with the pipe decorator and the object is going to take the name for the pipe which is truncate we're also going to implement this pipe transform within our trunk and pipe class and that pipe transform require this transform function which is going to help us to modify a data which is going to be put into this pipe before it is displayed all over view modify this i'm going to remove this destruction and i'm going to type type for values any and then we can just say return any now here i'm going to change this line with this code so here we are going to return value dot split dot splice 0 2 and drawing this so this is going to truncate after two words so let's save this file and we are going to use that in our app component i'm going to give space and then i will just use h1 and i'll say hello world how are you okay now i'm going to use the pipe symbol and i'm going to use this truncate pipe so now it's not reading at this stage so what i'll do is i'll go to this pipe symbol save this copy this and paste it here i'm going to save this if we look at our first uh terminal you'll see if we go here it says hello world how you doing and truncate so it's not actually reading that pi the reason for that is because we're not using uh template binding or data binding so that has to come from this bit okay you cannot use that in a plain string so what i'll do is i'll go to the title property and i'm gonna say hello what how are you doing save this file let's go here and set up uppercase i'm going to use this truncate and let's get rid of this line as well save it now you'll see two words and now it's running dot dot okay so you see we created a custom pipe with this code so it's up to you how you want to modify the data we'll just do console.log and i'll just say value and you'll see what value it's getting in the console and it's transforming and returning that value so let's go ahead and expand the size of our console we're gonna refresh the page and you will see here truncate pipe.ts file right here and it says it is getting this hello world how are you doing but it is returning that bit okay so it's a plain javascript you can do whatever you want to do and create a custom pipe so that's where the pipe comes in it's they're really helpful in angular topic is going to be about services and dependency injection this is one of the most important topic as well you need to master it before you can become an angular developer so i'm going to make it very very simple for you to understand what is the service and what it can do for you so we talked about new modules we talked about components why we need the service well if you look at a component ts file you can do all kind of logic here for example we have these functions we have a properties we can do pretty much everything here but sometimes you want to have a functionality which should be available for more than one component and that's a common functionality services allow you to reuse the logic reuse the functionality into different parts of application and it's the best way to organize your code as well so let's say you have an api which you want to talk to you want to create a service for that instead of rewriting that get and post method in every single component it is going to be very tedious to do the error handling because there are many places that you have the same code so you're duplicating the code so what we can do is we can actually create a service and use that service into our components wherever it is required so that will help us to reduce rewriting the same code again and again and will help us to actually organize our code better so in this video we are going to take a look at a http module and a service which will use http module to make calls in our angular application and retrieve data from backend service so first of all we will go ahead and remove two files storage file and this service file right click and delete them we don't really need them now i'm going to go to app module and here we are probably importing this story service so we need to remove this bit let's remove this and we also remove this in the provider's way save the file and we should have our application uh up and running so it says killer5 module solid service so basically uh another thing that i want to talk about here when you remove any file and your server is running it is actually not going to update your application so you have to restart your server i'll press ctrl c and then rerun and deserve the open command which will recompile our application without that service so that would not be cached so running the server we still have that error and the reason for that is app component importing this solid sorry so i'm just gonna import i'm gonna remove that input and now we should have our application up and running now you could go and create a file and then write all that code to create data service but don't do that okay take help from angular cli so i'm going to go to next console and i'm going to start typing ngg service and we are going to type http enter and that will create us this http service and you can see here we got this http service we also got this spec file back to the service file now here we are creating a class it has a constructor function in it that's just a plain typescript stuff and then we are importing this injectable decorator from angular core package this angular core package has a lot of things it's got all the core features so most of the things that you will be importing from angular will come from this angular core package now to be able to do uh http calls you can either use your plain javascript or you could use the http module which is provided by angular and i would say you should be using http module which makes it easy for error handling and also it will help you to make http calls will cover all the security issues so we are going to use http module so http module comes with http client service which is used to create create get requests or post requests update and delete request so first of all i am going to go to app module and within our imports array i'm going to use http all type module it's not give me suggestion so what i'll do i'll go to documentation and show you where you can find more information about http module so here's our documentation i would like to go to this developer guide and here we have this http client so communicating with the backend service using http this is the information that you need to read most of the things we will cover but you will have to go to this documentation to advance your knowledge but after watching this section of this video you should be able to make a big calls and then they'll be the errors as well so first of all we need to this http client module so i didn't know the exact name so it's good what we know now so we'll go to http client module still are giving me a suggestion and i don't wanna you know spend time and then making sure that imports are good so i'll just copy that line and then paste it here and now i should be able to use http client module add a comma once you add the client module we go to http service and here i would like to import http client so i'm not going to input that but i'm going to use the constructor function to import that for me with the suggestion with the you know auto import so i'll type private which is going to be a variable which sustains http colon and http client enter now it is importing the http client from angular common slash http package now what is happening here this is where dependency injection comes into play in angular to be able to use any other service you need to inject that into your constructor function for that particular class for example if i want to use this http service into app component i will have to import that into the constructor of this so here we can see we don't have a constructor function so right after my date i'm going to type constructor function and then leave that here now if you don't define a constructor function typescript will automatically create that for you at the compile time so either you create it you don't create it it is going to be there so now let's go to http service first and to be able to do a http calls we can go to and create a function which will help us to create a get request so i'll use this get request function and i am going to use this dot http dot and now you will see it is giving me some options to choose from like get requests post put patch request so i'll use the get request and then i will use this url and then after url there's going to be the handler for that and then i'm going to just log dot response all right let's add a variable response all right let's save this file now here we got some issues so if your homework is not all learning to call this lasso let's save so basically this is going to be an error because this is not the way you use this http client service so the way you use it so if i go to this bit okay you're gonna use dot subscribe and then here you're gonna have have wrist pods okay i think i made that mistake just to show you what is this so this is basically rxjs we are using rxjs library under the hood so we need to use this subscribe because this get function is going to return observable which we will have to handle in the subscription so the way you do that now with that subscribe function so do console.log and then response okay now this is going to take a url which is going to be a type of string and we are going to return a json object you can say observable and we have to specify the type of this we just say any okay now we can do like return now again right now we don't really need to do that that's just to play timescript so i'm just going to just say void right don't return anything here instead of the single quotes we'll use this url so that's a function which will help us to create a get request now this is going to be reusable service so that's why i don't want to uh import into you know component directly so that's why we keep that as provided in root so it will be available for us now let's go to app component and the way we use our http service now is by putting that into the constructor function i'll just say http service and type http service file and now you have all the methods and properties available within app component from this service so let's go to this handle event let me just format by code properly and within this handle function we are going to make an api call so i'll just say this dot http service dot and then we have this function get request and then we are going to pass the url and i'm going to use this fake api so here we have this json placeholder which is like a json api open to use i will just grab this url and then just going to paste that here and just add a comma there now let's go and click on this button so let's refresh the page and i'm going to bake click and that should return this data if you look at the network tab here we are making this api call to this url okay that will return the data for us so as you can see here that's the header for that and if i go to i'm actually using safari as a developer but i don't really use it much but let's let's work with this for now but here's a request so if i click again it is going to make another api call and the data is coming back and click again we got the get request going take you to http client documentation so if we go to angular documentation and you're going to go to developer guide and go to http client click on that and this will give you all the information about http client module so http client module is going to export http client service that we used in our code and http client service will have some functions like get post update delete and we've seen that so i would like you to go ahead and then read this documentation and you will be a master of making http requests but what we did in this section of the course is we created a separate service we imported http client module and we used http client from http client module and use the get method of it inject it in our own custom http service and then we used that get request from our own service so now you understand how to inject services into your components and how to make them available globally in your application so i want you to look at this there's a very good section here handling request errors so basically usually this code is good enough for handling error so it's going to accept the error uh which is going to be the type of http error response and i hear something is like a check if it's saying snap error event then it will just throw an error so take a look at this we will touch base to this documentation in a bit but let's go back to our code now just overall summary we have this http client which we are using from this package it's a provided by angular we have nothing to do with it and that gives us this get method and then we are putting that into our own function and then returning from there now i'm going to make this service reusable now and i would like to change some code here first of all let's not subscribe here okay let's just use this as it is and i'm going to return this get request so let's return observable and we are going to just return any for now okay then we are going to create another function which is a post request well just a url that would be a string and we also need options and we type http post params okay and that will return observable as well and for now we are going to just return any and this will return this dot http dot post and that will take a url first and then options we also going to use delete actually use the update first and this should have a url which will be type of string and it is going to have options okay well that's actually not actually proud but we'll just leave that um that's actually http headers and we're gonna have to change that http headers as well it also required a data which can be a type of any for now so after we specify the data which is going to be act as a body for a post request we need to actually make options optional first of all and then that would take an object so we'll just change that to any but for the options you can either have http headers or you can have like undefined or there are other types that are available as well so if you look at the post request and here's a suggestion that is given by vs code so if you look at body which is type any and then options which can have this object where we have headers observers brands all of them are optional and they have their own types as well so options basically http options that you usually would use with javascript those can go here as well such as headers for your all prams for your request so what i'll do i'll just leave that as any for now so we'll just use data and then we use option okay now in this case we don't we shouldn't be having any error but we're just missing the comma here there you go now similarly i'm going to copy this bit and then paste it in our update function all right and that will return us this stores http dot put request and then we will have a url data and then options okay and there's all optional i'm going to save this file now just to talk a little bit about this file so this can be our reusable service to make all sort of api calls in our angular application like get requests post requests or update requests so let's go back to documentation if you look at here it will tell you how to use these requests and what are the options that you can push into it so here you see it is telling us an optional object can have a headers this is your general http headers observer we have params request progress and response time and if there are any credentials so i would like you to read about it because if i start explaining every single bit from this this is going to be five hour video just on http module so the goal for this video is to show you the basics and also show you where you can learn more so you will never have to watch any other video about angular now a couple of things i would like to talk about so that basically required for you to start using this http module i'm going to go to head the link arrows now you can handle errors by using a pipe on observable so we are going to just copy this bit and i'm going to create that as a function and i will just use this as http handle http handle error function and this is basically not imported so what we'll do is use a quick fix and i will click on this button and that will import that for us from this common slash http package we're going to use this handle error function is by using a pi function from rxjs library so this get function will return an observable which we can pipe to so i'm going to remove this semicolon and start by typing dot pipe and i'm going to call the function called catch error and pass in this dot handle error function okay so this is going to give us matter because vs code probably cannot auto import for me so i'll go here and i will make this a copy let's remove threader and observable and we're going to type catch error and this is going to come from this package slash operators now there's no error so that's good i will make a space here and i will just copy this on pretty much all the functions that we have created and now we are able to catch errors and you can do your logic depending on the type of error you're getting in this function now now the way we're going to use this http service now is by going to app component and now you can see it is calling this get request function on this url let's save the file and let's go and click i'll click on it it is not going to make an api call why is that well because we have not subscribed to it now before initially we were subscribing that into http service now this has become like a like a reusable service now you can use it in multiple components and depending on that component you use you will be able to subscribe to that component so now i'm going to remove this semicolon error type dot subscribe and then we are going to use the response object and then we're going to just record some log we just say response now also we can use dot and if you are going to remove the you know once you finish with this you should be able to unsubscribe to that as well but we're not gonna do that here that's a little bit more advanced topic so you can also when you subscribe you make sure you unsubscribe to observable as well let's save this and we are going to click on this click me button and now let's make an ap call and you will see the data coming in i'm gonna do something like this i'm going to use this this dot json value equal to response save the file let's click and you will see the value that we're getting from that request so it is not going to change it is the same value that we're getting so now you can see you subscribe to it you've got the data and this is where we have covered the basics of services and dependency injection we also learned about how do we create api calls in angular now it's time for us to look at how do we go and explore more and advance our knowledge using angular documentation if i take you to this http client a wall through what i talked about you have to read this it will tell you making a post request making a delete request so basically the basic concept you already know but watching this video you see here this is the way they're piping and catching the arrow but it will also learn more details apis for http client i'll take you to this api reference so the way you get to this page is by going to api reference and here you search for http client and click on it and this is like a plain api reference that you can use to find out what's available to you in http client there are methods available for this like these ones we used get we used post put so click on that and that'll tell you what it does click on show all and that will give you this sample code as well and then the params that you can pass in so there's a lot of knowledge i want you to look at this http client module if you want to advance to knowledge about http we'll go back to the documentation here this is just a guide that also uh we are going to look at some rxjs stuff later in the video let's go back and talk a little bit more about multiple components in your applications we're going to learn how do we create different components and then use those components into our main component i would like to point out this so you see this is the file of screenflow which is the file for this video which is already 37.9 gigabyte and the reason for that because i am using dslr to record myself it will take a lot of time to render this video that's why from this point onwards i'm just gonna hide myself and just show you my computer screen we are going to create a new component we are going to call that a user component and then we will use that component into our app component so let's go to terminal i'm going to use ngg component and we're going to name it user enter and you will see we will have some more files within that folder and here where new component is ready for us to use it also had this update so you notice here it updated this app module as well so you could use that flag where it says do not import so if you didn't want to import so right now if i go to app module you will see this user component is automatically imported for us the files so we got these four files user component.html sas file spec file and typescript file i'm gonna take you to user component and it's again it's marked with component decorator that's selected for this app dash a user template url and then style url it's automatically ready to go for for use into different component now new thing that we can see here it says implement on init so this basically will make sure it will run the code when this component get initialized so i'm gonna take you to user component html and it says a user works right here now how do we use this into our app component we use that by using this selector so i'm going to open that a computer.txt file and here's a selective for that now if i go to app component and then start typing here app dash user and close that tag save it if i take a look at this here it says user works so right now we can see the the data from user component is getting rendered here as well well i wouldn't call it data but this is the view that is available here now user component.html and here we like to say h1 use this in app component save the file and you'll see this use this in app component so when automatically it renders this app dash user component by using it select now in angular we have a way to interact with the child component so in this case this is a child component of app component because this is going to get rendered after the app component and when the compiler sees this it is going to render this component now let's go to user component and we go to user computer typescript file to create an object so name it user equal to and we have a property for that which is going to be empty for now age let's say empty for now id which for now we just leave that as zero i'm gonna change the name probably to let's say john let's say age 32 save the file now we go to user component.html and i'm going to use some edge ones and i'm going to say user.name let's make a copy of it and we just target user.h and we are going to target use the id save the file if you go here you see it is not reading the data because we're not using interpolation so we need to use double kali prices okay so right now you can see we got john 32 and zero so that means we are reading properties from user component and one of the common use case in angular is to actually get the properties from a parent component so right now this is statically written here john 32 and 0 but how about we want to grab this user from the outside world so first of all let's go and create an interface so we'll just say interface we'll just say user interface and the us the interface should have a name property which type is string should have age property should be a type of string and id which should be a type of number all right now we are going to use a decorator called input so i'm going to delete this object and i'm going to say input okay which is going to be imported from angular core package and we just say user and we define this type as user interface and we just leave that there now input is imported if you look at here that's been inputted okay from angular core package now here it says proper user has no initializer get the data from outside so that would be app component so just to fix this type script error we can say this dot user equal to let's say empty object and we say as user interface and that will hack fix it for now if we look at the code here we have no data coming in but how do we pass in a data to user component now from app component let's take a look at that next we go to app component and here i'm going to comment this code now because this user component has this input decorator here it is expecting this user object which is going to have this interface so let's go to app component and i'm going to first of all create a user object so instead of this json we are going to create user equal to i'll say name let's say john age let's say 32 let's say id would be let's just say zero all right and let's remove these properties let's save the file now we have this json value this is going to cause an error so i'll just remove that and i'll just say console.log hello all right let's take a look at our application now we don't have anything so we're not passing this user object to uh our user component so the way we do that we go to app component and here let me zoom in a bit so here we're going to start with the square brackets and we're going to target the property inside the user component that would be user and we can set that equal to user all right this can be confusing but let's save the file and let's take a look now we can see this is going to render john 32 0 from this user component but data is passing getting passed through this app component so the way we do that let's say we change the property to user object we go to app component and here i'm going to say user object now it probably makes sense now so what's happening here is this is the property that is going to be targeted in this app dash user component which is this user component right now we're talking this we're telling angular hey go ahead look for this property inside the user component and then pass in the object which was in your parent component which is in this case this app component and that's the data that getting passed save the file now let's refresh the page it's again causing an issue it says user objects not found because we have not saved this file let's save this file let's go refresh the page and you'll see that john320 is getting printed now another use case is actually listening the event from a child component so i am going to go to user component and here we're going to use another decorator so we are going to use this output and we are going to say user event and that would be type of event emitter okay so here we have this static from the ventilator from node events which is wrong so i'm going to have to remove this line and i want to make sure this output is used from angular core so i will use this event emitter and that's going to come in from angular core package so you see this event emitted from angular core package that's what we need the file you can see we have an error in the console so we have to actually use a type that is going to be returned so the data type here we need to change the column to equal to and we are going to create new event emitter and i'm going to specify user interface and this is going to get done now you could also do this so if i just delete this bit and we can specify the type of this which is going to be event emitter i want to make sure this is coming from angular core package and in the constructor we can say this dot user event equal to new event emitter and the type would be user interface and we call this like that error in the console so that's basically a generic type error the way we fix it is by specifying the type as well so here if using this user interface is the type then you have to specify when you are creating a user event now i'm going to go and create a function here so this is send user event all right and i am going to just say it is not going to send return anything which is set to type as wide and here we say this dot user event and we called function on it called emit and then we are going to simply send back this dot user that's not user event but user let's save this file and we won't see any error now if i go here i can see the data going into user component but how do i listen to this event so we go to app component and this is where we are using our app dash user right so this way you will pass the data in but you can also listen for it so if i just use parentheses i'm going to look for user event so here it's giving a suggestion as well so if there is a user event then we are going to call a function so a function would be let's say handle event let's save this file we take a look at our handle event function again i'm going to delete this bit okay and then i'm going to look for a data so that would be event next we are going to do console.log and we use the event dot let's say log the event we'll go to app component and here we need to use dollar event object save this file and save this file and now we should be able to receive event from user component here we have an error it says event type is any so that would be just say any okay we need to just keep that type any for now now if i go here where do i click to actually get the data so let's modify a few things we are going to use three input fields let's on actually let's delete this we don't really need these anymore let's remove all of this okay i'm gonna start by using input and we are going to bind this with user object dot name i'm going to make a duplicate of it and here it's going to be h next one is going to be id to your app you can see here we are doing two way binding if i change the value to four now because we're doing two way while binding it is going to update this speed as well now you see if we go to app component it is not actually rendering that any longer so that object is basically coming from this user component so this is where it's going to render this value and user component is always listening for the value from app component because we are passing this user object to this user input decorator which is going to constantly listen for this value so it is like referencing to the parent component data by using input decorator to use a component.typescript file and here we're calling this send a user event all right so we're going to trigger that so we are going to create a button let's start with the bottom tag and i'm going to use a click event equal to it says send user event and we're going to say send user event let's save this file and now this function will emit this dot user object using this event emitter and then we are handling that in our app component by using this user event property of this app a user component and we're passing the function that is going to handle that and this event object going to have that event so let's save this let's go to application and we have this button here now this handle event is just going to log the event in the console so let's go to console and i'm going to click on user send user event and you will see here the data that is coming from our event john 8 and 0. now i'm going to remove let's say this bit for now let's save this now as you can see we don't know what is the current state of the data in there so i'm just going to change that to let's say this gibberish change this to this then six instead and you will see the data that we're getting from that user component is exactly what we have typed here running what is the use case for this well the use case is that this user component will be able to inject into any other parent component like let's say you have a very fancy css going on for this particular user now if you want to use the this object separately into different components then you will have to rewrite that css but if you have that in one place where you will have here then it basically goes along wherever you use this user component and that's going to be really really beneficial to you know make a reusable code and modularize your code get the documentation for input and output decorators so in documentation you need to click on understanding angular then you go to templates and here we have input and output a title for this page is sharing data between child and parent directives and components seeing most of input and output the decorators and their use case but i want to point out some of the diagrams here on this page so we have this diagram which is telling you you can pass data from parent to child component here's a code sample for that and i would like to point out to this diagram so here is a selector a child selector then we have this target input property from a child now in our case this is the user property from our user component that's our child component right we have this current item which is the property from a parent so we're passing in this user object which is our parent component and that's app component.html then this is going to use this input decorator from a child and it's going to set that value from our parent source if we go down here we have a diagram from output so you can output data or events from child to parent using output decorator here's a sample for that how you create an event emitter then here's a use case for that not use case but a sample code then we go down a bit and i would like to show you this diagram so this diagram is telling us a lot of things and i'm going to reference that to our code so here we have this is selector then we have this input decorator from a child then we have this property from a source and here is a syntax for listening to the event so it says delete a request and a delete request is coming from our event from a child and we create that event name from event emitter and then here is a function which is in our source and here the name it cross of item and then using this event object right so similarly we are doing here we got this child selector then we have this input decorator which is passing this user object data then we're listening for this user event and then we are trying to handle event by using this handle event function and passing this event object now if i go to this user event and if i rename this to user custom event let's save this and we need to change here as well custom and change this to custom as well let's save this file now if i go to application i'll click here and you'll see it is not going to work because we're not listening for this event anymore if you go to app component here you are going to listen for user event which does not exist in user component so user component has this user custom event that we need to listen for now so i will copy this and we go back to app component i'm going to change this to user custom event we'll save this now if i click here you will see the event in a lot so you need to make sure this name is exactly the name of your output that converter variable now in the documentation it's not it is not something that we haven't covered we covered everything but here's a reference for that now from this template section we pretty much covered everything we talked about text interpolation pipes template statements property binding attributes class styles we also looked at event and two-way binding template reference variable which we are going to cover when we talk about forms in angular we are going to cover directives in angular there are two types of directives structural directives and attribute directives let's take a look at what we can do with structure and attribute directives said we have two types of directives we have attribute directives and we also have structure directives first let's take a look at attribute directives now i'm going to read this out first let's let me show you how you can get to this page if you go to understand angular then you go to directives and then click on built-in directives now here we have three direct trips and it says here many ng modules such as router module and four modules define their own directives and the most common directives are these three directives this directive we've already seen which adds the two-way data binding to an html form element we also have these two directives ng-class and this style so let's take a look at ng-class so what it does depending on the condition it will add or remove css classes to our html element let's take a look at the syntax for ng class attribute directive here is a usage so we start with the ng class in square brackets we define a condition here with ternary operator so if especially returns true then the class will be applied otherwise no class will be applied to that div let's take a look at demo so here in the user component i am going to start with div tag and i'm going to type attribute directive and then inside the tag i'm going to start with this ng class equal to condition which is going to be in double quotes first of all let's just say true question mark and then we are going to specify a single chord single chord column single chord single code so the first single code will have the class name which we have not created yet so let's go to user component.sas file because all the style goes into sas files for that particular component i'm going to start a class by dot and let's say colored we'll just use the color style and i'm going to use this color as this greenish color let's save this file and we're going to go and define that colored class now this is true noun and this should have this color so there you go so the attribute directive text has this color now if i change this to false we don't have a color any longer for attribute directives so you see depending on the condition you have that class applied now how do we read this value from our tasker file we can do that by going here and i'm going to say is colored we say boolean and i am going to now it's giving me an error it says user is colored boolean has no initializer so that's fine we will initialize this right inside our constructor function this dot is colored set to true save and we're going to go back to html file and instead of false we're going to say is colored save let's take a look at the color yes we're getting the color applied now if i go ahead and change the property value from true to false save and we should not see a color anymore so let's go back to the code now here i'm going to go to html file and you see this is colored let's read this from our parent component so i'm going to go to appcomponent.ts file and i'm going to say is colored true okay that's what we're going to pass in and i'm going to go into user and here we need to update the ins interface so is colored and that would be a boolean type so i'm going to make sure that my spelling are correct so let's undo and add e here let's copy this and go back to app but in the top c file and update that as well now we go to user component and here i would like to set that as this dot user dot is colored now sometimes this can be undefined so that will throw an error so the way we handle the error we will basically add this suddenly operator if this is true then say true otherwise have that as false so we're basically typing a code which is safe it will never throw an error i'll save this file and go here now we don't see any uh color that's because this is coming as undefined so that's why it's set to false if i go to app component and here i'm going to say false actually we have this but we didn't save this file now it's no color but i'm going to change this to true save and now we should see a color there we're not seeing the color so what's happening there's another catch here that's what i wanted to show you now we are initializing this in the constructor file so this place is actually wrong so what i'll do i'll just to show you i'm going to do console.log and i would like to say this dot is color let's log this now when our components gets in slide you'll see it is coming as false so let's take a look at app component it's color that's fine that is going to send into this user component but what's happening here why it is not setting as true now if i log this user dot is colored now let's save it let's take a look at that now you can see it is coming as undefined but it's not throwing an error so let's say if i don't use this terminary operator and i just say this is colored now when i look at the page it is coming as undefined and that's why there will be a chance that your code will have uh problems in the future so make sure you do another undefined check all the time now what's going on here so this dot user dot is color is this right so save this we go here we make sure it's the right spelling and we save this file as well we take a look at html file yes we're pushing the user object and we have this handle event so let's probably click here once i click on that you will see the value is actually is colored set to true but this is not going to be used we check the user and we have to actually make sure that is colored is properly spelled well still not working what's going on here any guess well the guess is because this is not ready the view is not ready when this component gets initialized that's why it is not going to get applied so for that we are going to use this ng-on in it life cycle hook for component so i'm going to cut this line here and i'm going to paste that line in ng on init function now here we're getting this is colored boolean so probably it's going to has no initializer so that's fine we are going to just make this as false on the top now if this comes and makes this true then it will be true otherwise we won't have an issues let's go take a look at our application and now you can see it is getting applied so the color is green so what's happening here is if i move this line into this one then it's coming as undefined the value is true but it's class didn't get applied the reason why on the initials time the cs is not ready but this construction get initialized with this color undefined so that's why that kind of thing will go into ng on init i'm going to take you through documentation and inside a new tab i would like to point out this component life cycle documentation which we will look at once we cover our attributes uh directive attribute directives and structure directives so now you got the idea what's happening here engion in it is basically gets called when this component is initialized so when this is initialized that mean it will have the html and css ready to be applied and that's when this gets true because we have the right value from this input decorator at that stage go to documentation and we're gonna go look at a structural at directives so i'm gonna go down and here we're gonna skip this because this is very simple you gotta read the documentation and you will understand what is the attribute directive like this one ng class i'll point you to another document here which will tell you how to create your own custom attributes now we already looked at this ng module we are going to go down and here is a built-in structural directives i according to documentation it says structured directives are responsible for html layout they shape or reshape the dom structure by adding removing and manipulating host elements which they are attached to there are three built-in directives we are going to look at this ngif and ng4 and i'll punch you to the documentation for ng switch it's the same way we use these two directives so let's go and take a look at this ending of removing elements with ng if this is going to be your best friend when you're going to build angular application ngif and ng4 that is is used a lot so here's the syntax for that you simply start with ngif followed by the steric symbol and then you specify the expression uh in your double quotes so i'm gonna go here and in the app component i would only like to show this app user if my property on the app component says yes show it so i'm going to create a property is user visible or maybe we can say show user we say boolean that's its type by default we can say it's false because we have to initialize it i'll save this file and the app component i will create ng container now this is an empty container usually it has no effect on your dom so you could actually use div but div will have some effect in your dom that's why we have this ng container which is like an empty container in angular and you should use this over plain div if you just want to hide or remove or manipulate any dom with ngif so i will move this one inside ng container and right now if i save this file i'll go to the app and you can see we are still seeing this attribute directive send user event and then this form so if i am going to inspect this let's click on this button and i'm going to say hey i'm going to inspect this attribute directly so if you look at this we have this div directly in our app component we have input input input and then apps use it directly so there is no ng container available but if i use this as let's say div and i change this to div as well save the file now we are going to inspect this and you can see we do have div and then we have app user so this element is just sitting there doing nothing um that's why i would use ng container if i don't want to show any element and that's only for a logic purpose so that's why angular provided this ng container so type ng container let's do ng container now here i'm going to start with structured directive and if equal to i'm going to say show user now it is not going to show a suggestion because we need to add this stereo symbol there and then if i remove this and say show it's not giving me a suggestion so let's take a look at the property so here's we have show user i'll make sure i save this file and here i'm going to actually remove this and we're going to use ng if it's not giving me any suggestion so i'm going to go to the documentation and just make sure that i'm writing it properly so i is capital so what we'll do we'll use the static ng if that's where we get the suggestion and then i'm going to say show user now typescript is working and vscode is giving us a suggestion i will save the file let's take a look at application and now you'll see directive attribute and that button is gone because this is getting implemented and it says it returns false at this stage that's why this component does not render in the dom now if we inspect the application and i'm gonna go into the app root and here you can see we got this input input input but we don't have that ng container so if i make this property as true save the file make sure to save this file as well now we do have directive directives attribute directives actually i'm going to inspect this bit and here you see still no ng container so that's the difference between using a plain a lot of junior developers they don't realize the effect of using their simple div into the dom because if you want to have a reference to this particular thing into your uh component with using view child decorator then you will have to go into a nested element which will be this app user so that adds a delay and another trouble which is not required so that's a attribute where you can do a logic and say yep if it's going to weather or not very common use case in angular application or any other framework like reactor view is you have to loop through the values and then render them into the dom that's where the iteration comes into play in these frameworks so in angular we have this structure attribute called ng4 and i'm gonna read this so you can define ng4 directly to represent a list of items defines a block of html that determines how angle renders a single item to get items in an array whether it's an object or array of objects you can use ng4 to a trade over them and render them by each item in items so here's a syntax for that pretty similar as we have ngif now we need the data to be able to render in our dom so that's why i'm going to use this fake api and here we have this slash post this is going to return us 100 uh post so we're going to use this let's go back to the code and we have this http service i'm going to use that i'm going to create a function first so let's say get post and this is going to give us pose we can create an interface like we have this user id id title and body if you want to but for now we'll just leave that as any so i'm going to say it returns any we're going to use this dot http service dot get request and we're going to pass in this url let's copy this url and we're going to paste that then after this we're going to use dot subscribe and we're going to check for response and i'm going to set a variable here i'll say post type any equal to empty array okay then once we get the post which is going to be an array of these objects we will set these posts to the post local variable so we can say this dot post will change the name to post that makes more sense equal to response the way to trigger this get post method so i am going to implement on init okay and that requires a method to be placed in our component helps you fall which would be ng on init and once that gets initialized i'm just going to say distort get post okay so if i go to application i'll refresh the page here we have this post request now and here we got all the data coming through now i'm going to go to appcomponent.html file we are going to start with ul and we're going to use li and in li i would like to first of all in the ul we're going to create a multiple uh unordered list so use stereo symbol ng4 and i'm going to set that equal to let's say let item off posts all right now it is going to get each item host and we can grab that object from this post array so i'm going to start with interpolation item dot user id we're going to make a copy of this and we can also render this title and i'm going to render a body i'm going to save this file we go to the page and now you can see when we get the data it is going to trade over that post data and then create a list for each poll so there's about 100 of them and if you look at the network tab click here go to network tab and we got about 100 posts here so let's go all the way down and we're going to take a look at what is the id user id for the last post so that's 10. so let's go all the way down we have this as 10. instead of rendering this user id we're going to enter just an id let me make sure that's correct so let's save refresh the page and now we got the id getting rendered we go all the way down and we should see hundred so now you can see what we had to do to actually get the data and then render in a dom with ng form how easy is that now all of this can be simplified with a pipe called async pipe i'm going to remove this function but before that i'm just going to copy this line and i'm going to simply paste that here okay and let's get rid of this function completely and i'm just going to comment this line out as well now if i save the file and i refresh a refresh or refresh it is not rendering the data and the reason for that is because this is observable and we have not subscribed to it so let's say if i do dot subscribe let's see what happens still no data but it did make a call and it did got the data but why it's still ready it's because when this component get initialized this post object is not ready for a render so the way we can do that is by using async pipe we go to html and here we are going to use this pipe symbol and i'm gonna simply type async save the file and guess what we got the data back now usually when you use observables you have to subscribe to them and you also have to unsubscribe to them to reduce the memory leak actually eliminate the memory leak in your application memory leaking is another concept and this is basically out of the scope of this video so i would prefer to use async pi because it will automatically deal with subscribing and unsubscribing when this component get destroyed from our dom we go to documentation and take a look at this async pipe now so here's the api list i'm going to click on type and i'm going to filter out by pipe and here we have this async pipe i'll click on that and here is the description for that it says unwraps a value from asynchronous primitive so either it's an observable or a promise it says subscribables which means observable that it has to subscribe to this is apparently rxjs you have to know that to be able to understand this here's a description you want to read about it you can read it and here is uh observable that is creating so because this http client get method automatically returns observable that is why that async pipe is just working just by specifying it all right so let's go back to the code we looked at this ng4 which is something that you're going to be using a lot in your angular career very common case in loops where you have to check the index of an item within a loop you can do that by using this syntax so i'm going to add a semicolon here and i'm going to say let i equal to index and because we're using async pipe the sync the syntax is a little bit different here but if i remove this asic pipe you will see that we don't have that error any longer i'm going to go and grab that post request so let's say i will just remove this and add async pipe save the file and we can see we get the data i'm going to copy some objects from here okay i think that one is fine copy this and we're gonna go to app component and instead of this http call i'll just choose post any equal to and we use this object and then i'm gonna add a square bracket there i'll save the file and now we're not learning any data from uh basically from http module so if i go and refresh the page it is not going to load because async type is there so i'm just going to remove that and now we get the data now to be able to check the index for each item i can use this syntax let i equal to index and i'm going to render the index which is stored in i variable instead of this user id or id let's save the file and now you can see we are rendering the index so like main javascript loops starts from zero and it is starting from zero as well in let i is equal to index syntax okay now how about you want to use this let index with acing pad you can also do that so let's go and undo first of all let's remove the static data and i'm going to remove this and i'm going to uncomment this line save the file now we are going to use async pipe the way we're going to do that we're going to wrap this post into parentheses and use async pipe now we are going to use semicolon and set let i equal to index i'll save the file now we look at the data is getting loaded and we're getting the index of each item as well within this post the most important part of ng4 but that's not it ng4 has some more options that you want to have a look in documentation and i want to show you now what's available to you in the documentation so if you look at this ng4 we use this led index so it says getting index for ng4 and we're still in building directives page from documentation we also have this tracking items with ng4 by track by so the syntax for that is simply as let index but here you have a different syntax i would like to you to try this out and read this and you will know what to do here if we go down here we have some more information about ng4 i would like to take you to the api reference for ng4 let's click on this and that's coming from angular common package and it says a structured directive that renders html templates each item in a collection so here we got some properties we have a description we got this index as i so you see there's another syntax available to check the index so that's what you know you get to know in the documentation we have it strike by and you're passing that function instance there now if you go local variables take a look at this bit here okay static methods and i would like you to read this information this is very very important to master some of the api that available in angular so next topic we are going to cover is going to be routing which is very common in pretty much all the frameworks as well and without routing you cannot build a complex or big application now again the angular is a single page application builder but we also have routing in that and for documentation we are going to go to developer guides and routing and navigation now i would like you to read through this documentation once you finish this video or finish the part of the routing we're gonna go through very common options that would be enough for you to build an application but there are in detail information available here that i think you should go through but we're gonna quickly go through and understand how the routing and lazy loading works in angular and that will help you to build very very large and complex application and then it will help you to modularize your code because you're gonna jump from one module to the next module and then from that module to the next module depending on the functionality of your application so let's go back to the code and i'm going to create a new project because this project is you know messy we will have to clean this up and that's not what i want to do so in one second i'm going to have a fresh project with only app component and app module about navigation and a routing in angular it is one of the core concept that you need to learn and you need to master to be able to become angular developer without writing you cannot develop big applications so we have this fresh project which we will use to implement the routing but first this video is getting larger and larger and its size is in gb's i've shown you already there's like 40 gb but now it is almost 50 gigabyte so i'm gonna just hide myself one new terminal and i'm going to use ng g comma and i'm going to generate some components so i'll just create first component we'll use second component we will use third and we're going to create fourth component now we got four components now how do we navigate to these components we've we've seen how do we render this with an app component by using that selector but we don't want to do that we want to navigate to this component so for that we're going to go to app a routing module let's zoom in a bit now here we have this routes array but first let's take a look at what we need to implement a routing when you create a module angular asks you if you want to generate a routing for that or not so you can manually say for example ngg module and i'll say test module dash dash running this dash dash routing will automatically create this app routing module file which will automatically be ejected into specific module which can be used to do the routing so right now in our routes there is no route so we want to basically reference these components into these routes now what we're importing we are importing this router module we are importing routes from this angular router package so that's a separate package for the routing in angular to create two objects in this routes array i'll start with part and a part would be first comma and we're going to start with component and then here you need to specify the name of the component so in this case that would be first component then we make a copy of this and i'm going to change the path to second and we're going to use this second component actually we can make a copy of this and we can implement this third and fourth and let's change the name to third component and fourth component i'm going to save this file but let's add comma because in the array that's going to turn out now we got the routes set up you see this first second and third and that will basically help us to route to that particular component but before we do that we take a look at module you want to make sure that you have this first second third and fourth component in the declaration array that's how angular module in this case its app module will know what we are trying to access so we're trying to access these components by route so we go to an application i'll refresh right now i think our server is not running because it's a fresh application i created so i'll type ng serve dash now open let's wait for this to compile the project and run our server okay i'm gonna go here refresh and you have this app component which is basically created by default so let's go and pretty much delete everything from here let's select and delete everything except this router outlet okay now i'm going to go to url and i'm going to specify here dash first so we are accessing this route manually from a browser enter and it will say it says first works so it is routing to that component if i go to type second you see here we're accessing this second let me zoom into it here so press enter you'll see it says second works that means we are in that component so the reason why we can get to these is because we have specified the parts so let's say slash third enter and it says third works now let's say if i'm going to go to running module and i'm going to say third test and i save this now the component stays the third component but it is actually not going to work by just third there is no route available for that if you look at the console it says basically uncharged cannot match any route so that route is not available so what's available is if we type slash third test enter and now it's going to go to that route now the way we can do routing by clicking on a button that's what we're going to look at next i'm going to first of all remove this router outlet save the file and if i refresh now let's take a look at the first component well i cannot access it but it's not throwing an error it's not saying it's not available but it's just not a rendering and that's because we don't have this router outlet outlet is a directive from a router library that is used like a component it acts as a placeholder that marks the spot in template where the route should be displayed so given the configuration above when the browser for this application becomes slash first the router matches that url to the route part slash first and displays the first component as a sibling element to the router outlet that you have placed in your host component template i'm gonna go and create a new route so first of all let's go and create an anchor tag and here we're going to use a router link equal to and we can say slash first for routes we are using this router link attribute which will help us to route to that particular route so i'll go to the application and this is how our app looks like i'm going to click on go to first and you will see this bit will change i'll click on go to second this will change and now it is trending second component if we go to third it is rendering now third component see it is a rendering the components right where we have this rather outlet directive to demonstrate that it is following this as a placeholder we are going to create two days to save time i'm gonna go to w3schools and here's an example for two 50x50 you know divs so we'll just copy this i'm gonna go and paste them here let's get rid of image because we don't have that image and i don't wanna store that let's save and now we have two sections but we don't have that css ready yet so that app component and i would like to copy this css as well let's go down copy and let's paste it here let's save this file and let's see all right so we got two separate sections now that is cool so let's say if i move my let's say we remove these two and remove this bit as well okay and i'm going to move the router outlet let's cut it and paste in right save now as you can see here it is rendering this third works in a second area so if i go and change this to first now you see it is rendering here now for some reason it is not rendering this bit here so we might want to try putting that into dave let's take a look if that happens because i didn't see the html and the css that coming from this w3 schools but sami still not able to see that so that's fine it's probably overriding it so we don't really care for now but we will use this url to actually go through now if i change this router outlet from here and put it here now this will become as a placeholder for all the routes let's refresh and you might be noticing it is like dark you know you can't really see black and black color so if i go to css file somewhere here i should have this one one so i'm gonna change this to let's say white save all right so you can see it is rendering here so now you understand that how this router outlet affects your dom and this is going to be the placeholder so make sure that you have that to the right place where you can where you want to render these routes talk about some other use cases for a routing so usually you would like to make sure that your route is properly handled for example if i go and try to go to let's say fifth enter it is going to throw an error but we don't really want to show an error in the console we want to tell the user that this page does not exist so how do we do that we're going to go to app writing module and here i am going to create a wildcard for that so we will use part and we are going to do in circuits now if that happens then i would like to go to first component let's save the file now if i go to let's say fifth enter it is going to go to the first component and the reason for that is because it is not able to find any route which is matched to what we are trying to target it is still saying fifth in the url of the browser but it is rendering this first component now if i change this to second component it should go to second component now now in the url we're just gonna type some gibberish here enter and it is going to go to the second route now according to the documentation here we have this uh let's say displaying a 404 here's an example that our viewers apart double study component and page not found so right now we're just accessing first and second component but you should be able to create a component which is acting as a 404 that means page not found and that should be you know uh that should be the component that you should navigate to if there is no route that matches now setting up a wild card here's some information that we just used so you got a part with double steric and then the type for the component now we have some redirect so here we have the redirect for example if there is no route that user defines then which component it should render to now the way we do that is by going to creating another object and we specify part we just leave that empty because there is no route then we are going to use the redirect 2 and we're going to redirect to slash first and that's going to be this component that is going to redirect to okay if there is nothing here next we are going to rather how to match this path and we will have this part match property and the value will be full let's save it now if i go to url right now it's a gibberish so let's remove everything and let's keep it empty enter and that goes to first works that's the first component now if i go and change this to let's say gibberish it is going to go to second works because the wild card is set to second component and redirect is set to slash first so it's going to match this round and here in the routes we got this first set as first component we've been routing within components with router outlet attribute now how about a routing to a component using a typescript file so i'll take you to app component.ts file we are going to create a constructor function and within the constructor function we are going to use private we're going to say router and we are going to import a router okay now i'm going to go ahead and then create some function first of all let's create a function would say go to route and here we are going to ask for a route which is going to be the type string let's not go anywhere so now here we're going to use this router and it has some functions for example navigate by url or navigate or we have also this config let's take a look at navigate by url click on that and here we need to specify url in a string or url tree and we also have some extra options now let's just use this route okay for now i am going to just set the default value to let's say slash fourth component.html file and here we are going to create a button so i will use button and we will name that as go to fourth okay and we're going to call a click run on it so we call let's say click equal to i'll just use go to route and let's take a look at our application right now we're not seeing any button because of this so we got our app component sas file and here we have the split height to let's say 100 i'm going to change that to 70 and i'm going to give top as let's say 20 does it take 20 i'm not sure let's see all right so we are seeing this go to first second third so let's go to app component and we are going to cut this and put it on the top or maybe we can just comment this code for now there you go we've got the bottom there right now we are in the second round and i'm going to click on that once i click on that you can see it is going to the fourth work so it's going to the fourth component you can also access what is your active around now i'm going to use this dot then that's a promise and i'm going to use console.log and i'm going to say this dot route dot and we are going to try getting this url let's save the file now if i refresh the page that goes to fourth works so let's take a look at what's happening with our url so that's going to force i'll just remove that and now i'm going to take a look at the console after i click to go to fort now when i look at the console it is actually not printing anything well it did because we had a filter on so here we have this fourth so right now you see what is the route that you can access from this router dot url so far we've been routing between components within one module now let's take a look at how do we navigate between different modules using lazy loading so lazy loading is one of the best thing in angular which means if you are trying to access one module or one part of your functionality of your application it is only going to load the code which is required for that particular functionality and that makes your application fast it loads fast it works fast and less memory usage so your application is more efficient default ng modules are eagerly loaded which means that as soon as the app loads so do all ng modules whether or not they are immediately necessary for large application with lots of routes considered lazy loading that loads engine module as needed create some feature modules i'm going to use terminal to create a feature module for me i'm going to open a new terminal and we are going to start with ng g which is short for generate we're going to generate a module and we can just name that customer now i could just generate a module by just using this ngt module customer but we also have some flags that we can use i'm going to say route and i'm going to name it customer as a route then we can also tell angular cli how to use that feature module into the main module which is app module so we can say module app.module enter and now you will see we have let me zoom out a bit like that now what it did is it created these files it also updated this app a routing module for me automatically if you look at this customer module it has its own customer module.typescript file and it is importing this common module and customer routing module we have this separate file which is basically uh an array for routes and we also have this imports so right now we are using this router module for child the difference between this router module here we have this router module for root so you see this router module for root so this is basically telling you that this is a parent level or root level uh router module but here because it's a feature module we are using the function for child and passing the routes array right now we only have one part which is empty part and that's going to be this customer component and we also have this customer component injected in our declaration for this customer module which is a feature module now the way we go to this module is by adding a routing between modules now if we take a look at this output module something has changed so let's hide this bit and i'm going to move this then to the next line now here you will see we have this another part which is set to customer but instead of specifying the cast component directly it is using this function called load children's and then it has this function calling which we are importing this customer module by specifying the part in the import function and then while it loads it then we are calling this m which is the instance of that that we're calling m dot customer module this way if we specify the slash customer it is going to go into customer module which is going to load all its route so i'll save the file let's go to application and if i go to customer you will notice one thing i'll enter now you'll see it says customer works now again our route is loaded in a router outlet so this is where we specified right also specify multiple router outlets so if you want to specify here so you can do that rather outline you can specify its name for example let's just say customer now by targeting this customer you can specify where you wanna render your uh html for this module i'm gonna show you some documentation where you can read more about it it's pretty much the same thing but you know you got the point how to use that of that it's a placeholder so here we have a documentation for router outlet i'd like you to read about this description and how to use this router outlet by specifying the name and there is a good information here now after we learned how to route to a module we basically going to wrap up this routing section of this video i would like to show you some of the documentation for you to understand more about writing so first of all you got to go to this developer guides and then go to this routing navigation we cover the basics of routing this gives you enough knowledge to actually go ahead and create an application in modules using laser loading but here we haven't talked about this nested routing so you can have the first component that you will target but you can also have this nested routing with this router outlet so i would like you to read about this nested routing using relative parts the information is pretty good if you read this you will get an idea how to use this now also there is a use case where you want to prevent unauthorized access to your routes for that there's a concept of gods in angular where you can basically go ahead and read this and you will understand how to implement gods actually we are going to look at one little god so what i'll do is i will go ahead and first of all remove this let's create a god okay let me give you a quick demo of a god so if we go to app around the module here is a part for the customer right now i'm going to move this function down and i'm going to add a key here i'll say can activate okay now this will have a class which will marked as a god so i will go ahead and then say ng god and i'll say block it this will create a guard for me and now you can see it is asking me which function i would like to implement so i'll just use can activate and you will see we have the god here so this god class is still an injectable it is like the same decorator for services as well you have provided in the road and it implements this can activate now if this returns false okay let's say false and the way we use this now is by specifying its name so let's copy this we go to upload module and i'm going to say block it guard okay let's save this file we go to an application and what we're trying to access is dash customer enter and you will see it is not going to show you anything here because it is blocked by this guide so if i returns true enter save the file let's go here refresh the page and we're gonna try accessing customer enter and you can see here it says customer works now you're able to access it now this function here will be basically take all the logic for example if you want to check if the user is logged in with the right credentials or write token then you can write a logic here and then return true or false depending on the logic for example you might have stored the token in your local storage and you check that if token is available that you return true if it's not available that you return false so guards are really really important in application which require authoritation or authoritation specific route so we've seen the demo as well here is the command for that so you can generate guard automatically and you will configure pretty much everything for you so we have like functions for the guards like can activate or can activate child or can deactivate so i would like you to click on them and then read about what it does okay we looked at the demo but you can read more about this can activate child for example interface that class implements to be gone deciding if a child round can be activated so we have the child rounds that we've seen already that can be activated or not so we can specify that by using this can activate child can load can resolve so there's a difference between can activate or can load so interface that plus implements to be guarding deciding if the children's can be loaded or not so here is the sample for that how you use it like that so you got this can load and then you pass it the can load you know your god that you create i'd like to point out this base ref i want you to read about this this is very useful information now if we go back to our code we go to this index.html file here you will see we have this base hf is equal to slash now what this does it is basically implemented by default when you create a new angular application but what it does it is written here and it's very straightforward just read about it some of other options that we've already seen like router imports or writer modules and routes we have some configuration that we've already talked about around the outlet that we've seen so i want you to click on this without outlet and read about this okay you can have a multiple rather outlets rather links that we use this link read about this router link active which will allow you to add multiple classes depending on if the route is active or not here we have this activated route so here there is a class called activity route so click on that you can import this and you have all of these functions available for example the url the prams qri prams a data outlet component so all of this information can be retrieved by use activated route for the current activated route let's go back we have this router event time use router link to route to the next component or next module these are the events that you can listen for for example we have this navigation start let me show you a quick demo how do you listen for this we go back to the code i will go to this app component and here we have this router i am going to listen for events in a constructor function so i'm going to say this dot router dot events dot subscribe and i'm going to just do a console log event okay let's save the file we go to the application and here you will see a lot of logs here already so it says navigation starts it is url's customer then we have this navigation config load start navigation config load and then route recognized that you see all of these events are triggering when you go to this page so i'm gonna delete everything from the console we'll go to click to go to fourth click and you'll see all of these events happens and you can listen for them i would like to show you how you can enable tracing by default all the router events that will happen in your application will automatically be logged and that is for debugging purposes only we go to app running module here we have this for root function and i am going to add a comma after route so comma specify an object and here we can specify enable trace link to true let's save the file and now every time you go to any route let's clear the log go to route you got this dashboard if you go to a different route let's say customer enter you will see all of the tracing happening in the console it can be really messy if you basically take a look at all of these events it will just log every single routing event into your console so sometimes it's okay to have that enabled because you want to debug your application but it's sometimes it's hard to see which you are looking for so make sure you enable and disable depending on the requirement so this is where we end our journey with a routing in angular let's take a look at some more documentation before we wrap up a routing so this page is very important you have to go through this uh after watching this video so you remember what you have learned in this video so we've pretty much covered everything and i've also shown you some of the documentation that you should read about now it's good to actually take a look at this router module so if i type a router and i would like to go to router take a look at these functions that are available to you like events routed state error handles and navigated so here is the constructor function that you can basically pass these parameters to the router as well and that's very advanced topic but you want to read about it if you want to become mastering angular now also there are some methods available for example initial navigation setup location change listener get current navigation and all of these methods will have this description right below that method so you can read about it for example we use this navigate by url okay well we also have this navigate which will have some more options available to you and that's really cool so by uh in the real world application usually this is the function that gets you because with this you can pass in data as well so i would like you to read about this router and the router module and that's where we wrap up our navigation and router git angular main topic that we haven't talked about are forms in angular if you know plain javascript forms and html forms how to manipulate them this should be very very easy for you i'm gonna talk about some of the documentation and give you a guide how to learn more about forms because you are a developer already that's why you're watching this video and you should be able to read the documentation and learn about forms some of the things that i will show you uh which are like a basic style which will give you a kickstart using forms in angular so let's go to the documentation here you want to go to forms in developer guide and go to forms you get to this section where we have introduction reactive form validate from input dynamic form building now the two types of forms in angular reactive form and template a driven form i'm going to go to setup in template treatment form this is the url for that let's click on that and the example is pretty simple we've already seen that so what we're using here this energy model and the property and this will basically will update the property value and then you can use your plane types code to deal with that value which is coming from this energy model and this property so template driven form are very very simple it's like very close to plain javascript forms but one thing which is unique to angular is reactive forms it's not unique to angular but it's like you know a angular approach of dealing with forms now if you are creating an application i would highly recommend to use reactive form a wide this template-driven form which is like very close to playing javascript or typescript uh way of dealing with them so there are few things we are going to click on the setup in reactive form so it says here let me read this for you with reactive fonts you define the form model directly in the component class like typescript file and it uses form control directive link to explicitly create form control instance to a specific form element in the view using an internal value accessor and here's a simple code for that now before you can do that you need to make sure you import form module i'm going to copy this bit here let's copy this input field let's go back to the code and we are going to create a form in our app module let's go to app component let's get rid of this bit here okay and we are going to just paste that bit here but here it is giving me an error it says form control said it isn't a known property the way we fix it is by importing a reactive form module in our app module so for template driven forms you need to use four modules but for reactive form you need to use this reactive form module so i'll start by typing reactive for modules and this is going to get imported from this angular slash forms package let's save the file we got app component and it's now no longer giving me that it is not a noun property but here it says flavor color control we're going to just say as test prop now this property is actually already defined in app component so if i go to make a space here space here and the way you create a new form control is by using this variable and say new form control and passing the single quotes there i'm going to save this file and i'll save this file and now our code is compiled successfully now i am going to look at some documentation here so we are going to create this form control and this form control will have some options for us to use now so let's say we are going to specify the name of the form control so we'll just say test prop okay and within here we are going to use this interpolation and i'll say test prop dot value save the code and now if i start typing you'll see it is going to read the value from that form control and start pulling that because we have this interpolation uh in the html file i also have some methods on this form control to read more about that we will go to this api reference for form control so here's an api reference for that what you can do is you can set the value by using this set value method you can patch the value you can reset it register on change or register on disable the change we can access this value validator async so all of these can be used with the form control you see there's a lot of them so if i'm gonna go and you know explain each of them that will take like five hours okay so let's use some of them all right i'm going to go to this app component and here i'm going to say let's say modify form control okay this is the function i am going to right click and in vs i'm not sure i'll just click on change all occurring so i'll just say modi fi form control okay let's uh give a space there i'm going to copy this and i'm going to make sure if the vs code updates it so it does not so let's save this file and save this file okay now i'm going to remove this code and i'm going to remove this parameter as well all right now i'm going to basically first of all show you one method that you can call on so use this this dot test prop dot set value and we can pass it value here hello world i'll save this code and now if i click on this button you will see hello world will be set onto that form control now you know how you can call methods on this property if we go to documentation here we have uh let's say let's say we will have something called clear let me search for it so let's say clear okay so that's just clear validators clear async validator well that's not what i'm looking for so what i can do it to clear it i can just use this probably empty strings let's save it okay so if i go and type the value i'll click on this and that will clear it because we're just saying hey set the value and value is empty see it's a trick now we can also see if it's touched attached is something that once you click on the form okay the the state of this has become touch that you clicked it alright so go ahead and then play around with these methods on form control usually when you are dealing with forms you don't have to deal with only one file you usually have a group of forms like a form for putting a user details on a form for writing an email like two emails bb bcc or cc feel and then the email body field so you have a lot of forms right now angle provides a way to group form controls so we have the class called group form control where you can import and then create multiple forms in within a group so i'm going to just copy this bit here first of all in our app component i will import that this form group so let's go above i'm going to type a comma here or just say form group once we import that then i can go ahead and then just create that phone group so here we have this profile form and we're creating two fields in it using the form control now this is basically group of two forms now you can have as many as form controls within the group now you might be wondering what is the benefit for that and there is a benefit for that let me tell you you need to tweet this okay uh it's it's basically it makes it easy for you to deal with multiple forms in one go so read about this you will get to know how you can use the font group module i wouldn't say module it's basically uh a class so read about this grouping the form creating nested form groups like this one this is very important so basically you create a group then you create multiple form controls then within the form control you create a new form group and then so this form is a good example for that so you got a first name last name address and address should have its own fields like street city state steep so this will help you to group those let's go down we want to talk about this form builder a full build role is really helpful for creating form control instances manually can become repetitive tasks right so you have to create those form controls again and again this form formula will help you to do that very very quickly there should be an example for that now you can see here we are creating this form group so first of all we got this this dot fb which is basically a form group or for builder actually it's good to take a look at the demo okay so i'm gonna do this form builder right then we got this form builder we're gonna inject that into our constructor i will say private fb colon form builder okay now i'm going to use this for builder to create a form also say profile two equal to new this dot f b okay let me take a look at documentation so here we got this fb dot group dot group and then we have this object we did a function now this is giving us an error what's going on there so it says new expression whose target is this so we don't really need to use new because it's not what we're doing okay so now you can just start specifying first name and then this array where we'll have an empty string very very easy form builder is is is going to make your life easier because you don't have to say new form control new form group you just start specifying this form and then you will have that ready to go instead of using this so you see this you have this form group for control from control form group control control control instead of this you can simply use a form builder to do that now again there will be a functions available for form builder which what you can do is you need to go to the api reference so once you click on that here we got this controls arrays and that's about it so you read about it here and you know what to do now we need to talk about this validating form input as well the the explanation in this guide is valuable explicitly so if we look at this validated functions we have some validated functions built in and here's a class for that validators so we have these validated functions like mid max required required through email mid lanternbacksland a patron for rejects this is another very important nonvalidator let's say email right so how do we use that i'm going to remove this form group actually for builder we don't need that for now now here we got this form control okay i'm gonna add a comma and i'm gonna start by typing validators dot and here we got all the built-in validators that we could choose so if you go to let's say mid okay now it's keyword error it says made is 2 or bit 3 so we need to say mid to save the file and now when you type the valid first name it will basically check if the minimum two is is fulfilled or not if it's not it will set it will throw an error for you which will basically be handled in html5 so again you're going to have to look at this documentation how to use them and how to show an error let me show you this here so here we go this uh a form control which is set to as name property now within this we are creating another div and it says edge if name dot invalid name the dirty or leave the touch then show this color alert alert danger that's a css class that we are going to just apply to that bit or you can you know add some message for the users as well so take a look at this very very easy straightforward and this is where we wrap up our forms stuff for this angular crash course we are going to take a look at how do we use the external ui library such as angular material in our angular application libraries like angular material can help you a lot in terms of building a nice ui they have pre-built components that can be used in your application and that will make your life a lot easier they have a concept called simatics which means there's a pre-built ui ready for you to use just by implementing some commands in terminal we're going to take a look at that and you're going to fall in love into angular material i promise so i'm going to go to safari and retire for angular materials let's search for it i'll click on this and here's the library very very good library and trust me you're gonna fall in love with this so let's get started by importing that there's a command ng-ad angular material in your application but first let's get rid of some of the things so i would like to get rid of actually let's create a new application we're going to open terminal and i'm going to go this and we'll set new let's say my app enter and yes yes sass and that's it now i'm going to close this window once our packages get installed then we are going to open this into real studio code by using the code space dot command object is ready let's check it out the code my app enter and that will open vs code with the folder in now i'm going to go to the terminals and simply going to paste that command which is ng add at angular slash material let's verify that actually i don't trust my typing so i'm going to copy that command let's paste it here enter and it is going to do a lot for you so it says using package manager found compatible package version which is this one 11.2.8 and it says installing packages now if we take a look at the package.json file you will have some of the package getting installed so angular slash material that is getting installed as well now there are some pre-built templates uh themes that you can choose from so let's go to documentation and in the documentation you should be able to take a look at the themes so we have some purple themes by default let's use that and i'm going to say set up global angular material typography yes uh setup browser animation for angular material yes and it's gonna update package.json and we should have angular slash material slash animation package i believe so let's wait for this to finish installing so it says now app module is updated angle.json is uploaded index storage will upload it and style.sas file is updated as well so let's take a little stylosath that's what it added the typography so here we have a lot of components pre-built components okay now the way you use them now for example if you want to create an angular button like this button to click on this button here which will enable view code option and what we want is this section i will copy this bit go back to my html file here and right above the route on that i'll just paste that section i'll save the file our server is running and now i'll refresh and you'll see we have these buttons now these are not exactly the buttons that we were expecting so if i just hide code you'll see the design here is different than what we have in our application that's because we haven't imported this button module in our application yet so if you click on api you will have to do this import this bit in the module where you are going to use this component so we are in app component so we need to import that in an app module so import that bit and we will go and add that to in our input as well so all of these components in angular material are built within their module so there's a button module which has all of these buttons available for you to use now if i go and save this file now i'm going to take a look at it now this time you'll see we have those buttons available now we have the right styling and how easy it is to create these nice balance now in angular material you will also have some attributes like matte raise button matlab button matte stroke button so for example if i go to app component i will just zoom in a bit i'm going to change this to let's say matte flat actually not this matte flat button save it let's take a look this is a flat button now we also have this matte fab what is this matte fab well let's find out so we just use matte fab save it and you'll see this round looking pattern there that's usually in a mobile applications we also have this minifab which might be smaller we can take a look at this matte stroke button so let's take a look at this by changing this bit and if i refresh you will see here we have this stroke button it's set to accent so the goal for this section of this video is that to show you how you use this component so i'll show you one more component then we will go to cdk stuff so here's a simple card i will go ahead and then copy this bit and then paste it here right above the url once you save this this is going to an error it says hey this is not a known element the reason for that we haven't imported its module so if you go to api you have to use this matte card module copy that and we go to app module now it will be required in the module which you're going to use for that particular component so if i say matte card module save it now if you look at your application you'll have the card appearing so there you go that's the card let's turn off this developer tool so there you go this is the card let's find some more examples for the cards so let's say let's go here i'm just going to look at the code and i'm just going to copy this and then go to app component and then just paste that here now there will be issue because okay there is a link for the image basically coming from angular website so that should be good so if i save the file we'll take a look at this and we do have the card now so there we go okay so basically you import the module for the component and then take a look at the documentation then you should be able to use this so there are a lot of options for like card headers title groups or you know you have this focus tab index so yeah all of these components are very very easy to use now uh if you know bootstrap or any other framework that you have used in the past this should be surely very easy for you to now one thing that i want to show you before we wrap up this video is this guides i want you to take a look at this semantics we have this some semantics that we can use out of the box from angular material so i would like to use some schematics for example i'm going to use this command let me zoom in a bit so here's a command for ngad angular.cdk let's copy this we will stop the server clear it and paste it here once we have that package installed then we can take a look at some of the component schematics available out of the box like we have this address form navigation dashboard table entry so what i want to show you is dashboard let's go down and here we have this engine rate and we are going to use this command okay this is going to be a component now i'm going to paste this and i'm going to name the component let's just say dashboard enter and you will be surprised what it does for you so here is the dashboard component if i take a look at the app module we have this automatically uh basically updated we go to this app rolling module and here we are going to use a part for dashboard and we're going to use a component which is going to be this dashboard component okay let's save this now if i go to the dashboard you will be surprised what happens i'm going to the developer tools slash dashboard you want to take a look let's press enter and right now it's not showing anything why all right let's save this file save this file and we make sure that we basically have this data lab guess what we're not running our application so let's do ng serve slash no dash open let's wait for the server to start up it's compiling see this it's got a lot to compile now all right compile successful so if i go now to this slash dashboard press enter you will see we do have that stuff on the top but we also have the dashboard here so what we can do here now is i'm just gonna remove everything save now let's take a look at the content there you go so here is the dashboard that was created for you very very easy right so take a look at this take a look at this what it does for you this is like a reusable uh dashboard that comes out of the box we take a look at some something called navigation somatics i will copy this and i'm going to stop the server paste it and i'm going to say navigation enter and this is going to add this schematic so we have a second component and if we take a look at this app module we have that navigation component right here so what i'm going to do now is we do have a router outlet but instead of having a route i'm going to go and modify the speed and just get rid of this okay i'm going to make my main page as dashboard looking page app component first of all we're going to use this app navigation right on the top save this file and we go to our page and there you go you have this uh navigation module i'm going to use developer tools and i'm going to make this width a bit smaller once i take it a bit smaller you will see it will be converted into hamburger and you have this kind of animation that is really cool i want you to go back to documentation and take a look at this uh navigation component which will allow you to modify it uh with some properties that is basically available for you to out of the box now we want to create some sort of like a dashboard right like admin dashboard which is very very easy with angular material i'm going to stop hide this developer tools and we are going to go into app navigation component so let's go to app navigation here is some of the code that you can modify for example open true or false and you can also have like a you know a navigation tab like a dialogue navigation or overrider site so take a look at the documentation for this bit this matte sitemap which is which is going to give you a lot of options all right so here it says clearly add your content here so the content that i'm going to add is going to be app dashboard and i'm going to save this file and let's take a look at our application there we go so we have this navigation bar on the side and we have these cards okay so as you can see this is amazing right you you just had to you know use the two commands which will create you these two components and you just have your admin dashboard uh ready to go and these cards are flexible we are going to we're not going to take a look at the all the options available but go ahead and take a look at some of the components that are used in that for example this would be site navigation so if you look at the site navigation here's a java content and the main content and we have some options that we can specify like position and the right so maybe let's try this position and to map that side now so here we have matt that sidenav we don't have a position attribute so i'm going to give it space here and let's say position let me just paste it here save now the navigation is moved to the right side you see how cool is that so take a look at the documentation for all the components that are used here especially with this matte toolbar they have a really uh they're really flexible you can expand them very very easily by following the api guide all right i would like to say thank you so much for watching this uh video this was uh basically a crash course for angular there's a lot more knowledge that i could share with you but within this three to four hours uh that's not possible uh during the course of doing the video i've been showing you a way to find more about angular by using its official documentation and i would encourage you to take a look at the documentation as much as you can so at least you know what's available to you this video have given you enough knowledge that you can start building angular applications we've covered all the core concepts now you should be able to start building angular application and if you need more information you should always refer to official documentation which you already seen how i use documentation to find more stuff about angular we also looked at angular materials very very easy few commands that you injected and then you have angular material ready for you to use so uh this is basically a crash course but there is a second part which will be a project based uh video where i will show you some some application that will be built using angular so stay tuned for that subscribe to the channel give this video like and then also let me know in the comments below if you like this video or if you have any suggestion for me teaching uh a different way maybe all right thanks for watching guys talk to you guys in the next video cheers

Channel: Awais Mirza

Views: 54,704

Rating: 4.9059615 out of 5

Keywords: Angular Tutorial, angular crash course, angular material tutorial, Angular 11 Tutorial, Learn Angular in 3 hours, angular, angular full course, angular tutorial for beginners, angular full course with project, angular training, angular training for beginners, angular fundamentals tutorial, bootstrap tutorial for beginners, angular for beginners, angular dependency injection, angular web development tutorial, introduction to angular, Angular 12 tutorial

Id: LA_v8isNp5E

Length: 212min 6sec (12726 seconds)

Published: Mon Apr 12 2021