Transcript for:
Essentials of Angular Routing Techniques

foreign [Music] what's going on my dear friends on YouTube today in this video we're gonna learn about angular A2 is it from scratch so this is an angular full course where you can learn angular JavaScript framework top to bottom whether you are a beginner or a pro everything is structured well so you can follow this course without any problem so guys if any of you are new to octagon me please subscribe and most of my channel contents are viewed by non-subscribers so guys please remember to subscribe this will motivate me to do more contents like this so guys actually this is the fundamental part of my premium angular full course learn angular from scratch complete guide designed to deploy so this is almost 2000 class students enrolled and got 4.7 star rated so in this full course you will learn to build a complete angular real world application from scratch and you will learn to design and prototype the UI using the sigma you will learn bootstrap CSS framework you will learn five ways you will learn file store database and at the end you will learn how to deploy the angular application to production so this course would be a complete all download course if any of you are interested I leave an 80 off discounted Link in the description so all right enough of these promotions let's get to the real business learn smart not hard so in this section we will get to know about angular at the end of this section you will know what is angular what is single page application one is angular CLI how to set up an angular CLI on our computer how to generate an angular app using the angular CLI and also you will learn about the angular projects file structure from A to Z let's get started in web application development we have to look at two sides front end and the backend side the front-end side will load on the client side inside the web browser and the backend side loads inside the web server the end user will only see the front end not the back end to design front end we use you guys already know HTML CSS and JavaScript we use HTML to build the structure of the web page we use CSS to make the website looks better by adding colors fonts layouts Etc with the usage of JavaScript we can make the website more logical which means we can make the website dynamic we can say something if someone clicks this button show an alert or change this color to something else likewise we can manipulate the Dom using the JavaScript doing this manipulating the Dom using the only JavaScript it is very hard and also it consumes lots of time as a solution for this big companies like Google Facebook are introduced some JavaScript Frameworks Google introduced the angular and Facebook introduced the react so what is angular angular is a front-end framework built using the JavaScript by Google so this is not something name this is built with JavaScript so keep this in your mind in angular application still we're gonna be using the HTML CSS and JavaScript but with the angular framework we can build our web application fast and robust with pre-built JavaScript methods so we don't need to write everything from scratch like the boost up CSS framework we learned about bootstrap in the previous section so if you can remember in bootstrap we have some pre-style CSS classes so by importing them to our website we can design our web application fast we don't need to write styles from scratch right so once again angular also something like bootstrap CSS framework in angular also we have some pre-built methods and techniques by using them we can build a web application fast and more robust so let me show you a quick example think I have a paragraph tagged in my website so I want to add the CSS class to this paragraph tag using the JavaScript so if you are doing this using the PO JavaScript so first I have to add an ID tag to this P tag to identify this paragraph tag in JavaScript so after that we have to capture this P tag in JavaScript using this ID for that we have to use the document dot get element by ID select element assign document dot get element by ID and inside the brackets we have to pass the this paragraph ID as you can see here this is the ID of this P tag alright next we have to assign the CSS class to this paragraph tag element which is this paragraph tag we captured earlier dot class name assign CSS class name so I am using this example Dash class so in here we are using the CSS class name property which is this example class and assigning the CSS class to this V tag so this is the Dom manipulation in a plain old JavaScript let's look at how to do this in angular this is very easy in angular we have class name property binding just put this inside the P tag this will something looks like this and assign the CSS class name so comparing to the JavaScript way this is easy and very clean right so this angular property binding class name is a pre-built technique in angular but at the end of the day this class name property will compile to this JavaScript because browser doesn't know about angular thing browser Only Knows JavaScript with the angular framework we can do this by a single line of code rather than typing 3 4 of lines so once again angular is a front-end JavaScript framework for building client application in HTML CSS and JavaScript hope you guys got the idea so what is this Spa this bar stands for single page application a single page application is an app that doesn't need to reload the page during its use and works within a browser think of the apps we use daily Facebook Google Maps Gmail Twitter Google drive or even GitHub all these are examples of a spa let me show you an example go to the gmail.com after you log into your Gmail account you can see your inbox click one of your emails if you look at this carefully you can see this will open the email without refreshing the page so this is what single page application so what is happening here most resources single page application needs like HTML CSS and scripts unloading at the launch of the app and don't need to be reloaded during the usage the only thing that changes is the data that is transmitted to and from the server as a result the application is very responsive to the user's queries and doesn't have to wait for client server communication all the time one of the best advantages of a spa is the user experience and the speed the user enjoys a natural environment of the app without having to wait for the page reloads and other things you remain on the same page which is powered by JavaScript programming language so we can build or develop single page applications with most of modern JavaScript front-end Frameworks including the angular so we can call an angular app as a single page application the angular sailor is a command line interface tool that used to initialize develop scaffold and maintain angular applications directly from a command shell in other words if you can remember angular is a JavaScript framework this framework has default pre-built files in order to work with angular we need those files and techniques with the help of this angular CLI we can create an angular new app without any problem with the single line of command not only that I told you earlier but browser also doesn't know angular so the end of the day we have to compile angular to JavaScript or we have to build angular app to production so we can build the angular app using this angular CLI likewise we can update maintain scaffold and develop an angular app using this angular CLI hope you guys got the idea so let's set up the angular CLI go to this angular CLI website cli.angular.com this is the official website of angular CLI to use angular CLI first we have to install angular CLI globally on our computer to install angular CLI we need node package manager node package manager bundled with the node.js so we have set up this in the first section of this course so if any one of you not installed the node.js just go to the node.js.org and simply download and install this recommended version after this installed let's install the angular CLI all we have to do is just run this command copy this command and paste it inside your command prompt or The Terminal if you are on a Mac and sudo beginning of this command otherwise you guys will get a permission error PC users don't need to modify anything just run this command npm install Dash G angular slash CLI so this command will install angular CLI on our computer globally so we can access this angular CLI from anywhere on our computer this G flag stands for Global right this npm is the node package manager and this is the angular CLI we have installed angular CLI on our computer now we can use the angular CLI commands in the previous video we have successfully installed angular CLI now we can generate an angular app using the angular CLI so first create a project folder in previous we have created our project folder inside the desktop so I'm gonna use the same folder as my project folder for this section as well this is optional you guys can create this folder wherever you want now open the command prompt or The Terminal navigate to the project folder CD desktop hit enter again CD udemy angular course folder as you can see here this is the project folder name that I created earlier now what I want to do is I want to create an angle app inside this project folder to access angular CLI we have to use the NG command just n and G okay if you can remember we used the npm command to access the node package manager like that we can access the angular CLI by using the NG command to create a new angular app we have to use the Nev command after this NG command so NG Nev then pass the project name I am giving the project name as Ang intro this project name can be any name as you wish then hit enter at first this will ask about the angular strict mode for now give this to know in the latest section we learn about this strict mode in detail so give no to this and hit enter after this we get this router option for this give yes so don't worry about this angular router thing we will learn about this in detail in a later section next this will ask about the styling method CSS or scss or SAS or list we can select our preferred method so in this course we gonna be use only the CSS so select this CSS this will generate the new angular app and install all the dependencies for us wait until this complete this may take several seconds to minutes depending on your computer and the internet speed a new angular app is ready now open this angular project inside the vs code text editor open the vs code go to the file and select open navigate to the project folder in my case it is inside the desktop and select the project folder inside that I have this NG intro angular app so select that folder and give open all right in vs code inside the file tree we can see all these files this is the default file structure of an angular project now you guys may get scared by looking at these files these all files are required files and default configuration files for the angular framework so we are not going to touch any of these files or the folders We are only dealing with this SRC folder okay so don't get confused but I will explain these all files one by one so you guys can just get to know what are these files and what these files are doing with the angular framework so angular is using typescript instead of with JavaScript for better maintainable bug free codes so these last five files are related to the typescript so this last file tslint.json file is looking for typescript functionality errors so next this file tsconfig dot spec dot Json file is responsible for typescript configuration for the application test application testing is a different topic which is not covered with this course so just keep this in your mind this file contains typescript configurations for application test the next one is this tsconfig.app.json file so this file includes typescript configuration for this angular app as well as this includes typescript and angular template compiler options all right next file is this tsconfig.json file this is a solution style tsconfig.json file this is used by editors and typescript language servers to improve the development experience so this file is not doing anything with the compilers so next we have a readme.md file which includes some angular CLI instructions how to run development server how to build the app how to generate components etc etc so next we have these two files this first file package.json file this file includes all the required npm package dependencies and also app details like name version and also the npm commands these are all dependencies that we need in angular project so these all dependencies installed inside this node modules folder as you can see here all the dependence files installed inside this folder next we have this file package Dash log Json file which includes version information for all packages installed into node modules by the npm client all right next we have this karma.com.js file which includes Karma unit test config for this angular app next we have this angular.json file this is the angular CLI configuration file for this angular project next we have this git ignore file which is for specified ignored files for GitHub repo so if you guys may wondering what is GitHub GitHub is a Version Control System so next we have this editor config file this includes code editor configuration for this angular project next we have this browser list SRC file which includes different browser specific config details next we have these folders this e2e folder for the end to end test files for the angular app and this node module folder as I mentioned before all the required files for angular framework installed inside this node modules folder so this is the folder where we dealing with inside this SRC folder we can see these three folders and these files this app folder we mostly work inside this app folder we will generate all the files and Logics inside this folder next we have this assets folder where we can put our media files like images sound files icons etc etc inside this folder we have environment variable files which contains all the environment variables next we have the effect icon this is the website icon next we can see the index.html file this is the main index file for our angular app next we can see this main.ts file this is the main entry point for our application this file compiles all app modules to run in the browser next is polyfills.ts file provides poly field scripts for browser support next we have this styles.css file so this file is like a global main CSS file where we can write our CSS codes for the angular application the last file inside the SRC folder is the test.ts file which is the main entry point for testing angular application next we have this app folder if you can remember I said earlier this is the folder we are going to work mostly for now I give you a rough idea about these files in later section we will learn and work with these files in detail okay this first file app dash routing dot module.ts file is dealing with our app routers you can remember many creating a new angular app using the angular CLI it was asked a question that we want to add the angular router to our angular app so I gave is to this that's why we are getting this file this is automatically generated with the angular CLI if in some scenario we don't need angular routers so that case we can give node to that question then we don't get this routing file I know some of you may think what is this router you know just get to know about this file we have a separate section for this in that section we will learn all of these in detail if you don't get it leave it next we have this four app component files angular is a component based framework so this is the main road component for our angular app with this HTML file we can markup all HTML codes this CSS file we can add these styles for this app component so all the Logics will code inside this app component ts5 and this app component spec.ts file is for unit test file for this app component next we have the app.module.ts file in here we Define the root modules that tells angular how to assemble the application so inside this file we can see these Imports with these module Imports we are telling to angular we are using these modules for this app so import them and apply those modules to our app so we can see this app routing module which is for the angular router if you don't add this inside this app module file angle doesn't know whether we are using the angular router or not in this application without this import angular router will not work likewise here we can see this a component import so with this angular nose we have a component called app inside our angular app so this file is very important so we have to end all the modules inside this file that we are using in the our angular app otherwise we will get errors so this is it for the file structure of angular section some of you don't get these words components routers modules just leave it for now by the end of this course you will get used to these words all right this is it for this angular introduction in this section we learned all about angular angular CLI and angular file structure this is the start of learning angular so you might be get lots of questions in your mind or sometimes you may not get technical words but don't worry in later sections we will dive into the angular in detail and one more thing if you have any question please feel free to ask in the Q a area let's meet you in the next section in this section we gonna get to know about angular components and its use cases by the end of this section we will learn what is angular component and how to use them how to create an angular component from scratch how to generate an angular component using the angular CLI how to add HTML markups and styles to a component at last we will learn how to communicate and pass data between two components so let's get started the angular framework is a component based front-end framework so the main building block of angular is angular components with our components we cannot build a proper angular so what is this component the component is a combination of data HTML template and logics which represent an area of a view that shows inside the browser so this is the web that users can see because components are loads inside the browser so let's look at a real world example so if I take the Facebook layout as an example Facebook as this network right sidebar left sidebar and in this Facebook mode which shows Facebook posts in angular we can create components for each of this layout area we can create reusable components for this network we can create the number component this sidebar left side and right side we can create separate sidebar components and also for this post list we can create a main post component and also inside this main component we can create a component for a post list so we can create this all in one page like traditional web designs in traditional web design we added all the markups for the home page inside the index.html file so like that we can add all the markups for this Facebook home page inside the app dot compound HTML file so if you can remember I show this app dot compound HTML file this is the main root file of the angular but it's not a good practice in angular because we can create separate components in angular if we create separate components rather putting all in one component we can reuse those components again in our application without coding it again so what is this reusable thing for example this navbar must be shown on all pages in this home page and if you navigate to someone's profile on that page also we can see this network in that case in angular we can reuse this navbar component inside all other Pages we don't need to write the code for navbar again and again hope you guys got the idea the angular framework is a component based front-end framework so the main building block of angular is angular components with our components we cannot build a proper angular so what is this component the component is a combination of data HTML template and logics which represent an area of a view that shows inside the browser so this is the web that users can see because components are loads inside the browser so let's look at a real world example so if I take the Facebook layout as an example Facebook as in this network right sidebar left sidebar and in this Facebook wall which shows Facebook posts in angular we can create components for each of this layout area we can create reusable components for this network we can create the number component this sidebar left side and right side we can create separate sidebar components and also for this post list we can create a main post component and also inside this main component we can create a component for a post list so we can create this all in one page like traditional web designs in traditional web design we added all the markups for the home page inside the index.html file so like that we can add all the markups for this Facebook home page inside the app dot compound HTML file so if you can remember I show this update compound HTML file this is the main root file of the angular but it's not a good practice in angular because we can create separate components in angular if we create separate components rather putting all in one component we can reuse those components again in our application without coding it again so what is this reusable thing for example this navbar must be shown on all pages in this home page and if you navigate to someone's profile on that page also we can see this network in that case in angular we can reuse this navbar component inside all other Pages we don't need to write the code for navbar again and again hope you guys got the idea so now we have an idea about the angular component now let's see how to create an angular component when we creating a new angle app record this app component so this will be the main road component in angular all right let's create this simple layout using the angular component so we create separate components for each of this layout and we'll import that component inside this root app component so as our example first let's create this number component in angular as a good practice we will create all the components inside this app folder so first create a folder inside this app folder the folder name will be Network because we are creating a network component next create a file inside this folder give a name first the component name Napa Dot component and the file extension will be dot TS if you can remember in angular we use typescript instead of JavaScript for better and bug free code experience angular already inbuilt the component function so first we have to import the component module in order to work with angular components if you can remember when we learned typescript we learn typescript modules the same thing we're gonna apply here all the features of angular components are inside of another file so we have to import that file to this component file at the top of this page type import inside the curly brackets module name so module name is component this c will be capital next from so in typestcript for this we have passed the path for that importing module but in angular we have to import the module name inside quotes at angular slash Co so this will be the path for this component actually this is also like a path all of the angular files are installed inside this node modules folder inside this we can find this at angular folder inside this folder we can see this core folder so this is the component modules path for this import we have not added these node modules for the path because angular already knows these files are inside the node modules folder that's why we didn't add the node modules folder path in here okay next we have to create the typescript class first the class name navba component so carefully follow this Capital simple letters usually we use the camel case naming convention for class names so first letter and all the new words first letter are capital like this after this add the class scope curly brackets so still this file is not an angular component in here we just created this typescript class in order to transfer this typescript class file to an angular component we have to add The typescript Decorator class called component so this is the decorative we imported earlier now we have to use this so in typescript we can define a decorator like this first add sign and The Decorator class name component this is also like a function so after this parenthesis inside this parenthesis we have to pass some values as an object all right first we have to pass this selector value for this component selector colon and selector name will be app dash Network in angular for this component selector we give app as the first name and then we will give the component name so this is just a common naming convention for an angular component so you may wonder what is this selector this selector also similar to CSS selectors in CSS we use selectors to define CSS for HTML element we use the HTML tag name like this if the element is body tag we use the body selector if you have access class we use something like this Dot and the class name you got the idea right this is simple CSS like these CSS selectors in angular component also we use the selector value to identify this component hope you guys got the idea all right next we have to pass the template parameter for this so we have to pass the HTML markup for this component for example for now I pass an H1 tag here and between this H1 tag add this the navbar component and save this file now we have created the component with this component decorate next we have to register this component in angular modules then only angular nodes this app has a number component otherwise this component will not work so open this app dot module.ts file this is the main appmodel file in here we have to register our newly created Network component so inside this app module file we can see these declaration Imports providers and this bootstrap inside this NG model decorator so don't worry about this all we will learn this in later section so in this component section we will learn about this first declaration as you can see here the main default app component is already registered here like this we have to register on our component first we have to import the NABA component to this file so before we import the neighbor component to this file first we have to make the navbar component class export otherwise we cannot access this network component class inside another file so back to the neighbor component file and add this export before this class keyword so if you can remember we learn about this in the typescript section next back to the appmodule.ts file top of the page add the import import inside curl brackets the component class name is navbar component so once again follow the capital simple letters carefully after this from and the path inside quotes dot slash this is inside the navbar folder so navbar slash never dot component and one more thing we don't have to pass the file extension the angular compiler already knows this extension if you put the extension here we will get this compile error okay next we have to add this imported component inside the Declaration like this app component after this comma and add the network component all right we have successfully registered the angular Network component so in order to see this component first we have to run this n so let's run this app open the integrated terminal on vs code for the weave and select this terminal or we can use this keyboard shortcut Ctrl and the backtick key inside the terminal run this angular CLI command to run the angular app NG serve and hit enter so once it's completed go to this URL on your browser I will use Google Chrome as my default browser throughout this course if you guys also can use the same browser this will reduce the most of the errors so go to this URL localhost colon 4200 for an angular app the default Port will be 4200 in case if your computer using in this port or any other servers we can Define the port when we running the NG server just simply put the port flag and type a different port number like this all right this is how the default angular landing page looks like all these markups are inside the app component HTML file so I don't want this so I will remove this so back to the base code and go to the app component HTML file and remove all these after this just put an H1 tag inside this H1 tags add this angular app save this file and back to the browser so now we can see this H1 tag perfect if you look at this code inside the inspect element tool we can open the developers tool on Chrome right click and inspect element or the using keyboard shortcut Ctrl shift and I so inside this we can see the H1 tag with some angular attributes these attributes are coming with the angular so don't worry about that we are not going to deal with these attributes so what I want to show is this app dash Road 10. in HTML there is no element something like this so what is this if you open the app component ds5 inside this component decorator we can see this selector app dash root so this is what we see here now you may wonder how this appears inside the browser in angular component in order to show a component inside the browser we will use this selector as an HTML element so open this index.html file as you guys know this is the first file load inside the browser when we open the angular app inside the browser inside this index.html file we can see this app dash root HTML custom tag so this approved tag represents the app component so this is how we got this app dash root element inside this inspect element if I remove this component element from here remove this now we cannot see anything here and also now we don't have the app dash root tag inside this inspect element so once again we use this component selected as a component identifier in order to render this component inside the browser we use this component select as an HTML custom tag hope you guys got the idea right so now like this I want to show this navbar component inside the browser so the neighbor components selector is the app dash number so inside the app component HTML file after this H1 tag and the navbar component selected app dash navba and hit the enter so you guys may wonder why do we have this number component inside this app component file rather adding this straightly to this index.html like this app component because in angular we consider this a component as our main root component we don't touch this index.html file we only work within this app folder and we put all our components inside this app component so this is just a standard in angular all right now save this all and back to the browser now we can see this map Works text which is coming from this network component and also we can see this angular app H1 tag so this is coming from our main app component so this is how we work with components in angular so in previous we added the selector and template property inside this component decorator you guys now know what is happening with this selected property we recap this we use this selector to identify and render this component inside the browser so now let's see what is the use of this template selector you guys may already notice this inside this browser we got this never works from where do we get this if you look at inside the code on the inspect element we can see this app nav vertex between this app never tanks we have this H1 tag with this navbar works so what is this app dash navbar tank so this is the network component selector inside that we got this template values this H1 tag so inside this component decorator we got this template values this H1 tag if I change this text to nav bar template save this look at this this value also change to this navbar template as we can see here now we can understand this template is loaded inside the browser for this network component so what is happening here when we load this component inside the browser using this app component this will display all the content of this template value inside the browser so we use this template property to load HTML tags inside the browser hope you guys got the idea right so now we know how to show this component inside the browser using this selector and also we can show HTML markups for this component using this template property uh now think if you want to add the CSS style to this HTML element inside this component file how are we going to do that in order to add CSS for this template we can use another component decorate a property called style using this style decorator property we can add CSS style to this component all right let's see that in action so let's change the color of this H1 tag so in our case his selector is this action tank next this is scope so inside this we are changing the color of this H1 text so CSS property is color colon and value is something red all right save this and back to the browser perfect so now as you can see here now this H1 text is in red color so this is how we add the CSS styles to component all right some of you may noticed this usually we write CSS in multiple lines not in one line like this right but in this component ts5 inside these codes we cannot write multiple lines if we add the line break here we get this compile error so we have to put everything in one line for something simple CSS style like this this is okay but if any case we want to write some some multiple lines of ties for this component how do we going to do that so in angular component decorator we can do that by using the back tick symbol instead of this course which is located before the number one key in the keyboard so let's remove this previous style and put the back takes inside these backticks we can write multiple lines of codes without any errors so let's write the previous Style again but this time we can write this in multiple lines CSS selector H1 and this is scope inside the scope set the color to red after this let's add another style inside this so change the font size to something big 50 pixels now save this and back to the browser beautiful right now we have successfully wrote multi lines of CSS inside our component TS file using the backtick symbol and one more thing guys I forget to mention that we can use this backtick method to write multiple lines of HTML markups also so remove these codes and add backticks for this template after this let's put another paragraph tag and add some dummy text say this all and back to the browser awesome right now we know how to write multiple lines of codes inside this component decorator so in the previous section we have created this navbar component we put the HTML markups and styles inside the same page using these component decorator properties so it's okay but I think if we have 100 lines of HTML markups and 200 lines of CSS styles putting them all inside this TS file it's make a code very noisy and unreadable so that can cause lots of problems and bugs when it's come to debugging oh can't even imagine right as a solution for this we can create a separate file or the HTML markup and a separate file or css how do we do that first let's create the files the first file is for the HTML template so we are creating these files for the same network component so create this file inside the navbar component folder so create a new file and name this navbar dot component this time this is an HTML file so the extension is tml all right next create the CSS file the file name will be Network dot component and extension will be CSS please note this carefully the naming convention is the same on these all three files first the component name never and second the component keyword and third the file extension so this file extension can be various depending on the file types and one more thing this TS file is the main file for a component so without that file we cannot create a component in angular so hope you guys got the idea all right we created the component HTML file and the component CSS file now we have to link these files to the network component so go to the component test file in previous we have added these HTML markups inside this template now we have to link the external component HTML file instead of these inline markups for that first remove this power markups next we have to do a small change to this template property so change this template to template UI so this U is capital so now this time this component decorator property is template URL all right now pass the component HTML files for as for up to this template URL property the file is inside the same folder so dot slash and the file name is navbar dot component dot HTML that's it simple right so likewise now we have to link the CSS file so again remove the existing inline CSS and change this style property to style URL then give the path of the component CSS file inside quotes dot slash navba dot component dot CSS beautiful we have successfully linked the external files for this network component so save this file and go to the browser wait what's going on here you only see this app component but we cannot see the network component markups why is that because if you can remember we removed all the inline markups and we linked the external HTML and CSS files so inside the network compound HTML file we don't have any markups so this file is empty that's why we are getting nothing inside the browser so now let's add an H1 tag and put this network component inside this network component HTML file after this save this file and back to the browser perfect right now we got this H1 Network component which is marked in this external HTML file all right let's add some style to this H1 tag so inside this network component CSS file write this style for this H1 tag H1 and the scope the color will be red save this and again back to the browser as you can see here external CSS style is applied to this H1 tag that's why this H1 text turn into red color perfect now we have separate files for HTML markups and for the CSS so we write all the markups inside the HTML file we add all the CSS Styles inside this CSS file and we add all the Logics inside this TS file so now we can work on this neighbor component more efficiently so in the previous section we have created this network component from scratch record all of these from the beginning some of you may get these creating components very hard some of you may not but don't worry we have an easy way for this we can create angular components using the angular CLI with a simple line of command so inside the integrated terminal just run this command so NG this command is coming from the angular CLI so G this G stands for Generate next see this C stands for component because we are creating a component here and at last we have to give the component name so we already created the network component so now let's create this post component so the component name will be post that's it to run this command just hit the enter all right post component is generated successfully if we look at the file structure we can find this post folder inside this app folder so inside this post folder we can see these files post component ts5 HTML file and css5 so we learned about these over files and created these files in previous lecture from scratch now if you look at this further in addition to these files we got this another new file this host component dot spec.ts file what is this file this file is responsible for unit testing in angular which is a Beyond scope of this course so don't think too much about this file so we are not going to deal with this file all right first let's look at this DS file so inside this we can see this import component and this component decorator so inside this component decorator we can see this property selector now this is app dash post so this selector will be used to identify this post component all right next we can see this template URL for the component HTML file and we can see this style URL and the path for the Post CSS file so if you look at this carefully we can notice some few additional things on this page just leave these for now we'll come to this in a moment now let's look at inside the post component HTML file inside this we can find this simple default markup P tag saying that post works so inside the CSS file we got nothing it's just a simple empty CSS file now go to the appmodules dot TS file inside this declaration we can see this post component register this is the beauty of angular CLI if we create an component manually we have to do this all step one by one from scratch if we missed one of these steps how app will break and also generating a component using angular CLI can you imagine how much of time is saving for us awesome right all right now go to the browser still we cannot see the post component here why is that because we just only created the component that is not enough in order to show the component inside the browser we have to put the component selector inside this app component so if you can remember we use the app component selector as an HTML custom tag go to the app component HTML file so the selector is app dash post and hit enter so the vs code intelligence will complete this snhtml custom tag so now save this and back to the browser perfect now we can see this post Works which means post component is now rendered inside the browser so open this inspect element and if we look further inside the elements we can find this app dash post tag so this is how we can generate angular components using the angular CLI if we compare this angular CLI generated post component TS file with our neighbor component ds5 it is Created from scratch we can notice a few different things the first one is this import in the neighbor component we only imported the component module but in post component which is generated from the angular CLI as this on init module import so you guys may wonder what is this and what is happening with this so actually this is an interface and also we call this on init interface as a life cycle hook with this only need interface we got this NG on init method so what is this NG on init NG on init is a callback life cycle method which is invoked after this particular component fully initialized inside the Dom this is different than the Constructor if you can remember Constructor will work soon after the object class created we learned about this in the typescript fundamentals section but this NGO on init will execute soon after this post component fully initialized in the Dom or in other words fully loaded inside the browser so this Constructor and this only need lifecycle hook are two different methods to work with this NGO unit we have to implement only need function to this class that's what happens with this line of code we will work on this engine init method throughout this course so don't worry if you don't get it at the end of the course you guys will get used to it all right in the previous lectures we learned how to create a component in a hardware and the easiest way the easiest way is creating a component using the angular CLI so we will use the angular CLI method to generate component throughout this course so an angular component has mainly these three files CSS file HTML file and this typescript file so this HTML and CSS files are carrying on the HTML and CSS markup and this typescript file carries the logical part so inside this post component we have this H1 tag inside this we have this static text let's make this static H1 tag to Dynamic as I mentioned earlier we put all our component Logics inside this typescript file so open the post component ts5 and create a variable title and the variable type is string let's assign list of post to this variable now what I want to do is I want to show this title variable inside the HTML file which are not directly put this typescript variable inside HTML file for this first we have to create a JavaScript scope inside the HTML file so this is simple thing right usually if you want to write a CSS code inside the HTML file first we create the CSS scope using this style HTML tag you guys already know that right so between the style tags you can write CSS because this is now a CSS scope not an HTML scope inside this style tag we cannot write HTML so think if you want to write some JavaScript codes in an HTML document we put Javascript codes between script tags okay so like this now we are going to show this typescript variable inside the HTML so first we have to create the typescript scope inside this HTML file for that in angular we have a special type of syntax which is two curly braces so this will create a typescript scope inside this HTML file next between these pass the variable name title now save this end back to the browser beautiful right now this title as change to this title variable value so this is what we call data binding in angular so inside these curly braces we can write any valid JavaScript code for example let's add two numbers remove this variable tightly and let's put 100 plus 50 save this and back to the browser over sunlight we got the sum 150 here and one more thing for this process we call data binding and also we call this special type of syntax string interpolation in angular in the previous lecture we learned how to bind data in components we created this variable and we bind that variable to the HTML file to show this inside the browser think if you have to show this variable inside another component how we gonna do that this variable is only accessible inside this component we cannot access this title variable from another component for example let's see we have this message post variable inside this post component for some reason I want to access this variable inside the app component so in that case we can't show this variable inside their component using this string interpolation because this variable is inside this post component wait I show you this in action inside the app component HTML file let's bind this variable using the string interpolation double curly basis between this variable name is this message post save this now look at this we are getting a runtime error that's saying property message post does not exist on type app component inside this terminal and also we can find this error and line number so this is one of the beauties of angular this will give the error and also this will give us the line number of that error so this will make a debugging light easier okay back to the error this error is telling us we cannot find this message post variable inside the app component so this is what I was trying to tell you guys we cannot access this message post variable from outside of this component so for this we have a solution actually not a solution we have solutions for this for different situations not only one so we will continue this in the next video so we have three methods to share data between components for three different situations let's look at one by one the first method is sharing data using input decorator in angular we have this special type of decorator input which is used to share data between parent component to a child component wait what is this parent and child component and how do we identify a parent-child relationship in angular components we have these two components in our angular Network and the post component we have our main app component inside the app component we have linked the navba and the post component using the components selectors because of this component linking this main app component becomes the parent component and these two components become children components of this app parent component let me show you another example as usual let's take the Facebook inside the Facebook app we have these components never left sidebar right sidebar and the post component and all of these components inside one root component which is this app component so all of these components are children components of this parent app component and also we have this single post component which is inside this host component not inside this app component so in this scenario this single component becomes the child component of this host component once again now the single post component becomes the child component of this post component not to the app component okay so in that case this post component becomes the parent component for this single post component if you look at this in brief the main app component as three children components the snack bar sidebar and this post components so if you look at further this post component is the parent for the single post component so this is how we Define parent child components in angular hope you guys got the idea all right so we learned we can pass data between parent component to child component using the input decorator if we look at our previous example we can share data from the app component to these children components using the input decorator as well as we can pass data from the post parent component to the single post child component using the input decorate so in the next video we will see this in action all right guys in this video we'll look at how to pass data from parent component to child component so let's create a variable inside the app component which is the parent component inside the app component is file create a variable called parent message and this variable type will be a string now assign this inside codes message coming from the parent component now I want to access this variable from this post component which is a child component of this app component for that first we have to share this variable to this post component so inside the app component HTML file we have this element for the Post component so inside this element open and close square brackets inside this given name something from parent equal sign this name can be any name after this inside codes give the variable name that we want to share with the post component the variable name is parent message okay now with this we are sharing this parent message variable to the post child component now what we have to do is we have to capture this variable inside the post component and show this parent message inside the browser all right let's look at how to do that open the post component TS file inside this we have to capture that variable so we are passing the parent message variable to this component via binding to this variable called prompt parent now this from parent variable which is coming from the parent component is in front of this first component but this variable cannot enter inside to this component because this child components gate is closed so first we have to open the gate for that we use the angular input decorator so first import the input decorator inside this import brackets put the input module this also comes from the angular core so we can put this inside this same import next we have to open the gate so add decorator start with at sign okay we learned about this in the component section next The Decorator name input this first letter is capital now parenthesis all right now with this input decorator we opened the gate so now we can capture the from parent variable from here so after this decorator from parent variable and the type is string all right now we have the parent shared variable inside this child post component let's show this component inside the browser for this we can use this ring interpolation because now we have the variable inside this same post component so create an H3 tag inside the post component HTML file so inside this two curly braces and between these braces give the variable name which is from parent now save this all and back to the browser perfect now we are not getting any errors and we can see this message message coming from parent component perfect right now let's change this variable message inside the app component this time change this message to message change save this and back to the browser awesome right this parent message also now changes to this message changed so this is how we pass data from parent component to child component using the input decorator method let's do a small task we learned how to pass data from parent component to a child component so do the exact same method and pass the data from post component to this post list component this time post component will be the parent component and the first list component will be the child component if you noticed still we don't have the post list component so first generate the post list component using the angular CLI next create a variable inside the parent Force component then pass the parent variable to the post list child component at last show that variable inside the browser using the string interpolation alright guys if you don't remember go back to the previous lectures and learn it again no need to hurry take your own time and try to do this task your own still if you can't do this try it again and again you can do this never give up alright now pause the video and start the exercise once you have completed the task continue with the next video all right let's continue the task those who have successfully completed this task good job guys those who are not completed this for them also very very good job guys because you are trying to do this the final result is not important you must try and try and keep trying to achieve your goals that's what I wanted all right let's see how to do this exercise first let's generate the post list component using the angular CLI inside the integrated terminal and this command NG this NG command is coming from the angular CLI G this stands for Generate C this is for component and at last give the component name post list this post list is a two word name so as a best practice if a component name is a two or more words name just separate them with the dash something like this post Dash list this is not compulsory but try to follow best practices and one more thing we cannot keep spaces in the component name like this post space list hope you guys got the idea so change the name to post Dash list now hit the enter all right post list component is ready okay first create the variable inside the parent component this time parent component is this post component so inside the first component is file create the variable post parent message this P and M will be capital so this variable type will be string after this assign the message is message coming from the post parent next we have to send this message to the post list component so for that put the post list component inside the post component using the selector the component selector is this app dash post Dash list so inside the post component HTML file put this selector as HTML custom element app dash post Dash list and hit enter all right now let's pass the variable inside this post list element square brackets inside that something variable name from post parent equal sign inside quotes pass the variable name which is post parent message next we have to capture this from the post list child component for that we use the angular input decorator so first import the input decorator inside this import input this input decorator also part of the angular core module that's why we put this inside the same input next at input and parenthesis so from the parent component we share the variable binding to this from post parent variable so put that variable name here from post pin so carefully follow this Capital simple letters so this variable type will be string now we have captured the post parent variable now we can show this inside the post list component using this string interpolation go to the Post list HTML file so remove this P tag and put H1 tag post list component after this inside of a P tag two query packets inside that variable name is from post parent that's it save this and back to the browser here it is we can see this post parent message very simple right all right we learned how to pass data between parent component to a child component now let's look at how to pass data from Child component to parent component we cannot do this using the input decorator because we don't have the parent component selector inside this child component so then only we can pass the data to the relevant component using the input method in previous we pass the data to the channel component by binding the data to the component selected but think if we want to pass data to a parent component from a child component for that we have two methods the first one is the share the data using the view child method the second one is the output decorator and the even emitter method in this video we'll look at the first method view child method we will look at the second method in the next video all right let's see this view child method in action so this time we want to share data from child to parent component so create the variable inside the child component which is the post component inside the post component TS file create a variable called child message and this variable type will be string now assign this text as a value for this variable from Child component all right we have the variable now let's access this variable from this parent app component for that we're going to be using the view child decorator so open the app component TS file and import the real child this is also coming from the angular core module so put this inside this same import wave child carefully follow this naming convention capital and simple letters this first we end this C is capital so with this view child we're gonna look inside the child component so inside the component class first add the view Channel decorator at wave child and parenthesis inside this parenthesis we have to pass the child component that we want to get the data from so now we want to get the data from this post child component so pass the post component inside this view child parenthesis for that first we have to import the post component import inside curly brackets post component this p and C capital from inside quotes this is inside the post folder so dot slash post slash and this post dot component now pass this post component inside this view child parenthesis post component after this give a name for this this can be any name child com all right now we have the post component next we have to access this component and we have to get that variable child message so first let's log and see what is coming with this component so log this inside the Constructor now so create a Constructor Constructor parenthesis and the Constructor scope inside this lock this component child com save this and go to the browser now open the browser console inside that we can see this log that's saying undefined why is that at the time this app component loads to the browser this child component is undefined so you guys already know this Constructor method will load immediately the app class object created at that time post component is undefined that's why we are getting this undefined log so to access this we have to use an angular component life cycle method which is the after view int lifecycle hook first we have to import the lifecycle method to this component this is also coming from the angular core so put this inside this same import after wave init all right next we have to implement this after view unit lifecycle hook to this app component class then only we can use this lifecycle hook inside this app component after this class implements after wave init once again follow this Capital simple let us carefully otherwise this code will break next create the lifecycle method NG after view init this name must be the same as this so carefully follow these Capital simple letters so next parenthesis and the scope now let's log this virtual component inside this NG after view method inside this method console.log this dot child com now save this and back to the browser now inside the browser console now we can see this undefined as well as this post component this undefined printed from The Constructor this component printed from the NG after view init method so you guys may wonder what is happening here as I mentioned before when the time this Constructor method work this child post component is not initialized inside the browser as a solution for this we used one of the angular component life cycle hook after wave in it this method will call once after the total wave initialized on the browser so that's why we are getting this lock printed inside the browser hope you guys got the idea now look at this log we are getting this how variable child message and its value which is created inside the post child component further we can see other variables too this is the beauty of this view child decorator with this virtual decorator if you want we can access all the child post components variable from this parent app component okay now we have the variable let's show this inside the browser using string interpolation for that first we have to assign the components to a variable so create a variable message and the type will be string inside this lifecycle method this Dot message assign this dot the component is child com inside this child com we have the variable that we want to access which is child message that's it now inside the app component HTML file create a P tag inside this two curly brackets inside that pass the variable message save this all and back to the browser beautiful right we got this message from Child component which is coming from the post child component this is how we passing data between child component to parent component using the view child decorator so in the last video we learned how to pass data between the child component to the parent component using the method one view child decorator so in this video let's look at how to pass data between child to parent component using the second method output decorator and the event emitter so this approach is idle when we want to share data changes that occur on things like button clicks form entries and other user events first let's create the variable inside the child component which is the post component so go to the Post component this file and create a variable and create another variable this time variable name is something like output child message so this variable type will be string the value is something message from the child component via output next we have to create a new event emitter with the output decorator for that first we have to import output and event emitter to this post component which also comes from the angular code so put these two Imports inside the same import first one is output so this o will be Capital next event emitter this 2 ens are capital all right let's create the event emitter with the output decorator at output follow only Capital simple letters carefully the name for the event emitter message event then assign new event emitter this event emitter type is and parenthesis all right we have created this event emitter now what I want to do is I want to emit this message to this event emitter when clicking a button as I said before this approach is commonly used when there is a user action all right let's create a button inside this post component usually we put all HTML markups inside the HTML file so go to the Post component HTML file and create a button just a simple button button tag inside that click now I want to call to a function when clicking this button for that in plain JavaScript we can use the on click event but in angular this is a bit different angular as its own click event so inside the button tag create a pair of brackets inside the brackets click all simple letters so this is the click event in angular after this equal sign then inside quotes um I want to call to a function when clicking this button so let's put that function name inside this quotes still we have not created the function yet so give a name just send message and parenthesis all right now we have the click event now let's create this method inside the component TS file so inside this class scope create a method the method name is send message parenthesis and the method scope inside this method I want to emit this message to this event emitter before that let's check whether this button click event is working or not so let's log clicked inside this method so save this and back to the browser now we can see this button click that button perfect click event is working without any problem so that's why we are getting this clicked logged inside the browser console all right we click event is working next let's emit this message to the event emitter so inside this method this Dot message event dot emit parenthesis inside that this Dot message that's it we have successfully emitted this message variable to the event emitter okay next we have to capture this event from the parent component for that go to the parent app component HTML file so this is the selector element for the Post child component so what I am going to do is I am going to bind the event emitter to this post element so inside this selector element brackets inside brackets event emitter event emitter name is this message event put this inside these buckets next I'm going to call a method when this event emitter triggers so equal sign inside quotes pass the method receive message then parenthesis so inside this parenthesis pass the event as the parameter so still we don't have this method inside our app component yes file so create this method receive message this m is capital parenthesis and the method scope we are getting an event parameter for this method so past event for this parenthesis all right now let's see what we are getting with this parameter so lock this event inside this method save this file and back to the browser now click this button perfect we are getting this message from the child via output which is coming from post child component awesome right so what is happening here we are getting this child component variable data inside this parent component when clicking this button this button also inside the child component this all magic is happening with the output decorator when we clicking this button we are emitting this message to the event emitter because of this output decorator we can access this from outside of this component so next what we did is we bind this event emitter to this post component selector element which is inside the parent app component then we called to a method when this event emitter triggers this event emitter will trigger or get active every time we click this button so inside this we logged the event which carries the child components message so every time we click this button this method will emit the variable to the event emitter every time this event emitter is getting active this event inside the app component also get triggers that's why we are getting this locked inside the console every time I click this button you got the idea right all right next what I want to do is I want to show this child message inside the browser for that inside the app component TS file create a variable from Child output type is always string now assign this parameter event to this variable inside this method this Dot from Child output assign this parameter event now we can show this inside the browser using the string interpolation inside the component HTML file after this P tag inside the paragraph tag two query brackets inside these brackets variable name is from Child output that's it save this and back to the browser perfect right we got this message inside the browser beautiful so this is how we share data from Child component to parent component using the output decorator and the event emitter all right this is the end of this section in this section we learned all about angular component and their use cases after this we learned parent child component relationship and finally we looked at how to share data between components for different situations such as parental child component using the input decorator child to parent component using the real child decorator child parent component using output and event emitter when there is an event hope you guys learned this section well if you missed anything go back and learn this again if you have any questions please feel free to ask in the Q a area all right this is it for this section we'll meet you in the next section so in this section we will look at how to display a data inside of a pu and how to handle events in angular at the end of this section you will know angular data binding methods angular 2A data binding how to handle events in angular such as click key up events and event filtering let's get started [Music] alright let's get start with display data for this displaying data we have several methods in angular so let's look at the first method so the first method is string interpolation this may sound like a bit familiar to you is it yes you are correct we learned this string interpolation when we learning components in the previous section so in this section let's learn the string interpolation in detail so what is this string interpolation as you know we used this string interpolation to show Dynamic data on the HTML component page so in the angular component we have three files this HTML file CSS file and the typescript file so this typescript file is the main entry point of an angular component so we do all the dynamic things inside this typescript file so let's create a variable inside this app component file something message if you can remember in typescript we have to declare the variable type when creating a new typescript variable so this variables data type is string now as I know value for this something message from the typescript component file now I want to show this message to the end user the browser shows only the HTML page to the end user not the CSS file or this typescript file so in order to show this typescript variable inside this component HTML page we use this string interpolation approach so let's see this in action go to the app component HTML file down here create a P tag inside this let's show this message variable inside this P tag the variable name is message so what do you think guys is this correct yes this is wrong why is that because this variable is a typescript variable so first we have to create a typescript scope inside this HTML page you guys know inside of HTML page we can write inline CSS using the style tags so between this tag we can only write CSS because now this scope is a CSS scope not an HTML scope if I write HTML inside the scope of this style this phone work you got it right like this if you want to write some logic in JavaScript we have to create a JavaScript scope inside this HTML page so we do that using the script HTML tags so between this we can write any valid JavaScript Logics so like this in order to show this typescript inside this HTML file first we have to create the typescript scope inside this HTML file for that we use these two curly brackets so open and close two curly brackets all right now inside this place this variable name message now save this and go to the browser perfect as you can see here we got this message printed here so inside this scope you can add even simple calculation something like this one plus two save this and back to the browser perfect right we got this three printed here so with these curly brackets we are creating a kind of a typescript scope inside the browser so we call this special type of angular syntax string interpolation using this we can show data inside of an HTML file which is declared inside of the component file when the angular compiler sees this string interpolation this will automatically look inside the relevant component file and print this relevant variable data inside this HTML tag so with this we can show any type of data to the user this name is string interpolation but we can show numbers and Boolean values inside this string interpolation so don't get confused with this string name okay once again to show a variable data inside the browser we use this special type of syntax string interpolation in angular hope you guys got the idea in previous we learned about string interpolation in this video let's look at the property binding I think there is an image in our database and we got that image path to a variable inside this typescript file something image ing URL this U is capital the variable type is string and the value will be something for now let's add an image path from Google search for an image copy the URL and paste it here for now we just think we are getting this from our database alright next I want to show this inside the browser so how we going to do that if you want to show anything inside the browser we have to add that inside the HTML page so go to the app component HTML file we're going to show an image so create an image tag ing hit enter all right next for this SRC we have to pass the image path we have this image path inside this typescript file so we can pass that variable to this SRC using the string interpolation so inside this SRC codes double curly brackets inside these brackets the image SRC variable is this ing URL now save this and go to the browser beautiful we got this image inside the browser so like this we can pass Dynamic values for HTML properties using the string interpolation but in angular we have a different and cleaner approach for this Dynamic property values we call that property binding let's see this in action this is very easy just copy and paste this image tag after this now let's change this string interpolation to property binding wrap this SRC property with square brackets now remove this string interpolation curly brackets and keep this image URL variable that's it this is the property binding in angular so look at this syntax this property binding is more cleaner than this string interpolation right save this and back to the browser we got this image here which means this property binding is working perfectly this string interpolation is working for this but we used this property binding because this will give us some cleaner code and another thing when an angular compiler compiles this component the string interpolation property is going to be automatically compiled as this property binding no matter what you are using at the end of the day this will compile to this property binding method so in my opinion this property binding approach is better than using this string interpolation approach so usually we use string intercalation to bind data inside of a tag for example like this heading tags paragraph tags inside of a div tags and we use this property binding approach to bind a property of an HTML tank like this image SRC tag hope you guys got the idea all right in the previous lecture we look at property binding so in this video let's look at how to bind a CSS last one HTML element so we have this heading tag inside this app component HTML now I want to change this color to Something red color so normally we change this color using the CSS first we will add a class to this class class name will be something text Dash red save this file now open the app.component.css file inside this let's add this style so first the CSS selector the class name is dot text Dash red then csscope next write this style inside this scope color colon and color will be red save this and back to the browser as you can see here this H1 tag is now red perfect all right now what I want to do is I want to make this H1 tag red color when this Boolean value is true for that we're gonna use the angular class binding method so let's do that remove this class attribute is also same like property binding so first square brackets inside these brackets we are trying to bind the class property so class after this dot symbol then give the CSS class name test Dash red so now I want to apply this red color to this text when this Boolean value is true let's add the condition after this equal sign inside quotes give the Boolean variable name here b double o l Bool that's it now this red color will apply when this condition is true so we already created this CSS inside the CSS file so save this all and back to the browser perfect as you can see here this text color is now red if I make this Boolean to false now look at this this color is black because this condition is now false hope you guys got the idea so this is how we conditionally bind CSS classes to an HTML element using class binding in angular all right now we know how to bind a CSS class to an HTML element with the condition using the class binding approach in this video let's see how to bind an inline CSS Style with the condition to an HTML element using the style binding this also variation of property binding but similar to previous class binding let's see this in action for this style binding let's create another John tag after this H1 and hit enter H1 text will be style binding as I mentioned earlier this also same as the class binding so inside this H1 HTML tag first square brackets inside that this time we are binding an inline style so first style after this we can pass any properties of this style object in Dom so this is a bit different than regular CSS for example if we want to add the background color in CSS we add that something like this CSS property is background Dash color then the color value but if we are passing this as a style binding we have to use the HTML Dom Style object property which is a bit different than the regular CSS property for this background color we have to pass background this time no dash just type color with the capital c that's it go to the Google and search HTML Dom Style object go to this first result w3schools.com in here you can find all the Dom object properties of this style object so all right back to the work in here I don't want to add a background color I just want to change this text color to red so the style object property is same as CSS property color you can find this on this website so after this we're gonna check this bull value is true or false so after this equal sign double quotes inside this pass the argument Bool this is this Boolean value okay next we have to pass the CSS value so if this argument is true set this color to Red if this is true we Define that using this question mark so question mark after this single quotes and value is red so this is not done yet as you can see here we are getting a compile error why is that because this argument required the else part as well so after this colon sign we use this question mark for the if statement and for else we use this colon symbol so after this for now just pass an empty value that's it say this and back to the browser perfect now this color is red if I make this Boolean value to false this time this H1 tags color is back to the default black color I think if you want to change this text color to something blue color when this Boolean value is false how do you going to do that very simple we can Define the else in line using the colon sign we already added this so after this column sign inside single quotes plastic color that we want to change this time I want to change this color to Blue so pass the blue value inside codes say this and back to the browser perfect right now this H1 is blue because this bold value is set to false again change this to True save this hand back to the browser as you can see now this text is in red color if you recap this quickly in angular we can bind style to an HTML element using this style binding method insert square brackets we pass this first style because this is a style binding next the Dome style object property so if you can remember this CSS Dom object properties are a bit different than regular CSS properties you can find list of these style Dom object properties in this W3 scold website so I pass the color property because I want to change this H1 color if this Boolean value is true so after this assign inside double quotes the argument which is this bull if this Bool value is true set red color this is what we defined with this question mark okay if this is not true set the color to Blue we Define that using this colon symbol this is something like inline if else we defined if with this question mark and else with this colon Mark that's it very simple right So This Is How We Do style binding in angular perfect alright in this video let's look at how to bind an event in angular using the angular event binding approach when a user interacts with a web application such as a keyboard key press a mouse click or a mouse hover it generates an event these events need to be handled to perform some kind of action this is where this angular event binding comes to action all right first let's create a button inside the app component HTML file after this button tags hit enter and button text will be something click me now let's bind The Click event to this button in plain JavaScript we do something like this on click then we pass the JavaScript function that we want to execute when this button clicked so this is the traditional way but in angular we have a different and more clean approach which is angular event binding let's do that remove this JavaScript on click if you can remember we used square brackets for data binding but for event binding we use this normal brackets so don't get confused for a data binding we use square brackets and for an event binding we must use normal pair of brackets so otherwise this click event will not work all right brackets inside of this bracket pass the event name so as I mentioned earlier I want to bind The Click event so the event will be click all simple letters in plain JavaScript we use on click event but in angular we use just click event name simple right after this as usual equal sign and pass the target method name inside of this quotes in plain JavaScript we pass the function name here but in angular you already know angular use typescript instead of JavaScript so in typescript we can create methods so pass the method name here button click and the parenthesis this c will be capital now save this and back to the browser click this button look at the browser console in case if you forget how to open the browser console right click and select this inspect element after this go to the console tab or you can use the keyboard shortcut shift Ctrl I and go to the console tab so in the console we are getting an error what is this error this error saying that this button click is not a function why is that can you guys guess yes of course we just only link this method to this click event but still we don't have this method initialized or created inside this component class that's why we are getting this error to solve this error let's create this button click method inside the app component file wait before that I want to show you something you guys maybe notice this so look at this we got this compile error that's saying this button click is not defined not only that look at this internal terminal window we are getting the same error and also we are getting the line number as well see how this is easy to debug the error this is the beauty of typescript we can get the error on the stage of compile we don't have to wait until the runtime of this app to identify the errors all right get back to the work go to the app component TS file and create the button click method inside this class scope the method name is button click the C is capital after this parenthesis and the method scope inside this method let's log a simple message button click event worked save this file now look at this this time we are not getting any compile errors perfect go to the browser now click on this button look at the browser console we are not getting any errors like previous if we look further we can find this button click event worked lock printed inside the console which means the button click event is working perfectly so this is how we use event binding in angular in angular we have a concept for event filtering let's see an example for this create an input field for this input field I am gonna bind key up event so inside brackets key up event you guys already know this for data binding we used square brackets for event binding we use this default packets after this equal sign let's call a method from here on key up then parenthesis now we are getting this compilation error saying that this on key up is not exist to solve this problem let's create this method inside the app component TS file create on key up method after this on key up this K is capital parenthesis and the method scope inside this for now let's lock something and see whether this method is working or not so console.log inside brackets let's log key up event working save this and back to the browser now we can see this input field so type something inside this input field now look inside the browser console perfect we got this lock every time we type something inside this text field we got this log printed inside the browser console perfect now what I want to do is I want to lock this message only when I press the enter key not all the time like this so let's do that first we have to capture which key pressed on the keyboard for that pass the event object with this method dollar sign event now capture this event parameter from the on key app method inside this parenthesis dollar sign event so this time unlock this event parameter instead of this text so save this all and back to the browser type something inside this input field now look at the console in here we got this event object log if I expand in this we can find a list of useful properties of this key event object we can use this event object properties as per requirement so in our case we gonna use only this key code I typed a inside the text field I can see that with this key property after this we can see this key code for this a key is 65. this time I type S look at this we got another event object printed here the key code is for the S letter is this 83. again if I type inside the input field wait rather getting this old object log we log only this key code then we can see this clearly so back to the app component yes file inside this we are logging the event parameter now I want to log only the key code so after this dot key code this C is capital save this and back to the browser now type A inside the terminal perfectly got this keycode printed here like this we will get a unique key code for for each and every key that we typed inside this text field perfect right all right now I want to log this when only press the enter key not all the time like this for that first let's look the traditional way then we look the angular event filtering way in traditional we will add an if statement and check whether the key code is equal to the enter Keys key code let's do that first inside this method if statement inside brackets pass the logic dollar sign event dot key code equals Now set this equal to the enter Keys key code back to the browser and inside this text field hit enter this is the key code for the enter key 13. now add this key code 13 here after this if statement scope inside the scope put this log cut this from here and put it inside this if statement change the log to enter key pressed save this and back to the browser now type something inside the text field look at the browser console nothing printed here now hit the enter key look at the console perfect this time we got this log when Enter key is pressed so now we are getting this log only when we press the enter key not all the time we typed inside this input field like previous so this is how we doing this using the traditional way but in angular we have something cleaner and very easy method let's look at that in angular we have event filtering we can call this key up when only press the enter key using the event filtering this is very easy just type after this event Dot and enter so with this we are filtering the key up event only work when press the enter key simple right now we don't have to pass the event object here inside the TS file remove the event parameter because we are not getting any parameters and now we don't need if statement and this key code logic remove the mold and keep only this log now save this and back to the browser type some characters inside the text field look at the console we are not getting anything now hit the enter key beautiful I got this enter key pressed log perfect right with the simple line of event filtering we got this log this is very clean and understandable rather than the previous code hope you guys got the idea alright this is how we use event filtering in angular awesome so in any case if you want to get the typed value of this input field how do we going to get that we can do that by passing the event object like previous pass the event object as a parameter for this method dollar sign event go to the app component TS file inside this method on keyhub pass the event parameter dollar sign event all right let's lock this value using the event parameter so remove this previous log this time to get the typed values inside the input field log this dollar sign event Dot Target dot value so this is how we get the values from this event object save this online back to the browser type something inside the input field let's type angular hit enter look at the console perfect right we got this value inside the console so this is how we get typed values inside of an input field but in angular we have a cleaner approach for this so let's see that in action first we have to identify this input field so we can do that using the template variable in angular it's very simple just as sign after this just give any name for this field just assume this field is used to get usernames so give this field name as user name keep this in your mind this ash sign is important then only this becomes as a template variable in angular next we have to pass the typed value to this method when pressing the enter key this time we don't need the event object so remove this now pass the values using this template variable template variable is username so this is this template variable which represent this input field after this Dot and value that's it with this we are passing this input Fields value to this method as a parameter save this end now go to the app component TS file inside this key up method this time we are not passing the event object so remove it and simply add a variable to capture the parameter username after this simply lock this parameter in the console save this and back to the browser type something inside this input field John Doe hit enter look at the console he got this value printed inside the browser console perfect right so this is how we use template variables in angular hope you guys got the idea so in previous we learned how to get the value from the input field using the angular template variable so in this video let's look at another cleaner way of getting data from this input field in previous we declared a variable in HTML file and we passed that variable values to this method and we captured that parameter but now let's see how to assign this input field value to a variable created inside the component class all right first create a variable inside of this component class variable name is username this n is capital the variable type will be string now what I want to do is I want to assign this text field value to this variable how do we going to do that this is very easy for this we have another data binding method in angular like the string interpolation property binding so for this we have angular two-way data binding method let's see this in action keep this previous example after this create another input field the type will be text now let's see how to bind this text to this component variable very simple inside this input first create square brackets inside this square brackets open and close simple brackets inside these brackets type NG model this is NG model is a special angular Syntax for this two-way data binding keep this in your mind this m must be Capital next equal sign now inside this codes pass the variable name that we created inside the component typescript file username this n is capital that's it we have successfully assigned this text Fields value to this username variable which is created inside this TS file if you look at this carefully we are getting a compile error NC model is an unknown property of this input field where is that because this NG model is inside of angular forms module so in order to remove this error we have to import the forms module to our angular project so open the app modules dot TS file inside this let's import the forms module at the top of this import section and the import statement import inside curly brackets forms module this F and M will be capital letters next from then module path will be at angular slash forms pass this inside quotes after this add this imported forms module inside this import after this browser module comma forms module that's it now our angular app knows that we are using the forms modules features inside our angular now go to the app component HTML file now look at this this time we are not getting any compile errors beautiful all right now let's simply add the key up event with the event Enter key filter like the previous example just copy and paste it here this time we don't need to pass this template variable remove it that's it now go to the app component type fit file and remove this parameter we don't need that anymore this time log this username variable instead of this parameter variable if you can remember in order to access a typescript class variable inside of a method we have to use this keyword so this dot username this n is capital now save this all and back to the browser type something inside this text field and hit enter we got this John Doe inside the console beautiful isn't it so this is how we use two-way data binding approach get the values of input field in the previous video we learned about the two-way data binding some of you may wonder what is this two-way data binding how this is different from this property binding and actually what is this two-way data binding and 1A data binding so if you look at the one-way data binding so this one-way data binding will bind the data from the component to the web so this one-way data binding is unidirectional so you can only bind the data from the component to the vehicle let me show you a quick example for this create another input tag after this input and hit enter input type will be text now I want to add value to this input how do we do that normally we set the value property to this input field and we'll add the value inside the codes value will be something one way data binding so save this end back to the browser look at this we got this two-way data binding inside this text field so this is how we doing this in normal HTML but I want to make this dynamic so I will create a variable inside the component TS file something text value this V is capital this variables data type is string so after this assign a value for this inside quotes something value is coming from the component so save this now go to the app component HTML file now I want to pass the text value variable to this input how do we do that if you can remember we learned earlier how to show a variable inside of this HTML wave using string interpolation and property binding now we are dealing with this value property so let's use the property binding method so let's make this value property as a property binding by wrapping this inside of a square brackets now we are getting the value from the component so remove this encoded value and add the variable name text value now save this and back to the browser perfect now we got this value inside this input field now think if we want to capture this value when we press the enter key like previous video example for that first bind the event with the event filtering for Enter key assign it to this same on key app method save this now go to the component yes file and remove this previous log and add this new log this time lock this text value variable save this all and back to the browser now we got this value inside this text field so hit enter look at the browser console in here we got this log saying value coming from the component which is same as this now let's change this value to Value coming from give now hit enter look at the console this time also we got this same previous message again change this to something else still we are getting the same message what is happening here if you look at the code this is passing this text value variables value to this input with property binding but this cannot modify this changed value and assign it to this component text value variable that's why we are getting the same value from this log so this is what we called One Way data binding with this we can only bind data from component to view we cannot change these variables value from inside of this wave or with this HTML page but with the two-way data binding we can pass data from component to wave and also we can send data from vf2 component let's see this in action again create another input field input type is text now bind this text value variable to this in previous example we did this using the property binding this time let's do this with the two-way data binding we learned about this in the previous video so open and close square brackets inside this again simple brackets inside this type NG model so this is the special angular Syntax for two-way data binding so after this equal sign now pass the variable name inside quotes text value after this add the same key up function copy and paste it here save this online back to the browser we got this value inside this second input as well now change this value to Value coming from the V and hit enter look at the console this time this value change to this value you can type something else and hit enter perfect right we got this value logged inside the browser console so this is the usage of two-way data binding if you quickly recap this with one-way data binding we can only set data from component to wave we cannot modify or add changes to that data from View and send it back to the component but in two-way data binding we can pass data from component to view and also we can modify that data and send it back to the component from the wave this string interpolation property binding class binding and the style binding all these data bindings are included into the one-way data binding category we can only do two-way data binding using only this NG model syntax hope you guys got the idea alright let's do a small task this is going to be a very quick small task all you have to do is create this simple form and display the input Fields typed value down here we have this simple form which includes these fields a text field for the Post title next a text area for post details after that another text field for post image URL after this we have this text field for post URI and at last we got this checkbox to highlight the background color of this post title if I type a post title inside this this will show the post title real time down here like that if I add a post details is also rendered down here next if I add an image URL which I got from Google this image also rendered down here if I had a post URL it's also a dummy URL which I got from Google this will show us this more detailed link and if I click this link which will open this added website link inside of another browser tab at last if I check this checkbox this will give us this nice yellow background color for this post title if I uncheck this checkbox this will remove the background color that's it nothing fancy very simple task all you have to do is first design the form then use the two-way data binding approach to capture these form values after that using the string interpolation property binding class binding and event binding create this preview area don't worry nothing fancy here very simple task all you have to do is just think and apply one of the data binding approaches to generate this review area and so let's try to do this task on your own if you forget anything just go through on this section again and learn it again don't give up take your own time and complete this task once you have completed the task continue with the next lecture all the best hope you guys did the task well if any of you missed to complete the task don't worry let's continue the task with me all right inside the component HTML file let's create the HTML form so create a deal with form Dash area CSS class inside this first we have the heading so H1 tag inside this post form after this create an input field input hit enter the type is text and replace all the post title next on the text area so type text area and hit enter we don't need this name attribute so remove it and a placeholder post details next again two input Fields one for the Post image URL and another one for the Post URL at last create a checkbox input hit enter input type will be a check box and text after this input add this text after this input and background so now save the send back to the browser as you can see here all these input fields are in one row I don't want this make this form vertical back to the vs code we can do this using CSS but I am not going to do that just simply add BR tags to achieve the vertical layout after the switch one tag add two BR tags copy this BR tags and paste it after these all input fields now again save this and back to the browser as you can see here we got this beautiful vertical form now let's make this form Center so again back to the vs code let's add the style to this form Dash area inside app component CSS file CSS selector is this class form Dash area and this CS scope inside this add these CSS Styles so set margin Dash top to 50 pixels and set text Dash align to Center save this and back to the browser now this form looks perfect right all right now let's create typescript variables for two-way data binding so inside the post component yes file the first variable is for the Post title so the variable name is post title use the camel casing naming connection the data type is string next for the Post details so variable name is post details this day is capital this data type also string next we need a variable for this image URL so variable name is image URL this URL hold capital data type will be as always string next for the Post URL this also same as previous variable data type is string at last we need a Boolean value for this checkbox as you know checkbox will return Boolean values if this checkbox is selected the value is true if this checkbox is unselected the value is false so to bind this checkbox value we have to create a Boolean variable the variable name is add background make this be Capital this time data type is Boolean alright we have successfully created variables for all these form values now let's do the two-way data binding as you know to create a two-way data binding inside this input tag first square brackets inside the square brackets add the pair of normal brackets so inside these brackets NG model after this equal sign inside codes pass the variable name that we want to bind to this input field this input field is for the Post title so the variable name is post title if you can remember this is how we bind data to a typescript variable using the two-way data binding approach likewise bind these all inputs to the relevant variable using the two-way data binding so next one is this text area so copy this previousng model and paste it here this time variable name is post details again paste the NG model for this image URL field change the variable name to image URL again paste this inside this post URL input this time variable name is host URL at last paste the NG model for this checkbox input and change the variable name to and background that's it we successfully completed the two-way data binding simple right all right now let's show these input Fields value inside the browser using the string interpolation so after this form area create another div preview area div so div dot preview Dash area and hit enter this also going to be the same as this form area style so inside the CSS file add the preview Dash area class after this form Dash area so now save this and back to the HTML file now instead of an H1 tank let's render the post title using the string interpolation how do we do string interpolation open and close two curly braces inside this and the post title variable next let's add the post details inside of a P tag so P hit enter inside this open close to query packets inside these brackets pass the post details variable let's see how this looks like save this and back to the browser type something inside the post title look at this when I type inside this text field this is automatically rendered here in real time so this is the beauty of this two-way data binding again type something inside this post details perfect we got the post details down here beautiful alright get back to the work next let's show the image when we type the image URL inside this input field so back to this code let's render the image at the top of this preview area so IMG hit enter this time we are going to add this image text SRC this is a property of this image tag so this time we're gonna use the property binding approach so wrap this SRC inside of square brackets now pass the image URL variable to this property binding save this and back to the browser and an image URL inside this um let's get an image URL from Google search for small images go to the image Tab and select any of this image and copy the image address now go to the our angular and paste the image URL inside this input perfect right as you can see here we got this image rendered inside this preview beautiful all right next let's add link tag and bind this post URL so a and hit enter let's bind the post URL to this href property to make this property binding put this href inside of a square brackets and bind this property to post URL variable next I want to load this URL inside of another new browser tab when someone clicks this anchor tank so add this target blank after this add this anchor tag text more details save this and back to the browser just simply add a simple URL I add www.google.com now click this more details as you can see here this opened the google.com inside of another browser tab perfect right if you notice there this more details anchor tag is showing here even when this first URL field is empty I don't want that I want to show this more detailed anchor tag when this field has a value otherwise I want to hide this link so let's do that for this I'm going to use the style binding approach what I'm going to do is if this post URL variable is empty I am going to set this anchor tag display none if this is not empty I will set this anchor type display block so we're going to use the style binding so inside this anchor type square brackets inside this style dot then the style Dom object property is display after this equal sign now let's pass the condition inside double quotes the variable name is post URL so please carefully follow this Capital simple letters otherwise you will get errors post URL after this question mark which means if this is true set the display value to block insert single quotes pass the block else semicolon so we Define else part with this semicolon set this to display now so inside single quotes none so now save this and back to the browser as you can see here now we cannot see the more details link if I type a link inside this post URL we got this more details link if I again remove this URL look at this now we can't see the more details link perfect right so all right next let's do the background effect for this I want to apply a background color to the post title when this checkbox selected let's do that it's also very simple for this let's use the class binding approach before that let's add a style go to the app CSS file for the CSS selector we're going to use a CSS class because now we are going to deal with class binding let's name this CSS class something add Dash background after this CSS scope inside this set the background color to Yellow and set the padding to 10 pixels perfect now uh add background CSS class is ready all right let's do the class binding inside this H1 starting tag open and close a square bracket inside this we are doing the class binding so class after this dot next the CSS class name that we want to add Dash background next equal sign and after this inside codes pass this variable and background which is bonded to this checkbox that's it very easy right when someone checks this checkbox this add background variable will set to true if this is not checked this will be set to false so save this all and back to the browser type something inside this post title now check this checkbox record this background yellow color but this is applied to this full row I don't want that I just need to apply the background color only to this title not to this bold row to solve this back to the vs code inside this post title action tag create a span put this string interpolation inside these pen tags at last remove this binding from action tag and put it inside this span tag that's it now save this and back to the browser and the post title check this and background checkbox look at this we got this beautiful yellow background now uncheck this this time this remove the background color perfect so this is the end of this task hope you guys got the idea all right this is at the end of this section so for in this section we learned about how to handle data and display data in angular we learned about string interpolation property binding class binding style binding and at last we learned about two-way data binding and also we learn how to use this two-way data binding by doing a small task if any of you did not get any of the parts of this section go back and learn it again if you still don't get it learn it again never give up and also as always if you have any questions please feel free to ask in the Q a area alright we'll meet you in the next section [Music] about angry and it is in detail at the end of this section you will know what is angular directive and how to use that types of angular directives about ngf directive NG template directed and these sweet cases directive ng4 directive and also we will learn about the NG class and NG style directive at last we will learn about the difference between structural and attribute directives so this section is going to be awesome let's get started an angular directive is basically a special type of technology that can manipulate the Dom object like adding HTML elements removing HTML elements from Dom dynamically directors are one of the very very important feature in angular in the previous video we learned about angular components right so this angular component also including to this angular directive category and directives are components without a wave they are components without a template or to put it another way components are directives with a wave everything you can do with a directive you can also do with the component but not everything you can do with the component you can do with a directive all right in angular we have four types of directives component directive structural directive attribute directive and custom directives so this first type of component directive which is an angular directive with a template V so we already know about this an angular component as this template view HTML page so this angular component also one of the directive types in angular all right the next one is structural directive using this type of angular directive we can change the Dom layout by adding and removing Dom elements with this we can change the appearance of behavior of an element component or another directive last we got this custom directive with this we can create our own custom directive from scratch yeah I know these definitions may God confused you but don't worry we will learn about these all types of directives one by one all right in this video let's look at the first directive in G4 we use this ng4 angular directive to render an array object inside of the HTML okay this ng4 is a structural directive because using this ng4 we do Dom manipulation such as adding removing HTML elements to the Dom let's see this in action so inside the app component is file create a simple array for a list of post the array name is post array make this a capital the type is array and on the array type is string now assign this two simple array values inside of scale brackets the first value is post one put this inside of codes because we are creating a string data type array the second value is post to likewise post 3 post 4 and post 5. now I want to show this post array inside the browser as previous we can use this string interpolation for this let's do that and see how it looks like inside this Gmail view page inside of a P tag let's add this string into operation double query packets inside this array name is post array save this and back to the browser as you can see here we got this array printed here but this is actually not looking good right all array values stacked in one line so now I want to render this array values one by one inside of an unordered list how are we going to do that now we know inside this array we got these five values because we hand coded this array so we can render this one by one something like this create a UL tag with 5 Li tags inside this first li tag we can use the same approach as previous string interpolation this time I'm going to print the first value of this array rather printing all values like previous so from an array we capture single data using the array index number so first the array name post array insert square brackets to print this first array value inside this Li tag we have to pass the array index number which is 0. hope you guys already know about the array array index start with 0 not with one so the index of this first value is zero after this inside this second Li tag this time the index number is 1 next to likewise three and four now save this and back to the browser this time we got this beautiful list instead of previous R glyc stacked array all right now this is okay but this is not the best approach to fetch a list of array values we did this string interpolation approach because we know the array value count because we hand coded this array think if there is a situation we are getting this array from the database and we don't know the length of this array in that case we cannot use this string interpolation approach directly in that case we don't know exactly how many values are inside the array as solution for this situation we can use the ng4 directive normally we use for Loop to fetch an array in JavaScript something like this so inside the Constructor method follow keyword then the logic inside the brackets let I assign 0 because array starts with 0. semicolon next we will Define the for Loop condition I this I variable smaller than this dot post array dot length with this condition we are telling to this Loop run this Loop until this I variable is less than this array's length after this semicolon and add an increment to this variable I plus plus all right inside this for Loop log the array values log hit enter inside brackets post array inside square brackets the array index will be represent with this I variable save this end back to the browser look at the browser console we got this array values printed one by one so this is the JavaScript way but in order to render this array values inside the beef template we use angular ng4 directive so let's see this in action inside the HTML file we're gonna render this inside of an unloaded list like previous so after this create another URL tag this time you need only one Li tag now inside this Li tag asterisks or the star symbol ng4 this F is capital after this assign inside codes let post of post array after this inside this Li tank now we can use the string interpolation to show this array values open close to curly braces inside this post which is this post variable save this and back to the browser look at this we got this list of host which is fetched using the ng4 directive in previous we fetched this string array using the ng4 directive now let's look at how to fetch an object array using the ng4 directive this also the same as the previous string array first let's create an object array inside the component TS file the array variable name is obj array this A is capital the native type is array and the array type is object now assign this to a list of array objects square brackets for Define array inside this let's create an object we create object using the curly brackets so open and close curly bracket inside this let's pass the object key and value so as a first object key value pair add this the key is ID and value is 1. after this come up next object key value pair is post title and value is post 1. put this inside quotes because this value is a string like this create formal object copy and paste this and add comma after this the ID is 2 and the post title is post 2. ID3 post 3 id4 post 4. at last ID 5 and post 5. now let's fetch this inside the browser using the ng4 directive back to the HTML file and create a UL tag with one Li tag inside this Li tag asterisk ng4 assign inside codes let post of obj array so this is the new variable and this is the object array variable that we created inside the component typescript file so inside this Li tag let's print this using the string interpolation open and close to query packets and the variable name is post save this and back to the browser as you can see here we got this object object printed here what's going on here in order to show an object inside of the HTML view we have to convert this to a Json value we can directly show an object inside the browser view that's why we are getting this object object printed here to solve this we have to convert this to a Json format data so we can use the angularjson pipe just add the pipe operator after this inside this string interpolation and the pipe name is Json that's it say this and back to the browser perfect we got this object value is printed here with Json data format guys don't worry about this angular pipe thing we have all separate section for these angular pipes so in that section you will learn about these pipes in detail all right back to the work now we got this object array values printed here but we don't show data inside the browser like this right let's fetch only this post title value inside this l i tag for that back to the vs code remove this pipe you don't need that anymore we are going to print only the post title with this post variable we got all the object key value pairs so after this Dot post title which is the object key for post title send this end back to the browser perfect right now we got this post title printed with this unloaded list before the end of this video one more thing you guys maybe notice this already we are getting an error here saying that this post title is not defined and there is no this value inside the object actually this is not a compile error because if this isn't compiled error we will get that error inside the terminal and also this code will not work as you know we successfully rendered this post title inside the browser without any problem so what is wrong with this actually this is a kind of a bug in eslint plugin in order to solve this problem we have few Solutions but I recommend you guys to do this just change this array type object to any now save this and back to the HTML file look at this this time we are not getting this error so this is just a small bug in my opinion hope the eslin team may fix this soon alright so this is how we fetch data of an array object using the ng4 directive hope you guys got the idea alright let's add the new data object to this array when you click a button so create a button before this UL tag button hit enter the button text will be add new data now I'm going to bind a click event to this button inside this button tag brackets inside brackets click now assign this to a method something add new and parenthesis we are getting this compile error because this method is still not created so go to the component S5 and create this method add new this n is capital then parenthesis and the method scope inside this let's add a new object to this array this dot obj array dot push we add new values to an array using the push method this is just JavaScript so inside parenthesis push the new object current backwards inside this ID 6 and the first title is post 6. now save this and back to the browser click this button as you can see here we got this new post value rendered here without reloading the page and this happened in real time how this happened in angular we have this change detection mechanism when we click a button or if you do any Dom events Ajax request or any time of function angular will perform this change detection mechanism and apply all the changes to the Dom in real time so in our case when we click this button add new data button angular will perform this change detection and check whether there are any changes in the Dom so with this mouse click we added a new object to this array so in this case angular change detection will detect these changes and applied it to the Dom that's why we got this newly created post object rendered inside this list let's remove an object from the array and see what's happening here to delete a value we need a delete button so add a delete button inside this list button hit enter button value is delete now binder click event for this button inside brackets click and assign it to a method something on delete create this method inside the TS file method name is on delete parenthesis and the method scope so in order to remove an array object from an array first we need the index of the array then only we can remove an object from an array using that index number so in order to get the array index number we have to pass that array value to this method so back to the HTML file and surpass this post object to this on delete method as a parameter say we send back to the ts5 from here calculate that parameter from this method on delete create a parameter variable post now let's get the index number let index assign this dot the array name is obj array dot index of this OS capital and pass the parameter array value to this inside of the bracket so with this we are getting the index number of this past array value now let's remove that array object from this array this dot array name is obj array dot splice we can use this splice method to remove an array value from an object all right next inside brackets pass the index number that we want to remove and then pass the number of object that we want to delete in our case this is 1. save this and back to the browser click on this delete button so this will remove this post for click it perfect right this post 4 is removed if you noticed this also happened in real time so this is the beauty of angular every time we performed some changes on our app the angular change detector will detect the changes and render it to the view in real time in previous we learned how to remove an array object value from an object array when we click this button and also I said that in order to remove an object from an array we need the index number of net removing object value then only we can remove that object value from the array so for that we use the traditional JavaScript approach to get the array index we passed the target array object to this on delete method as a parameter and inside that method we captured the target object and we got that array object values index using this index of method after that we removed that object from the main array using the splice method to get the target array index we have a very simple and clean away in angular with this ng4 attribute we can fetch the index number as well let's see this in action after this ng4 add a semicolon and add this index as I so what is happening here I just assign this array index to this I variable this variable name can be any name now we can use that index number on this week let's render this index number inside the view before this just add the I variable which is assigned to the index save this and back to the browser look at this we got this array index in front of this post title starting from 0 because you guys already know array starts from 0. all right now all we have to do is just pass this I variable instead of this full post object to this on delete method so remove this post parameter and pass the index variable I save this and go to the component is file inside on delete parenthesis this time we are not getting the post object so remove this and create a new parameter variable to capture the index number so I will Define this as index now we don't need this index of method remove it that's it this time this index is this parameter which is coming from the HTML B save this all and back to the browser click one of this delete button as you can see here this remote this array object so this is how we use the index of an array using the ng4 directive think if there is no data inside of this array this is empty so in that case if we render this inside the browser we are not getting anything because we don't have anything inside the array now what I want to do is instead of this empty view I want to show a message here something there is no data to fetch if there is any data inside the array I want to fetch them here if there is no data I want to show the message there is no data to fetch clear right to do this we're gonna use another directive in angular which is NG if this is something like if else in JavaScript we use this ngf directive to show something conditionally inside the weave so let's see this in action once again what I want to do is I want to fetch this list if there is data inside the array if there is no data I want to fetch a message instead of this empty list so before this let's create a div and put this unordered list inside this div now I want to fetch this unordered list when there is data so inside this div tag let's add the NG if directive this also structural directive so Asterix NJ if this I is capital after this equal sign now pass the condition inside quotes the array name which is obj array then dot length after this greater than sign and 0. so some of you may wonder what is happening with this condition in this condition I am checking that is this arrays length is greater than zero if there is data inside of this array the length of this array will be greater than zero so in that case this statement becomes true if this is true this du will show inside the browser very simple right next I want to show a message when there is no data so down here create another div inside this div create a P tag and add this message there is no data to fetch now let's set the engines directive to this second div inside this div tag Asterix icon NG if equal sign inside this the condition this time the condition is obj array dot length equals zero with this condition we are checking the length of this array is equals to 0 or not if there is no data in the array the length of this array becomes 0 and this statement will be true so in this case this do will show inside the browser very simple logic hope you guys got the idea say this and back to the browser as you can see here we got this message there is no data to fetch because there is no data inside the array now click this button add new data this added the new data to the array now look at this this time we got this unordered list because now inside our array we have this new data if I click this again we got the second value printed here now remove one of this value using the delete button we have only one data also if I remove this last array value can you guys guess what will happen here yes you are correct if I remove this last data from the array the array becomes empty this ngf statement will return false because there is no data and this second statement becomes true so this ngf will remove this unloaded list from the Dom and this will show this message V tag inside the Dom so let's see this in action click this delete record this message beautiful right so this is how we use NG if directive in angular alright in the previous video we learned how to use ngf directive we used engine directive to show this array data conditionally if you look at this you can notice that we used two NG if directives to do this in JavaScript we have this if else we add the condition and if if this condition is false then else part will execute we can implement the same thing if and else approach using this angular ngf directive rather than adding these two and GIF directors let's see this in action we can add else after this condition so add a semicolon else now we have to tell list to show this no data message how do we going to do that in angular view we can identify an HTML element using template variables you can remember we learned about this in the previous section so given identifier to this div now we don't need this engines so remove it and give an identifier to this hashtag template variable name something no data this name can be any name now pass this template variable to this else after this else template variable name is no data pass this error without the hash sign ALS and Battery browser we got this no data message because we don't have any data inside the array so let's add a new data using the button as you can see here we got this new data here but we have a problem here still we can see this no data message what's going on here when you're using a structural directive if you use the div tag to show data conditionally using template variable something like this this condition won't work that's why we are seeing this message even when there is data inside the array array to solve this problem we have a special type of tag called NG template with this NG template we can load data to the browser conditionally using the structural directives so change this div tag to NG Dash template now save this and back to the browser now we're seeing this no data message adding the data as you can see here this time we are not getting the no data message so delete this data perfect we got the no data message which means now this else statement is working perfectly and one more thing it cannot use this NG template tag as a normal HTML tag if I create another NG template tags and add something NG template message save this and back to the browser we cannot see this NG template tag here call we cannot use this as a simple HTML tag we can only use this NG template with the structural directive something like this if not this will not display inside the HTML View all right we have another approach for this we can use NK template for both days through the and 4C conditions let's do that create another NG template tag inside this cut this unordered list and paste it here inside this NG template give a name for this NG template to identify this hashtag post list now I want to show this NG template when this condition is true so after this condition then keyword and pass the template variable name post list that's it save this and back to the browser this is working as we planned so this is just an approach if you don't like it you can use the previous approach no problem so this is how we use NG template in angular in this video let's look at another angular directive NG switch cases this also the same as JavaScript or any other programming languages switch cases let's see an example for this let's create a simple step form first let's create three buttons for three steps create a div inside this div create three button tags button values will be step 1 Step 2 and step 3. after this create another three div tags inside the first div tap on form second view Step 2 form third day step 3 form now I want to show one of this div when I click the relevant button for example if I click this first button I want to show this Step 1 day if I press this Step 2 button I want to show this Step 2 button let's do that inside the typescript file create a variable something step form the variable type will be string now what I want to do is I want to change this variables value when clicking the button for example if I click this Step 1 button I want to change this variable value to step 1. so let's do that we can do that simply using the click event so create a quick event inside this step button brackets click equal sign the method name is on click pass Step 1 as parameter because I am dealing with the step 1 button now inside the typescript file create the on click method inside this class scope on click this C is capital parenthesis and the method scope we are getting a parameter with this so capture that parameter create a parameter variable inside this parenthesis status inside this method assign this status to this step form variable this dot step form assign this parameter variable is status all right now we can show this step one div using the NG if directive inside this first div let's add the ngf directive asterisks NG if equal sign inside quotes which statement is if this step form equals step 1. if you notice I pass this as a string inside single quotes I used double quotes for this volt statement and for this I used the single quotes with this condition I am checking that is this step form variable value is equals to form 1 or not if this is Form 1 the statement will become true and this D will appear on the browser so let's do this to all of these divs so first add the click event for the button change the parameter values to step 2 and step 3. after this copy and paste this NG if two other divs and change the condition this one is to step 2 because I want to show this view when click on this step to button likewise this last big statement is step 3. all right say this over and go to the browser we can see these buttons click the step on button because this message Step 1 form click this button Step 2 figure this step to form message again click this last step 3 button we got this step 3 message so this is working as we planned but if you look at this code we are using the ngf directive several times so rather using this ngf directive we can use a switch case so let's see how to do that put these divs inside of another div now add the NG switch to this div for this we're gonna use the property binding approach so inside square brackets NG switch keep this in your mind this is not an actual property in the Dom this is just a property for this switch case directive now bind this to the variable step form which is declared in the component typescript file now remove this all ntf directives because this time we are going to use the NG switch case directing so let's add the NG switch case directive to these divs this is a structural ding so Asterix then NG switch case this is and C uppercase after this equal sign inside double Quotes no plastic condition I want to show this step one form name if this variable value is equals to step 1. so pass this as a string insert these double quotes single quote now inside the single quotes step one like this add this NG switch case directive to this deals as well copy and paste it this one is for Step 2 this one is for step 3. save this and back to the browser this is now empty so click this step one we got this message from Step One click this step to record this message step 3 we got this step 3 form message so this is working as previous without any problem so in this switch case directive we have another option to show when this variable value is something different from these values let's assign a different value to this variable something else inside the HTML file create another div after this inside this Asterix NG switch default so with this we are telling the switch case to show this Dim when there is this variable value is something different than these so inside this div add this text something else save this and back to the browser look at this this time we got this something else message here who is that at the first time this component loads inside the browser the value of this variable is different than these switch cases so in that case this will show this div something else hope you guys got the idea so this is how we deal with NG switch case directive in an angular app I have this H1 tag and this has these inline styles for text color and this text transform Style this will look like something this in the browser think if you want to show these styles with the condition how we're going to do that in previous we used this style binding approach for this something like this inside this h1d square brackets so we are doing a style binding so style Dot and the CSS property color assign this to the condition variable that I already defined in the typescript file is active variable so pass that variable to this is active if this is true this will set this H1 times color to Red otherwise set this to Black in here we have another style to make this uppercase let's add that also using the style binding after this another style binding I'm going to break this to next line so we can see this clearly inside quotes style dot text transform so this is the Dom Style object so this T is capital if this is active variable is true set this to uppercase if not set this to lowercase that's it and now we don't need this inline style so remove it save this and back to the browser we got this uppercase red color H1 text if I change this to false now this H1 is in lower case and black color if you look at this code we are repeating the same style binding syntax several times this is not looking nice right in angular we have a better and cleaner solution for these kinds of multiple style binding approaches which is NG style directive we can do the same multiple style binding using this NG style binding let's see the selection this is an attribute directive so inside this curve brackets NG style this s must be capital equal sign double quotes inside these codes we're gonna pass the all style bindings as an object so open and close square brackets now add the style binding using the key value pair as a key we pass this style property and as the value we will pass the conditional CSS value past diseases property as the key first I want to set this h1. text color so CSS property is color colon now the condition is active if this is true we represent that using the question mark set this to red color inside single quotes CSS value is red that's it like this let's add the second style after this comma key is text transform this T must be capital colon condition is is active if this is true set text to uppercase otherwise set this value to lower case that's it look at this code now this is more clean and readable than the previous code now save this and back to the browser as you can see here now this H1 text is in lowercase and black color because now this condition is false set this to true save this and back to the browser perfect now we got this red uppercase H1 text beautiful isn't it so this is how we use NG style directive in angular always doing this multiple inline style binding is not a good practice usually in CSS if we have something multiple CSS like this we put this all style inside of a CSS class and we'll add that class to this H1 tag right so I'm removing this NG style directive in case if you want to show this class conditionally we can use the class binding something like this right think if you have another separate CSS class for font weight and we want to add that class also using the class binding conditionally how do we going to do that very simple we have to Nest another class binding here like this save this and back to the browser when this variable is active is true we got this if I set this variable to false save this and back to the browser so this is what we got all right as I said earlier we have a better approach rather than nesting these class bindings like the previous NG style binding we got another directive for bind CSS classes called NG class directly very similar to the previous engine style directive so let's see this in action inside the section tag open and close square brackets inside this NJ class this C must be capital after this equal now we have to pass the CSS classes that we want to bind to this H1 tag as an object so inside double quotes open and close a square bracket now inside this object pass the target CSS class as a key so inside single quotes the first CSS class is this main CSS class colon now pass the condition as a value for this is active that's it do the same for the second text with CSS class as well the key is this CSS class inside single quotes text Dash weight and value is the condition is active don't forget to add the comma after this first condition so with this we are saying if this condition is true bind this CSS class to this H1 tag very simple right look at this code very clean right share this Encore the browser we got this black color lowercase H1 text because this condition is now false so make this to True save and back to the browser perfect we got this red uppercase boldly look H1 text so this is how we deal with NG class directive in angular all right now you guys have an idea about angular directive in the first lecture of this section if you can remember I said that we have four main directive types in angular the first one is a component directive which is the angular component the second one is structural directive third one is attribute directive and the last one is custom directive so in this section let's look at what is structural and attribute directing the first what are the structural directive structural directives are responsible for the HTML layout this structural directive shape or reshape the Dom's structure typically by adding removing or manipulating the Dom elements structural directives are easy to recognize with the leading asterisks symbol so we learned several directives in this section so we have few directives with the leading asterisks or the star symbol which have ng4 NG if and the NG switch cases so these are the structural directive let's look at some examples I have created just a few examples for this the first one the ngf directive so what is happening here with this NG if directive is showing this div when this statement is true so this will add this due to the term when this is true if this is not true this will remove this div and this will add this NG template inside the Dom so with this ngf directive we are manipulating the Dom's structure by adding and removing elements to the Dom so this is why we called this ngf directive as a structural directive if you look at the second directive ng4 this also add this list element to the Dom by fetching an array if there is a data inside the array this will add list elements to the Dom if there is no data this will remove the list element from the Dom the switch case is also the same if this condition is true this will add this to the Dom if this statement is false this will remove this from the Dom so this is what we called structural directive so here is the lesson with the structural directive we can manipulate the Dom by adding and removing Dom elements dynamically so for a structural directive we use this leading asterisk symbol so we can easily identify a structural directive with this leading asterisk so let's look at the attribute directive so what is attribute directive an absolute directive changes the appearance or behavior of a Dom element we can name NG style and NJ class directives as attribute directives you guys already knew with these attributes we applied styles to an element conditionally if the statement is true this will add this style to the Dom if the statement is false this will remove the styles from the Dom so simply this is what we can do with attribute directive we use these attribute directives as like property binding inside of a square brackets we are not adding any leading asterisks because this is not a structural directive so here is the lesson with the structural directive we can manipulate the Dom by adding and removing elements to the Dom's structure but with the attribute directive we can only change the appearance of a Dom element we cannot manipulate the Dom using this attribute directives so hope you guys got the idea all right let's do a small task to recap what we learned in this section so this is the task create a simple form like this this form has three Fields name email and address for the address use a text area down here we have a button called save data so after this form we got a table with these th heads the First Column is for the number second column is for name email address and the last column is for action so fill this form and click this button look at the table this will load this form's data again type something and hit the save button this time also data loaded inside the table inside the table every row got this delete button inside the action column if I click this delete button this will delete this data from the array again click this delete button this is removed from the table so create this simple app using the help of angular directive methods and data binding very simple as always try to do this on your own once you completed the task continue with the next lecture see you soon all right hope you guys did the task well in case if you missed anything continue the task with me first let's start with the form so create a div with class form Dash area so inside this form H3 tag with text user details the first input field is for the name second field is for email at last text area for address after this a simple button for save data and don't forget to add BR text to get a nice vertical form layout save this and back to the browser let's make this form Center to the page add a CSS style to this class form Dash area inside the CSS file dot form Dash area and the CSS scope inside this add these styles margin Dash top 50 pixels text Dash align Center now save this and back to the browser perfect I got this nice looking form next we have to do the two-way data binding to get these inputs values so create three variables inside the component TS file first one is name and the data type is string the second variable is email and the data type is string the last one is for the address field so this also a string all right now let's bind the data to these input fails using two-way data binding inside this first input open and close square brackets inside this open and close another simple bracket so inside this NG model now bind this to this name variable simple right after this copy and paste this NG model to the second input and change the variable name to email again paste the NG model for this text area as well and change the variable to address all right now we have successfully bound all the input fields to these variables next let's make this save data logic so here's the logic if someone clicks this button I want to save this text fails value to an object array so let's do that first let's add the click event to this button inside the button tag open and close the bracket inside the brackets the event is Click equal sign inside quotes method name is on click after this parenthesis still we don't have this on click method that's why we are getting this error let's create this method inside the typescript file method name is on click parenthesis and the method scope let's declare an empty array variable user array the data type is array and array type is any now assign this to an empty array then only we can push data to this array now let's push the data to this array using this on click method this dot array name is user array dot push after this parenthesis now let's pass the object here so open and close the curly brackets inside this first key value pair is for this input name so the key is name and value is this variable name so this dot name after this comma the next one is for the email field the key is email and the value is this dot email for this again comma the last one is for the address so the key is address and value is this variable address this dot address that's it for now let's lock this array to see whether this is working or not so save this all and back to the browser fill this form just fill it with random text click the save button to get the console awesome record this array log with this object so click this button again again perfect right we got all the data post inside the array next we have to render this array inside of an HTML table let's create the HTML table down here inside the HTML file after this create a div with class table Dash area inside this div let's create the table table hit enter inside this T head hit enter inside this T head five columns so create 5 th thanks the first one is for the number so add the ash symbol the second column is for the name next email next address At Last Action column for the delete button after this T head TR tag inside this we need 5 TD for these five column all right now let's render the arrays data inside this TR tag for this we're gonna use the ng4 directive so this is a structural directive so asterisk symbol ng4 assign next inside the codes let user of array name is user array so this a must be Capital after this semicolon we need the index as well so let index assign index so this this index variable is created now this name can be any name and this index is coming from the ng4 directive okay now let's show this ng4 data using this ring interpolation for the first tag I want to show the numbers so for that let's use this index inside string interpolation index for the second TD show the name next email after the email address and for this last TD let's add a delete button inside this tier create the button tag button text will be delete now let's add the width attribute to this table to get a nice looking table so set the table with to around 500. save this all and back to the browser fill this form and click this save data button look at this we got this data inside the table again click this button we got this again so this is happening real time without refreshing the browser this is the beauty of angular change detection mechanism so all right if you look at this number this is started from 0 why is that cos array index is starting from 0 so I want to make this start from number one so back to the es code increase this index value by 1. save this and back to the browser fill this form hit the save button perfect now we are getting these numbers starting from number one all right let's do the delete button Logic the logic is when someone clicks one of these delete button I want to delete that relevant data from our user array so let's do that first let's add the click event binding to this button inside brackets click bind this to Method name called on delete after this don't forget to put the parenthesis because we are calling a method not a variable now go to the component yes file and create this on delete method inside this let's remove the data from the array for that we use array slice method so this dot user array dot slice after this parenthesis this required two parameters first one is the array index number let's pass the index number to this method from this click event binding we are getting the index from this variable so pass it here index all right next let's capture that parameter from the method create a parameter variable index now we have the index number with this parameter variable so pass it to this slice method after this as a second parameter pass number one because we want to delete only one data from the array that's it all right save this and back to the browser add new data now click this delete button this will remove this data perfect everything working as we planned at last let's show a no data message when there is no data instead of showing this empty table back to the vs code let's create a div and put this table inside this div now let's add the ngif directing S6 NG if the statement is we learned about this earlier user array dot length greater than zero if user array length is greater than 0 show this table if not semicolon else to this NG template no data we are getting this error codes still we don't have created this NG template so after this NG if div create the NG template this template identification template variable is this no data hashtag no data inside this create H4 tag with this message no data to show save this and back to the browser as you can see here this time we got this message instead of the empty table fill the form and click the save button now the no data message is disappeared and now we can see this user table beautifully isn't it so this is the end of this task hope you guys understand this task well all right this is it for this section in this section we learned about angular inbuilt directives in detail we learned about structural directives such as ng4 ngif NG switch cases we learned about attribute directives NG class and NG style at last we learned about what is the difference between structural and attribute directives so guys don't stop this from here if you guys have any problem with any part of this section try to learn it again if you still don't get it feel free to ask your question in the Q a area all right let's continue to the next section in this section we're going to be looking at angular pipes and how to use them with a angular app at the end of this section you will know what is an angular pipe and how to use lip what are the inbuilt types of angular pipes how to use parameters to an angular pipe at last you will learn how to create a custom pipe for 5 different requirements from scratch let's get started so what is angular pipe pipes are used to transforming data into a particular format when we only need that data transformed in a template or the HTML Vape for example think we have something total value of an invoice 100 000 saved inside of a database when we're showing this to the user we can show this something like this with this comma separate using the angular number pipe and also we can display the currency symbol using the currency pipe we will learn about this in detail with upcoming lectures so in angular we have few inbuilt pipes which are uppercase and lowercase pipe decimal pipe or the number pipe currency pipe dead pipe Json pipe present pipe and slice pipe so total we got 9 inbuilt pipes in angular so from the next lectures we're gonna learn these pipes one by one in detail I have a variable inside the app component TS file title which data type is string and value will be something angular course now I will render this variable inside the give using this string interpolation so H1 tag inside these two curly brackets inside these brackets the variable name is title save the send back to the browser perfect we got this title angular course now I want to make this all letters Capital what are we going to do that we can simply do that using the CSS just go to the app component CSS file CSS selector is H1 CSS property is text Dash transform value is uppercase save the send back to the browser as you can see here now this turned into uppercase letters so we did this using the CSS but now we have a better way for this in angular which is angular pipes so we have different types of pipes for different types of data the first one is the uppercase pipe so this pipe will convert the letters to uppercase let's see how to do that now we don't need this CSS so remove it back to the browser now all set as previous let's add the uppercase pipe for this first add this pipe operator after this inside this string interpolation pipe operator is this vertical line located before the keyboard enter key after this add the pipe name uppercase all simple letters save this and back to the browser perfect now we got this all letters uppercase and also we can make these letters lowercase using the lowercase pipe remove this uppercase pipe and add lower case save this end back to the browser as you can see here this time this is in lowercase letters so this is the usage of angular uppercase and lowercase pipes all right next we have the number or the decimal pipes so let's see this in action let's declare a number value inside the component is file something count and the type will be number assign this to a number value 285645 save this now render this count value inside the wave using string interpolation another one tag inside that two curly brackets inside that variable name is count save this and back to the browser perfect we got this number now we can make this number value more readable using the number pipe so back to the vs code and add the pipe symbol then the pipe name is number save this and back to the browser now this number is more readable with this comma symbol which comes from the pipe number so we can use this number pipe to decimal values as well let's declare a decimal value something DEC value type will be number and assign a decimal value something 3.85674 save this and back to the HTML file and load the decimal value here using the string interpolation save this and back to the browser perfect we got this decimal value all right in here we have five digits of decimal values think if you want to reduce this to two decimal values we have a solution for this we can do that using the number pipe so let's see how to do that back to the vs code inside this app component HTML file simply add the number pipe pipe symbol and the number now we can pass an argument for this number pipe to control this integer value and for this decimal values let's see that colon now inside quotes first we have to pass the integer value control with this we can specify exactly how many integer number digits that we want in our case we have one integer digit value here so put number one after this we have the decimal digits control with this we are separating the integer value and the decimal value so now we have to pass the decimal digit control values as I mentioned earlier we want to reduce this 5 decimal digits to two digits so now we have to mention minimum and maximum digits count after the decimal point in our case we needed only two digits so pass the minimum digit count is 2 then Dash after this maximum decimal digits it also 2. now save this and back to the browser as you can see here this decimal digits count reduce to 2 digits perfect right so with the number pipe we can control digit numbers of this integer value as well as the decimal digits if I add 2 for this integer digit count look at this this added 0 before this integer value to make this digits count 2. and also if I make this decimal digits count to 1 look at this this is rounded this 3.8 to 3.9 if I make this decimal digits count to 0 look at this this number is now rounded to the nearest integer value number four beautiful right so this is how we use the number or the decimal pipe in angular next let's look at the currency pipe all right just create a price variable and assign a value with something 99.99 save this and go to the HTML View and add this another John tag inside this place this string interpolation to show this price value save this and back to the browser we got this price now we can add the currency symbol for this using the currency pipe back to the vs code add the currency pipe after this pipe symbol and the pipe name is currency save this and back to the browser look at this we got this US dollar symbol before this price Perfect Right by default in angular we got this US dollar symbol but if think if you want something else for example in Canadian dollars how are we going to do that very simple like this number pipe we can pass an argument for this currency pipe to define the currency type after this colon then inside quotes Define the currency type that we want in our case we want to show Canadian dollars in here we have to pass the currency code so the Canadian dollar currency code is CAD all capital save this and back to the browser as you can see here now we got this Canadian dollar symbol let's look at another example if we want to define a Japanese yen currency for that we have to pass here the Japanese currency code JPY save this and back to the browser awesome right we got this Japanese CN currency symbol in case if you're wondering how to get the currency code just Google it currency codes in the first result you guys will get all the currency codes in the world all right back to the work reset this to USD save this and back to the browser we got this dollar sign okay in any case if you want to show the currency code instead of this currency symbol how are we going to do that very simple pass another argument here this is going to be a Boolean value through o false if we pass true this will show the currency symbol if we pass false this will show the currency code so in our case we are planning to show the currency code so pass false here save this and back to the browser perfect now we got this USD currency code instead of the previous currency symbol and also like number pipe we can control the digits counts just simply pass another argument inside course as a first value we can pass the integer digits count we have two digits so high pass two digits for decimals I will add the minimum and maximum digits count as 1. save this and back to the browser perfect now this price is rounded to the nearest Value 100 and this decimal digit count is set to 1 digit so this is how we deal with currency pipe in angular all right next we have the date pipe let's see this in action create a date variable and assign a date value the variable name is today data type is date this D is capital assign this to new date object name date and the parenthesis this will give us the current time and date and this is not a typescript or angular theme this is just a simple plain JavaScript date object okay back to the HTML file and load this inside of an H1 tag using the string interpolation method save this and back to the browser as you can see here we got this date and time value this date value is not clearly human readable so we can make this more readable using the date pipe so back in the vs code 5 symbol and the pipe name is date after this we have to pause an argument inside quotes short save this and back to the browser how some right now we got this readable date and time think if you want only the date not the time we can do that simply by passing the short date argument for this save this and again back to the browser beautiful right this time we got this date without the time so if you may wonder where to get these Arguments for this date pipe so just simply search for date pipe angular with this first result which is the angular official website we can find all the argument for this date file if we need only the time without the date we can use one of these time argument so this is how we use date pipe in angular hope you guys got the idea right all right in this lecture let's look at another angular pipe the Json pipe we use this adjacent pipe to show an object inside of a v let's see this in action first let's create a simple object inside the component TS file object variable is something post object and assign this to a simple object inside curly brackets first key value pair is ID and the value is 1. next the key is post title and value is post 1. save this now back to the HTML file and let's show the object inside the browser using the string interpolation so create a P tag inside this string interpolation object variable name is post object save this and back to the browser look at this we got this object object printed here instead of the object K value pairs so inside of the browser view we cannot show an object directly in order to show this inside the browser we have to convert this object to a string Json format data for that we can use Json pipe so let's do that pipe operator and the pipe name is Json save this and back to the browser as you can see here this time we got this object values printed here instead of the previous object object so this is the usage of this Json pipe next we have the percentage pipe with this we can show a percentage string let's see this in action instead of an H3 tag add a string interpolation type a decimal number something 0.567 and add the present pipe so pipe operator and the pipe name is present save this and back to the browser as you can see here we got this 57 percentage so this present pipe will multiply this given value in 100 and give us the percentage value if I change this to the integer value 5 as you can see here we got 500 percentage because this present pipe is Multiplied this given value in 100 that's why we are getting this value this also has format string like decimal pipes we can control the digit counts decimal digits and the integer digits like this so this is how we use the present y next we have the slice pipe so with this we can slice an array we'll see this in action create a simple array inside the component TS file first array the array type is a string now as in a simple array to this inside Square packet post one for this inside course because this array type is a string post to post 3 post 4 post 5 and so on set this end back to the component HTML file now let's show this array inside the browser using the string interpolation instead of an H3 tag string interpolation array variable name is post array now save this and back to the browser as you can see here we got this array values printed here now think if you want to show only these first three values of this array inside the browser how are we going to do that for this we can use the angular slice pipe back to the EVS code after this pipe operator and the pipe name is slice now we have to pass the start index and the end index that we want to slice so now I want to show these first three values so the start index is 0 and this end index is 3. save this and back to the browser beautiful this time we only got this first three values from the array if I want to show these middle two values first three and post four for that change these index values this time the start index is 2 and this end index is 4. save this and back to the browser perfect so this is the usage of the angular slice pipe hope you guys got the idea so until now we learned angular built-in pipes somehow angular built-in pipes are limited to some particular situations think if we have a requirement to format the data inside the view but for that particular situation we don't have any built-in pipes so in this situation we can create our own custom files so in this video let's look at how to create a custom pipe that fits our requirement so to create a custom pipe we can generate a custom pipe file using the angular CLI but first let's look at how to create a custom pipe from scratch then we'll see how to generate a custom pipe using the angular CLI all right let's create custom pipe for a situation something to prefix a string value let's create a simple object inside the component is file object variable is user details now assign this to a simple object name user1 and the city is New York and country code is us now let's show this inside the browser this end back to the HTML file and show the city using the string interpolation object name is user details dot City share this and back to the browser we got this new block printed here now what I want to do is prefix this city with city name something like this this time I did this by hand coding but I want to do this using an angular custom pipe so let's do that first we have to create a file I'm gonna create this file inside of a folder called pipes inside this app folder we do all these stuff inside this app folder right so let's create the folder inside the app folder the folder name is files now inside this folder create a file name something append dot pipe dot TS look at the naming convention this also same as components naming convention first the pipe name then pipe keyword and the file extension follow this naming convention for best practice now inside this append pipe file let's create the our custom pipe first thing first we need to import two modules pipe and the pipe transform which is coming from the angular core first let's import the pipe module import pipe and the path is an angular slash call next we have to define the name for this pipe for that we will use this imported pipe as a decorator class so at pipe brackets inside this we have to pass the pipe name as an object so inside curly brackets the key is name and the value is if you can remember we do the same when we're learning the components this is also same like angular components so this name is the identifier to this angular custom file this can be any name but we are doing the custom appending pipe that's why I used the name as append now we have to create the typescript class so first at the export keyword because we will use this from other files after this class and the class name is append pipe this A and P capital after this class scope now in order to make this class as a pipe we need to implement this class to an interface called pipe transform so first import the pipe transform interface inside this import statement pipe transform results are coming from this same core module next implement this pipe transform to this class with this implementation we are telling the angular compiler that this append pipe class also getting exactly the same shape of pipe transform interface so this pipe transform has a method called transform so we have to create the same method in this pipe class as well so that's why we are getting this error to get rid of this compile error create the transform method here method name is transform this name must be exactly as this don't mistake the spelling mistake or Capital simple letters mistake otherwise you guys will get compile errors next parenthesis and the method scope this transform required two parameters first one is the value parameter this value can be any next we have the args parameter which also can be any this aux parameter is optional so we can define an optional parameter with this question mark That's it this is the process of creating a custom pipe now all we have to do is the logic inside this transform method so I just want to append this city name before this value just return this value inside quotes City Name colon and add a space after this this value parameter variable value that's it now we have successfully created our custom pipe let's add this custom pipe to this string interpolation after this pipe operator this time the pipe name is this append wait we are getting a compile error saying that this append pipe is cannot be identified as a valid pipe what's going on here we just created this pipe but in order to work with this custom pipe we have to register this pipe in our angular app otherwise angular doesn't know about this pipe this also the same as components when we're creating a new component we have to register that component in angular modules otherwise that component will not work the same thing applies here to solve this compiler register this custom pipe go to the appmodule.ts file and register this under this declaration modules we add all the components and pipes under this model so the pipe class name is append pipe look at the vs code intellisense we got this autocomplete select that this will automatically import the path of this pipe to this app modules file this is the beauty of vs code intelligence we don't need to always encode the import statement you can simply use the autocomplete vs code intelligence to import the relevant module that's it we have successfully registered our custom file look at this now we are not getting any compilation errors save this online back to the browser perfect now we got this city name prefix before the city beautiful so this is this simple use case of angular custom pipe so now we know how to create a custom pipe from scratch in the next lecture we look at some custom pipes examples for different situations in previous we learned how to create a custom pipe from scratch in this video let's look at how to generate a custom angular pipe using the angular CLI this is very simple comparing to the previous method let's do that inside the integrated terminal type this command NG generate this time we are generating a pipe so pipe and the pipe name something append CLI I want to generate this also inside the pipes folder so add the pipes folder before the custom pipe name that's it hit the enter key all right as you can see here this generated the custom pipe file inside the pipes folder as well as this created this another spec file for unit testing don't worry about that we are not going to deal with unit testing after this as you can see here this automatically registered this custom pipe inside the angular module and this is the beauty of this angular CLI if you look at inside this append CLI custom pipe file we got all the markups so all we have to do is add the logic inside this transform method just copy this previous logic and paste it here change this append text city name CLI save this and back to the HTML file and change the pipe this time pipe name is this save this all and back to the browser perfect we got this city name CLI appended with this city beautiful so this is how we generate custom pipes using the angular seal line so now we know how to create a custom pipes in this lecture let's create a custom pipe that gets arguments instead of the component is file create a variable for dummy text something dummy text and assign it to a dummy text now I want to show this inside the browser so do this using the string interpolation save this all and back to the browser we got this dummy text paragraph now what I want to do is I want to reduce this paragraph length to 20 characters so let's see how to do this using a custom pipe first let's generate a custom pipe using the angular CLI inside the integrated terminal run this command NG G this G stands for Generate we are planning to generate a custom pipe so pipe after this pass the custom pipes part and the pipe name the path is pipes slash and the pipe name is summary hit enter perfect we got this summary pipe open it inside this let's do the summary logic inside this transform method change this type to string now let's undo the logic return value dot we can reduce the length of a string value using the substring method this is not an angular thing this is just a JavaScript string Methods so after this searching pass the minimum and the maximum value the minimum is 0 and the maximum length is 20. that's it save this and back to the HTML file and add this summary pipe to this dummy text paragraph pipe operator and the custom pipe name is summary save this and back to the browser perfect this time we got this summarized dummy text with 20 characters now what I want to do is I want to make these letters length 20 dynamic as you know we can pass arguments with pipes so I want to pass this latest count from this pipe dynamically let's see this in action this is very simple just modify these arcs remove this and add the argument variable as length this can be any name and this type will be number now pass this length value as the second maximum length value say this and go to the HTML file now we can pass an argument to this colon and the pass a length value around 10 save this and back to the browser perfectly got this short dummy text change this length to 50 as you can see here this is working as we planned if I remove this argument what will happen save this and back to the browser now we get the full width of dummy text because now we don't have any argument so so let's set a default summary length to this for this we can use a simple if and else if this length is not set set the length default value to 20. that's it save this end back to the browser this time we got this summarized dummy text when there is no argument this will automatically set this dummy text character in it Rook 20. in case if you want to pass more argument to this we can simply pass them to this transform method as parameters perfect so this is how to pass argument to a custom pipe so in this section we're gonna learn about angular service and how to use an angular service by the end of this section you will know about angular services and how to use them how to create an angular service from scratch how to generate an angular service using angular here line what is dependency injection and how to use dependency injection with angular services at last we will learn about data modeling and interfaces in detail let's get started all right in previous we learned about sharing data between components when there is a parent child relationship but think if there is a component that is not related to any other component and I want to share data to that component from another component in that case we cannot actually share the data using any of previous relationship methods for this we have a solution we can share data or methods between all other components using the angular service whether there is a relationship between components or not so simply we use angular services to share data and common methods among components for example think we have an array object for a list of posts inside this post component and we have another component which is not related to this and I want to render this post array inside that component in this situation we cannot use any input or output decorators and share data between these two components was these two components don't have any relationship so in this case we can create an angular service and we can declare this post array inside this angular service and import the service to this both components then we can access this array from this both component this is not only applicable for variables we can share methods as well think there are two buttons located inside these two components and both buttons click event is performing the same logic so in that case we can create a one on click method inside the angular service rather than creating two same methods with the same logic inside these two components so with this angular service we can access this on click method from these two components this will help us to reduce code repeating and this will save lots of time so this is the simple idea about angular service with the next lectures we will understand exactly how these angular Services work and when to use them let's create an angular service manual which is very easy just create a file inside the app folder wait let's put all the services inside of a folder called service so create a folder inside the app folder the folder name is Services now inside the services folder create a new file the file name is post Dot and we are creating a service so service Dot and the file extension is dot TS nothing fancy this is just a naming convention if you can remember we named components and custom pipes like this all right now open the Service file inside this let's create a typescript class export so we're going to access this class from outside of this service so we have to export this class so the export and class the class name is post service this first letter P and this is capital letters after this class scope this is it we have successfully created the angular service select components and others there is no fancy code for service angular Services just a simple typescript class now inside this we can create the method or data that we want to share with components so let's create a simple array of objects for post this time name this post list and this type is array and set the array type to any now let's assign some data to this the first object key value pair is ID value this one next the post title and the value is post One open and paste this object a few times change the ID and the post title so now we have created the data let's see how to access this data from another component in previous we have created this post service and this post list array now let's see how to access this post list inside this component and show this inside the post component V as you know we have created a typescript class inside this post service so in order to access this class from this component we have to create a new instance of this class so inside the component Constructor let's create the instance of this service class so first import the service class to this component we already exported the service class so inside the component import inside curly brackets service class is post service follow the capital simple let us carefully so after this from and give the path of this service class go one folder back double dot slash inside the services folder post dot service that's it now let's create the new instance inside this Constructor new and the service class is post service and parenthesis assign this new instance to a variable let Post Service now this we created this variable first letter is simple and this L is capital now same like this service class name now we can access this service class variable and methods from this component so Post Service which is this new instance variable and Dot now look at this intelligence we got this post list array variable which means now we can access that variable from this post component so select this post list variable now assign this to a global variable so we can access this from the component HTML file and render this array to beef so inside the classical the variable name is post and data type is array and array type is any now assign this to this post this dot post assign now inside the HTML grip create a UL tag with li tag inside this Li tag this post is an array so in order to show this array data inside the div we have to use mg4 directive so Asterix and ng4 equal sign inside quotes lit post of posts inside this Li tag let's show the post title using the string interpolation so open and close two curly braces inside this post which is this variable dot post title which is the object key for the Post title so in order to see this inside the browser we have to add this post component selector inside the app component inside the compound HTML file add this component selector app dash post and hit enter now save this all and back to the browser as you can see here we got this list of post here so this is the normal traditional way of using services but we have another cleaner way to implement this which is angular dependency injection when we're creating this new class instance this will become dependent on this component so angular giving us another design pattern framework called dependency injection was to manage dependencies this is a kind of framework inside of a framework so this is very simple all we have to do is inject the service class into this Constructor so let's do that first remove this new class instance we don't need that anymore inside the Constructor parenthesis private post service this is just a variable name this can be any name after this set this variable data type to this imported post service class that's it so this will inject all the post service class properties and methods to this Constructor which also like creating the new instance nothing fancy but cleaner and more maintainable font style this time this post service is this injected Post Service so save this and back to the browser we got this MTV open the browser console inside this we got this null injector error what is this error we injected this to this component but angular doesn't know that this data service class as an injectable class so all we have to do is we have to provide this service class as a provider in the previous work like component custom pipes register we have to register this data service class as a provider then only angular understand this data service class as an injectable service class so we can do that by passing the provider parameter to this component decorator so after this just pass the provider and this required an array so square brackets inside this pass the service class that we want to inject to this component class Constructor Post Service so please don't forget to follow the capital simple letters correctly otherwise this can lead to unnecessary bugs and errors so that's it save this and back to the browser perfect we got this list of post which means everything working as we expected thank you so in previous we did this dependency injection in order to work this dependence injection we have to tell angular 2 this service class is an injectable class so we did that using the providers parameter for this component decorator so with this we are creating a new instance of this data service class which can be accessed only from this component class think if there is another component and I want to access the same post list array from that component also how we can do that so first let's create a component inside the terminal NG G C host list and hit enter now I want to access the service post list array from this component so first we have to inject the service class to this component so private post service and this variable type is service class Post Service now select this from the autocomplete which will automatically import the path of this service class let's create a global variable post list and set this data type to an array and array type to any inside the Constructor method get the post list from the service first service dot post list assign this to this Global variable post list now save this now go to the Post list HTML file let's render this array to the beef UL with light tag inside the alert tag ng4 directory the statement is let post of post list inside the LI tag show the post title in order to show this inside the browser and this to the up component inside depth component HTML file add this app dash post Dash list save this and back to the browser this time also we got this null injector error why is that course we did only the injection we didn't provide the injector class so we have to provide the injector class to this component as well so insert the component decorator provider and the service class is post service save this end back to the browser we got this post list one is from the post component and another one is from the post list component so let's see what is happening with this Provider by passing this to this component decorate a class we are telling that to angular to create this class new instance only for this component so that's why we got an error when we accessing the service class from this second component post list so we add another provider to this component decorator as well so with these two providers we created two new class instance of the same post service class and this time we got only two components that injecting the service class to components constructed so for this situation this is okay but think in real words we may have hundreds of components that injecting the same post service class so in that case if we use the provider in each and every components and decorator this will create hundreds of same new class instance for the data service class in the memory so this will reduce our app speed and this may reduce the Entire Computer speed so this is not a good practice if you're using this post service only for one or two components this is okay but in a real world app we use angular Service as the main data repository for all our components no matter how many components are there to solve this we have two solutions one is we can provide this service class inside the app modules so let's see this in action remove this both providers inside the component decorator inside the app modules file we can find this provider parameter inside this NG module decorator so inside this provider array pass the service class name that we want to inject to the components Post Service select the Auto Import this will import this service class path to this app module file now save this all and back to the browser nothing has changed which means everything working as we expected without any problem so with this app model provider this will create only the one class service instance inside the memory and every time we inject the service class to a component Constructor this will only access this already created new instance no matter how many time you are injecting this service to many components this will only create the service new class instance in the memory once so this will make our angular lab more efficient all right the second method is in angular we have an injector decorator for service classes like this component decorator so with this injector decorator class we can make this service class injectable for all components so let's see this in action first import the injectable to the service class this I is capital and this decorator is coming from the angular hook after this like this component decorator at injector parenthesis inside this parenthesis pass an object parameter the key is provide in and value is root inside ports with this we are providing the service class as an injectable for root app which means we can inject this service class to any components in our app without creating a new instance for each and every new component so this is what happens behind the scenes when we're creating the provider hope you guys got the idea all right we have successfully completed the hand part now let's do the easy part which is creating an angular service using the angular CLI so let's see this in action inside the integrated terminal run this command NG this engine is for angular CLI G this is for the generate and S this is for the service we will put all the angular Services inside of one folder so folder name is services slash and the service name is this time let's create service for user service so service name is user note this I just only add this service name not the naming convention like this user dot service English Li will automatically end the dot service so that's it hit the enter to execute this code perfect angle CLI generated these two service files for us the service days file and this spec file which is for the unit testing inside the service folder we got this user service file open it look at this in this service this automatically added this injectable decorator so we don't have to do this again so this is the beauty of angular CLI so this is how we generate angular service by using the angular CLI so throughout this course we will use this angular CLI method to generate services so in here we got this post array and inside this we got this object list for post this object we have these two key value pairs ID and this post title so let's push a new data object to this array when clicking a button if you can remember we did this when we learning angular directives right so let's do that again so inside the post component file create a button before this UL tag button and hit enter button text will be add name now I want to call to a method when clicking this button something add new data don't forget to end the parenthesis after this so now create this method inside the post component is file add new data inside this create the new object so let new post assign and the object scope so first key value pair is ID and we already got six post inside the array so set the ID value to 7. next key value pair is post title and value is post 7. now I won't push this object to this post list array which is inside this service file in order to push this data to this array we have to pass this new post object to this service so very simple create a simple method inside this service file add post and parenthesis with this parenthesis capture the new post object as a parameter for this method so I declared the parameter name as data because we're going to receive data from this at last don't forget to enter this method scope all right now from the post component pass this new post to this and post service method we already injected this service to this component which means we can access all the methods and properties of the service from this component so Post Service Dot inside this vs code intelligence we can find this and post method so select it this required a parameter so pass this new post object as a parameter for this and post method so now we are passing the data to the service from this service method so now let's push this data to this post list array this dot postlist dot push inside brackets pass this data parameter variable which is coming from the post component that's it say this all and back to the browser click this add new button perfect as you can see here we got this new post inside this unloaded list which means this data is successfully pushed into the post list array which declared inside the service file so this is how we manipulate data using this service file usually we do all the data manipulating such as loading data save data delete data inside one place which is inside the angular service file so this will give us the more cleaner and bug free coding experience so we added this data to the service post list array when we click this button thank you somehow I missed spelled this post title key to something like this post title with one t character these kinds of human errors can happen more often right so save this and back to the browser click this add new button look at this this time we got an empty list so click this button again we got this empty list again why is that because we know already we made a spelling mistake here so with this add new we pushing invalid data to this post list wait let's lock this array so inside this post service after this push method console.log this dot post list save this and back to the browser click this add name Button as you can see here we got this empty list now open browser console look at this last object this object post title key is not spelled correctly so we rendered this list of post using the angular ng4 directive and we rendered this post using the string interpolation so with this string interpolation we are showing this post title Keys value which has two t letters middle of the key not this spell mistake key so in this case there is no valid key post title therefore this string interpolation left this empty that's why we are getting this empty list for this example we know the error because we intentionally did this spelling mistake think in a real world app we don't push data to the arrays we save data inside the database somehow if we missed anything at the beginning can't even imagine right to solve these kinds of problems we can create a blueprint of this array object by defining the shape type of the object and we can set that blueprint to this new post objects data type then if I mistake anything this will show me an error from that I can identify the error before anything goes wrong all right let's see this in action to create the blueprint of this object we will use a typescript interface we can generate an interface using the angular CLI so inside the terminal type this command NG G you guys already know in this G stands for Generate and I this stands for interface I will put all interface inside of a folder called models so the interface path will be models slash interface name post that's it hit enter to run this command perfectly generated the interface successfully so inside the app folder we can find this models folder inside that we can see this newly created interface host now open it so inside this we can find a simple markup for typescript interface interface keyword and the interface name so we're gonna access this interface from outside of this file that's why we use this export keyword this is just a simple typescript interface inside this we can create a post objects blueprint so first we have the ID after this we got the post title save this now go to the Post component yes file and make this new post data type as this post interface so let's do that first we have to import the post interface to this post component at the top of this page import inside query brackets the interface name is post after this from and the path inside quotes go back one folder double dot slash models and this select this interface post now where this post interface as this new post data type perfect if you see this carefully now we are getting this compilation error saying that this spelled wrong post title does not exist in the interface post so this is the beauty of this interface blueprint if you make any mistake on these object keys this will give us the error on the compile time so we can debug this mistake before the run time like this object key name we can Define the types of all the values as well let's see this in action inside the post interface after this ID colon and the ID type is number likewise this post title type is yes you are correct the type is string save this and go to the Post component TS file if any case if I passed a string value to this ID as you can see here we are getting a compile error saying that type string cannot assign to type number because in the blueprint we defined this ID Keys values data type as number so we must provide the correct data to this object value otherwise we will get a compile error wait not only that if we forget to add the second value post title at this point also we are getting an error property post title is missing and this post title is required perfect right with this simple interface Technique we can reduce almost every human errors when creating new object and at last one more thing if we Define the interface like this this Keys become required fields I think there is a key for for a date value and this is optional how are we going to Define that very simple first Define the key date and the date type is date if I go to the component file now we are getting the error saying that date field is missing because this is required now let's make this date key optional very simple after this key name before the colon symbol and the question mark which makes this key or the field optional so save this and go to the Post component beautiful now we are not getting any compile errors so this is the usage of typescript interface so this is very very useful when we're dealing with a database we can reduce lots of errors with this all right this is it for this angular service section in this section we learned all about angular services and how to use angular service with our angular app if you guys have any question please feel free to ask your question in the Q a area all right let's continue we'll meet you in the next section in this section we're gonna look at angular template driven form by the end of this section you will get to know what are the types of forms available in angular what is template driven form and how to use that how to validate forms using the template driven method and also we learn how to control the disable enable state of a button when the form state is valid or invalid let's get started [Music] in previous we created this simple form and we did the simple data manipulation just adding and removing data to an array for this we used the two-way data binding approach we not even used the HTML form tag actually this is not a good practice and we don't have any control to add validation for this input data for example if I click this add new button by keeping this form empty look at this this is pushing this empty invalid data to this array that's why we are getting this empty data inside this table for a simple example like this this is okay but when it comes to a real world application this is not a good practice and also this is not good for the security as well so we cannot do this form validation part by using only this two-way data binding approach so for this angular has two approaches the first one is template driven form approach and the second one is the reactive form approach so in this section we're gonna learn the first approach template driven forms with this template driven form we can get the full control of the form and we can validate the input data as we want in the next few lectures we will create a form and we gonna make that form as a template driven form and also we will learn how to do form validation using this template driven form architecture this is very easy so we'll meet you in the next lecture first let's create a simple HTML form inside the component HTML file create a ding with class name form Dash area inside this div when creating a form we must put all the input Fields inside of a form tag so form and hit enter in angular we don't need this action so remove it inside this form let's add an input field input and hit enter the input type will be text this input is for full name so add a placeholder for this full name after this another input field which is for email so this input type will be email and at the placeholder email after this and the text area for address text area and hit enter and don't forget to add the placeholder address after this the submit button type button and hit enter the button type will be submit all right save this and go to the browser this is not looking perfect so let's add some style to this form for this let's use the bootstrap CSS framework if you can remember we learned about this in one of the previous section so in this section let's make this ugly looking HTML form looks better by bootstrapping this phone first in order to use bootstrap in this angular app first we have to import bootstrap into this angular app for this we have few methods we'll learn about this for now let's simply import the bootstrap CDN link to this angular app as you know we can get the booster seat in link from the official bootstrap website so go to the getboostwrap.com and click this download and go to this CDN area in here we can find the CDN link for bootstrap CSS copy the serial link now go to the vs code and open the index.html file this is the main entry point of our angular app so inside this head tag paste this copied CDN link so keep only this bootstraps is a CDN by removing the script tag of the bootstrap Javascript file we are not going to use any bootstrap JavaScript functions with this so remove it now go to the app component HTML file and let's bootstrap this form first let's create a div with bootstrap class form Dash group inside this form Dash group div put this first input field after this add this bootstrap class to this input field form Dash control this is not anything new we learned about these booster classes when we learning bootstrap right so all right let's add a label for this input field label hit enter so we don't need these four attribute remove it this input labels text is the first name okay next do the same for this both input Fields as well inside of a div with form group create a label label text is email put this field inside this div and last and the form control booster class to this email input field next do the same thing to this text area as well foreign class to the submit button so class BTN BTN Dash primary that's it at last let's put this inside of a bootstrap container so create a div with these classes container and empty Dash 5. this containing class will make this foam center of the page and this utility class will add a 5 Ram margin top to this form hope you guys remember this save this and back to the browser perfect as you can see here we got this beautiful bootstrap form inside the browser in the previous lecture we designed this bootstrap form so in this lecture let's see how to make this simple HTML form into an angular template driven form so first thing first in order to work with template driven forms in angular we have to import the forms module in app modules file otherwise we cannot use this template driven for this template driven for architecture is built inside the angular forms module so import this in app modules TS file wait if you can remember we imported this forms module when we're doing two-way data binding that's why I got this form module import here if any of you missing this forms module imported now this is must in order to work with angular forms we need this forms module all right after this import go to the app component HTML file now inside this form tag in order to make this form template driven we have to add a special type of directive to this form tag which is NG form so let's do that first create a template variable you know already about this template variables so hashtag and a variable name which can be any name I just add f as this template variable once again keep this in your mind this template variable can be any name I just added the F letter OS F represent the 4 right all right after this bind this template variable to NG form directive inside quotes all right now we have successfully made this form as an angular template driven form by using this NG form directory some of you may wonder when we're learning directives we didn't learn about this ng4 actually this is a directive but this is a special type of directive coming with the forms module as soon as you import forms module this directive becomes active by default on all form tags let's see what is happening with this NG form directive first let's lock this NG form then we can discuss what is happening behind the scenes first bind submit event for this form inside brackets submit point the submit event to a method called on submit so inside quotes on submit and the parentheses in order to lock this NG form we have to pass this to this method so this ng4 means bound to this template variable f so pass this if as a parameter to this one submit method please note this we use this hashtag sign only when declaring the template variable when we use this template variable we don't need to add the hashtag sign so now as you can see here we are now getting a compilation error because this method is not exist so let's create this method inside the component this file on submit we are getting a parameter so at the parameter variable inside this parenthesis I declare this variable also F and make this variable type NG form select this autocomplete this will import this NG form to this app component ts5 with this remaking this variable type piece to NG form type because of this we can send only the NG form data to this on submit method if I send any string value as a parameter for this on submit as you can see here we are getting a compilation error if you can remember when learning service we learned how to make a blueprint for object using the interface the same thing applied here as well all right now let's lock this NG form F inside the browser console save this end back to the browser now click this submit button look inside the browser console we got this NG form object printed here expand this what's going on here you got this list of data with this NG form what are these and what is the use of this let's learn this about in this next lecture foreign forms data we have two classes form group and form control we use form group class with form tag and we apply form control class to the input field for example take this user details form this total form is one form group and each of these input Fields use the form control class inside of a form group we can have multiple instance of form control classes and inside of an angular app we can have multiple form groups for example the new post form is also another instance of the form group because this is a whole new separate form this form group also has a separate instance of form control class for each of these input fields hope you guys got the idea and one more thing don't get confused with bootstrap CSS classes in bootstrap also we got these CSS classes home group and home control please note this I am not talking about the bootstrap CSS class in this section I am talking about the typescript classes that are coming with angular framework alright as I mentioned before this form control class is a typescript class something like this inside this form control class we got few properties that useful for form validations value touched untouched dirty pristine valid errors so on as you know if you want to access these properties which is inside of the form control class we have to create a new instance of this form control class to create this class instance angular as two approaches one is the usual Way by creating the instance by encoding the other one is using an angular directive inside the template wave or the HTML file if you can remember when starting this section I told you in angular we have two types of forms reactive forms and template driven forms so these are the two methods creating this form group instance by hand coding approach is we called angular reactive form and it is creating the form group class new instance using a directive inside the template we called this approach angular template driven form as you know in this section we are learning about the template driven form so this is what template driven form we mostly do all the stuff inside the HTML template View all right so in the template driven approach as I mentioned before we use an angular directive to create a new instance of form group class so that's what we did using the NG form directive this is the directive which creates the new instance of the form control class that's what we got with this control expand this form control and also these are all properties of the form control class we got these properties because we created the new instance of the form group using the NG form directive now you guys may wonder what are these properties don't worry about that we'll learn about this in a later section as you can see here inside the terminal this form control instance carries this value property which is the one get to all the values types inside this form input now this is empty this is empty course we didn't type anything inside this inputs so let's fill these inputs and try this now inside the browser console still these values properties is empty why is that if you can remember I told you that every form group can have multiple instances of the form control class this Form controller class also have the same properties as the form group class in order to get the input Fields value we have to make a new instance of the form control class for this input field to create this new instance of this form control class we got two approaches by hand coding or using a directing now we are dealing with the template driven forms so for this we're gonna use the directive method for form group we use the NG form directing for form control we're gonna use the NG model directive all we have to do is just add this NG model directive inside this input tag NG model if you can remember we use this NG mode directive when we're dealing with the two-way data binding the syntax was something like this but this time we are using this NG model directive directly so save this and back to the browser inside the browser look at this browser console we got this error if NG model is used within a form tag the name attribute must be set so when we're dealing with the NG model directive this is a requirement we must provide a name attribute for the input field so inside the vs code name and give a name for this input field this input field is used for full name so I will give full name as this input field name I use the cable case naming convention so this is optional you guys can name this any name that you want I use the full name because this field is for full name so as a good practice always try to name something relevant which makes more sense right once again when you deal with NG model the name attribute is must otherwise your application can be break at the runtime all right save this end back to the browser inside the browser console this time nowhere else so let's type something inside this full name input zondo now click the submit button look inside the console we got this NG form object inside this expand this value property house up right so this time we got this full names value so this is how we create the new instance of the form control and access the value property of the form control instance so like this we have to add this NG model directive to this all input fields to get the values so for the second input NG model and the next word is the requirement I am repeating this course this is very important so in order to work with NG model we must add the name attribute to this input name and this field is for email so pass email as for this field name next we got this text area is also the same inside this text area of contact NG model and the name is address that's it we don't need to add NG model for the submit button because we are not getting any values from this button and this button is only used for submit this form say this and back to the browser fill this form and hit enter or click this submit button inside the console expand this value object inside this we got all three input Fields value perfect all right in this section let's see how to do a simple required validation for these input fields with this NG model we are creating a new instance of form control class let's see what we are getting with this NG module for that like this forms template variable first we have to declare a template variable for this input field #full name and bind this template variable to this NG model put this inside of a code all right now let's look at this template variable inside the terminal for this I am gonna use the change event binding so inside brackets change bind this change event to a method called get value with this change event pass this template variable full name it is bound to this NG model now inside the app component is file create this get Value method we are getting a parameter so capture it I just add form control as this parameter variable inside this lock this parameter Amic that's it say this online back to the browser type something inside this full name input field and click outside of it look at this inside the browser console we got this NG model object expand it this also got some properties like NG form if you can remember I said that this form control and this form group both have the same properties this is what I was trying to tell you as you can see here we got this list of properties same as NG form output all right let's do a simple form validation in HTML we have this required attribute this will show us an error message when there is no data inside this text field so save this and back to the browser type something and click outside of the text box we got this object inside the browser console inside this we got this invalid property which is now set to false down here we go to another property valid and this is set to true we set this required validation to this input field when there is any data type inside this input field then this input field becomes valid because this required validation is fulfilled so now remove this all and click outside of it now we got another NG model plug here look at this now this time this invalid becomes true and this valid becomes false why is that this time we don't have any data inside this full name input field so this input field becomes invalid so this set this invalid property to true and opposite of this valid becomes false so this is how this valid and invalid works now let's show an error message down here when this input field is invalid so get back to the vs code after this full name input field create a new with bootstrap class alert and alert Dash Danger so this will give us a beautiful red color alert so inside this div add this error message full name is required now what I want to do is I want to show this alert when this input is invalid for this we can use the ngif directive so in Chief this statement is when this field invalid so this field representing with this template variable so template variable name is full name when using the template variable we don't need to add the ash signed so the template variable is full name dot I want to show this when this invalid is true so in here the property is invalid so with this statement this will show this error message when this field is invalid so now save this and back to the browser as you can see here we can see this error message type something inside this input full name if you noticed as soon as I start to type characters inside this input this error message disappeared because when we start to type inside this field this field becomes valid because this required validation is fulfilled in that case as you can see here this invalid becomes false if this is false this error message will be removed from the Dom by this ngif directive if you notice this error is displayed in the browser when this forms loads to the browser this is not a good practice when a user comes to this forms page to enter user details for the first time showing this error message to the user before doing anything wrong it's not good right to avoid this we can use another form control property called touched with this we can show this error message when the user clicks this input and move away without type anything inside the input if this touch by the user this touch property becomes true and this untouched becomes false so back in the vs code inside this ngif first let's check the touched value so before this template variable name first name and Dot this time we are checking the touched property so pass touched here after this at the end operator this time this error message will show only when this two statement becomes true save this and back to the browser perfect we are not getting any errors touch this and hit the tab or click this second input field we got this error message so when the first time this loads inside the browser this touch becomes false and this invalid is true because this field is empty but this is not showing the error because when we using and operator this both statement must return True Values in the second situation when we click this input field this touch becomes true and when we move out from the input field without typing this invalid becomes true so both statement are true that's why we are seeing this message here hope you guys got the idea right rather than showing only this error alert message we can make these input Fields border to it which will give a good experience to the user to do this we can use the bootstrap free build style or we can use our own CSS type first let's encode the style so inside the browser let's inspect this full name input inside this class attribute we can find this form Dash control booster class in addition to this angular added few different classes for validation this NG touch in the dirty and NG invalid so we can use these classes to add CSS styles to this invalid input field let's see this in action inside the component CSS file control CSS class in the same element we have NG touched class and NG invalid so inside this is scope Define the CSS Style set the border to 2 pixel solid and the Border coloring will be red say this end back to the browser everything looks okay click this and move without typing anything inside this input field as you can see here we got this beautiful red border on this input field awesome right next we can do this using a NG class directive in bootstrap we got the pre-built validation style class 4 input fields which is is invalid so let's try this and is Dash invalid Musa class to this input field comment this CC style we don't need that save this whole line back to the browser as you can see here we got this beautiful red border on this text field with this warning icon we are seeing this always cause we didn't add any condition to show this CSS class so let's do that for this we can use class binding but I'm gonna use the NG class directive which is more cleaner than class binding right so inside square brackets NG class assign inside double quotes curly brackets inside this pass this CSS class as key for this insert single quotes is Dash invalid and the condition is same as this ngf condition so copy this and paste it here that's it say we send back to the browser look at this now we are not getting any errors touch this input and move to the next input as you can see here we got this error and this beautiful bootstrap validation border on this input field so this is how we apply validation styles to the input fields foreign about this required validator like this in angular we got few validators that are based on HTML validation attributes so in this lecture let's look at them one by one the first one is the maximum and minimum character count so let's see this in action first we have to set the HTML attribute for this input mean length and the max length set the mean length to around 5 characters and set the max length to around 10 characters or save this and back to the browser click this input and go back I want to show you something we got this printed NG model inside the browser console inside this we are getting another property called errors inside this as you can see here we can find this Min length error so now let's add the error message for the main length validation to show different validation errors let's add some changes to this error message d put this message text inside of another div and let's add a condition when to show this error inside this div ngf directive the statement is full name this template variable this time let's use the errors property after this dot errors dot required so if this is true this message will show up inside the browser like this add an error message for the main length duplicate this div and change the error message to full name must be at least five characters long now change this statement this message is for Min length so change this required to mean length all simple letters save this and back to the browser get the focus of this input move away we got this required message now type a character here as you can see here now we got this main length error very simple right so this is how we handle different types of Errors using the NG model in previous lecture we learned how to add validation to the first name field now let's see how to add the validation for this email field and for this text area I said validation for the email input field first add the NG model directive to make a new form control object class for this email field and always keep this in your mind when we're using the NG model we must declare the name attribute so the name attribute and the value is email create a template variable and bind that to this NG model #email and bind this to NG model so this time to validate this email field we're gonna use the pattern HTML attribute so pattern inside this we have to pass the email pattern to get this pattern search for email HTML patterns inside the Google and go to this first result w3school website in here we can find different patterns for different situation scroll down and find this email pattern copy this and paste it here after this we need another validation for this which is required validation so add that as well now let's define the error messages just copy the previous message div and paste it here change these conditions template variable to email the main condition are same like this inside this change this required template variable to email and change the message to email field is required this time we are not using the mean length so first change the template variable name to email and change this validation property to pattern I'll change this message to invalid email address foreign back to the browser click this email field and click outside we got this required error type something we are getting this invalid email error message type something valid email at this now we don't get any errors remove this add symbol we are getting this error invalid email address because this email is invalid looks perfect right so let's validate the text area this is also the same as previous input nothing fancy first time the NG model directive and the name attribute so this is for the address so the name attribute will be address after this create a template variable and bind it to this NG model the validating attribute is required after this ad the required message here and change the template variable to the same as this address change the message address field is required save this and back to the browser get Focus click outside perfect I got this error message like this we can add validation for all the HTML form elements some of you may found this error that saying cannot find required on your browser console to fix this just add a question mark end of this all error attributes that's it save this all and back to the browser perfect now we are not getting that previous error so we successfully added all the validation errors for all of these inputs but if you noticed we just only added this alert message for this email and address Fields but not the input Fields error red border like this first input so let's do that very simple all we have to do is just add the is invalid booster class to these inputs conditionally using the NG class directly very simple just copy and paste NG class from this full name input change the template variable to email because this email Fields template variable is this email that's it do the same for this text area copy and paste the NG class and change the template variable to address save this whole line back to the browser perfect I got this red border on all these inputs looking awesome right so in this lecture let's look at how to submit this form and get the values of these input fields we kind of did this earlier when we're learning NG form and form group classes to make this form submit previously we use this submit event binding this is the default HTML form submit event this is ok but in angular we got another separate directive for form submission which is NG submit from now on we will use this NG form directive to form submissions all right so first change the submit event to NG submit this also like the same submit event nothing fancy so in order to access these forms values and validation status we use this NG form directive which is creates the new class object of angularform group class right we learned about this earlier with this NG submit we call a method called on submit with this one submit we passed this NG forms template variable from inside the component is file we have this unsubmit method and with this we are logging this NG form parameter variable inside the browser console so now save this all and back to the browser fill this form and click this submit button now look inside the browser console because the same info this also same like the NG model we got all the properties inside the NG model here with this we can check whether this form is valid or invalid dirty or pristine Etc if we look this further as you can see here we got this value property expanded which giving us the object type data now expand this we got this full name email and address data key value pairs which we typed inside the input fields Now using this we can access this forms type data values and send it to the database API endpoint and save this data inside the database so now let's lock this value inside the log values properties inside this NG form value so after this dot value this is this value say this and back to the browser fill this form and submit this form inside this we got this value object now we can using this value object we can save this data inside of a database in the previous section we learned how to submit a form and how to get the form values but we have a small problem here if I submit this form without filling this form Silvia submitting this form but inside the terminal look at this value objects all the values for these fields are empty so passing this form with empty data is not a good practice so as a solution for this we can disable the submit button if this form is empty or invalid it is very simple for this we're gonna use the property binding method inside this button tag property binding square brackets inside this the property that we want to bind disable now the statement so we want to bind this disabled property to this button when this form is invalid so the forms template variable is this F so F dot invalid when this form is invalid this property becomes true therefore this is disabled property will bound to this button if this form is valid this invalid property becomes false and this will remove the disabled property from this button so let's see this in action save this all and back to the browser look at this button now it's disabled because this form is invalid fill is formed correctly look at this button now this button is active because now this form is valid think if I made a mistake with this email soon after I make this mistake in this email field this form becomes invalid this button got disabled this is the beauty of form validations now we cannot pass invalid data to the database which make our app more robust so this is how we enable and disable submit buttons according to the forms validity so this is it for the angular template driven form section in this section we learned all about angular template driven form and how to use the how to validate the input Fields how to get values from input fields and how to enable disable submit buttons hope you guys learned this well if you have any question please feel free to ask so this is it let's meet you in the next lecture in this section we're gonna learn about angular reactive forms and how to use an angle reactive form in our angular form step by step by the end of this video you will learn what is angular reactive form and how to use them how to validate a reactive form how to get data from reactive forms how to Nest home groups and also we're gonna learn about form arrays form filters and Custom form validators what are you waiting for let's get started in the previous section we learned about angular template driven forms so in that section I gave you a small idea about what are the form types in engineering we have two form types which are angular template driven form and reactive form so in angular we have form group class and Form controller class so in order to make an HTML form to an angular form we have to make a new instance of these form group and form control class we make form group class new instance for form tag and we make form control new instance for each and every input inside the form in temperature driven forms we created this using two directives called NG form and NG model so in the template driven form we did all the Declaration validation almost inside the HTML view page but in reactive forms we will do all the Declaration and validation and and almost everything from scratch inside the component file so let's see this in action so first thing first we have to import and register the reactive forms module so go to the app module TS file and here let's import the reactive forms model import reactive forms module from rectangular slash forms this also coming from the angular forms like this forms module so we don't need these two import statement here just put these reactive forms module after this forms module import and don't forget to add a comma to separate these two modules all right now let register this under Imports reactive forms model that's it we have successfully registered on the reactive forms model next let's create a simple form for this I am going to use the same bootstrap form as the previous then we can understand the difference between template driven form and the reactive forms so let's copy and paste the previous bootstrap from here remove this all NG form NG model and validations ngif and all just keep this as a default bootstrap form all right the bootstrap form is ready save this and go to the browser everything looks perfect let's get to the real business in order to handle angular forms we have to use the phone group and form control classes in the previous we used the NG model and NG form directives to make a new instance of these classes but in reactive form we will not be going to use any of directives we will do this from scratch or by writing codes so let's see this in action first we have to import two modules so go to the app component TS file inside this first let's add the import after this import the first module that we want to import is form group so this f and g is capital after this form group this is coming from the forms module so import this at angular slash forms the next module also coming from the same angular forms so and the second import also inside this same import after this form group module and the comma and the second module is form control that's it so first we have to create a new instance of form group class so let's create this inside the component class first the variable something form this can be any name so after this assign new keyword then form group and the parenthesis in previous we did this using the NG form if you can remember we assigned this NG form directive to a template variable the something we did here same as the previous so this is the variable and we created the form groups New instance programmatically in template driven this is automatically generated by this ng4 directive all right next this form group instance required a parameter objective form controls so let's do that inside this parenthesis create an object open and close the curly brackets as a key value pair create new form control new instance for each of these input Fields so first we have the full name field so the first key is full name colon and value is new form control which is this imported form control so after this don't forget to add the parentheses so with this we are creating a new form control instance for this first name input field in previous if you can remember we created this using the NG model directly when using the NG model directive we required the name attribute of this input the same thing happening here this is the name now we pass this as the key of this object and this is the NG model now we did this by encoding that's the difference between reactive and template driven form hope you guys got the idea all right next again create another key value pair for the email the key is email and value is new form control inside of a form group we can have multiple form controls next at last we got this address so the key is address and the value is the same as the previous new form control that's it so we successfully created these new instances for the angular form now we have to connect this new instance to this form so we connect this form to this form groups New instance so for this we have a kind of a property binding so inside the form tag open and close a square bracket inside this the property name is form group this first letter is simple and this G is capital now bind this to this form group this variable name is form so put this inside quotes that's it now let's bind this input to these form controls so for this we use a property form control name follow this Capital simple letters carefully assigned now bind this to this full name form control don't forget to put this inside quotes So likewise for the second input form control name email for this address text area phone control name as I need to this address and that's it say this all and go to the browser perfect we are not getting any compile errors or runtime errors which means we have successfully converted this bootstrap class tone angular reactive form beautiful wait before the end of this video let me show you a small thing for this form control name if you want to use any characters for example for this first name if you want to use the iPhone between first and name put this inside of quotes otherwise this will throw a compile error foreign so in previous we did this required validations now let's see how to add multiple validation for this form control very simple we can pass this validator parameter as an array so wrap this first validator with the square bracket to make this as an array value so break this into next line to see this clearly after this comma and again we can Define our second validation mean length so validators dot mean length this is not like this required we have to pass the mean length value so parenthesis and they set the length to around 5. save this now inside the HTML view add the error message for the Min length validation let's add a small change to this to show multiple error messages so remove this required message inside this alert deal create another div and paste the required error message inside this div and the condition for required this form controls get a method is this so first name dot arrest dot required next duplicate this required error D and change the condition required to Min length and also don't forget to change the error message as well now save this all and back to the browser click on this first name and click outside perfectly got this required error message type just one character inside this as you can see here now we got this middle length error saying that first name should be minimum 10 characters long perfect so this is how we handle multiple validations in reactive form so in previous we did this required validations now let's see how to add multiple validation for this form control very simple we can pass this validator parameter as an array so wrap this first validator with the square bracket to make this as an array value so break this into next line to see this clearly after this comma and again we can Define our second validation mean length so validators dot mean length this is not like this required we have to pass the mean length value so parentheses and they set the length to around 5. save this now inside the HTML view add the error message for the main length validation let's add a small change to this to show multiple error messages so remove this required message inside this alert deal create another div and paste the required error message inside this div and the condition for required this form controls getup method is this so first name dot arrest dot required next duplicate this required error div and change the condition required to Min length and also don't forget to change the error message as well now save this all and back to the browser click on this first name and click outside perfect we got this required error message type just one character inside this as you can see here now we got this middle length error saying that first name should be minimum 10 characters long perfect so this is how we handle multiple validations in reactive form all right let's add to validation for all these inputs the second field we got this email field for this also we need the required validator and in addition to this we have the pattern validator for email validation so as a default value for this email field set this for an empty value and as a second parameter for this we're gonna use the multiple validators so Define an array break this to the second line for more readability all right first validation is required so validator dot required now need to add the parenthesis cause this is a static type method as a second validator pass the pattern parameter so after this don't forget to add the comma validators dot pattern this required the pattern rejects parameter like this mid length so first we need the pattern so create a variable inside the class scope the variable name is email Rejects and type will be string now get the email pattern from the previous template driven form copy this pattern and assign it to this variable now pass this rejects to this pattern validator inside this parenthesis this dot email Rejects that's it all right now back to the template View and add the error messages um wait before that create the getter method for this email failed as well so get keyword and the method name just email parenthesis and the method scope so inside this getter method add this return statement this dot form dot get inside parenthesis pass email as a string so this email is this form control key all right let's add the error messages save this and go to the component HTML file copy this error message div from this first name paste it inside this email form control div after this email input change this getter method first name to email once again this is this getter methods name not this form controls name all right these all are the same no need to change expect this Min length remove this Min length and add pattern this time we are checking the email pattern not the mean length so change this message to invalid email that's it save this and back to the browser click this email field and click outside perfectly got the required message now type a character inside this email field as you can see here this time we got this invalid email now type a simple email address something a gmail.com now we don't have any errors because this email is in the correct format so in the reactive form we have a simple way for this email validation rather using this regex pattern method so let's see that in action so very simple comment this now we don't need this pattern validator instead of this we can use the email validator so after this validator dot email that's it this also static method like the required validator static method so very simple right so this is very clean and easy to understand right all right save this and back to the component HTML file and remove this pattern because this time we are not checking any pattern so remove this and add email that's it save this all and back to the browser check this email field validation everything working as we expected Perfect all right let's move on next add the validation for this address text area so nothing fancy in this text area I just need only the required validation so inside the component is file inside this address form control parenthesis as a first parameter set the default value which is an empty string as a second value validator this time we got only one validator so we don't need to pass this as an epic just edit after this validator dot required that's it so I send back to the Comfort HTML file and add the required error message so just copy this previous error message this time you only need this required message so remove this second error message and change this required error message so save this online back to the browser get Focus this text area plus the focus perfectly got this error message type a character as you can see here as soon as I I typed a character inside this text area this required error message disappeared perfect everything working as we expected before the end of this lecture we want I want to tell you one more thing some of you may Wonder from where we get this red border on this input if you can remember we Define the Cs style for these NG touch and for this NG invalid so this is how we're getting this red border on the input fields if this field is invalid these angular classes will be added to these input fields so we learned about this when we're dealing with the template driven forms hope you guys remember this so in this lecture let's look at how to disable enable the submit button when the form valid or invalid and also let's look at how to get the forms values all right let's see this in action first let's do the button enable disable this also same as the previous template driven form for this we're gonna use the property binding inside the app component HTML file at the property binding for the submit button inside this open and close square brackets inside this the property is disabled equal sign statement is form this is this form group dot form dot invalid if this form is invalid this becomes true and this disabled property will be applied to this button if this is valid this becomes false and this disabled property will remove from this button that's it save this and back to the browser as you can see here this button is now disabled fill this form correctly without errors look at this now this form has no errors which means this form becomes valid which means now we can submit this form by using the submit button perfect right all right next let's see how to get these values when we submit this form as usual we're gonna use the NG submit even for this form same as the previous template driven form inside brackets NG submit and bind this to a typescript method something on submit and the parenthesis in the previous template driven form we send the NG form parameter with this NG submit event but in reactive form we don't need to send any parameters just call the method as you can see here we are getting a compilation error because still we don't have declared this method inside the component yes file so go to the component is file and create this on submit method so inside in this class scope the method name is on submit and the parenthesis after this don't forget to add the method scope all right inside this we can get the form data very simple this is the form group we can access this form group data by values property so inside this method we can get this form group data like this this dot form this form is this form group value with this property we can get these form groups value so let's lock this to the console console.log put this inside this log save this and back to the browser fill this form and submit this form look inside the browser console as you can see here we got the value of this form as an object now we can send this values object to the database and store this data inside of a database don't worry about saving data inside the database we will learn about this in the next lectures so this is how we handle data in reactive forms in real world apps when we saving data to the database sometimes we Nest object inside objects for example with this form groups value object we are getting this data think if we have another field for something billing address and for contact numbers likewise contact details input and if I want to get that contact data as a separate nested object inside this main menu object how do we gonna do that in reactive forms we can list form groups inside the main form group so let's see this in action inside this main form group the key is contact details and this time instead of this new form control create a new form group instance like this main form group new form group and the parenthesis this nested form group also required object of form controls nothing fancy same like this main form group the only difference is this is the main form group and this is the sub or nested form group all right now inside this we can create the form controls so put this address form control inside this contact details form group and after this let's create two subform controls first one is for something shipping address so key is shipping address and the value is new form control and the parenthesis again another field for a contact number the key is contact number and the value is new form control and don't forget to add the parentheses that's it now let's create new input fields for these shipping address and for this contact number input field so inside the template HTML we duplicate this address text area change the label as the shipping address and change the form control name to shipping address again we need another field for contact number so copy this input field and paste it here change the label to contact number and also don't forget to change this form control name to contact number that's it all right let's add this contact input inside the contact details form group this is still inside this main form group to create nested groups inside the view we have a property called form group name like this form control name so let's do that create a div and put these all in put this over contact inputs inside this div and this shipping address and this contact number inputs now add the form group name property to this View and bind this to this nested form Group which is contact details pass this exactly same as this Capital simple letters perfect that's it we have successfully created this contact details subgroup inside the main form group simple right all right now let's add the validation for these new inputs in the component file pass the validation parameter for these inputs first set the initial value which is empty string the second parameter for this shipping address we're going to add only the required validate so validator dot required for the contact number let's add the validations for this we're gonna use two validations first one is the required validation first pass the default value the second parameter this time we gonna add the multiple validations for this so pass this parameter as an array so the first validator is required validators dot required the second validator is the pattern we will set the pattern validation rejects for this contact number like this email pattern validation so validators dot pattern and the parenthesis now we have to pass the pattern so create a variable contact Rejects type will be stream and the pattern will be this so just pause this video and write it down now pass this contact rejects variable to this pattern validated that's it Now set the Getters for these two Fields copy and paste on this get us method change the getter method name to shipping and also change this form control name so this time this is not inside the main root form group so in order to access this shipping address form control first we have to access this sub form Group which is this contact details so contact details Dot and the form control name is shipping address again duplicate this get method and change the method name to contact and change the form control name to contact number that's it wait we have another change this address form control also now inside this form Group contact details so change this all right save this file and back to the HTML View and let's add error messages now change this error directive names this is shipping and change the error message next change this to contact and this is this time we are checking the pattern so change this email to the pattern and don't forget to change the error messages say this all and back in the browser oops we are getting an error here because I made a mistake here when we connecting this into the insta form group this directive must be form group name not just phone group so change this the form group name save this and back to the browser now we don't have any errors perfect everything working as we expected beautiful in the previous lecture we looked at how to Nest Chrome groups inside form groups so in this section let's learn how to deal with form array class think if you have an input field for add skills a person can have multiple skills right so in that case we have to store those multiple skills inside of a form array so let's see this in action let's create a form array inside this form group this also the same as creating these form groups and form controls so first the key I am creating this form array to store skills so key is skills and value will be a new instance of form array so nav form array select this photo complete this will automatically import this form array module to this component all right pass an empty array as an argument for this form array now let's see how to push date dynamically to this form array save this and create an input field for skills after this div with a bootstrap class form Dash group inside this label and label text will be skills after this input field with bootstrap class form Dash control now let's add a key up event for this input field inside brackets key up and I want to trigger this key up only when the user press the enter key so add an event filtering for this so key up after this Dot and the enter we already learned about this right so now bind this to a method called something add scales and don't forget to add the parentheses in order to get this input values create a template variable for this input hashtag skill and pass the template variable to this method that's it now save this and back to the component file and create this add skills method so this sending a parameter so capture it skills Now set this variable of type to HTML input element because this is this template variable which is an HTML input element so now inside this method let's push this input value to this form array so this dot form which is this main form Dot get and we want to access this skills so skills so pass this inside this parameter in order to push value to this array we have to convert this to form array look at this we don't have any push method for this form group so convert this to a form array very simple after this add this statement as form array all right now put this all inside of brackets and now we can use the push method with this dot push this time we are not getting any compile errors now push these inputs value to this form array so first we have to create a new instance of form control or form group like this this is simple input data so I am going to create a new form control instance so inside this push method new form control and parenthesis now push the value to this new instance inside this parenthesis kill which is this parameter variable and value that's it now let's lock these form groups value to see whether this pushing is working or not so after this lock this form dot value save this online back to the browser type something inside the skills field and hit enter inside the console we got this form group values inside this we got this skills array X expand it inside this array we got this type data again type something and hit enter as you can see here we got this second value also inside the skills array all right now render this skill form array values inside the wave back in the vs code first let's make a getter class for this as well after this get the method name is skills after this parenthesis and the scope inside this return this dot form dot get inside brackets skills don't forget to put this inside quotes after this s form array now we can remove this entire line and and simply this getter method name skills that's it all right now back in the HTML template now let's render this skills form array data using the ng4 directive inside of an unnoded list so after this skills input another list with booster class list Dash group inside this UL I tag with list Dash group Dash item booster class these booster classes will give a nice unordered list now let's render the array inside the list tag ng4 directive inside codes let skill of the geta method name is skills and if you can remember we are pushing form controls to this form array so after this dot controls this will render all the form control values inside this form array now inside this list let's show the data using the string interpolation inside string interpolation skill which is this variable and Dot value perfect now save this and back to the browser type a skill something angular hit enter as you can see here this rendered inside this bootstrap list again type something react and hit enter Perfect Right everything working as we planned now let's add a method to clear this input Fields after adding a new skill very simple I'm making this code go to this end skill method and reset this skill HTML element value skill dot which is this parameter value assign it to an empty value save this and back to the browser type a simple skill and hit enter as you can see here soon after we click the enter button this input Fields value set to empty beautiful all right at last let's see how to remove a form array value programmatically first add a delete anchor tag for this list now inside this create an anchor tag with these bootstrap classes BTN BTN Dash as Sim this is for small buttons and BTN Dash Danger the anchor text will be this X as the cross icon for removing data now add a click event for this button inside brackets click assign this to a method called remove skills and don't forget to add the parentheses in order to remove a value from an array we need the index of that removing data so let's get the index of this array if you can remember we learned about this when we learning ng4 directive so after this statement semicolon let I assign index with this we are assigning this arrays index to this variable I this can be any variable name now pass this index to this remove skills method so we can remove that value from the array using the array index number all right now go to the componenties file create the remote skills method with this method we required the index number so set a parameter variable index now inside this let's add the remove statement very simple this get a method which is this skills dot remove inside brackets pass the index number that we are getting from this parameter that's it sales all end back to the browser and some skills angular JavaScript react now remove this angular from the list as you can see here this remote from the list again remove this react this also removed from the list beautiful send it so this is how we deal with angular reactive form arrays so until now we have created these form groups and form controls if you look at this as you can see we're repeating this same new form control instance again and again it is making a code a little bit noisy right and also we have another problem we have almost created Five data methods for these form control to simplify this inside the HTML web template for a small form like this this is okay but think if we are dealing with more than 20 30 foam controls creating these getter methods for all those form controls it's a big pain right as a solution for this we have a better approach which is angular form builder in this lecture let's look how to make this noise code to clean code using this angular form Builder first import the form Builder module to this component file form Builder this also coming with this angular forms module so put this inside this same import form Builder all right now we have to inject this into the Constructor we learned about this dependency injection when we learning angular Services hope you guys remember this all right inside the Constructor FB this can be any name and this type is form build which is this imported form Builder please recreate this form group using this form Builder inside this Constructor let's create the form group FB dot with this form Builder we can build these three types of new class instances very simple group control and array we use the group to create form group we use the control to form control and the array for form arrays so first we have to create the phone group so select the group for this also same as this previous required an object inside this we have to pass key value pairs which can be form group or form control or a form array so first we have the first name so the key is first name and the value is FB dot control and the parenthesis in form Builder we have another cleaner approach for this form control so remove this and just simply add a square bracket this represents the new instance of the form control class less syntax and very clean approach right next we can pass the validation same as this so inside this square bracket first the default value and as a second parameter we have to pass the validation so nothing special here same like the previous method so we got two validations for this first name field required and the mainland so we can pass multiple validations as an array so create an array inside this first validation validator dot required the second validation validator dot mean length inside parenthesis set the mean length count 5 that's it so next we got the email field same as this key is email and pass square bracket for new form control instance inside this pass the default value and pass the validations required and email next we got this contact detail form group the key is the form group name which is this form details this time we're gonna create a nested form group so we have to type that with square bracket thing is only available to create form controls new instance okay after this FB dot which is this injected form Builder group and the parenthesis so inside this parenthesis we can pass the form controls as object key value pair same as this so inside this create an object this first form control is address and pass square bracket as a value so inside this pass the initial value and the validators for this address form control we only have this required validator so at the required validator so second contact form form control is this shipping address the key is shipping address and the phone control this also same as this pass the initial value and the validations so after this we got the contact number so the key is contact number form control inside this this time he got two validators so pass two validators as an array very latest dot required and validators Dot inside this pattern parenthesis pass this contact number rejects pattern that's it for this contact details form group at last we got this skills array let's see how to define an array using the phone Builder as a key pass the array name skills now let's define the array FB this form Builder Dot and this time you are planning to create an array so select array and parenthesis inside this create an empty Harry all right so we have successfully created this form using the form Builder now we don't need this form group so remove it I am going to comment on this and keep this for your reference all right save this in Back to the browser look at this form every validation and everything working as previous perfect right comparing to the previous phone group this form Builder is slightly cleaner than the previous phone book right so this is no mandatory to use form Builder it is up to your personal preferences in case if you like this previous syntax you can use that no problem so all right this is how we use form builder in angular reactive forms interactive forms we can write a custom validator method for our own custom validations as you know we have few inbuilt form validation methods required Min and max length pattern and the email HTML validations think if you have an input for username and we want to validate the username without spaces if someone types a username with space we have to show an error so in this case we don't have any inbuilt validators so we have to create that validator by ourselves so let's do that so guys now I have an empty app component I removed all previous codes don't worry if you need the previous codes I have attached the file with the previous lecture or let's begin first let's create a simple signup form using bootstrap first create a container View inside this div phone tag inside this form create a form group div inside this label username after this input field with form Dash control booster class next again another form group div inside this a label with password after this a password input tag with bootstrap home Dash control class Atlas create a submit button for this form with bootstrap classes BTN BTN Dash primary the button text will be submit now convert this simple bootstrap form to an angular reactive form so go to the component is file to create angular reactive form controls I am going to use the form Builder so first inject the form Builder to this Constructor FB and the inject type will be form Builder select this photo complete this will import the form model to this component create a form variable inside the class scope all right now inside the Constructor let's create the reactive form controls this dot form assign FB which is this form Builder dot group and parenthesis inside this parenthesis pass a form control object so create the object as a first key value pair username and this is a form control so use the short syntax just open and close a square bracket inside this curve bracket set the initial value which is an empty string so after this validators this username has more than one validators so pass this assume at the first validator is validators dot required the second validator is min length and set the length count to around minimum 5. all right next we got the password form control so the key is password and the form control set the default value for this we're gonna add only one validator which is required that's it we have successfully set the form Builder next let's set the getter method in the form Builder we can set only one get method for all these form controls in previous we created data methods one by one for each and every form control but using the foam Builder we can simplify this get method name is something FC parenthesis and the method scope inside this simply return this statement return this dot form dot controls with this we are returning all the form control instances so we can simply access the form control instance like this FC dot form control name username or password all right save this and open the component HTML web file connect this form to this form group using the form group property binding inside square brackets form group and the form group is this form variable so by these two this form variable after this bind the input field to the form controls inside this first input form control name assign form control name is username do the same for this password field as well foreign error messages I just copy and paste this from the previous form so this time form control is coming from this get method so FC dot username dot touched and FC dot username dot invalid so same as this FC dot username dot errors dot required at last don't forget to change the error message to username required do the same for this mean length error as well now again copy and paste this error to this password field this password has only one validator which is required so change all the details foreign so that's it save this and back to the browser wait we are getting an error here saying this dot form dot control is not a function um oh I did a mistake here this control is not a function so remove the parenthesis that's it save this and back to the browser now we don't have any errors check the validations perfect everything seems to be working as we expected all right now let's do the custom validator for this username field which is username must not contain spaces first we have to create a file for this custom validator as a good practice I will put all my custom validators inside of a folder called validators so inside the app folder create a folder the folder name will be validators inside this folder let's create a custom validator so create a file file name first pass the validator name something no space Dot after this like this component file naming convention validators so we are creating a validators file so validators dot file extension will be TS foreign fancy we commonly used this naming convention in angular we use this when we're creating components pipe Services etc etc so if it is a component file we will put the component if it is a custom pipe file we will put the pipe between this if it is a service file we will put service here so nothing fancy just simple naming convention next open this validator file inside this let's create the custom validator first we need to import two modules one is abstract control module and another one is validation errors module let's import these modules import s abstract control from this is coming from at angular slash forms and this validation errors module also coming with this angular form so pass this inside this same import after this create the typescript class class keyword and the class name no space validators carefully follow this naming convention okay now we have to define the validators method so this method name can be any name so I declared this method name as something no space validation and parenthesis in order to make this a validator method we have to do two things first set a parameter for this control and this control must be in abstract control after this if there is an error this must be returned validation errors or if there is no error this must be written null so at that after this method scope okay let's set the logic inside this method all right first I am gonna capture the value with this parameter we are getting the form control as you know this phone control object contains all the foam validation status such as touched invalid valid you got the idea right and also this form control object carries the form inputs value so now what I want to do is I want to get the form inputs value and assign it to variable called control value so let's do that let control value assign this control is parameter control dot value so this control value type is any I want to make this as a string then only we can check whether there are any spaces or not so as string so at this after this as string very simple right all right now we have the value let's do the logic if the statement is control value which is this form control value and then index of white spaces greater than o equals to 0 so with this index of method we can get any character's count if you want to check whether there is any special characters something semicolon type or not so we can pass that inside this index of parameter in our case we are checking whether they are empty white spaces or not that's why I passed the empty white space as a parameter for this index of method all right if there is space in the username we have to send the validation error so let's do that very simple we can return this as an object so return no space validator as the key as a value if you want you can send an object with additional pieces of information in our case we don't need that so just simply return true because there is only one error if this is not true return null so when we're dealing with the validators we we are not creating a new instance so in order to make this method accessible without making the new class instance just set this method as a static method so we can access this validator method without making a new instance of this validator class at last don't forget to add the export keyword to this class then only we can access this class from outside all right now we have successfully created a custom validator now let's see how to use this validator in order to use this inside the component file import this custom validator so import inside brackets the class name is no space validators after this path from path is to this validators file go back one step insert this select the validators folder now inside this select this no space validate is 5. that's it now add this validation to this username input after this this time the custom validator module is this no space validators and the validator method is this no space so select it that's it now go to the HTML file and add the error message for this custom validator duplicate this previous error message change the error to no space change the error message to username cannot contain spaces save this all and go to the browser inside the username type something and hit the spacebar beautiful right we got this no space error now remove this space perfect now we are getting any errors perfect so guys this is how we create custom input validations in angular so guys this is it for this section this section is filled with lots of Logics right hope you guys learn it well and enjoyed it in this section we learned what is reactive forms and how to set up a reactive from from scratch we learned about reactive foam validations and also we learned how to create our own custom reactive form validators from scratch so after that we learned about reactive foam Builders form arrays nested form groups and so on perfect so guys we successfully completed this reactive form section hope you guys learned it well if you have any questions feel free to ask in the Q a area okay this is at the end of this section let's move on to the next section all right in this section we're going to learn about angular routing and navigation by the end of this section you will know what are routing and navigation how to implement an angular routing from scratch how to pass router parameters and query parameters what is observable and how to use that how to get router parameters and query parameters and at last we will learn how to navigate routers programmatically so this section gonna be a little big and tricky so please make sure to learn everything so what are we waiting for let's get started so actually what is this routing routing is basically means navigating between pages you have seen many sites with links that direct you to a new page let's look at an example just go to the angular official website angular.io so this is the home page of this website if you go to this features tab this URL is changed to this after this domain we can see this slash features if I go to the docs this change the url to docs so this is what routing this routing is commonly used in all websites and web apps to navigate through the website pages you guys already know angular is a component based front-end framework so in angular we use the routing mechanism to navigate around components so think these angular's official website is a build using the angular framework so when we go to this angular.io website this is the main default router which is this first page of this website this showing us this home page component so likewise if I go to the features tab this removes the home page component from the Dom and show these features component inside the browser name so this is the simple idea that I can give for angular routing so once again using the angular router mechanism we can navigate through different angular components or different waves we use an angular router to navigate through components so router is a main building core module of an angle which includes a bunch of directives and services that used to implement navigation in a angular app so throughout this section we will learn about this router module in detail so there are three steps to implement navigation first we have to configure the routes with this we configure which component should visible when user navigate to a certain URL next we have to add the router Outlet this will be responsible for showing the correct component view to the user on a certain URL at last we need to add links to navigate through the website so in the next lecture we're gonna learn these three steps one by one in detail all right in this lecture let's set up a new angular project for this routing and navigation so open the command prompt over the terminal navigate to the project folder as usual my project folder is inside the desktop so CD desktop inside the desktop my project folder is the udemy angular course folder so I'm going to navigate my command prompt to this folder CD udemy angular course perfect now I am inside my project so let's create the new angle app inside this project folder so we learned about this so in order to access the angular CLI we use this NG command to create a new angle app nive then the project name something NG Dash routing this can be any name no need to follow exactly as my so now hit the enter to run this command give note to this strict typing mode and hit enter yes of course we gonna use the angling router but if we give yes to this this will automatically set up all the necessary configuration for us but we'll first see how to do this from scratch then only we can get the exact idea about this angular routing once we learn about this from scratch then we know the idea so after that we can use this easiest way so give note this and hit enter now select the preferred styling method select the CSS method and hit enter that's it alright the new angular app is ready now open this inside this code so CD into the new angular app CD project folder name is this NG Dash routing now run this command to open this inside the vs code code base and Dot hit enter in angular we got inbuild a separate model for routing and navigation we don't need to additionally install anything so in this lecture let's see how to implement on this router and navigation to this angular project so first thing first let's create a simple app to manage post that has routing and navigations for now let's create a component for post list inside the integrated terminal run this command NG g c and the component name is post Dash list hit enter to execute this command perfectly got the component in order to show this post list component inside the browser we have to add this component selector inside the app component HTML file we learned about this right so let's add this inside the app component HTML file remove this default HTML boilerplate we don't need that now add an H1 tag something angular blog site after this H1 tag let's add the post list component selector which is this app dash post Dash list so select video complete this will complete this as an HTML custom tank perfect now let's run this app inside the integrated terminal in G serve and hit enter after the development server started go to this URL localhost colon 4200 perfect we got this heading and this post list work text which means a post list component is successfully rendered inside the browser so if you notice we rendered this postage component directly inside the app component HTML file now what I want to do is I want to show this component inside the browser when a button clicks so create a button before this post is selected the button text will be post list save this and back to the browser perfect so as I mentioned earlier I want to show this post component when this button clicks so let's see this in action for this we're gonna use the angular routing method so in order to work with angular router we have to tell angular that we are using the angular router with this project for that we have to register angular router module inside the angular app modules very simple this also like previous components pipe service and module register so open the app module.ts file inside this first import the router module so at the top of the page after these Imports import the module name is router module carefully follow these Capital simple letters after this from this module is coming from the router so at angular slash router that's it now as usual we register the modules inside the Imports array so after this comma router module Dot for root and parenthesis this for root is a static method that defines the router module class so we use this method to Define root or main routes for our angular application so now we can pass the array of routes object to this forward static method as a parameter so array inside this we can Define the router objects which must have the path and the component K value path so let's see this in action so inside this array object as you know we Define objects using the curly brackets so open and close curly brackets inside this first key value pair is path and the value is for now just pass an empty string the next key value pair is component colon so this value also set to an empty string so with this key value pairs that we are telling angular to load this component when the browser URL change to this path as I mentioned I want to load the post list inside the browser when clicking the button so let's define a path for the Post list inside this path value pass the router path post a plural word now pass the component that we want to show the post list component so pass the component name I made a mistake for the component we don't have to pass this as a string so remove these codes without codes just pass the component name post list component that's it we have successfully created our first router now we have successfully created our first route save this and back to the browser as you can see here still we can see this post component because in the previous lecture we added this directly to the app component which is why we are getting this post list works so now we don't need this so remove it from the app component HTML file now save this and again back to the browser now we got nothing here navigate to this post router after this base URL slash and the router path is post hit enter still we got nothing if you can remember we Define the router when the user navigates to this path show this post list component if this work correctly we will see this post list Works pre-tag inside the browser but we got nothing here what's going on here in order to show the relevant component web inside the browser we have to use a special type of angular HTML element which is router Outlet without routing we rendered the component wave inside the browser using the components selector as an HTML tag so the same thing we gonna do here this time we are showing the components inside the browser with the routers so for that we have to add the router Outlet here this router Outlet also coming under angular directive category but this is different we use this as a custom HTML tag like the component selected so let's add this inside the component HTML file router Dash Outlet select the autocomplete this will automatically complete this as an HTML tag now save this and back to the browser navigate to the post path as you can see here this time we got this post list Works which means now the route is working fine some of you may wonder what is happening here it's very simple in order to show the component inside the view we added the component selected as an HTML tag inside the app component HTML file like that now we added this router Outlet directive as an HTML tag to show relevant component when there is a router so very simple hope you guys got the idea and now we can load the post list component inside the browser when we navigate to this post router path we did this manually by typing the path inside the browser address bar now what I want to do is I want to load this component when clicking this button so let's see how to do this very simple for this in angular we have another directive which is router link by using this we can navigate to a specific router when clicking this button so this is a directive so at this inside the button starting tag router link this L must be Capital as always follow the capital simple let us correctly after this equal sign inside codes pass the path that we want to navigate slash the path is post not this carefully when we Define the route we didn't use this slash but when we using that Define router path we must add this slash before the router path okay that's it save this and back to the browser go to the main URL now click on this button as you can see here this loaded this post list works here look at the address bar perfect right when we click on this button this URL change to this router but that's why we got this now let's add a button to navigate to the main URL so back to the vs code before this button create another button the button text will be home set the router link the main home page or the component if you notice we don't have any relevant router for the main root component but if you navigate to the project main URL which is this localhost colon 4200 we got this week which is this app component how we getting this as you know the main root component is this app component this generated automatically by angular CLI when we creating a nif angular project how this component load inside the browser if you can remember we learned about this when we navigate to the root URL of this app this will first load this index.html page so this is the main page that loads inside the browser if you look at inside the index.html page we got this component selector app dash root which is this app components selector so this is how we getting this main root components weave inside the browser if you look at this further we got another new HTML tag which is the base tag this is pointed to this slash URL what's happening with this with this angular nose this is the main root file to load inside the browser when someone navigate to the root URL so this is what base URL so without this angular doesn't know how to open and navigate through the website let me show you a quick example remove this base URL save this and back to the browser look at this this time we got nothing look inside the browser console as you can see here we got this error saying that no base href said so this is what I try to tell you guys without this angular cannot understand the navigation of this angular app hope you guys got the idea so now at the base URL save this and go to the app component so now we want to add navigate to the main web when clicking this home button so as previous and the router link directive to this button this time the URL path is this base URL which just slash symbol save this and back to the browser click on this post list button we got the postlist component view now click on the home button look at the URL we again navigate back to the base URL so this is how we deal with base URL hope you guys got the idea in the previous lecture we learned about the base URL when we're loading the base URL this will open the index.html file inside the browser inside this index.html file we're rendering this app component in routers we have so in routers we have not defined any page to the base URL in Real World app we don't put many codes inside the app component we use separate components for this so in this lecture let's see how to define a base router and point that to another component for this let's generate a component inside the integrated terminal run this command to generate a component NG g c the component name is home hit enter to execute this command now let's define a new router for the base URL inside the app module TS file create another router object this time path is the base URL slash but so in the route object we don't add this slash so just keep an empty string so this will represent the base URL the component is the newly created ohm component that's it save this end back to the browser in the base URL as you can see here this time we got the home works which means home component loaded successfully inside the browser on this base URL Now navigate to the post list this time we got the post list component again back to the home we got the home component so this is how we Define the base router when in traditional HTML Pages we use anchor tags to navigate through the website but in our previous example we used a button deck but in angular we can add this router link directive pretty much in every deck but in traditional HTML we can add links only in Anchor text because in traditional HTML website we don't have this router Link in order to navigate to a link we must use an anchor tag because anchor tag as the href attribute in some cases we use the anchor tags in angular as well but in angular we will not use the href attribute instead of the href attribute we will use the routerlink directive in angular so let's see this in action so simply create an anchor tag and remove the href and add the router link this router link is for post list so and the post router path to this link text will be something post list save this and back to the browser click on this link this is working as we expected as you can see here this is navigate to The Host router some of you may wonder why we cannot use the hdf attribute with the anchor tank so let's find the answer for this create another anchor tag after this this time remove this router link and add the href attribute change the text to post list extras now save this all and back to the browser click on this href post list tag this also successfully navigate to this post URL but if we look at this carefully when we clicking this href link browser is loading the entire page we can clearly see this with this loading indicator on the browser if you click on this router linkage ref as you can see here this will load this component without refreshing the page so this is the problem with the href tag when an angular application loads inside the browser at the first time this will load all the necessary files like JavaScript files and CSS files to the browser after that when we navigate through the website to other Pages components the angular app will only download necessary files that need for that relevant component not all the files like initial load where I'll show you this open the browser tools and go to the network tab reload the base URL look at this this loads all the CSS and JavaScript files now I remove this all Now navigate to the post list by clicking this anchor tag which using the router link look at this network tab nothing loaded because as I mentioned earlier this loads all the necessary files at the initial page loads again back to the home again it is not loaded anything nif but look at this carefully if I click this href anchor tag look at this this loads again all the files this is not a good practice for an angular app so this is the problem with the href tag in a traditional HTML website we load websites Pages like this sometimes and this will cost lots of time to load a page so if you're using this RF with the angular there is no use of using the angular framework we can use this traditionally right hope you guys got the idea we learned about the angular router link directive and href attribute in the previous lecture now in this lecture let's see how to show an active status on these router links so we don't need these anchor tags so remove them now what I want to do is I want to change this button color to Something red when we navigate to that router link so let's see this in action um let's add the CSS class to this button something active inserted component CSS file add the CSS style to this active class not active and this CSS scope inside this set the background color to red and also to this phone color to white that's it save this end back to the browser we got this red color button now what I want to do is I want to apply this active CSS class to this button when we navigate to that particular bar for example if we navigate to the post path I want to apply this active class to this post list but if I navigate to the Home Path I want to remove that style from this post list button and apply that to the home button so let's do this if you can remember we did conditionally CSS classes binding using the class binding and the NG class directive but for the angular routers we have a separate directive which is routerlink active so let's see this in action first remove this class very simple just add the directive router link active follow these Capital simple letters carefully so after this as usual equal sign and the codes inside quotes pass the CSS class that we want to apply active very simple right at the same direction to this button as well save this and back to the browser at the base URL we got this home button in red navigate to the post URL perfect now this post list button in red color so this is how we deal with routerlink active directive foreign to the post list component so inside the postage component is file I created this post object array with this key value pairs ID title and the content you don't need to follow this as mine but if you need this you can get this code from the attached files inside the HTML file just added these markups to render the post array with this ng4 as you know we can Loop an array so with this H1 tag showing the title using the string interpolation after this I added a button to beam this post just a simple markup for render post list inside the post list component we learned all about this in the previous sections alright so inside the browser this will look like this now I want to make this wave button live still we are not doing anything with this right so what I want to do is I want to open a new component or navigate to a URL that shows only this post details as you know inside of post object array we have the post content inside the post list we only showing the post title if someone wants to read this post content they can click on this web content and create the full blog post content so let's see this in action so first we need a component so let's generate a component inside the integrated terminal NG g c the component name is single post all right now let's define a route to this single post component go to the Model Ts file inside this router array let's define the router after this create the router object the path is post same as this keep this for now we'll come back to in a minute next point this to the single post component after this comma key is component and the value is single post component so now in order to show the post details inside the single post component we have to pass the index of that array then only we can fetch that array object details inside the single post component so how do we pass that array index from the post list component to single post component we have a simple solution for this we can pass data between components via binding that data to the router so let's see this in action for that first we have to Define that in the router we Define router parameters like this after this slash colon sign and the router parameter variable name something ID this can be any name so we Define the router with the parameter now what I want to do is I want to go to that URL when clicking this weave button so we can do that using the route link directive as these ohm and post list buttons so add the router link to this view button and the router path is this post now we have to pass the router ID parameter with this router as well so how do we do that for this first we need the index of this array we can get that with this ng4 we learned about this right so inside the ng4 let index assign Index this index is coming from this ng4 and this is we created new variable so this can be any name all right now we are getting the index number with this now what I want to do is I want to pass this index number with this router as a parameter for this we have to do a small modification to this router link so first make this router link directive as a property binding we can make this with the QR brackets rub this order link with square brackets now for this we have to pass two parameters so remove this inside double quotes create under this bracket inside this router path as the first parameter which is this pose pass this inside of a single quotes after this pass the parameter value as a second parameter which is this index variable just type the index variable name after this comma that's it we have successfully created the router with parameter and also we learned how to pass the parameter variable with the router link directly now save this all and back to the browser now click on this wave button this open the single post component that's why we got this single post works look at this URL inside the browser address bar we got the URL path and after this we got this number zero what is this can you guys guess yes this is the parameter that we passed with this this post array index number go to the Post list and click on the second post we got the number one as the parameter because as you know array index starts with zero so this is how we pass parameter variables from one router to another router so in the previous we sent the index number of this array while binding to the router parameter so in this lecture let's see how to get that parameter from the router and how to show the relevant array data to that array index so we are sending that router parameter from post list component to single post component so let's capture that router parameter from this single post component open the single post component yes file inside this in order to capture the router parameter we have to use the activated route module which also comes from the angular router first thing first import the activated router model to this component so import inside curly brackets activated route as always carefully follow the capital simple letters after this from this also coming from the angular router module so at angular slash router now we have to use this activated route to get the parameters but we cannot use this directly in order to use this we have to inject this activated route class into the Constructor like the angular services so inside the Constructor private route this can be any name so after this colon and the class name which is this activated route that's it now let's see how to get the router parameter using this activated route now inside the engine in it this dot route which is this injected activated route after this para map this Ms capital so this param map is the property that gives all the router parameter values if you look at this paramap type as you can see here this is an observable observable is something coming from rxjs so leave that for now in the next lecture we'll learn about this in detail okay so in order to get the values from an observable we must subscribe to that observable so after this dot subscribe this is a method so after this parentheses this required a function with value parameter so this method required a function with value parameter so I'm gonna Define an arrow function inside this parentheses the parameter name is the value arrow and the function scope now inside this let's lock this value parameter and see what we got from this console.log and parentheses inside this parenthesis print this value perfect save this and go to the browser click one of these view buttons please navigate to this URL with the router parameter now open the browser console inside this as you can see we got this parents map object inside that we got these two keys params and keys expand the patterns look at this guys inside this param we got the object of router parameter key and the value this value is this router parameter if you wonder what is this key ID which is this router parameter key we Define this when we creating this router perfect right now we can use this parents map to get the router parameter so now back in the vs code value dot look at this we got these four methods we can get a parameter value from this get method we can get all the parameter values from this get all method we can check whether there is a router parameter or not with this as method and finally we can get a list of parameter keys with this Keys method so now we are dealing with one rotor parameter so in that case we can use the get method to get the router parameter so value dot get value dot get this is a method so parenthesis and this required the router parameter key so our router parameter key is ID pass this as a string inside quotes now I'm going to assign this to a variable something let ID perfect now lock this variable and remove this previous look save this all and back to the browser now click on this view perfect we got the index of this post printed inside the browser console again back to the post list component we can navigate through the components using these buttons right so again click on this wave button perfect we got the router parameter beautiful isn't it so guys this is how we access the router parameter using the activated route module in the previous lecture I told you that these params map is an observable so you may wonder what is this Observer this is not an angular thing this is coming under JavaScript reactive programming in other words this is coming from JavaScript rxjs if you look at the package.json file in here we can find angular is using RX Js so what is this RX days and observable first let's go to the rxjs official website rsjs.dev go to this overview tab so this is a library for composing asynchronous and event based programs by using observable sequences so what is this Observer an observer is a sequence of data that is emitted asynchronously or asynchronously over a period of time in other words observable will continuously observe a set of stream data and automatically update or track that sequence of data Whenever there is something change so let's see an example then we can understand this correctly as I mentioned earlier angular is using the rxjs library out of the box so we can use the rxds Observer with an angular project so let's see a simple example so let's do this inside the home component yes file this is adjust an example so that's why I am doing this inside the home component there is no mandatory requirement to do this you can do this any of the compound files as you wish so in order to work with the observables we have to import the observable to this component file so import inside curly brackets observable this o must be capital from this is coming from the rxjs library that's it so now let's create a new observable so inside the ngo8 method create a variable something const OBS test and at the end of this variable name just add an dollar symbol so usually we create observable variable something like this this is just a naming convention with this we can easily identify the observable variables so this is not a mandatory requirement this is just a naming convention all right after this equal sign new observable with this we are creating a new instance of the observable class so after this add the parenthesis now this Observer required an observer function as a parameter so inside this parenthesis let's create an arrow function Observer and arrow function now inside this function simply log this console.log inside brackets printed from observable perfect now save this and back to the browser we are now inside the home component so now look inside the browser console we got nothing we supposed to get this lock printed inside the log but we got nothing in order to use an observable we must subscribe to that Observer so let's do this after this we assign this observable to this OBS test with the dollar sign so not subscribe and parenthesis now save this and back to the browser look inside the browser console as you can see here we got this log printed here so this is how we create and access an observer so you guys may wonder what is this subscribe and how this works this is nothing fancy I'll explain this with a simple example this Observer also like a JavaScript function that has some more additional features than the traditional JavaScript functions simply let's create a simple function const OBS test this time without the dollar symbol because this is not an observer after this assign this to a simple function function scope inside this let's log something printed from function so in order to access this function as you guys already know we have to call this function so after this let's call this the function name is this OBS test and parenthesis so this is how we call as JavaScript function right so save this and back to the browser look at this we got this two logs one is from the observable and the other one is from the function so guys as I said earlier observable also kind of a JavaScript function in order to execute a JavaScript function we must call that function the same thing applies for the observable as well so we call a function like this but we call an observable with the Subscribe method so this is what we're doing with this subscribe method nothing fancy very simple so with the subscriber we are calling this observable like this function calling hope you guys got the idea in a traditional JavaScript function if you want to return something we will return that using the return statement something like this return keyword and let's return a string something returned from the function remove this log we don't need that anymore we can capture functions returns something like this assign a variable to this function call const return data now let's log this after this function call save this and back to the browser as you can see here we got this returned value printed here in observable we have a different approach to return values so let's see that in action so remove this log we don't need that like this written statement we have a next statement in observer so this callback function which is this Observer Dot next inside parenthesis we can pass the value that we want to return so let's pass a string value returned from observable so this is how we return something from observable now we have to capture that returning value from this subscribe method so we captured the returning value something like these four JavaScript functions but for observables we have a different approach so let's do that with the subscriber we can capture the returning values something like this insert the Subscribe parenthesis create an arrow function value arrow and the function scope with this value parameter we will get all the returning values from the observable so inside this function log this value parameter that's it save this and back to the browser look at this we got this look perfect right so guys this is how we return a value from an observer using the next Observer method some of you may wonder that we are doing the same thing with the observable and this function what is the difference and what is the use of this Observer so we'll see this in detail about this in this lecture with this function we returned this statement in case if you want to return another statement how do we do that in traditional JavaScript functions we cannot return another statement like this this won't work when we call this function this method will execute until this first return after this this function will stop executing and move forward but in observable we can return as many data as we want so let's see this in action as you know we return something from an observer using this next method so again after this this Observer dot next inside the parenthesis let's pass something this is the second statement if you need another data to return we can again call the next method this is third statement like this we can return data as much as we needed from this Observer so now save this and back to the browser look at the console we got all these three statements printed here but as you can see we got all three statement printed from the observable but in the console we got only this first return statement from the JavaScript function so we didn't get the second return statement so this is the main difference between observable and the JavaScript functions so with this observable next method we can return data as much as we needed so this is what I try to say with this observable definition an observer is a sequence of data that is emitted asynchronously or synchronously over a period of time this is the sequence of data that is emitted or returned over a period of time so with this observable we are returning multiple data with this next method over period of time so hope you guys got the idea what is this asynchronous and synchronous programming synchronous code is executed in sequence each statement waits for the previous statement to finish before executing asynchronous code doesn't have to wait to execute the previous code completely this can continue to run so we do this to keep our site over the app responsive reducing waiting time for the user so mostly JavaScript works as a synchronously when we're learning Observer that I said Observer is a sequence of data that is emitted asynchronously or synchronously over a period of time so we can use the observable asynchronously or synchronously so let's see this in action so we can take this previous example for synchronous programming when this Observer execute first this will execute this next after that this will printed the second next after that this will print this third next so let's look at this in the browser as you can see here this printed one by one in correct order so this is what synchronous program this code is executed in sequence each statement waits to finish the previous statement got it now let's add a timeout function between these so set timeout inside the parenthesis Arrow function and inside this function let's add another next something timeout at last set this time to 2000 milliseconds so if you look at this inside the browser this printed first second and third observable outputs after 2 seconds it is printed this timeout which coming from this timeout function what's going on here back in the vs code when we run this inside browser the browser will first execute this and return this value next let's move on to the second line and return this after this this will execute this timeout function and this will move on to the next line this not wait until this code fully executed so that's why we got this first second and third outputs printed here and at last we got this timeout printed here so this is what we call asynchronous programming with this user doesn't have to wait until this complete once this completed user will get this data this is one of the beauties of JavaScript asynchronous programming so we can use this observable for synchronous and asynchronous situations but mostly we use this observable for asynchronous situations when we pulling data from the database sometimes this will take several seconds to communicate to the database server in that case with this asynchronous approach we don't need to wait until the server responds with the data once we got the data we can show that immediately on our app with The Observers so I hope you guys now have a clear idea about the Observer so in this lecture let's look at some observable methods and how to use the so first let's look at the Subscribe method if you can remember I told you earlier this also something like method of function scrolling yes it's correct but this is a bit different than the traditional method calling when we subscribe to an observer this will create something like connection bridge between this call and this Observer Whenever there is any change happen inside the observable this subscribe method will trigger again and emit that new data to this Valley so as I mentioned earlier this will always listen to the observable and whenever there is anything happens this will automatically get that from The Observer we can get the same example as the previous when we subscribe to this Observer we get these values after 2 seconds again we got this timeout inside the console with this timeout we return another value again with this next method so on that time A change is taking place inside this observable right so therefore the subscriber method will trigger again and printed this value inside the console after this timeout so this is how this subscriber method works another thing if you can remember that I said the subscriber will continuously watch this Observer now we have subscribed to this so keeping this subscribe open all the time is not a good practice in a real world applications we connect to the database from an API and almost every that connection Returns the data as an observable so always keeping this observable subscription can cost memory a lot and can be slow the application so this is not a good practice so we can close the subscription using the unsubscribe method very simple same like this subscribe so the observable is this OBS test with the total sign symbol after this Dot and unsubscribe and the parenthesis and that's it very simple right so in the previous lecture we learned how to pass a router parameter and how to capture that parameter and also we learned about rxjs of circles hope you guys know I have an idea about this observable all right let's move on so in this lecture let's see how to pass multiple router parameters in some cases we may have to pass multiple router parameters to create SEO friendly URLs in previous we send only the ID of the array now let's see how to send another parameter inside the app module TS file inside this this also same as this just after this ID parameter Define another parameter slash we Define router parameter variables with this colon sign so colon with this let's pass the post title right so the parameter variable is something title perfect we have successfully defined on the router parameter variable next let's see how to pass the router parameter value to this URL so inside this post list component es5 we're sending the ID router parameter with this wave button so like this we can send another parameter so after this comma and this time we are sending the post title so post dot idle perfect now save this and back to the browser go to the Post list and click one of these view buttons as you can see here we got this ID and the post title inside the browser URI some of you may wonder what is this percentage sign and this this number 2 and 0. a URL cannot include spaces so when there are spaces the browser will automatically prefix these spaces with this percentage and 2n0 so this is what we got here now let's see how to get this router parameter from the single post component for the single OS component this file very simple this also same as previous we already subscribed to the params map so inside this same subscribe method we can get the parameter like this ID parameter constitute assign Val which is this subscribe variable dot get inside brackets pass the router parameter variable name which is the title that's it now simply lock this title save this and back to the browser now look at the console perfect as you can see here we got this title router parameter printed here awesome right so guys this is how we deal with multiple router parameters in angular so until now we learned about router parameters now in this lecture let's look at how to pass query parameters with angular routers when we're dealing with router parameters we defined that inside the app module file and also if we defined a router parameter we must pass that router parameter when we navigate to that route so this is what we did with this if you can remember in any case if you missed passing the router parameter this router will not work so wait I'll show you an example remove this title value from this and keep only this ID parameter save this end back to the browser now click on this V the router doesn't change look at the browser console as you can see here we got this error saying that cannot match any roles so when we dealing with the router parameters if we defined any router parameter we must pass that parameter when we navigate to that router but this query parameter is different this is kind of like optional router parameters if you want we can pass the value to the router if we don't we can navigate to that router without any errors so let's see this in action we'll do this to post this component router we don't need to modify anything in the router module just go to the app component so we are navigating to the post this component with this post list button very simple for this we have another property binding query params so inside square brackets query parents carefully follow the capital simple letters so this required an object so assign inside double quotes the object with the query parameter list so open and close a curly bracket inside this first let's pass something page number so the key is Page and the value is something one and let's pass another value something order by and value is you must pass this as a string so inside quotes newest mostly we use these query parameters for sorting filtering and for searching and also guys we can pass as many as query parameters with this I just passed two values just for this example right save this and back to the browser now go to the Post list perfect look at the browser address bar in here we got these query parameters we can identify the query parameters with this question mark and with these and symbol we can separate age and every query parameters so we passed the page and Order parameters we got that in here awesome right so now let's see how to capture these query parameters from the process component so back in the vs code this also same as the previous router parameters so go to the process component is file first thing first we need to inject the activated route module to this component so inside the Constructor parenthesis private route this can be any name and colon this type is activated route and select this autocomplete this will Auto Import the path to this module perfect next let's get the values inside the engine in it this dot route which is this injected activated route after this query param map if you can remember when we getting the parameters we use the param map but to get query parameters we use this query param map right okay back to work this also an observable so in order to access this Observer we must subscribe to this query paramap Observer so after this dot subscribe and inside the parentheses pass the arrow function value and the arrow function now with this value parameter we will get this observable values so let's log this save this online back to the browser go to the Post list inside the browser console look at this we got this query params map object inside this we can see this param object inside that record this order and the page query parameters perfect right okay back to the vs code like this router parameter we can access the query parameters also using the get method so this value dot get inside brackets pass the query parameter key name page pass this as a string store it inside of a variable something const page perfect we go to another parameter so const order assign well dot get and the parameter key is order perfect remove this previous log and log these two variables page and the order I'll save this hand back to the browser look at this this time we got this query parameter values printed inside the browser console so guys this is how we deal with query parameters all right now we know how to use angular routing as you know we defined all the routers inside this app Model Ts file this is not a good practice now we got only a few routers so this looks okay but think in the real world we may need more than 10 routes so adding them all inside this app model file this will make our app code more busy and sometimes it may lead to unnecessary bugs and errors as a solution for this we can make a separate model file for this angular routing so in this lecture let's see how to create a separate file for this angular router so let's begin we can simply generate a module file using the angular CLI so inside the vs code integrated terminal open another new terminal and run this command NG G this G stands for Generate now we are generating a module so module after this pass the module name app dash routing this is just a name you can use any name but we are creating a router module so normally we use this name app dash routing for this as a good practice all right after this we have to register this module inside our default module we can add that using the module flag so Double Dash module and the model name is this app no need to pass the world name something like this app dot model.ts just pass the app so after this add a flat flag Double Dash flat this will create this module inside the root app folder without any subfolder that's it now hit the enter to execute this command perfect as you can see here this generated the app routing module and also this registered and this inside the app module file perfect now open this newly created module file inside this we can see the basic code structure of an angular module still this is just an angular module not a routing model so now let's see how to make this as a router module file for routers we don't need the Command Module so remove it from the Imports array and also this import statement now we don't need the Declaration module as well so remove it now inside this module import the router model so as you know in order to work with angular routers we need to import the router module import inside curly brackets router module is coming from the angular core module so now inside this NG model decoration class at this router module as exports so after this exports this also takes an array so array square brackets inside this import array we will Define the routes same as these app modules Imports inside this import array at this router module which is this imported module for root and brackets inside this we can pass the routers nothing new here same as this previous app module import so this time I'm going to create the routes array outside of this and store it inside of a variable then we can pass that variable inside this for root parenthesis let's see this in action create a variable const routes and set this time to angular routes complete and this will automatically import this now assign this to routes array for now just simply declare an empty array now we can pass this routes variable to this forward method very simple and very clean code right perfect now we can add our routes inside this array copy this from the app module file and paste it inside this array all right now we have successfully created the app routing modules file for angular routing go to the app module TS file now we don't need this router module import and these routes we declared them all inside the routing module file so remove it from this Imports array and remove the import statement as well that's it we are successfully created separate router module file for routes perfect save this all and back to the browser navigate to the post list perfect it's working navigate to the single post is also working again now here to the home perfect everything working as previous so this is how we create a separate router module for our angular app before the end of this lecture I want to tell you one more thing if you can remember when we creating the new angular app angular CLI was asked that we using the angular router or not when creating this app I gave no because I wanted to do this from scratch so if you give yes to this angular CLI will generate this routing model for us we don't need to hand code everything from scratch from now on we will use the angular CLI method to generate the routing module file perfect all right now we know how to navigate to a router inside the HTML element using the router link directly think if you want to navigate to a route inside of typescript method how do we going to do that very simple so first create a button the button text will be submit now I want to call to Method when clicking this button for this we can use the click event binding so inside brackets event is Click assign um assign this to a method called something on submit and don't forget to add the parenthesis file and create the on submit method on submit parentheses and the method scope in order to navigate to a route inside the TS file first we have to inject the router's service to this Constructor so inside the Constructor private router this is just a variable colon and the this type is router select Builder complete this will import the router service to this component perfect now inside the submit method and this dot router which is this injected router after this dot navigate and parenthesis inside this as an array with the router link the square brackets inside This chords and the router is slash post for this inside quotes that's it now save this and back to the browser click on this submit button look at this vs accessory navigate to the post list component so perfect think now we want to navigate to the single post components router which required this ID and the title router parameters how do we Define that with this router navigate very simple this markup also same as this router link property binding so inside this navigate parenthesis this array and the first array value is this router path after this comma and we can pass the router parameter values like this the ID is something 1 and after this comma and the title is something post title don't forget to put this inside quotes save this and back to the browser click on this perfect right we successfully navigate to this single post component with this router parameters next let's see how to pass the query parameters this is also very easy packages code after this create an object scope open and close a curly brackets inside this we pass the query parameters like this key is query params this P must be capital this value also requires an object so open and close curly bracket inside this first query parameter is Page and the value is 1. and another parameter order and value is newest put this inside quotes that's it say we send back to the browser once again click the submit button perfect right we navigate to this with these query parameters so this is how we navigate to a router programmatically hope you guys got the idea in angular router we can Define the 404 routers if you wonder what is this 404 this is the error code for page not found if someone visit the router which is not declared in the angular app it will redirect to the main router that's why we are getting this form component now let's see how to add a page not found wildcard router in angular we call these 404 routers as wildcard routers so let's see this in action first let's create a four notebook component inside the integrated terminal NG g c the component name is something 404 this is gesture name you can use whatever the name that you want hit the enter to execute the command now let's define the wildcard router very simple duplicate this router object the path will be two asterisks and the component is 0.4 component we Define the wildcard router path like this with this we are saying if the browser URL is not matched with any of these Define router so show this 404 component inside the browser that's it very simple right so now save this and back to the browser go to something different URL as you can see here we got this 404 component perfect right wait before the end of this lecture I want to tell you something always and this file called router end of your router list if you add this top of this this will show the 404 component for all of this router which I'll show you this remove this from here and paste it top of this router list save this and go to the browser look at this every route we visit we got this 404 component so always make sure to add this button of your router list perfect so this is how we deal with a wildcard or 404 or page not found routers in angular all right this is the end of this section in the section we learned almost everything about angular routing and navigation in detail from top to bottom I know this section is a bit harder than the previous section so if anything is not clear repeat this section again and if you have any questions please don't hesitate to ask in the Q a area I will be there always for you visit we'll meet you in the next section always remember learn smart not hard