Transcript for:
Angular Basics

what's going on my dear friends today in this video Let's Learn and master the angular framework latest version so let's get [Music] started welcome back everyone I'm excited to share this completely updated angular course designed specifically with beginners in mind we'll be diving into the fundamentals exploring the latest angular features and building practical projects to solidify your understanding this is just the first part of comprehensive Series so stay tuned for more in-depth lessons and exciting challenges so let's get started on this Learning Journey together so guys when we develop a website we have to consider two sides the front end or the client side and the back end or the server side the front end loads inside the browser and the server side will load inside the server right so the end user will see only this front end side of our website inside the browser so guys in a website the front end will handle the user interaction and the back end or the server site will handle all the data response we build the front end traditionally using HTML CSS and JavaScript hope you guys already know about this so guys we use HTML to build the structure of our we page and use CSS to make our web page or the website user friendly by adding colors fonts layouts and so on so using JavaScript we make our website functional think this is something like the human body the bare bone or the skeleton structure of an human body is similar to our web page HTML structure the CSS is something like our skin and or our dresses and JavaScript is like our brain so in our body the main command center is the brain right so like that we handle our website commands and the user experience using the JavaScript for example if you want to show an alert when the user clicks on a button we use this JavaScript if the user wants to change the color of uh the website by clicking a button so we can also do this by using JavaScript so guys in JavaScript we call this Dom manipulation so the Dom stands for document object modu inside of the web browser so hope you guys know about this if any of you guys don't know about JavaScript you guys can learn about JavaScript with my JavaScript full course you can find the links in the description all right so guys manipulating this Dom using the JavaScript is not an easy task it's very buggy and time consuming so as a solution for this big companies like Google and meta formally we call this Facebook right so came up with their own solutions for this so Google developed uh and introduced angular and meta developed and introduced react so guys the biggest question is what is is this angular so guys angular is a frontend library built using JavaScript developed and maintained by Google so guys please carefully note this angula is not something new it is built using JavaScript not any something new programming language right so the main objective behind this angular framework is to speed up and improve the developer experience so guys when we developing an angle La basically we used this same approach HTML CSS and JavaScript with a little bit of syntax changes the only thing is we don't need to write all the JavaScript codes from scratch angular framework has pre-built method and techniques for this if you guys are familiar with CSS Frameworks like Tailwind CSS or bootstrap CSS and we have to make a text color to Something red by using these CSS Frameworks we can make this text Red by just simply adding the text color red utility class to our HTML element so we don't need to write the CSS codes from scratch so angular also the same like this for example think if you want to show something dynamically load the username inside of this H1 tag in pure JavaScript first we have to give an ID to this H1 tag then we have to capture the H1 tag using the get element by ID method right so after this we have to insert the username inside the H1 tag using inner HTML JavaScript method but guys in angular we can simply load this user name value inside the H1 tag something like this inside of two curly brackets we can simply access this variable and this will render this username inside the browser weave so we don't need to write lines of codes like pure JavaScript so this is what I was trying to tell you guys angular is a JavaScript front end framework that is used to develop web applications more robustly so hope you guys got the idea so guys what is this Spa this Spa stands for single page application a single single page application is an app that doesn't need to reload the page during its views 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 spba applications let me show you an example go to the gmail.com after you log to your Gmail account you can see your inbox and click one of your emails if you look at this carefully you can see this will open you can see this will open the email without refreshing the page this is what single page application so what is going on here so guys most of the resources of uh Spa application needs like HTML CSS scripts are loaded at the launch of the app and don't need to be reloaded during the usage the only thing that can change us is the data that is transmitted to and from the server as a result the application is very responsive to the users queries and doesn't have to wait for client server communication all the time one of the best advantage of spa is the user experience and the speed the user enjoys the natural environment of the app without having to wait for the page to reload load and other things you remain on the same page which is powered by JavaScript programming language so we can build or develop SPS with most of the modern JavaScript frontend Frameworks including angular so guys we can identify angular apps as a spa or single page applications the angular C is a command line interface tool that is used to initialize develop scaffold and maintain angular applications directly from a command Shi in other words if you can remember I told you that angular is a JavaScript framework this framework has default pre-built files so 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 application without any problem with a single line of command not only that guys but browser also doesn't know angular so at the end of the day we have to compile angular to JavaScript or we have to build an angular app to production so we can build the angular app using the angular cln likewise we can update maintain scaffold develop an angular app using this angular cln so hope you guys got the idea so guys in order to use angular CLI first we have to install angular C globally on our computer to install angular CLI we need node package manager so the node package manager bundle with the nodejs go to the nodejs org and simply download and install this recommended version of the [Music] nodejs so after this installed we can install the angular CL so all we have to do is just run this command inside your command prompt or The Terminal so the command is npm install dasg at angular SL CLI if you on a Mac add pseudo beginning of this command otherwise you guys may get security permission errors so PC users don't need to modify anything just simply run this command so this command will install angular C on our computer globally this G flag stand for Global okay this npm is the node package manager and this is the installing package name angular C so hit enter to execute this command all right guys we have installed angular CLI on our computer now we can use the angular CLI commands to work with angular framework Perfect all right now we have installed the angular CLI so now we can generate a new new angular app using the angular CL so guys before we begin in order to generate our new angular application we need a project folder so for this course I will create my project folder inside my computer desktop so it will be easy for me to demonstrate this process so guys this is not mandatory to create the project folder always inside the desktop you guys can create this wherever you guys want when you're working with real world and yellow projects for this course only please follow these steps exactly same as mine so you guys also create your project folder inside the desktop so we can prevent unnecessary bugs and errors okay inside my desktop I created this folder and named it angular full course now inside this uh we'll generate our angular application so let's um restart the previous command on front now inside this we can run the angular CLI command before we run the angular CLI command first thing first we have to navigate our Command Prompt path to our project folder so for this we can use the CD command so inside this first navigate to the desktop so CD and desktop hit enter now we are inside the desktop so after this again CD and the project folder name is angular full course hit enter now as you guys can see here we are inside our project folder awesome right so now let's generate our first angular project so guys in order to generate new angular project we have to use the angular CLI so the angular CLI command is in and in order to generate a new angle app we have to use the ni command so NG new after this we have to pass the project name something first angular app guys keep this in your mind when we naming our angular projects don't use spaces between project name words right so something like this first space angular space app as a good practice instead of space use dashes or we can use the camel case naming convention something like this first letter is lower case and each other words start with uppercase letters first with lowercase f and after this second word angular with uppercase a and the app with uppercase a so between these words no spaces okay um I prefer usually the Slash method so I remove this and the project name is first Das angular Das app so you guys can either use the camel case naming or the dash naming method but once again keep this in your mind don't use spaces all right so this is the command for creating a new angle app using the angular CLI so after this it enter to execute this command now as you guys can see here the angular CLI is asking that with our angular project which method of CSS are we going to use the r CSS or css preprocessors like CSS SAS or less so guys in our case we will use the CSS throughout of this course so select the first option CSS and hit enter by the way guys uh you guys can navigate through out this using the arrow up and down keys right so so now we have another option to enable the server side rendering or the SSR in our angular project so guys this is our first angular project in this section we are not focusing on the SSR or the server side rendering so simply give no to this I know guys uh this SSR is may be something new to you don't worry about that in later sections we will cover up a to about this in detail so give not to this just type n and hit enter now guys this will generate our new angle app by downloading all the required files and dependencies this may take several seconds to minutes depending on your PC or the internet speed all right guys we successfully generated our first angular app so now inside the project folder we can see our first angular project inside this folder we can see these folders and files so guys don't worry about these files and folders I'll be going through each and every folder and file in detail in the later section so in this lecture let's see how to run our angle app and load inside the browser so guys let's open this inside our code editor which is vs code so we can open this right click on the angle project folder and select this option open with vs code or we can open the vs code first and we can open the project by navigating through the vs code menu options so once we open this inside the vs code we can see all our angular files and folders inside this vs code file tree we'll come back to this in a later section now let's see how to compile this angular project and open this inside the web browser for this also guys we can use the angular CLI command so how do we do that so angular CLI is a command line tool right so in order to run the angular CLI command we need a command front so like the previous that we run the engine Command right so like that we can use the command prompt but for this as usual first we have to navigate to the project folder CD desktop CD angular full course then again in order to run the ca one we have to navigate inside our angular project as well so after this we can run the app from this path but guys this is a bit annoying right uh for this we have a simple solution we can use the vs codes integrated terminal so what is this integrated terminal guys this is not something new this is also the same default command prompt in our computer but with this we directly open our command from inside our project folder so no need to navigate to the project path from the beginning so let's see this in action we can open the integrate terminal by going to the weave menu and selecting this terminal option the short code for this is this control or the command key with the med symbol so click on this terminal option and this will open the integrated terminal bottom of the vs code so guys I'm using Windows so by default this open the pow shell but this PO shell will not work with NG or the angular CLI commands so I change this to Windows command prom we can change this by clicking this drop down and select the command prom this will open a new command promp so now I don't need the power shell so I can delete this by clicking this trash icon perfect so now we have have successfully opened the V code integr terminal next let's run our angular app for this as I said previous we can use the angular CLI so inside this terminal run the angular CLI command so what is the angular CLI command for this yes of course it's NG now in order to run the application we have the serve command in angular C so if you can remember we used the new command to generate the new angular app so likewise we can use the serve command to run our angular application so after this NG type Ser hit enter to execute this command so guys this will compile our angul app and run our angle app on a local development server at the initial run this may take a bit long wait until this finish once it has done down here you can see this local development server URL local lost colum 4,200 by default angular application will run on this 4,200 Port okay now we can access our angular application by visiting to this URL so copy this and paste this inside the browser so guys throughout this course I will be using Google Chrome as my default browser so you guys also use Google Chrome to follow this course so this will minimize unnecessary bugs and errors all right so so inside Google chrom's address bar I paste the angular development server URL local lost colon 4,200 and hit enter this will load the application as you guys can see here this loaded the angular default boiler plate design so guys this is the default view of our angular project perfect right so guys this is how we run angular applications so guys in the previous lecture we successfully ran and loaded Dev application inside our web browser which is Google Chrome right so okay some of you may wonder why we have to run our angle app using the angular CLI so guys when we learned what is angular I told you guys that angular is a front end framework built using JavaScript right so this is not new most of the time we'll write all the Logics in JavaScript but angular has some of its own unique syntaxes for manipulating the do for example let's look at the same example that we used before so let's see this so guys for this I have created a separate project folder called JavaScript example and inside this I have created an index HTML file so let's use uh this for our JavaScript example I already opened this inside uh of another vs code window so now let's focus on uh the ex example I created an H1 tag inside the body and so in JavaScript if I want to load uh text inside of an H1 tag dynamically first thing first I have to Define an ID for this H1 tag right so after that I have to capture this using the JavaScript document module inside of the script scope document. getet element by ID and assign this one variable something title so now after that we have to append the text that we going to show inside the H1 tag using the JavaScript append method right so guys I moving little fast on these pure JavaScript codes because I hope you guys all have a basic knowledge of JavaScript and and explaining javascrip code from basic is not a scope of this course so in any case any of you guys don't understand this just leave it I'm just using this JavaScript code only in this lecture to explain how angular Works behind the scenes all right so now let's open this inside the browser very simple go to the project folder and double click on this this will open this index.html file inside our default browser directly in here we can see how H1 text loaded using JavaScript guys this is the traditional way of doing this using Manilla JavaScript but in angular we can do this something like this so let's write this code in our angular project guys just look at this code uh I'm just going to explain how angular codes work behind the scenes you don't need to follow the code or understand these codes okay we will learn how to do this all in angular in later sections this is just for the example okay all right so inside the component T5 we got our boiler plate code for now I removed all the code and inside this I created our H1 tag now what I want to do is I want to load this heading tags text dynamically so inside the app component T file I create the variable something called title and I assign the text something this D Dynamic title now I want to load this title variable inside the VI for this we do something like this inside H1 we use two curly brackets we can pass the variable name that we want to show inside the view now between these we can pass the variable name that we want to show inside the view so as you guys can see here we can see our H1 text inside the browser so guys the question is how this loaded inside the vi when we use JavaScript the browser knows JavaScript codes so the browser will automatically compile the JavaScript code and load the view inside the browser in a man JavaScript project we will not run any extra command line code to execute the JavaScript code inside the browser and we just simply open the HTML file inside the browser directly right so go uh because the browser only understand HTML CSS and JavaScript browser doesn't know about angular codes so therefore first thing first we have to convert the angular codes into browser friendly JavaScript code for example in here we use something shorter version of special angular syntax to load the text inside the H1 tag so this is the angular syntax in order to run this inside the browser we have to convert this code into a JavaScript code this is what the NG serve does when we run the NG Ser angular CLI command angular compiler will convert not only this one syntax but the entire angular project into a browser friendly HTML CSS and JavaScript so that's why we need a extra step to load an angle app inside of a browser so some of you guys may wonder if we again convert this angular code into a JavaScript code what is the use of angular rather than writing Manila JavaScript guys not only angular but all other front end Frameworks have also been developed to speed up the development process of a web application think if we write this using only Val JavaScript we have to write several lines of codes but in angular we did this within this simple angular syntax this just only a simple example guys no words to say how angular and other frontend Frameworks improved the developer experience while you guys following this course you guys will understand the use of this angular framework hope you guys got the idea perfect let's move on to the next chapter all right in this lecture let's look at our angular projects file structure let me learning angular it's important to know what are these files inside of an angular project and what is use of these files so let's go through this file structure one by one as you guys can see here inside the file tree we can see a few folders and files so first we can see this dot angular folder so guys what is this this is the folder where an angular stores or cash the angular project compile data as you guys know in order to run this angular project we have have to build or compile using the NG serve command so when we run this app first time or in the initial stage this will automatically create this do angular folder and store basic information file paths and required metadata details inside of Json files so after that angular compiler speed up the buildup process by using these cache files this is the simple use case of this angular folder guys we don't need to worry about this folder because we will not touch this folder this folder is only used by angular compiler we will see what will happen if I delete this folder and serve the angular application again as you guys can see here this automatically created this folder again so this is what I was trying to tell you this file is created and used by the angular compiler all right let's move on to the next folder we have uh the vs code folder which is this also like the dot angular folder this folder is nothing about angular this is created by BS code or code editor by default to store the necessary vs code configurations for this particular angular project so next we got the node mod folder guys this is not like the other folders this folder is very very very important the total angular ecosystem is stored under this folder so it's simple all the required dependencies and all the angular Frameworks files are stored inside this folder so if I expand this inside this as you guys can see here we have so many folders and files these all files are required by the angular framework so without these files angular will not work um wait I'll show show you this I just simply delete this folder as you guys can see here once the delete process is completed we got some compile errors inside the terminal and also inside the browser our app broke or crashed if I try to reserve our angular project as you guys can see here we get some compile lers stating that there are missing files so this is what I try to explain to you guys in order to work with angular we need this folder but guys we will not touch this folder as well this folder will be totally maintained by our angular framework you don't need to touch this folder okay hope you guys got the idea all right next we got the SRC folder I'll skip this for now and we'll come back to this in a minute CU this is very very important folder in angular right so next down here we have some files let's go through these files one by one the first file that we can see here the editor config file this file also contains configuration details about the code editor this file is also not very important next we have the dogit ignore file this file is basically dealing with the Git Version Control this file specifies that which files so folders should ignore when we dealing with version controls so don't worry about this we have a dedicated section about this Git Version Control in that section you guys will get used to this okay next we have the angular.js file guys this is uh the heart of an angular project this file contains and controls all the dependencies structure of our angular application and also this contains how to compile our application and more details this is like uh this is like the brain of our angular application this file is very very important as you guys can see here this contains the index file of our angular app as you guys can see here this contains all the details about our angular application we have to upload the compile angular files where is our assets what is our stylesheet and configurations details and more so guys as I said without this file angular is like a living dead man like a zombie so therefore this file is very very important also guys we will not touch this file as well we will not modify or remove anything inside this file otherwise this will lead us to unnecessary problems and bugs hope you guys got the idea all right so let's move on to the next file next down here we got this package lock Json file and package.json file as this contains all the dependencies and packages that are required for our angular project first let's look at the package.json file as you guys can see here this has a few Json objects at the top we have some meta details about our angular application and our application name if you guys remember we named our angular project name as this when we generating our angular application using the angular CL right so next uh down here we have the version number and we got the script details actually what is this nothing much guys if you guys can remember we use the NG Ser command to run our angular application so this NG Ser command is defined here so guys not only the NG command we can simply use the start command or so to run our angular application so let's say this an action so guys for the angular CLI we use the NG command but for this package Json script we have to use the node package manager so inside the terminal and this command npm so this command is for the node package manager right so the script is this start now hit enter as you guys can see here we are getting some compile errors why are we getting this if you guys can remember in the previous lecture we deleted the node modeles folder that's why we are getting these errors for now just simply ignore these errors we'll come back to this in a minute so as you guys can see here when this npm start command executing this will look inside the packages file start script and execute the start script value which is the NG serve command so if I change the command to something test again let's execute this npm start as you guys can see here this time this executed the test command that we defined here so this test is not a valid command so that's why we are getting this error hope you guys got the idea so like this is uh the all of other commands also same as this when we develop an angular application either we can use the NG commands or we can simply use the npm or this package Json commands but even if we run these npm commands but in the end this is running the same NG or the angular CLI commands so hope you guys got the idea all right next let's uh we can see the dependencies thison object and this de depes Json object so guys this is the total collection of dependencies that we need for this angular project as you guys know I deleted the node mod folder in the previous lecture now we cannot start our angular application so in order to fix this we can reinstall or the download the full node modules folder again so by using this dependencies object we can redownload all the required dependenc is for this angular project right so for this simply we have npm command npm install so inside the terminal let's run this command npm install so we can use uh the short form of this npm I so this command will look this I stand for install so guys this command will look inside the dependencies object and this dependencies object redownload all the required packages inside the node modules folder once this is completed as you guys can see here we get the node M folder and inside that we get all the angular required dependencies like previous if I run our angular application again using the angular CLA command NG Ser as you guys can see here this time our angular project compiled and run without any problems so Guys these dependencies these and objects are very important so we will not touch or modify these dependencies objects even if we lose one of these our angular application will not work hope you guys got the idea all right let's move on next we have the readme.md file which is just a readme file that includes some Dev in information about our angular project next we got these T script configuration files TS config app.js TS config.js and TS config spec. Json file so guys angular is a JavaScript framework right but when we deal with angular we will write typescript codes because angular is based on typescript by default angle is using typescript right so those who are don't know about typescript it's a super set of JavaScript basically typescript also same as JavaScript but typescript has some additional features that that are not coming with JavaScript okay so we have dedicated section about typescript you guys will learn A to Z about typescript in that section so guys as I said these all contain the configuration details of typescript all right so that's it we covered all the files and now let's move on to the heart of an angular project which is this SRC folder all right guys now let's go through the source folder or the SRC folder so guys this is the heart of an angular folder we will spend time inside this folder throughout this course and we will mostly work inside this folder right inside this we can see these two folders and files first let's look at these file files first one is this F icon this is the main icon image of our angular website right so next we have the index.html file this is the main index file of our angular application this is the file which loads inside the browser next we have the main.ts file this is the main typescript file which renders the app component file inside the browser VI right so guys uh just simply get an idea about these files in the section we will learn in detail about these files so next we have our Global CSS file styles. CSS file we will write all the global CS styles of our angle application inside this file next let's look at this assets folder this is uh basically stores the media files such as images external Javascript files videos and so on next uh the app folder this is is the main component folder of our angular project we will store all of our angular project component files service files module files inside this app component so guys inside of this SRC folder also we will not touch most of these files we will only work within this app folder so inside this by default we have few files um so guys angular is a component based front end framework by default we have our main entry component which is this app component right so basically angular component has three major files and an optional file which are the HTML file CSS file and the typescript file the optional file is this component spec component spec. ts5 this is for the unit testing so this is the main component which renders our view inside the browser we will Deep dive into this when we learning angular components all right so next we have the app config DTS file basically we use this to configure angular modules and next we have the apps. TS file this is the file where we Define all our angular routers don't worry about these technical terms and words while you follow this angular course you will get used to this okay so guys I think uh that's the end of the all files inside of this angular project so guys some of you guys may not get the overall picture of an angular project file structure don't worry about that you guys will get used to this all right so let's move on to the next chapter all right guys in this section let's learn about angular component so first thing first what is this angular component the angular framework is a component based front end framework so the main building block of an angular application is angular components without components we cannot build a proper angular application so what is a component the component is a combination of data HTML template and logic which represents an area of a view that shows inside the browser this is the view that users can see those components are loaded inside the browser so let's look at a real world example so if I take the Facebook layout as an example so Facebook has the top na bar this right side bar left side bar and this Facebook wall which shows Facebook post right in angular we can create separate components for each of these layout areas we can create reusable components so for this nabar we can create a nabar component for each sidebar this left and right we can create separate sidebar components and also for this post list we can create a main post list component and also inside this we can create a component for post list in angular also we can create this Facebook layout using only one page like traditional web designs so we add all the markups for the Facebook homepage including the NAB bar sidebar and the Post Falls codes inside a single index x. HTML file right so like this in angular also we can add all the markups for this Facebook homepage inside the app component HTML file but guys trust me it's not a good practice in angular CU in angular we can create separate components as I said earlier angular is component based front end framework so if we create separate components rather than put all in one component we can reuse those components again in our application without coding it again wait a minute what is this reusable thing for example let's take the same example as previous in Facebook this nowbar must be shown on all pages in this homepage and if you navigate to someone's profile on that page also we can see this nwor so guys if we are not using this na as a component we have to copy and paste This na code on all our web pages so if you use the angular component for this we can reuse this n component inside all the pages by simply importing the component to that page we don't need to repeat the code for the AA again and again hope you guys got the idea a small task for you guys go to these websites and try to identify different component layouts inside that websites first uh go to the Gmail inbox layout and try to identify the components and also go to the apple.com and identify the all components all right so let's analyze the Gmail inbox as usual guys at the top we have the na component and the left side we have the left side bar and the inbox menu the right side we have the right sideb component with the widgets panel in the mid we have the inbox mails list component if we click this compost button this will open this new message we consider this also as a component right let's look at uh the Apple website as usual top here we have the Nar and here if you click on this search this will open the search component after that we have the card component and down here uh first we have the EO section for this also we can create a separate component after this features categories and this carousal or the slideshow so for these each and every section also we can consider it as a separate components and down here we have the footer component guys as we learn website is a combination of different components and each layout section can considered as a component hope you guys got the idea perfect so let's move on to the next chapter all right so hope you guys now have an overall idea about components as I said earlier angular is a component based framework so in order to get the full advantage of an angular app we have to use this component approach right so by default angular generated this app component files and guys this will be the main root component of our angular application so open this app component HTML file inside this we can see these boiler plate markups so Guys these markups are the responsible for this boiler plate weave inside the browser so guys how do we get this V inside the browser if you guys can remember in order to load an angle app inside the browser we have to run our angle app for that we use the NG Ser command so this command will compile the code into browser friendly code and create a development server and this will give us the development server URL which is this local lost coron 4,200 if you visit this URL this will load the re inside the browser my development server is still up and running that's why I can leave this page otherwise this will not work so guys always make sure that your angular development server is up and running otherwise use the NG ser command to rerun the application all right so as I said this default view is loaded with this app component HTML files code uh wait I'll remove this all and add a simple H1 tag and add the heading text first angular app okay now again save this and go to the browser as you guys can see here the previous default we change and this time we got the new view with this first angular app text so now you guys can clearly understand this is the code loaded inside the browser view so guys uh now you guys may wonder how this code or the angular component is loaded inside the browser so let's clear this uh look at this code inside the browser developer console so guys how do we open the browser developer tools just simply right click and inside this go to the elements TP inside this we can see this page HTML code expand this inside the body we can see this app Root tag and inside that we can see this H1 tag which was written inside the app component HTML file if this page loaded the app component HTML file how this HTML structure loaded here and also we can see this something different HTML tag app- root in HML tags there is no any known tags named as app Root right so what's going on here to find the answer to this go to the EVS code and open the index.html file guys in angular this is the main HTML file that loads inside the browser not the app component HTML file then how the app component html's H1 tag loaded inside this we as you guys can see here this app HTML tag inside this body tags this is where the magic happens so guys as you know this is not a known HTML tank this is something custom tank right so what is this guys this is the component selector of the app component I'll show you this open the app component ES file inside this we can see this app Ro under this select option so this is the identifier of angular component in order to load a component VI inside the browser we use this selector as a custom HTML tag right so when our angle app loads inside the browser by default this will open this index. HTML file inside the browser inside this we get the app component selector which is this app rout when we compile our angul app using angular CLI angular compiler will automatically modify our index X HTML file and inject the relevant components HTML code inside this component selector Tex and this will open this modified index. HTML file inside the browser so if I change this selector name to something Appo test inside this index file save this and go to the browser as you guys can see here this time we got nothing here if I go to the console tab we can see this error that says no matching element for app Root selector in order to load a component inside the vave we have to use the component selector name exactly as it is once again guys when running our angular app angular compiler will compile our angular app when compiling the index file angular compiler see this component select if there is a component selector angular compiler will modify this index file by injecting the components HTML code inside this component select a custom HTML element at the end angular compiler will load the modified index.html file inside the browser VI so this is how the angular loads the component inside the browser VI so hope you guys got the idea so now hope you guys have an idea about the AG component and how it loads inside the browser now this lecture let's see how we can create a component in angular when we deal with components in angular we have two methods one is the arest way and another one is the easiest way so let's go with the hardest way then we can understand all about angular components code structure then we can use the easiest way so the hardest way to create a component is the create all the files and codes of angular components from scratch so let's do this uh first thing first let's create our first component guys as I said earlier when we develop an angular project we will only work within this app folder we will not touch any other folders okay so inside this by default we have this app component now what I want to do is I want to create a nowar component so right click on this and first let's create the folder for this the folder name is naar I created this folder because it will be little more organized than the putting all component inside the same folder right all right now inside this nowbar folder let's create our component again right click and select this new file option now the file name guys when we name an angular component file we have to follow this naming convention first we have to add the component name which is in our case nfb after this dot component and at last we have to pass the file extension in angula we use typescript instead of JavaScript so the file name extension is TS so after this TS that's it so now open this file as you guys can see here this is an empty file guys don't get confused this is still not an angular component this is just a simple typescript empty file in order to make this an angular component we have to follow three steps first thing first we have to import the angular components module into this file so let's do this at the top of this page add the import statement import inside curly brackets the model name is component with capital c so follow the capital simpol letters carefully next uh from and we have to pass the path of this module so inser codes this path is at angular SL Coe this is coming from the angular core module that's it so we successfully imported the angular component module next um before we move on some of you guys may Wonder actually from where is this component module I imported here we Define this path but there is no folder that we can find inside the root folder of angular so where's this component module file nothing much guys it's very simple if you guys can remember I told you that all the angular framework files and modules will be downloaded and stored inside of the node modules folder right so inside this node mod folder you can find the at angular folder inside that we can find the co folder so this is the path that we defined here but again some of you may question me this folder are inside the node modules folder but in here we have not added the node modules folder part before this import part then how this work it's very simple by default angular knows every module that we importing to the angular is listed inside the node modules folder so we don't need to add the node modules folder before or this import path when angular see this import angular will automatically look inside the node modules fold hope you guys got the idea so the first step is completed we successfully imported the angular component module to this DS file still this is not a component so we have to follow the Second Step so as the second step we have to use this imported component module so let's see how to use this very simple down here add this code at component parenthesis and this required object parameter so open and close curly brackets inside this object we can Define the data of our components in here we have to pass few data so first thing first we have to add the selector of this component as you guys know this selector is very very important without this we cannot load this component inside the browser view so inside this the property key is for the selector is selector so after this colon and the value is uh the selector for this nowar component is nowar so pass this inside of codes so guys as a good practice in angular we prefix the component selector name with app keyword something like this app- nowon if this component is sidebar so the selector will be app dash side but right guys this is just a good practice in angular without this prefix all also this will work without any issues right so next we have to define whether this component is a standard on component or not in the previous versions of angular components are not Standalone but in angular 17 and up by default they made angular components as Standalone components so in here we have to Define that the key is stand alone and the value is true if you want to make this component stand alone we use true otherwise we can pass false guys don't worry about this uh stand component in the next lectures we will learn about this feature in detail so for now just keep this in your mind how do we Define stand components in angular perfect so that's all for this second step all right let's move to the third step as the third step or the the last step we have to create the component class so down here class keyword and the class name the component name is Navar and the class Cod so guys same as the select naming convention for this also we use the app prefix as a good practice uh for the selector we use all lowercase letters and we combine the both words with dash symbol but uh for the class name we use the camel case naming convention so first letter of two words are uppercase no iPhone or dashes between two words at nowb that's all so guys now this file has officially been converted as an angular component so guys we successfully created our first angular component let's see how to load this component inside the browser view as you guys know in order to load an angular component inside the browser view we have to add that component selector inside the index.html file this is how this app component loaded inside the browser right so using the same approach let's try to load this component also inside the browser view all right in order to load this nowo component inside the browser view we have to add the component selector inside the index.html file so go to the index. HTML file file and add this selector so after this Appo selector so our nowar component selector is app- now add this as a custom HTML tag we successfully added the component selector now save this all and go to the browser we have got nothing here we can see only this first angular app text which is coming from the app component file so guys what's going on here can you guys guess if you can remember in the naar component we just only created the component there are no HTML codes to load inside the we right so how do we add the HTML code here for this in angular components we have two approaches so let's uh first look at the first approach so guys inside the component file we can write our HTML code for this we have a special property called template so inside this this also same as this uh select option so we can pass the template property inside this component decorator so after this let's pass this the property key is template and the value uh inside codes now we can pass uh any valid HL codes insert this codes as this template property value so let's uh open and close H1 tags and they set the value to something never component all right now we have the HTML code to show inside the browser view so let's save this and go to the browser look at this guys still we got nothing we have the HTML code and also we added the component selector name inside the index of the HTML file as well so now what is the problem so guys the problem is here we are trying to access a separate component file from this index.html file so the problem is index.html file doesn't know about the existence of this naar component file so what do we have to do is the first thing first we have to create a connection between this index.html file and with the now component file so how do we do that very simple for this we have a separate file in angular which is this main.ts file so go to this main. file and open it inside this as you guys can see here we have something method called boostup application so this method gets two parameters one is the app component and other one is the app config so what are these as you guys know now the HTML code which is inside that comp important file is loading inside the browser so this is loading inside because of this as you guys know in traditional website we sometimes write external Javascript and CSS in a separate file so in this case in order to apply the external Javascript and all the C Styles we have to link those separate files into the index.html file otherwise index.html file doesn't know about existence of the separate files so then only browser will understand there is another separate JavaScript file and it will read the separate uh JavaScript code and apply the Logics inside the browser view so the same thing happening here with this boostup application method also we are kind of linking the external compound file with the index HTML file which is not exactly the same what I'm saying this is not linking like a separate CSS or JavaScript file this is more than that but for for now just simply keep this in your mind with this bootstrap application method we are connecting the external component files with the index.html file so this is what happening with this bu application method so hope you guys got the idea so as I said earlier so inside the browser view we got this app components text so this is loading inside the browser because by default the angular is connected the app component with the index. file so as you guys can see here inside this boostrap application method we are passing the app component as the parameter for this method so that's how these app components weave is loaded inside the browser so now what we have to do is we have to show the now component also inside the browser for this we have to pass the N component to this boostrap application in order to render the N component inside the browser so how do we do that just for now simply pass the N component as the second parameter for this boostrap application so first thing first in order to pass the ne component to here we have to import the now component file to this main.ts file so how do we do that very simple just the top of this page after the Imports add this code import open comp close curly brackets so this time we are importing the nbar component so the Nar component name is app navb so after this we have to pass the path of the Navar component so after this from inside codes the component is inside the app folder so do slash app slash no. component also guys we don't need to pass the file extension Dots here angular we already know this is a ts5 guys we have a problem here as you guys can see here we are getting this red underline under this app n so guys this is uh the compile error so what is the problem here so let's hover on this and we can see this error saying app nowar is declared but its value is never read so what is the the problem here so guys this app nowar is this class that we defined inside the nowar component is file uh in order to access this class from another file we have to export this class in here we are not exporting and this class is private so in that case we cannot access this app NAA class from this main. ts5 that's why we are getting this error so in order to fix this uh add the export keyword before this class name that's it so save this and go to the main.ts file now as you guys can see here the error is gone perfect now guys we have the input now let's pass this now component to this boostrap application method as the second parameter so after this app component parameter add the app n wait a minute guys again we go to another compile error under this app config we can see this red underline if I over on this we can see this error this error is saying expected one two two arguments but got three so what is this error so guys this Bo application method requires only one parameter or two parameter but here we are passing three parameters so that's why we are getting this compile error so in order to move forward we have to change this parameter count to two parameters so let's remove the app component from here and as you guys can see here now this is okay so I think that's it for this we successfully linked the app component to the index HTML file so guys now save this and go to the browser as you guys can see here this time we are not getting anything inside the browser so what is the problem this time so in order to find this problem we have to look inside the browser console so we are not getting any compile errors inside the code editor and also inside the integrated terminal but inside the browser console we got this error saying this app nowar component is not marked as stand alone so now what is this error from angular 17 and upper angular by default changed all the component as Standalone components so in previous versions of angular the components were either Standalone or non Standalone according to our choice and by default the previous versions of angular components are non stand alone so from angular 17 angular components are now stand alone in order to use the angular components we have to Define that this n component is a standalone component or not so in order to fix this go to the N component is file and inside the same component decorator we have to pass this property the property name is Standalone carefully follow these Capital simple letters and the value is true so that's it this will fix this error so guys I'm not diving deep into what is the is standard component so we have another separate dedicated section for this in that section you guys will learn about this in detail all right so let's move on sa this and go to the browser as you guys can see here this time we can see the Nar component T inside the browser which means this is successfully loaded the now component inside the browser all right so so before we move on some of you guys may notice that inside the browser this time we only got the nbar component text but we are not getting the app component files H1 tag which is this first angular app so now what is the problem can you guys guess yes of course the problem is previously we removed the app component from this boost up application method and we replace that with the N component so that's why this time the index. HTML file doesn't know about the app component so the angular CLI also knows only about the nabar component so that's why this loaded only the nabar component text inside the browser web so guys but guys I want to load the app component also inside the browser so how do we Sol that in a real world angular application there will be hundreds of components inside of a single project so in order to show all the components inside the browser view if we use this method we can't do that because for this boostup application method we can only pass one component at a time so this is a big problem right so as a solution for this angular is by default giving us this app component as the angular projects Road component so guys when I describing these files tree and this main.ts file I said we will not touch all these files we only work within the app component folder so I modify this main.ts file to give you an understand how does the angular loads components inside of a web browser so that's why I modified this main.ts file otherwise we will not touch this file so hope you guys got the idea so guys when we develop an angular application we will keep all this default files as it is and we will work within the app folder and we will create all the components inside this app folder and what we will do is in order to load those components inside the browser we will Nest those components using the our main root component which is the app component so now let's see this in action before that I will reset all the modified codes inside this main.ts file so remove this uh now component in puts and this parameter after this add the the app component here now inside the index.html file remove the N component selector uh that's it so save this all and go to the browser as you guys can see here this time this loaded the app component text which is this first angular application so now let's see how to nextest components so guys think this uh is like something a big box inside of that big box we will stack small boxes right so the app component is uh like the big box so inside that we will inst all the other components like the small boxes right so guys this is also the same as the index HTML file in order to load another component file inside of the browser we have to add that component selector as a custom HTML tag so inside of this sub component HTML file so after this add the N component selector the N component selector is this app dasar so don't forget to add this as a custom HTML tag now as you guys can see here we are getting a compile letter that's saying this app now is not a known element so guys what is this error it's also the same as the previous you to show the app component inside the index. HTML file we have to create a connection between those file so the same scenario like uh in the previous so in order to access the number component HTML codes from the app component we have to create a connection between these two files if you can remember so for the index.html file we use the main.ts file to create the connection so guys for this component nesting we don't need a separate file for this uh we will do this connection inside the same app component file so we have the app component TS file so inside that we have this component decator so inside that we have to add a new property called import so the key is Imports and the value is we have to pass this as an array so open and close square brackets inside this component name is app n so again we are getting another compilator because in order to use this app components here we have to import that so guys don't get confused this input is coming with this component decorator this is a property inside of this component object right so in order to pass the N component to this Imports property we have to import that nowar component to this app component TS file right so top of this page add the import statement import inside Curry brackets the component name is app Nar and this is coming from so give the path ins set codes SL never component that's it so now we sucessfully imported the na component to this app component file so save this and go to the HTML file now as you guys can see here this time the compile error is disappeared so everything is now looks good save this all and go to the browser inside the browser as you guys can see here this time browser loaded this now component text as well as this app components H1 tag so guys this is how we n components so I think if we have another component for the header component we can L that component also inside the app component then this will also load inside the browser so guys for now just keep this in your mind in order to load components inside the browser we will use the app component as our main root component then we will list all of the component inside the app component file so then we can load all the components inside the browser so as a good practice we will not touch the index. HTML file or the main.ts file so I modified those files to give you a clear picture of how the components Works behind the scenes hope you guys got the idea so guys uh we will Deep dive more into these nested components in later sections so any of you guys don't get anything about uh these nesting components leave it for now we will learn about this later so all right that's it for this chapter let's move on to the next chapter so so guys now we know how to create a component manually and how to load that component inside the browser guys when we learn components I say that component is a combination of HTML CSS and JavaScript or the typescript so in order to show something inside the browser view at least we need a few lines of HTML codes right when dealing with angular components in order to write HTML codes inside the components we have two approaches so the first approach we already wrote that in the previous section using this template property inside the components decorator so in the previous example we wrote this simple H1 text inside this template property right now guys think if you want to add another paragraph inside this component how do we do that so the simplest way is we can add that inside the template property after this H1 tag so just simply create a P tag and add a Dy paragraph text so save this and go to the browser inside the browser now we can see this paragraph right so guys in here some of you guys may wonder why didn't I add this P tag in the second line so there is a reason for this guys uh wait I'll show you let's put this P tag in the second line now save this as you guys can see here we are getting a compile error so guys when we dealing with this property template we can write HTML codes in one line but in any case if you want to write multiple lines of HTML code we have to use the M day codes instead of the simple codes okay uh let's see this in action so let now remove these uh single codes and replace them with this metal symbol which uh you can locate before the number one key on your keyboard as you guys can now see see here the compile error is no more so save this and go to the browser this is still working as previous which means now you can write multiple lines of HTML codes Under This template property so let's add another code uh after this so this time let's add a button tag the button text will be something submit so save this and go to the browser as you guys can see here we got the button inside the browser view so guys like this we can design the HTML page view of this component inside this template property and guys once again if any case if you're using the single codes or double codes instead of the metal day symbol you guys cannot write multiple lines of HTML make this but you guys have to stack all the HTML codes in one line then this will work so so all right guys so hope you guys got the idea about how to write HTML codes in line inside the component file so next let's move on to the next chapter so now what I want to do is I want to change the color of this H1 tag to red color so how do we do that inside the component file for this also we have a separate property like this s template property which is Styles property using this property we can write in line CSS inside this component file same like this HTML code so let's see this an action so now inside this component decorator after this add the property of the CSS Styles so after this colon now we can pass the CSS codes as the value for this Styles property so now what I want to do is I want to change this H1 color to Red so the CSS property for this is color and the value is red don't forget to pass this inside of codes that's it uh save this all and go to the browser as you guys can see here this nowbar text turn to righted which means we successfully applied CSS styles to this H1 tag okay so next guys think uh like this HTML code in case if you want to write separate lines of Cs codes so how do we do that for this also we can use the same approach as the previous we can use the matal symbol instead of the Cotes so let's say this uh now remove these codes and replace them with M symbol then now we can break lines inside this so next let's add a background color to this heading text so inside the CSS property for this uh we can use the background property so the CSS property is background and set the value to something black that's it so save this and go to the browser as you can as you guys can see here now this background color is in Black so guys this is how we write multiple lines of cod CSS codes inside the components file using the Styles property so guys in the previous lecture we learned how to write codes and CSS codes inside this component file so guys for these kinds of one line or two lines of course this approach is okay but unfortunately in real world applications we have to write hundreds of or maybe thousands of lines of codes in a single HTML page or a CSS page so in that case if we write the Andro lines of codes in this component decorator what you guys think this will be messy and this component file will unnecessarily get big if in any case we get any bugs we cannot easily identify those bugs right so in order to prevent this angular has a better approach for these templates and styles so we can create separate HTML file and the separate style CSS file for this if you look at uh the app component this app app component has already separate files for this separate HTML file and this separate CSS file so like that we can create a separate style and HTML file for this n component as well so let's see this an action so as for this uh let's create an HTML file go to the file tree inside this app folder now right click on uh the our component folder which is this s component folder and create a new file the file name is the same as this navbar do component and the file extension will be we are creating this file to write HTML code so the extension is do HTML so this is the file name convention for the component HTML file first we have to define the component name then uh the component keyword and at last the HTML extension code that's it so guys as I said earlier this is just a best practice to name a component in angular if you guys want to change this you guys can change it but if you guys can follow this it will be helpful for your carrier always try to follow best practices perfect so now inside this we can write our HTML code so for now let's write a simple H1 tag so inside this HTML file add this create an H1 tag and uh the heading text will be something this is from HTML file that's it for now save this and go to the browser as you guys can see here we got our first heading this is coming from the component template property but we are not getting this external heading text inside the browser view so what is the problem here can you guys guess yes of course guys here also we just created this new HTML file but we are not connecting or linking this file to any other components file so therefore angular compiler doesn't know about this file and this will not compile so that's why we are not getting this external component files we inside the browser in order to fix this we have to link this file into our component file so how do we do that for this also guys we have a separate property called template URL so using this we can connect external HTML file to our component right so let's see this in Action Now go to the component TS file inside this let's connect our external HTML file so the inside this component decorator uh for this we have a separate property called template URL so add that here the property name is template URL this U is uppercase so guys please carefully follow this Capital simple letters otherwise you guys will get errors so now to this property we have to pass the our external HTML files path so we have to pass this as a string open and close a single code inside this the path is do slash because this is inside the same folder for this the file name is na. component. HTML so we have to pass this component file name exactly the same as this otherwise this will not work okay so now that's it save this and go to the browser as you guys can see here now we've got this text this is coming from our external HTML file so guys which means our external file is successfully connected to our component but guys if you guys look at this carefully this time we are getting only this heading text which is coming from the external HTML file but we are not getting the heading text that we passed earlier using the template property inside the component TS file so what do you guys think what is the problem here so guys in angular if you want to write HTML code we have to use either one of this method we can write in line or we can use use an external HTML file if you link an external file to the component file this will automatically ignore the inline HTML codes so that's why we are not getting this inline HTML heading inside the browser hope you guys got the idea so guys before end of this video let's see how to connect external CSS file to this component so guys this also the same like the previous so first thing first we need a separate file so let's create that inside the same folder uh create new folder right click and create new folder right click and create new file the file name is as usual first the component name nowbar do component dot the extension is CSS that's it so now inside this we can write the code for CSS codes so let's change uh the setting text color to Green so the heading property is H1 and the CSS property is for this is color and set the value to Green so save this and go to the browser now as you guys can see here the styles are not applied so the same question why is that can you guys guess yes of course the same problem like previous in order to use this we have to link this to our component file so for this also we have a property called Styles URL so go to the component TS file and add this the property is Styles URL and the value inser codes pass the path of the external CSS file do slash the file name is na. component. CSS that's it so save this and go to the browser as you guys can see here this time this heading text turn to Green why is that the same thing as the previous when using an external CSS file this inline CSS will not work right so this is what happens here with the inline CSS we added this red color and the background black previously it was applied to this heading text now this has changed to the green color which is coming from the external CSS file so hope you guys got the idea so guys this is uh the best approach to write HTML and CSS for component file throughout this course we will use this approach we will not write any inline HTML or css codes inside the component file so that's it for this chapter let's move on to the next so in the previous lectures we learned how to create an angular component from scratch so now hope you guys have a clear picture of how this component works in the angular project so now guys when we create the component manually I see that there are two approaches to create these angular components in angular so the first method was creating a component using the manual way so it's the hardest way now let's see the easiest way of creating this component so how do we do that guys for this we can take the advantage of angular CLI so angular CLI has bundled with a command to create this component and all required other files and to create the connection between each other files so let's see this inaction so now let's create a component for the Eder area so go to thegr terminal in the vs code inside this let's generate our new component using the angular CLI as you guys know in order to access the angular CLI we have the command NG so type that here NG after this we are going to generate something so the command is generate after this what we are going to do is we are going to generate a component so pass component so the command is NG generate component so after this we have to pass the component name so we are creating this component for the header so the component name is header so now guys we don't need to pass the component keyword and the file extension to this I c will automatically create this component including best practices right so guys uh in order to execute this command hit enter as you guys can see here this command is executed inside this we can see these messages saying that these files are created with component is file HTML file and the header component CSS file if you look at the file tree inside this folder we can find this header folder inside we can find all the header component related files so as you guys know when we executing the ca command we didn't mention about the app folder all these naming conventions angular CLI followed all the best practices automatically so this is the beauty of angular CLI so guys inside this you can find four files uh when we creating the previous component manually we just geted only three files which are the TS file and the HTML file and the CSS file so but inside this head component folder we can find these four files so the new file is this component.ts file so guys this uh file is mainly used for testing purpose so in this section we are going to cover the angular testing so in the testing section we will learn about this in detail all all right so guys we got the component files open the component file inside this we can find all the relevant component codes so you can see the import of the component module and here we can find the component decorator inside that we can find all the properties that we need for angular component and also down here we can see this class and the component name header component and also guys we can see this EXP keyword why we are exporting this because in order to access this class outside of this component we have to export this right so next we have the HTML file inside that we can see the P tag with the text with this text so next we have this style component C this file and inside that this file is empty right so now guys I want to load this component inside the browser so how do we do that first this as usual we have to use the component selector so let's add this inside the component file hope you guys remember why we are adding this component selector inside the app component HTML file we learn about this right so now at this after this the component selector name is app header create this as a custom HTML tag as you guys can see here we are getting a compile L why is that you guys already know we learned about this because in order to work with this component we have to make connection between these two components so we access the header component from the app component so we have to import the header component to this app component so go to the app component T5 inside this Imports property at this our component class name is header component so guys when we are typing this you guys can see these Auto suggestions this is coming from the vs code so select our header component from this drop down as you guys can see here when I select this this will automatically added the import statement of the header component so we don't need to write this manually like the previous so guys this uh this has nothing to do with the angular this feature is coming from our code editor V code okay so all right now we successfully imported the component now go to this HTML file now we are not getting any compile errors uh save this all and go to the browser as you guys can see here now we can see this head component text here so guys if you guys can remember when we creating the component manually we did all these steps one by one by hand but with the angular CLI we got all the required configurations and all the required files automatically this is the beauty of angular CLI so from now on throughout this course I will use angular CLI to generate angular components so guys before we move on I have a small question for you so this header components prag loaded inside the browser so how this loaded inside the browser this HTML code is inside of a SE at file so how this is loaded inside the browser can you guys tell me yeah yes of course because inside the header component is file we can see this template URL property with this we are linking the header component HTML file with the component TS file so that's why we are getting the header components VI inside the browser hope you guys got the idea e e so guys what is this data binding guys we use angular to build Dynamic websites not static websites you guys are here to learn how to build a dynamic front end using the angular so if you are building something static front end for something app you do not need to learn angular right so you can do this only using the HTML and CSS so in this section we learn about how to dynamically interact with data in angular so let's dive in so guys inside the app compon HTML file we got this H1 tag inside this H1 tag we handc coded this text so now what I want to do is I want to make this hand coded static text into a dynamic text so how do we do that very simple so first let's create a variable inside the component TS file something title so how do we create a variable in typescript very easy inside this class Cod so guys keep this in your mind we write all the Logics and codes of this component inside this class Cod right so outside of this class Cod any code it will not work all right so let's create a variable the variable name something title so like JavaScript we don't need to use any variable keywords like w let or const keywords all right so so next we have to define the type of this typescript variable so at the colon and the type is string so guys for this variable we are going to assign a string value so after this equal sign the value is uh put this inside codes this loaded dynamically all right so guys now what I want to do is I want to load this text inside the browser so how do we do that in order to load this text inside the browser we have to somehow load this title variable inside the HTML file as you guys know the browser will only loads this HTML file inside the browser view not the typescript file right in order to do this guys in angular we have a different approach so for this we can use string inter ation so let's see this in action so inside the app component SML file let's create another new headit text for this so after this create uh this time create a h2 tag and now I want to pass the title variable to this h2 tag as I said earlier for this we can use the string interpolation it's very simple so between these h2 tag open and close to curly brackets and between these curly brackets pass the variable name which is this title that's it so save this and go to the browser as you guys can see here this loaded the title text inside the browser V awesome right so guys in the previous lecture we look at a basic functionality of a string interpolation so now in this lecture let's see how this string interpolation work works and what we can do with this interpolation so let's get started so guys as I said in the previous lecture using angular we are going to build a dynamic website or an application or a static website right so in order to make the angular application Dynamic we have to manipulate data between our angular components so for this we have several techniques in angular so this string interpolation one of them in this lecture let's see how this string interpolation Works let's look at the previous example in here app component is file we create this variable and using this string interpolation method we loaded this title text inside the browser so some of you guys may Wonder first thing first this title variable is inside the app component TS file but using the string interpolation we added this title variable inside the HTML file so how this possible what is the connection between these two files so the first thing first you guys should understand in a angular component the typescript file is the main file so we do all the things inside this typescript file so if you guys can remember we link the HTML and CSS file to this component and also we imported the other nesting components also to this component TS file so without this component TS file we cannot create an angular component so this is the main file of an angular component so in here we are connected our HTML file with this component file so this is how the connection built with these two files so inside this we created this typescript variable so in order to load this inside the HTML file we cannot directly add this title variable inside the HTML file because this is a typescript variable and this is a HTML scope so in order to add this inside the HTML file we have to create a typescript scope inside this HTML score right so that is what we are doing with this string interpolation so between these curly brackets we are creating a typescript scope so as you guys know inside of an HTML file in order to write a CSS style we can create a CSS cope right for this we can use the style St same as this in order to write a JavaScript code inside of HTML file we can create a JavaScript scope using the script tags between these tags we can write any valid JavaScript Logics right this is also the same like this inside of this HTML file we are creating a typescript scope and we are accessing the component time script variable so this is how this string interpolation works once again guys with these curly brackets we are creating a kind of a typescript scope inside the HTML file so we call this special type of angular syntax string interpolation so in angular using this we can show a data inside of an HTML file which is declared inside of the component TS file when the angular compiler ises this string interpolation this will automatically look inside the relevant component file and print the relevant variable data inside the HTML V so for example when the angular compiler compiles this component we'll see this string interpolation inside the app component HTML file then what will this angular compiler will do angular compiler will immediately look inside the relevant components TS file which is the app component TS file if this is the header component angular compile will look inside the Ed component TS file not the app components TS file right this will look inside the relevance components TS file so using this string interpolation we can show any type of data to the end user so we use this title this is a string value but guys don't get confused even this C string interpolation we can show number values and Boolean values to the end user using the same string interpolation inside of a string interpolation scope we can pass any valid variables and also even we can do simple calculations so let's see an example for this down here create a P tag and create a string interpolation now inside this scope add this 1 + 1 so save this and go to the browser as you guys can see here we can see the answer of 1 + 1 2 right so guys this is how this string interpolation scope works most of the time in angular we use this string interpolation to load Dynamic data inside of a browser VI in other words we call this data bind so this is how we bind data in angular component hope you guys got the idea so guys before we move on I want want to show you something so guys creating this typescript scope inside of HTML we call this string interpolation right so why do we angular named this as a string interpolation why this string is it something there so guys in this lecture let's look at this guys in the previous lecture I said inside of this string interpolation scope we can pass not only string values we can pass number values or Boolean values even we can do simple mathematical calculations but guys in each and every operation the string interpolation will return a string value so for example inside of this we passed our title value it's already a string value so when this output the value inside the browser this will automatically converted as a string value so in our case this is already a string value so this will return string value right but think if we pass a number inside this string interpolation what will happen so guys this will automatically convert this number to a string value right so this is apply for the Boolean values as well so if you do a small calculation here like 2 + 1 inside the browser we can see only the answer not the 2 + 1 calculation so what will happen here so this spring interpolation will calculate this value and get the answer before it's showing inside the browser and it will convert this answer value to string value right no matter what type of data we are sending into this string interpolation by the end of the day before this load inside the browser the string interpolation will convert all that data to a string value that's why this is named as string interpolation hope guys got the idea so guys in the previous lecture we learn how to load a text value dynamically inside the browser view so now let's look at another scenario think that we have image URL inside of our database so we are loading it to a variable inside the component T file and what do we have to do is we have to load that image inside the browser view so how do we do that first let's create a variable for this inside the component ES file so the variable name is something IMG URL so this type also string for this I will copy image URL value from the Google image so copy this image URL and paste it inside this variable value so guys now we have the image URL now what do we have to do is we have to load this image URL inside the browser view so in order to show an image inside the browser not only image in order to show anything inside the browser we have to add that inside the HTML file right so go to the compon HL file and create an image tag so why do we have to create an image tag in to show an image inside the browser view we have to use this image HTM tag right so down here the image tag now inside this SRC attribute we have to pass the path of the image that we want to load inside this IMG tag we already stored this inside of a variable now what I want to do is I want to load that image path or the URL to this SRC attribute so how do we do that for this also we can use the same previous approach string interpolation this is a typescript variable so this is HTML file in order to pass a typescript variable to this we have to create a typescript scope inside this okay so between these codes create a string interpolation open and close two curly brackets inside this pass the variable name IMG URL guys follow the capital symbol letters carefully that's it so save this file and go to the browser as you guys can see here we can see the image inside the browser view guys even this string interpolation loads this image inside the browser dynamically we will not use this approach when we bind a data to HTML property like this SRC property right for this we have a better approach we call this approach in angular property binding so let's see how to do this this is very simple first thing first we have to wrap the property inside of a square brackets so in our case our HTML property is this SRC so wrap this inside of square brackets now we don't need this string interpolation so remove this curly brackets and keep this variable as it is so guys this is what we call as a property binding so save this and go to the browser as you guys can see here this time also we got the image inside the browser so guys you guys may get confused why are we using this property binding without using the string interpolation approach so let's find the answer for this in the next lecture uh so guys as in the previous lecture we loaded this image dynamically using this string interpolation as well as using the property binding approach so in these both approaches this image was loaded inside the browser without any problem but why do we need another binding approach if this is loading with this string interpolation approach to find the answer for this let's see another example so create a button down here so the button text and the button text will be something disable button guys now what I want to do is I want to disable this button dynamically so for this I'm going to create a variable inside the component TS file so go to the component TS file and after this create a variable something called is disabled and this type will be Boolean right so as a default value to this Boolean add a true value now back to the HTML file inste this let's uh disable this button using our is disabled variable so the property of this disabling is disable enabled so first let's use the string interpolation approach so inside the curly brackets pass our variable is disabled that's it so save this all and go to the browser wait guys before we go to the browser let's duplicate this button again and for the second button let's use the property binding approach so remove the string interpretation scope and wrap this disabled property with the square brackets so this is what we call property binding right so again change this button text for the first button disabled using string interpolation the second button text is disabled using property binding so save this and go to the browser as you guys can see here this first button is not disabled which we use the string interval potion method and the second button is successfully disabled which we used property binding approach so what's going on here so guys if you can remember in the previous lecture I told you that even if we use any kind of a data inside of a string interpolation it will be converted to a string value when it's loaded inside the browser so in order to disable this button we have to pass a Boolean value but with the string interpolation this Boolean True Value will be automatically converted to a string value so that's why in this first button this is not working so the second button this disable is working course this property binding will not convert this Boolean value into string value data type so guys this is the main different between these two string interpolation and property binding approaches so guys uh this is the main reason that angular team build these two kinds of data binding approaches in angular so guys string interpolation can be worked in some HTML properties but uh the most of the time this will not work so as a good practice we have to use property binding when we dealing with an HTML property if you are loading something simple text inside of an HTML tag inside the browser view for this we can use this string interpolation otherwise we can can use this property binding so hope you guys got the idea all right guys in the previous lecture we learned about property binding in this section let's learn about another important Concept in angular class binding so what is this class binding class binding is a way to dynamically add or remove CSS classes to an HTML element based on a condition or expression for example think about a simple scenario where you have a button on your web page you want this button to have a different style when it's clicked maybe you want the button to turn green when it's active and red when it's not so in a traditional HTML and CSS setup uh you would have to manually add and remove classes to achieve this right but with angular class binding we can automate this process so let's see this inaction so let's take the same scenario as the previous just want to change the button color based on a condition right so let's do this uh go to the app compon HML file and create a button so the button tag and the button text will be something click me that's it so now we have the button next we need the condition for this we'll use a simple boan value uh for this example also so as you guys know we do all the dynamic things inside the component typescript file so go to the app component T5 and create a Boolean variable so the Boolean variable name is is active and the data type is Boolean so after this colon and data type is Boolean so next let's assign a default value to this fals that's it so next what I want to do is I want to change these buttons background color to something green when this is active value set to true so how do we do that for this we can use the class binding approach wait before that uh we have to define the Cs style right so guys we write CSS Styles related to this component inside the app component CSS file okay so open the app component CS file and let's define the CSS style the CSS class is something name it active so do active and CSS scope inside this will set the background color to Green now guys we have the CSS class next let's uh do the conditional logic using the class binding approach so inside the the button opening tag open and close a square bracket inside this class so we are dealing with the class binding so this binding name is class so after this dot now we have to pass the CSS class that we want to apply to this button conditionally so which is this active CSS class so pass this here after this dot so next the equal sign then we have to pass the condition which is our Boolean value variable right so is active don't forget to pass this inside of codes that's it so guys this is the class binding syntax very simple right so now save this and go to the browser we can see this button but this is now in green color so what is the problem here of course we in the initial stage we set this Boolean value to false then this condition statement returns false then this CSS class will not apply to this button if I change this is active value to True save this and go to the browser as you guys can see here this time this green color applied to this button which means this active CSS class applied to this button successfully right so let's confirm this go the browser inspect element inside this we can find our HTML code inside this appro we can see our button tag inside this we can see this CSS active class applied so guys this is the simple use case of class binding in angular simply this will add o remove CSS classes to an HTML element based on a condition in the previous lecture we use the class binding when this condition return true think if we want to change this button color to something righted when no active status or when this return Falls so how do we do that very simple so let's see this in action first thing first let's define a CSS class to this no active status so go to the app component CSS file and Define this the CSS class name something no Das active and the CSS scope inside this set the background color to Red that's it now we have the CSS next let's see how to apply these both CSS classes to our Target button based on a condition using only the class binding for this guys we can use another class binding in this button for this uh no active status so let's see this in action so let's do this inside the component HTML file after this first class binding let's write our second class binding inside of square brackets The Binding name is class so add class inside the square brackets so after this dot now pass the CSS class that we want to bind to this button which is this no active CSS class so next the condition this time we want to apply in this CSS class to this when this active conditions return false so for this we have to use the not operator so the not operator is represent with the exclamation mark So after this the Boolean variable name is is active so guys with this not operator we are checking the opposite of this value returns usually this binding works when this returns true with this not operator we are telling this to work when this return Falls so this is the simple idea about this not operator so guys that's it save this and go to the browser as you guys can see here the button is green why is that yes of course now this bullan value is set to true so let's change this to false again save this and go to the browser as you guys can see here this time this button background changed to Red which means our second class binding also working as we planned so guys this is how we bind two class binding to a single HTML element angular all right guys this is Task time so let's do a small task this time I want to add a yellow color border with the green background color for this button when this returns true otherwise want to change the Border color to something blue color with the previous red background color so guys this is the task for you make the button border yellow when it's true if the Boolean value is false set the background color to Blue so take your time take the help of the previous lectures and try to do it yourself once you complete the task you can continue to next lecture all right hope you guys did the task well now let's see how to do this guys for this also we can simply use another class binding inside this button tag so let's do this first thing first we need the CSS style for these border Styles so let's define them inside the app component CSS file add this the class name something do active Das border the style is border so let's set this to 5 pixels solid and the Border color will be yellow so this style is for the active status again we need another style for nonactive status so I'm going to duplicate this change the CIS class name to no active border change this border color to Blue now we have the Styles so let's load this inside the vi conditionally by using the class by binding approach so inside the HTML file inside this button tag again another class binding inside square brackets class dot this is his class name active Das border so guys we want to apply this active border to the button when this return through so the variable name is is active so again next for the no active status for this also again create another class binding inside square brackets class dot the Cs class name which is this no Das active Dash border so now we want to apply this when this bant value return false so we have to check the opposite of this so use the note operator the note operator symbol is exclamation mark and after this add the variable name is active that's it so save this all and go to the browser now this is in red background with blue border why is that yes of course now this is active value is false so this applied the styles of no active CSS class next let's change this to true and save this and go to the browser as you guys can see here now this is in green background with yellow border which means this active class by Bing CSS Styles applied to this button so guys like this you guys can bind CSS classes to an HTML element as much as you guys wanted but guys keep this in your mind stacking too much of class binding to a single element is not a good practice for this we have a better approach and easy approach in angular we will learn about this in the later section guys in the previous lecture we worked with the class binding using a Boolean value but think what if we have to load a CSS style to an HTML element Based On A String value for example we want to change the background color of this button based on a something fruits name which is stored inside of a string variable so how do we do that so let's see this an action uh first I create a variable to store the fruit's name so go to the app component is file and create a variable for this the variable name is something fruit name then set the variable type to string now assign a default value to this something Apple so add this inside of codes C this is a string value right so next uh let's create another new button for this inside the compon HTML file down here create another button tags and set the button name to something Fruit Ninja next we need a CSS class for this so let's define that as usual go to the app component CSS file and Define a new CSS class something uh do Apple inside this let's set the button background color to red and set the Border color to something green now let's apply this style to this when this string value is set to Apple so how do we do that for this also we can use the same class binding approach so inside the HTML file inside this button tag create a class binding how do we do that you guys already knew this yes of course first we have to create a square brackets and inside this class and Dot now we have to pass this ISS class name which is this Apple so next the condition we have to check whether this variable fruit name is set to Apple or not so for this we can use the equals operator so let's see this inaction so inside this open and close double codes now the variable name is fruits name after this equals operator double equal signs so hope you guys know about this operators right so this is nothing to deal with angular this is something basic knowledge of JavaScript all right so next we have to check whether this variable value is equals to Apple or not so again create another codes this time create single codes because we cannot create another double codes inside of Double codes right so inside this single codes the value that we want to check is Apple so pass it here that's it so save this and go to the browser as you guys can see here this apple CSS style are applied to this Fruit Ninja button because this fruit name is set to Apple if I change this value to orang as you guys can see here this time these CSS styles are not appli to this button cuz in here we made this condition apply this CSS class to this button element when this variable value equals to Apple hope you guys got the idea so guys in here if you look at this carefully even if you use a string value to check this but in the end the statement also return a Boolean value if the string value equals to this uh the statement will return true and angular class binding will apply this CSS class to this button if this value is different than this pass value this will return false and class binding will not apply to this style to this button in order to work with angular class binding no matter what variable types you are using for this in the end you have to pass a Boolean value to this class binding so hope you guys got the idea all right hope you guys now have a clear picture of class binding now let's move on to our next Topic in this angular full course which is style binding let's dive into this so guys in the previous we learned how to bind and already predefined CSS class into a HTML element conditionally think uh if in any case if you want to bind uh style only just one time and it's not predefined in this case we can directly assign the CSS style into an HTML element using the style binding approach in angular so let's see this in action Let's uh get the same examples uh like the previous I want to change this color to Red based on a condition so go to the up compon HTML file inside this let's create a button tag and the button text will be something click next we need a Boolean value so let's take the previous Boolean value now I want to make this button red when this Boolean value is true so how do we do that as I said uh for this we can use this style binding nothing much same as the class binding first thing first open and close square brackets and inside this for the class binding we use the class keyword but this time we are using the style binding so the keyword is style so after this we have to pass the C style property in our case we are going to change the background color of the button so the CSS property is background that's it so next uh we have to pass the CSS value for this the value for this is red so after this equal sign and the value inside the single Cotes red that's it so save this and go to the browser as you guys can see here this button is red which means our style binding is working as we expected um wait a minute guys am I right is this working as we expected now right in here we didn't pass any condition that we want to display this red color so this red color will apply to this button when even this Boolean value is false because there is no connection between these two style binding and this with this Boolean value so now the question is how do we pass the logical condition to the style binding very simple for this we have to use the tary condition operator which is simply one line of if else condition so let's do this first we have to pass the statement which is this Boolean variable after this if this value is true we have to set red color so we Define that using the question mark so next we have to define the L statement if this is not true let's set this background color to Green so we Define the L statement with the colon symbol so after this colum and and the value is green pass this inside of codes same as this looks perfect so save this and go to the browser as you guys can see here now this button is in red color because this Boolean value is set to true now change this to false this time as you guys can see here this button background color change to green color perfect right guys before we move on to the next chapter let's look at this in the style binding we added the CSS property so after the style bind right for this example we use the background CSS property think if any case if you want to use background color CSS property how do we do that in CSS file we use this background color something like this with this slash icon right but when we use this with the style binding inside the HTML file we cannot use this background color with this slash icon so we have to use this something like this background color with uppercase C right so save this and go to the browser as you guys can see here this is working as previous which means this is working without any issues if I change this like CSS background color with Dash so now this is not working so guys in order to work with style binding we have to use the CSS properties without adding the iPhone symbol or the dash we call this Dom style properties so you guys can find all the Dom Style properties in this website go to the Google and search this Dom Style properties and go to this first result in here you can find all the list of Dom Style properties so you can get an idea about Dom Style properties in this website so hope you guys got the idea so now hope you guys have a clear idea about style binding in angular so now see how we can bind multiple styles of an HTML using angular style binding so in the previous we set the background color to this button in this lecture let's see how we can set the border to this button same approach as the class binding we have to bind another style binding to this button after this first style binding open and close square brackets the bind is style so pass it here next is here a style property we are going to set a border to this so This us property is border guys as you know for this we have to pass the D CSS property so for the border both CSS property and the Dom are same so pass border here next we have to pass the Cs property values and the condition so inside uh the Double codes pass the condition which is this is active and next we have to pass the value so if this is true we represent this with question mark So if this is true set the Border value inser single codes pass the value let's set the Border thickness to 3 pixels and Border type is solid and the Border color will be something yellow next in order to work this we have to define the L statement as well otherwise this will not work so pass the false statement here which is represent with the colon symbol so after this just simply pass an empty statement so that's it save this and go to the browser when it's true this loaded the both styles that we bound to this button using the angular style binding approach so guys like this you guys can bind as many as styles that you guys want to this button that's it for this lecture let's go on to the next chapter all right before we move on to the next lecture let's look at the difference between Class binding and the style binding so guys with the class binding we conditionally appli the Cs classes to an element but with the style binding we conditionally applied only CSS properties so in our example we applied multiple Styles in the both bindings approaches right but in the class binding we don't need to bound multiple class bindings course we can Define all the style inside of a one CSS class and we can bind that class to the HTML element using the class binding so using this we can simply apply multiple CSS styles to an element with just single class binding wait let's look for an example for this let's take the same example like the previous I want to add the background color and the at the same time I want to add the Border color to this button at the same time so for this we can simply create a CSS code something like this create a CSS class something active and the style will be background color green and the Border will be 3 pixel solid and set the color to Yellow now we can simply bind this class to this button so inside this add the class binding and this is class is this active so next the condition Boolean value this variable is active so save this and go to the browser as you guys can see here this applied this both styles to this button so if you're using the style binding for this we have to write two style bindings to this button like our previous example so guys when we dealing with only one CSS style we can use the style binding but in any case if we need to apply multiple CSS styles to an single element in this case always try to use the class binding approach so this will reduce the unnecessary lines of codes so hope you guys got the idea all right that's it for this lecture let's move on to the next lecture all right guys let's move on to the our next topic event binding in angular so guys what is this event binding simple nothing much here guys think if you want to perform some kind of action when clicking a button how do we do that very simple for this we can use the event binding in angular so let's see this in action so inside [Music] the HTML file let's create a button and add a button T something click me so now let's see how to perform the click action so guys for this in man JavaScript we use the onclick event function right something like this but in angular we have something cleaner approach for this so guys for this click we have the click event binding so in angular we Define all the event bindings inside of brackets so open and close brackets inside this we have to pass the event that we need to perform on this button which is Click just simply pass that inside this brackets all lowercase letters now next we can Define the action that we want to perform on this click event so let's call a method from this h this said the method name something button click and this is a method so don't forget to add the parenthesis that's it for the click binding but guys we have an error here property button click does not exist on type app component if I save this inside the browser also we can see this error so what is this problem here can you guys guess yes of course we are call ing this method from this click event but inside our app component T file this method is not exist so in order to fix this we have to Define this method inside the app component TS file so inside the class cope create the method the method name is button click pass this same as this otherwise we will get errors next the parenthesis and the method scope so save this now and inside the HTML file now there is no any compile errors inside the browser also the previous error was gone right awesome right so guys now click on this button nothing happened why is that can you guys tell me yes we just Define this method but inside this method we are doing nothing this method is just empty method so when we click this button this will look inside this method scope and if there is something this will execute and return the result otherwise this will return empty so in our case this method is empty that's why we are not getting anything so let's log something so inside this method scope console. log the log will be something uh button clicked so save this and go to the browser click on this button again nothing happened is there anything wrong again now we just log this inside the browser console in order to see this we have to access the browser console so right click and go to the inspect element and now navigate to the console tab from this browser developer tools as you guys can see here inside this console we can see our log button clicked so let's click this button again as you guys can see here this logged our message inside the console again so which means guys this click event is working as we expected so guys this is what we call event binding in angular so we can use event binding to perform any user actions such as click hover keyboard key press etc etc so simply this is what we call event binding in angular all right in this lecture let's look at more event binding examples we already looked at the click event next Let's uh see Mouse H event so for this in angular we can use the mouse over event binding so remove this click event and add the mouse over event save this and go to the browser when I over this button we got this message printed on the browser console like this we have so many events in angular you guys can check them one by one I'm not going to cover all the events in this lecture all right uh next let's look at at another special event which is keyboard event under this we can find many events from this let's look at the key up event with an example so I think if we want to show a message when we hit the keyboard Enter key so how do we do that as I said for this we can use the key up event binding so let's see this in action in order to check this first thing first we need a text field right so this time we going to work with the key key keyboard event so down here let's create the input field the input field type will be text next we want to capture the event for this we're going to use the key up event so inside brackets pass the event name key after this let's call a method from this um for this let's use another new method so name this method something key enter so after this don't forget to add the parenthesis so we are getting this error because this method is still not exist in our application so let's create this method inside the app component ES file create the method the method name is key enter and after this add the parentheses so at last don't forget to add the method scope so now inside this like the previous example let's simply add a log so console. log and the log message is something key pressed that's it so now save this all and go to the browser as you guys can see here we got this input field so now inside this type something look inside the browser console each time I press a key on the keyboard we are getting this key pressed log message printed inside the browser console awesome right so this is how this key up event works so guys next what I want to do is I want to show a message when pressing the enter key so how do we do that let's see this in next lecture all right so now let's see how to show a l message when we press the enter key for this we have to capture the key that we pressing on the keyboard so how do we get that very simple for this we can use the key code guys there is a unique key code for each and every key in the keyboard so we can capture that and filter out what we are currently pressing on the keyboard so let's let's see how to capture this key code for this guys first we have to pass the event object to this method so what is this event object each and every element in HTML has its own by default an event function so when uh user interacts with an HTML element this will trigger that event function and return some useful data about that event so guys this is not to do anything with angular this is just a basic of JavaScript right all right so let's move on now what I want to do is I want to pass that event object to this method because we are going to filter this inside this method right so how do we capture that event object very simple by default this will capture that event object and store it inside of an object variable which is the dollar sign event variable so we can pass that to this method as a parameter for this object the event variable is dollar sign event as you guys can see here we are getting this error why is that yes of course we are now sending a parameter for this method but inside this method we are not capturing that parameter so in order to fix this error we have to capture this parameter so go to the app component is file and capture the event parameter variable so inside this parenthesis the parameter variable create something parameter variable event set this type as an object because we are receiving an object from this next let's log this event parameter variable here we can so we can see what we are getting from this so after this at console.log and the parameter variable is this event so that's it save this all and go to the browser now type something on the input field as you guys can see here this time we are getting this keyboard event object printed here so guys this is the collection of data that can be obtained when a user perform a key up event so now expand this inside this we can find so many objects data but for this lecture we will focus only this key code so previous I typed letter A here that's why I got the key object value as a a and the key code AS 65 so guys this is the key code that I talking about so for the lowercase a the unique key code is 65 right so wait let's print only the key code here then we can see this clearly so go to the component file and let's print only the key code so after this dot the object key name is this key code follow this Capital simple letters carefully in order to prevent this let's make this parameter variable type to any so that's it save this and go to the browser now type letter A inside the text field as you guys can see here this time inside the browser log we can only see this key code okay now if I press the enter key I will get this key code 13 which is the unique key code for the enter key so guys using this we can filter out the ENT key press and we can show the message so let's do this inside the component is file now inside this let's add if else statement filter the key code so if the condition is we have to check this key code is equal to 13 or not so even parameter variable dot key code equals and pass number that 13 here so inside this create a log and the log message will be enter key pressed let's remove previous logs save this all and go to the browser type something inside our text field we are not getting any logs inside the browser console now press enter key as you guys can see here this printed this pressed enter log inside the browser so so guys with this we are filtering the key up event only for the enter key so hope you guys got the idea all right so in the previous lecture we did the KE EV filtering or Enter key press so for this we use the traditional JavaScript approach but guys in angular we have a cleaner and easier approach for this event filtering so let's do this for this let's create another input field so you guys can find the difference down here create a input field the type will be text next let's do the key up event insert brackets the event is key up so after this let's call a method something key up filtering and don't forget to add the parenthesis next inser the up component file create this method the method name is key of filtering and the parenthesis after this add the method scope now inside this for now just log key up event filtering now save this all and go to the browser now as you guys can see here inside our second input if I type something we are getting this log perfect now what I want to do is I want to filter this key up event only for the enter key press so how do we do that for this we can use the angular event filtering approach so this is very simple compared to the previous approach so inside the HTML file after the SK up event binding add this dot enter so guys with this we are telling to this event binding to trigger when only user press the enter key that's it simple right so save this and go to the browser as you guys can see here when type letters inside this input we are not getting any logs printed inside the browser console but if I press the enter key as you guys can see here we got this log message which means the key up event is successfully filtered to work only when user pressed the enter key so this is a very clean and just single line of code to compare to the previous approach so this is what we called event filtering in angle so this will work with all the events binding in angular so guys before we move on a small question for you guys think if in any case uh if you want to filter this event when user pressed the letter A on the keyboard how do we filter this can you guys tell me yes of course we can simply modify this key up event binding filter to a remove this enter and replace this with the letter A so that's it save this and go to the browser as you guys can see here this time this event binding is working only when I press letter A on the keyboard awesome right so guys this is the simple use case of event filtering approach in angular let's move on to the next lecture so guys let's move on to the next lecture so previously we worked on this event filtering so in this lecture let's see how to capture the input values that user entered inside this input field for this we have several approaches in angular so let's look at the basic approach so which is capturing the data using the template variable so go to the HTML file in inside this input first thing first let's create the template variable so how do we create a template variable very simple just create a variable name with the ash symbol so Ash symbol and on the variable name something let's assume this text field is for the username so name the variable as user so guys this is the template variable now let's see what is the use of this template variable in order to get use of this variable we have to send this to the component TS file so let's pass this to this key of event binding method as a parameter so inside this parenthesis pass the template variable name user next we are getting a compile error why is that now for this method we are passing a parameter so in order to prevent this error we have to capture this parameter variable from this method go to the app component is file and create a parameter variable inside this method parenthesis Set uh this parameter variable as user and this type will be guys with this uh template variable we are sending an HTML input element so set this data type as HTML input element awesome now inside this method let's lock this parameter so we can see actually what we are getting with this parameter template variable so let's use this same log so remove the log message and pass the parameter variable to this log method that's it so save this all and go to the browser type something inside this input and hit enter as you guys can see here we got this HTML input tag printed here so guys actually what is this guys this is our HTML input tank right to verify this let's set an ID to this input uh go to the HTML file and set an ID to this input tag the ID value will be something user input now save this and go to the browser type something and hit enter as you guys can see here this printed the HTML input tag with the ID user input which means this template variable is actually returning this actual HTML input tag so now the question is how do we capture the input tags value so guys by default all the HTML input tags have an attribute called values right which store the input values of an HTML input tag this is just a basic HTML and JavaScript thing right so by accessing the value attribute we can access this text Fields value right so go to the component is file this time let's log the values instead of all HTML element so after this add this dot value that's it so save this and go to the browser type some something and hit enter as you guys can see here this time we got the text Fields typed value instead of the wall input tag so how do we got this this time we are logging this values property of this template variable so that's why we got only the values so guys this uh how we can capture the text Fields value using the template variable so guys with with this we are not only capturing the value we can also capture any attributes of this input tag with this template variable for example if you want to capture the ID of this text field we can access that using the ID property so remove this and add the ID here save this and go to the browser as you guys can see here this time we got the ID of this text field printed here so like this we can access all the attributes of HML input tag using this template variable so guys this is a simple use case of our template variable so hope you guys got the idea all right so guys in this lecture let's study about another important topic in angular which is two-way data binding so the first question is what is this two-way data binding guys simply for now keep this in your mind this two-way data binding is a simple approach for manipulating user input data from W to component and component to view in other words we use this approach to send and receive data between component files to HTML file and HTML file to component file for example when a user wants to edit his username and think his current username is stored inside of a username variable for this first thing first we have to get the current username of the user from the component file because we declare all the dynamic and logical stuff inside the component TS file right so we have to bring that current username and load it inside of an input HTML element and we have to again send back the current edited username to the component file from the HTML input element to update and store the edited user name right so wait let's uh do this example so you guys can understand this clearly first let's create a variable to store the default username so inside the app component stre file create a variable the variable name something user name and this type will be string and set a default username something John do next what I want to do is I want to load this username inside of an input text field so how do we do this so let's see this go to the HTML component file and let's create a new HTML input field next I want to set a default username to this input fet for this we can use the property binding approach so inside this text input tag open and close property binding square brackets now inside this we have to pass the property which is value property so pass it inside this uh next assign the username variable to this so guys this will assign and load the username inside this text field right so sa this and go to the browser as you guys can see here this text field loaded our default username so how this loaded we use the property binding for this okay so now we can edit this J to John Smith so next let's update the edited username in order to capture this edited value we have to use a template variable and send the value to the method we learned about this in the previous lecture so let's do this inside the input tag first let's create a template variable hashtag we Define the template variable with hashtag right so after this the variable name something user name this time name this all simple letters next let's uh submit this St variable to Method when click enter for this first we can use the key up event with the event filtering approach so inser brackets the event is key up and the event filter is dot enter next let's call uh the method from this uh the method name is something update user name after this don't forget to add the parenthesis so now first username template variable to this method as a parameter all right so next go to the app component TS file and create this update username method uh this required a parameter variable so create that the parameter variable is usern name and this type will be HTML input element inside this method let's update the edited username and replace the default user name value so our Global username variable so we access This Global variable in typescript using the this keyword right so this dot username assign this username parameter and Dot value so this parameter capture the input text element so in order to capture the value we have to access the value attribute so this is what we did here we learned about this in the previous lecture right so after this uh let's log our Global username that's it so now save this and go to the browser now edit this username John do to John Smith hit enter inside the browser console we got our edited Jon SMI usern name which means we successfully updated our default username John do as John Smith right so guys this is how we send data from component file to HTML file and HTML file or the view to the component file first we loaded the default username inside this text input using the property binding so this is what we so this is what we can Define as sending data from component to HTML because this username is stored inside the component file right so next in order to store the edited username we have to again send this edited username back to the component for this we used the template variable and event binding approach so in here we used almost all binding approaches in angular right so doing this data transferring between component and view fun but it's not easy right we have to go through so many steps but we have a clean approach for this in angular so we call that approach to a data binding in angular so let's look at this in detail in the next lecture all right guys let's continue our journey with to a datab binding in angular so in the previous lecture we learned about how to send data from the component file to HTML file and and WIA we used property binding and event binding for this right but as we discussed it's not an easy task we have to go through so many steps but don't worry angular provides us a cleaner and easier approach for this we call this approach two-way data binding so let's dive in so let's uh go back to our app compon file we have our input field here right so now what I want to do is I want to implement two dat binding on this input fi so how do we do that very simple Ang going provide us a directive called NG model for implementing toway data binding so let's see this in action so inside the input tag add NG model so now we have to rub this inside of brackets and square brackets so WRA this first wrap this inside of brackets then square brackets so guys remember this m must be Capital so after this assign inser codes pass the variable name that we want to load here which is this usern name so as you guys can see here we are getting a compile error what is this error so guys in order to use this NG model with our component we have to import that otherwise this will not work right so go to the app component T5 inside this import array add this forms module so guys this NG model directive is coming from this forms module right so that's why we are importing this forms module here so next select this auto complete this will add the import statement automatically we don't need to add that manually so that's it so guys this will Implement to binding on this input field so save this and go to the browser as you guys can see here the text field loaded our default username how this loaded so guys we use tway data binding for this right so now we can edit this so JN to John Smith now let's uh update the edited username in order to capture this edited value we don't need to use template variable and send the value to Method like the before to data binding will automatically update the username variable in our component file when we addit the value in this input field so let's see this in action so guys for this let's load the username variable inside the browser view so how do we load this username variable inside the browser for this we can use the string interpolation approach right so inside the HTML file after this text field add an H3 tag and add the string interpolation scope open and close two curly brackets inside this pass the variable name that we want to show inside the browser which is this username that's it so save this and go to the browser as you guys can see here this loaded the default username here John do now let's change this to John Smith as you guys can see here in real time this updated the username John do to John Smith so if I change this to something else as you guys can see here the username variable value also change so this is the beauty of two-way data binding guys this is how we Implement two-way data binding in angular it's a Simple and Clean approach for manipulating user input data from view to component and component to view we just need to use the NG model directive and angular will take care of the rest so awesome right 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 oneway data binding so if you look at the one-way data binding so this oneway data binding will bind the data from the component to The Weave so this oneway data binding is unidirectional so you can only bind the data from the component to The Weave 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 Feld F and we'll add the value inside the codes value will be something one way data [Music] binding so save this and 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 codes 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 hand coded value and add the variable name text value now save this end back to the browser perfect now we got this value in inside this input field now think if you 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 up method save this now go to the component 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 we now hit enter look at the console this time 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 this same value from this log so this is what we called oneway Data binding with this we can only bind data from component to V we cannot change this 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 weave and also we can send data from weave to 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 Cotes text value after this add the same key up function copy and paste it here save this alline back to the browser we got this value inside this second input as well now change this value to Value coming from the vi and hit enter look at the consol this time this value change to this value again type something else and hit enter perfect right we got this value log inside the browser console so this is the usage of two-way data binding if you quickly recap this with oneway data binding we can only set data from component to we we cannot modify or add changes to that data from VI and send it back to the component but in two-way data binding we can pass data from component to V and also we can modify that data and send it back to the component from the Vive this string interpolation property binding class binding and the style binding all these data bindings are included into the oneway data binding category we can only do 2ay data binding using only this NG model syntax hope you guys got the idea hey everyone welcome back we know components in angular are essential but what if we need to add a behavior or modify the D elements directly how do we do that can you guys guess yes you are correct we use angular directives so guys what exactly are angular directives well angular directives are classes that add additional Behavior to elements in your angular applications they allow you to manipulate the Dom which is the document object model directly this is important for creating Dynamic and interactive web applications so why are directives so important in angular applications directives are a fundamental concept in angular they enable developers like us to extend the functionality of HTML by creating custom behavior that can be reused across our application so with directives we can change the appearance Behavior or layout of a Dom element making our application more Dynamic and user friendly so now let's talk about the different types of angular directives so there are three main types the first one is the components directive so these are the directives with the template they are the most common directives that you guys are probably already using when you create components each component manage a part of the HTML for your application it's like the captain of a team leading the judge so next we have the structural directives uh Guys these are the ones that change the structure of the Dom by adding removing or manipulating elements you might have seen them as ngf or ng4 they are like the construction workers of your application building and reshaping the UI next we have the attribute directives so this directives change the appearance or behavior of an element component or another directive so they are like The Stylist of your application taking the look and feel examples includes Eng style or NG class so next uh we can create custom directives so using this we can create our own custom directives from scratch understanding these types is essential as they form the building blocks of creating complex angle applications each type of directive serves as a unique purpose and can be used in combination to achieve powerful results so guys uh once again you guys might wonder why should I use these directives in an angular application so using directives makes your app more responsive Dynamic and easier to manage they let you to reuse code and keep your templates cleaner which is great for maintenance so of course who doesn't like clean readable and more robust code right so let's get ready to explore the powerful world of angular directives in the next lecture we'll start with structural directive where we will learn how to dynamically add do remove elements from the D so let's move on to the next lesson all right so guys now in this lecture let's talk about component directives and structural directives so as you guys know we already learned about component directives right in angular we categorize components under directives basically we use components to load a weave inside the browser According to some conditions so hope you guys remember this so guys keep this in your mind directives are kind of a component without a view and angular components are directives with a VI everything you can do with an angular Direct active you can do with angular component so guys this is the simple difference between angular components and directives all right so let's dive into the structural directives so let's see what structural directives are available in angular with the updated syntax at if at for at switch and in the next lectures we will dive into each directives with detailed examples so now let's focus on structural directives structural directives are special directives in angular that can change the Dom layout by adding and removing elements based on a condition they alter the structure of the do for example think about a situation where you want to display a welcome message only if the user is logged in so in this case we can use the if angular directives to achieve this right so the most common structural directives in angular are ngf ng4 and the NG switch but with angular 17 and up we have updated Syntax for these directives which are these at if at for and at switch cases so we will no longer use these previous directive approach right so don't worry about this you guys will get used to this in next l lectures all right so we use this active directive to conditionally render elements based on a boan expression so this at four directive we use to repeat an element for each item in a collection and this switch directive we use this to display one of a set elements based on a matching criteria so guys now I think you guys have an overview of what structural directives and the new syntax available in angular 17 and up these directives are powerful tools that allow you to control the Dom structure dynamically and efficiently so guys keep this in your mind this section is very very very important right so in the upcoming lectures we'll dive deeper into each directive providing detailed examples and answer task to solidify your understanding so let's move on to the next lecture all right so let's dive into the if else directive thing that I want to show the username in the web only when user is logged in how do you do that very simple you guys already know about this uh so for this we can use the if directive in angular so in the previous lecture I told you that in the latest version of angular they introduced a new syntax approach for this if directive but still in any case if you guys want to use the old version you guys can use that also so I show you both approaches so you guys can understand the old way and the new way so first let's uh see the old way before that uh I cleared all the previous codes so first for this we need two variables so let's create them as usual inside their component T file create the variable the first variable is for the user logged in status so set the variable name as is loged in set the variable type to Boolean and the set a default value something false next create a variable for username so the variable name is username and set the type to string at last set a default value to this John do all right so next let's see how to load this username inside the browser view so guys how do we do that I'm not asking about the conditional loading I'm just asking how to load this username variable inside the browser view yes of course we can use string interpolation approach so let's quickly do this inser the component HTML file let's load this username so we'll load this inside of an H2 tag so create H2 tags between these at the string interpolation scope how do we do that open and close two curly brackets right so inside this now pass the variable name which is the user name so guys now save this and go to the browser as you guys can see here the username joone door loaded here right now let's see how we can load this username conditionally inside the browser view when the logged in status true so for this uh as I said earlier we going to use the old approach the NF directive so let's see this in action so if you guys can remember the previous lecture the data binding so like that we have to add the ngf also inside the HTML tags opening tag as a attributes so inside this heading tags had asri symbol and after this add NG if so this I is capital now after this add the equal sign so inside codes pass the condition which is we already stored inside of the is logged in variable so pass that here the variable name is is logged in so guys this NG will render this heading tag only if this condition return true otherwise this will not load this inside the browser down so so guys in order to work this directive we have to import this ngf directive module to this component so go to the component file and add the ngf module inside this input array add the module ngf so carefully follow this Capital simple letters so now select this auto complete so this will add the import statements automatically so guys this is coming from this angular command package that's it so save this all and go to the browser uh inside the browser we got nothing why is that because we set this is logged in value to false if this return false NG will not load this inside the browser now let's change this false to True again save this and go to the browser as you guys can see here this time this loaded the username inside the browser so guys this is how we use the NG directive to load something inside the browser view based on a condition all right so in the previous lecture we loaded this using the ngf directive so guys this previous approach is the oldest way so now let's look at the new way which is the at if else syntax way so let's see this in action we'll use the same example as previous so down here again create another H3 tag and load the username using the string [Music] interpolation now let's see how we can load this inside the browser View using the new way so nothing much it's very simple so just open and close the if condition scope so the key is at if after this condition parenthesis and the score so simply open and close two curly brackets so so now inside this parenthesis pass the condition which is the Boolean variable is logged in now inside the scope put this H3 tag that we want to show inside the browser view so when this statement return true this will load inside the browser that's it so this is simple right so this is same like the JavaScript and other programming languages if directive okay so for this we don't need to import any modules like the previous NG if so save this all and hold the browser as you guys can see here this loaded the second username here which is loaded using the syntax approach so guys this is how we use the new syntax approach in angular so guys now in this lecture let's see how the opposite of the if condition which is the else condition works so how do we implement this to these two approaches think if I want to show a message something user is not logged in instead of this username when the user is not logged in or when this bullan value is set to false how do we do that it's very simple so first let's look at the first approach the ngf directive approach so guys uh unfortunately in this ngf directive like this ngf we don't have another directive like NG else so in angular in order to show this user not logged in message we have to use another same ngf directive again right so before that let's create the message for this let's use uh H4 tags open and close H4 tags between this pass the message user is not logged in next we have to show this message in The View when the user is not logged in in another way we have to show this message when this Boolean value is set to false as I said for this also we have to use another NG if so add the NG if directive and the condition is this time we have to check the opposite of this is logged in Boolean value so for this we can use the note operator so we learned about this in the previous lecture right so the exclamation mark represent the not operator so at that here after this at the variable is log in that's it so guys with this we are telling this to load this message when uh the statement returns false so how you guys got the idea I say this and go to the browser we got the username why that because this value is set to True Boolean value now change this value to false save this and again go to the browser as you guys can see here now this loaded the user not logged in message which means this condition worked this return false awesome right so guys this is how we deal with the else condition using the ngf directive so let look at our second syntax approach uh guys so how do we do this using the syntax approach for this also guys we can do the same approach like previous we can create another if condition down here and we can check the false statement with the not operator and we can load the not logged in message inside the browser view same like previous right um wait let's write the code so you guys can understand this clearly down here again create another if syntax block at if after this parenthesis and the if scope now the condition is the same as the previous opposite of is loged in so not operator and the variable is is logged in now inside the scope let's pass uh the message that we want to show inside the browser way for this also create an H4 tag and the message is something user logged out um add this also inside brackets loaded using IF syntax block so now we can clearly differentiate these two approaches inside the browser so now set this variable value to True inside the browser we cannot see any messages so now again set this variable value to false now this loaded the both messages ngf and if syntax blocks messages so which means this also working fine so guys before we move on in angular if we use this if syntax block approach in our angular application we have an advantage this syntax block included the else block so not like the previous ngf approach so we can simply create an else block same as this if block and we can simply render the message so let's see this inaction down here after this first if block create a else block same as the is at symbol and the block is else so for this uh we don't need a condition parameter so just simply add the else block scope with curly brackets now pass the message simply copy and paste the previous message and change this to loaded from else syntax block that's it so save this and go to the browser as you guys can see here this time this else block message also rendered inside the browser which means this also working as we expected so let keep this in your mind as a good practice we will use this else block when we used the if syntax approach in our angular application so we will not create another new if block again so guys that's it for this lecture hope you guys got this right so in the previous lecture we learned about the condition when we learning the directory approach I said that there is no NGL directive guys actually we have an lse statement in a ngf directive but its approach is something a little different so in this lecture learn about this in detail so guys in the previous lecture we used another ngf to handle the else condition part this worked but it can get a bit messy when we have to deal with multiple conditions right so let's look at a cleaner way to do this for this guy guys in angular we have another directive which is NG template so let's dive in uh first let's take the same example as the previous I want to show this user not logged in message when this is logged in value set to false so first let's define the message which is this H4 tag so let's duplicate this and remove the NG course now we don't need this NG change the message to something loaded using NG template now we have to WRA this message inside of NG template tags so guys we use this NG template as HTML custom tags so open and close NG template tags ng- template so now inser this cut and paste this message all right so now we have to give an identifier to this so we can access this NG template outside of this so for this we'll use template variables we learned about this also in detail in the previous lecture right so how do we create a template variable we declare a template variable using Ash symbol right so hash symbol and the variable name set this to something message awesome now we have the NG template now let's see how to deal with the else condition part nothing much after this NG condition add this so first add a semicolon after this else keyword then we have to pass that we want to do in this else part so in our case for this we want to show this NG template message so how do we pass that here very simple just simply pass this template variable here so this will render this NG template message P inside the view if this Boolean value set to false that's it so save this and go to the browser as you guys can see here we got this message which is loaded from NG template so guys this is how we deal with ngf else condition so guys this approach is almost out of date throughout this course we will use the latest syntax approach if you guys don't get this leave it it will be a not an issue all right so let's move on to the next l so guys in the previous lecture we learned how to deal with angular if directive only using Boolean true or false values but guys for this we can use string or number values as well so this lecture let's look at how to use NG if directive with number values so first look at the ngf directive and in the next lectures we look at the new if syntax approach so let's get started so guys let's look at this with an example so for this I want to show message when the user exceeds three login attempts so we'll count the login attempts with a login button so let's do this for this first thing first let's create a button so go to the app component file and create button tags the button text will be login so next what I want to do is I want to count the login attempts when user clicks this button so how do we do that so very simple for this we can use the click binding approach so inside this button starting tag add a click event binding so how do we add that we learned about this in the previous lectures so how do you do this very simple for event bindings we use brackets right so open and close simple brackets inside this pass the event which is Click now when this click event occur we'll call a method something count login ATMs so after this don't forget to add the parenthesis so guys as you guys can see here we are getting this compile why is that can you guys tell me yes of course so guys we are calling this method from here but there is no method declared inside the app component TS file so in order to fix this we have to create this method so go to the app component TS file and create this method the method name is Count login attempt so carefully follow this simple capital letters so after this add the parenthesis and the method scope so we successfully created the method next what I want to do is I want to store the login count inside of a variable so when user click the login button so let's do this uh for this first thing first we need a variable so create a variable the variable name is something login count set this type as number so after this set a default value to this zero next what I want to do is I want to increment this login count by one when user press the login button so how do we do that very simple so inside the account login method let's increment this variable value by one so for this we can use the increment operator which is 2 plus symbols so inside this the variable this Dot Login count after this Plus+ so that's it so guys once again simply in this increment operator will increase this login count value by one so by default this value is set to zero so when user press the login button at the initial stage this will increase the default value by one in order to see this clearly We'll add a log down here so after this add a con so log and pass this variable inside this log parenthesis that's it so save this all and go to the browser now click on this login button inside the browser console we can see number one so if I press this login button again we can see two and so on so this method is working as we expected right so guys next let's work on the conditional logic uh guys I want to show a message when user exceed three attempts of clicking this login button so how do we do that for this we'll simply use the ngf directive so first thing first let's create the message for this let's use an H4 tags the message will be exceeded three login attempts try again later that's it so now I want to show this message when user EX Ed the clicks of this login button so for this add the ngf directive inside this H4 opening tags as symbol and the directive NG if so after this add the condition which is we are store this login count inside of this login count variable so add that here login count and add the greater than symbol after this add number three so with this we are telling to this condition if this login count variable value is greater than three show this message that's it so save this all and go to the browser as you guys can see here now we are not getting the warning message so click the login button three times after I click three times this error message appeared inside the browser awesome right so guys once again with this condition we are telling to check whether this login count variable value is greater than three or not if this greater than three this greater than operator will return Pro so in that case this message H4 tags will render inside the browser so this is how this error message loaded inside the browser so hope you guys got the idea so guys before we move on to the next lecture let's see another example now I want to hide this button when the user attempts three times to login so how do we do that for this also we can use the same approach so add uh NG if directly to this button opening T the condition this time first at the login count variable and check whether this login count is less than number three so this time I want to display this button when this login count value is less than number three right so if this login count value is less than three this will return true then this button will appear inside the browser otherwise this button will not rendered inside the browser so that's it save this all and go to the browser click this button three times and as you guys can see here this time after the attempt three login button disate from the vi and this login attempt warning message appeared inside the browser view awesome right so guys this is how we deal with numbers in NG if directive so in the previous lecture we learned how to deal with number values in if directive using the old ngf directive so in this lecture let's see how to do this using the new syntax approach so first write the if block wait before that for this also we'll Define another button so create a button tags and add the button text login syntax next copy and paste the previous click event binding no need to change anything that's it so next after this create the if block inside the condition parenthesis add the condition so this time we want to check whether this login count value is greater than number three so same like previous so inside this block add the message that we want to display inside the browser so I will copy and paste the previous message so at last don't forget to remove the ngf directive from this H4 tags that's it so save this all and go to the browser now this time click on the second syntax Button as you guys can see here after three attempts we got the login attempt warning message so this is coming from the if syntax block so this was the same like previous so if the login count variable value is greater than three this will return true and if this return true this if block will display this message inside the browser simple right next let's see how we can hide the button inside The View when user attempt more than three times to login so how do we do that very simple so create another if syntax block and set the condition same like previous the login count variable is less than three so now inside this cut and paste our second button that's it so save this and go to the browser as you guys can see here this time the button disappeared from the browser and message appeared inside the browser after user attempts three times to login so guys I'm not going to explain everything this is very easy same scenario like the previous so only the difference here is the quote block previously we use the NG if now we are using the new way if syntax blocks so that's it so guys uh this is how we deal with number values in angular if blocks perfect so guys in the previous lecture we learned how to deal with number values now in this lecture let's see how we can do the conditions with string values so guys nothing much here so for this also let's look at an example the example is so when user logged in I want to show a message based on a user role like the previous example but this time we will store the user roles inside of string variable not like the previous Boolean values right so let's do this first thing first go to the the app component is file and create a variable to store the user role so create a variable something user role and set this type to string at last set a default value to this something admin next let's work on the logic so go to the component HTML file first let's create the message so create an H4 tags the message is welcome admin next let's add the condition so inside this H4 tag at the directive NG if the condition is this time I want to show this message when the user all variable set as admin so how do we check that very simple for this we can use the equals operator right so pass the condition now first the variable user role after this equals operator which is this double equals sign after this add the user all which is admin pass this inside codes that's it so we successfully write the condition so guys with this we are telling that if this user Ro variable is set to admin display this message simple right so save this all and go to the browser as you guys can see here this time we got this admin message here if I change this variable value to something different something member save this and go to the browser now this message is not displaying inside the browser awesome so guys now what I want to do is I want to show another message when this user all value set member set to member so how do we do that for this we can write another ngf but for this example as a good practice we'll do this using the else condition so let's do this for this first thing first we need a NG template so down here create NG template inside this create the message which we want to show when the user R set as member so create another H4 tags get the message welcome member now at last don't forget to add an identifier to this NG template so how do we add that for this we'll use template variables so create the template variable something member message that's it so next let's work on the else condition so after this ngf condition add a semicolon and add else so after this else condition call the NG template which is this member message that's it so save this and go to the browser now this time we can see this member message inside the browser so how this loaded inside the browser because this time this user all value set as member awesome right so guys in this lecture let's see how to deal with string values conditions using the new syntax approach so nothing much here very simple so first create this block and set the condition same as previous I want to show a message when the user role set as admin so how do we do that for this for this also we'll use the past condition the condition is user rooll equals admin so pass this admin as string values inside codes so now inside this block add the user admin message so save this and go to the browser now we cannot see the message why is that because now this user all set as member so in this case the syntax condition return false so in this case this syntax condition return false so this message will not render inside the browser so if I change the role to admin save this and go to the browser now we can see our admin message cool right so next guys let's see how to show the member message so how do we do that very simple for this we can use another else if block so after this down here add the else if block set the condition this time we want to check whether this user all value set as member or not so the variable is user all after this equals operator and the value is member pass this as a string value inside of quotes So after this inside this scope add the message welcome member that's it so save this all and go to the browser now we can see the admin message so back to the app component ES file change the user value to member save this and go to the browser now this loaded the member message inside the browser awesome right so guys this is how we deal with string conditions in if directive so guys we successfully completed the ngf directive awesome job guys now before we move on to the next directive let's dive deeper into the NG template in the previous lecture we used NG template but I didn't explain much about it so in this lecture let's look at what is NG template and what we can do with it so actually what is this NG template NG template is a powerful tool in angular that allows us to define template content that can be used later in our application unlike regular HTML elements and the templates itself will not rendered inside the Dome we can use it when we need it so guys think of NG template as a container for a piece of template code that we want to keep hidden until we needs it it's especially useful when working with conditional rendering as it allows us to define a template that will be displayed based on a certain conditions so this is what we did using the else condition in previous lectures when we deal with else conditions we used this NG template right so if this return true we show this message if not we show this NG template right so by default this NG templates content will not load inside the browser it will only load inside the browser when we call it from this lse condition wait I show you another example create NG G template TXS inside this and P tag and add this text this content is inside NG template so now save this and go to the browser inside the browser we cannot see the NG template message so guys this is what I was trying to tell you the content inside the NG template is not rendered in the Dom by default it act as a placeholder for the content that angular can inject into the Dom when needed so in order to render this NG template inside of the browser Dom we have to use one of the angular directive is so we can give an identifier to this using template variables something Dynamic template now inside this else we'll call this Dynamic template so save this and go to the browser as you guys can see here this time this loaded the NG template message inside the browser perfect right so guys once again NG template is a powerful feature in angular that allows you to define template content that can be conditionally or dynamically rendered inside the browser it's a great way to create reusable and flexible templates in your application I hope this examples helps you to understand how NG template works and how you can use it in your angular projects in the next lectures we'll explore more advanced directives and features of angular so let's move on to the next lecture so in the previous lecture we learned that in order to render the template content inside of the browser we have to use an angular directive right but there is another approach for this like the property binding approach for this we have another special property for this called NG template Outlet so let's see this an action guys think that we want to load something call to action button inside of this component multiple times in different areas simply how do we do that in traditional way we simply copy and paste that button code right so but in angular we can do this more efficiently using the NG template so let's see this inaction first thing first create a button something join now so now what I want to do is I want to load this button inside the side bar area footer area and also in the hero section area for this we'll create three Deals the first one is for the sidebar the second one is for the hero section and the third one is for the footer so in a traditional HTML website we will simply copy and paste this button in these three places something like this so this will load inside the browser as well so guys but as I said in angular we can do this using the NG template so for this first thing first wrap this button inside of NG template tags so after this give identify to this template something called to action so save this and go to the browser now we cannot see the button inside the browser why is that because the NG template content will not render inside the browser until we Trigger or call it right so now inside these sections DS how do we load in this NG template in here we do not need to use any angular directives so how do we do that very simple for this we have another property in angular called NG template Outlet so inside the first div add square brackets and add this property NG template Outlet so now from here access the NG template which is this C action as you guys can see here we are getting a compile error which is this NG template isn't known a property of D so in order to fix this we have to import that into the app component so same like other Imports inside this Imports array at the module name NG template Outlet select this from the auto suggestions this will add the import statement automatically this also coming from this angular Command Module awesome so now we don't have the error so save this all and go to the browser now we can see the join now button inside the first div sidebar so using the same approach we can load the same button inside the other divs as well so inside this again pass the same NG Outlet template let's copy and paste this from the previous View sa this and go to the browser now this loaded the join now button inside this all three sections so guys before end of this lecture inside of this NG template area we can Define as much as templates we needed for example we can add a P tag here something call to action so save this and go to the browser as you guys can see here this loaded this P tag also in all of these sections so guys simply using the NG template we can reuse a piece of template code again and again without repeating the same HTML code inside our browser so guys this is the use of NG template so hope you guys all understand this all right I think that's it for this lecture so let's move on to the next one so guys in the previous lecture we learned how to deal with angular if directive only using Boolean true or false values but guys for this we can use string or number values as well so this lecture let's look at how to use ngf directive with number values so first look at the ngf directive and in the next lectures we look at the new if syntax approach so let's get started so guys let's look at this with an example so for this I want to show a message when the user exceeds three login attempts so we'll count the login attempts with the login button button so let's do this for this first thing first let's create a button so go to the app component HML file and create button Texs the button text will be login so next what I want to do is I want to count the login attempts when user clicks this button so how do we do that so very simple for this we can use the click binding approach so inside this button starting tag add a click event binding so how do we add that we learned about this in the previous lectures so how do you do this very simple for event bindings we use brackets right so open and close simple brackets inside this pass the event which is Click now when this click event occur we'll call a method something count login atempts so after this don't forget to add add the parenthesis so guys as you guys can see here we are getting this compile eror why is that can you guys tell me yes of course so guys we are calling this method from here but there is no method declared inside the app component TS file so in order to fix this we have to create this method so go to the app component TS file and create this method the method name is Count login attempt so carefully follow this simple capital letters so after this add the parenthesis and the method score so we successfully created the method next what I want to do is I want to store the login count inside of a variable so when user click the login button so let's do this uh for this first thing first we need a variable so create a variable the variable name is something login count set this type as number so after this set a default value to this zero next what I want to do is I want to increment this login count by one when user press the login button so how do we do that very simple so inside the account login method let's increment this variable value by one so for this we can use the increment operator which is two plus symbols so inside this the variable this Dot Login count after this plus plus so that's it so guys once again simply this increment operator will increase this login count value by one so by default this value is set to zero so when user press the login button at the initial stage this will increase the default value by one in order to see this clearly we'll add a log down here so after this add a console log and pass this variable inside this log parenthesis that's it so save this all and go to the browser now click on this login button inside the browser console we can see number one so if I press this login button again we can see two and so on so this method is working as we expected right so guys next let's work on the conditional logic uh guys I want to show a message when user exceed three attempts of clicking this login button so how do we do that for this we'll simply use the ngf directive so first thing first let's create the message for this let's use an H4 tags the message will be exceeded three login attempts try again later that's it so now I want to show this message when user exceed three clicks of this login button so for this add the ngf directive inside this H4 opening tags as symbol and the directive NG if so after this add the condition which is we store this login count inside of this login count variable so so add that here login count and add the greater than symbol after this add number three so with this we are telling to this condition if this login count variable value is greater than three show this message that's it so save this all and go to the browser as you guys can see here now we are not getting the one message so click the login button three times after I click three times this error message appeared inside the browser awesome right so guys once again with this condition we are telling to check whether this login count variable value is greater than three or not if this greater than three this greater than operator will return Pro so in that case this message H4 tags will render inside the browser so this is how this error message loaded inside the browser so hope you guys got the idea so guys before we move on to the next lecture let's see another example now I want to hide this button when the user attempts three times to login so how do we do that for this also we can use the same approach so add uh NG if directly to this button opening T the condition this time first at the login count variable and check whether this login count is less than number three so this time I want to display this button when this login count value is less than number three right so if this login count value is less than three this will return true then this button will appear inside the browser otherwise this button will not rendered inside the browser so that's it save this all and go to the browser click this button three times and as you guys can see here this time after the attempt three login button disappeared from the vi and this login attempt warning message appeared inside the browser view awesome right so guys this is how we deal with numbers in ngf directive so in the previous lecture we learned how to deal with number values in if directive using the old ngf directive so in this lecture let's see how to do this using the new syntax approach so first write the if block wait before that for this also we'll Define another button so create a button tags and add the button text login syntax let copy and paste the previous click event binding no need to change anything that's it so next after this create the if block inside the condition parenthesis add the condition so this time we want to check whether this login count value is greater than number three so same like previous so inside this block add the message that we want to display inside the browser so I will copy and paste the previous message so at last don't forget to remove the NG if directive from this H4 tags that's it so save this all and go to the browser now now this time click on the second syntax button as you guys can see here after three attempts we got the login attempt warning message so this is coming from the if syntax block so this was the same like previous so if the login count variable value is greater than three this will return true and if this return true this if block will display this message inside the browser simple right next let's see how we can hide the button inside The View when user attempt more than three times to login so how do we do that very simple so create another if syntax block and set the condition same like previous the login count variable is less than three so now inside this cut and paste our second button that's it so save this and go to the browser as you guys can see here this time the button disappeared from the browser and message appeared inside the browser after user attempts three times to log so guys I'm not going to explain everything this is very easy same scenario like the previous so only the difference here is the code block previously we use the ngf now we are using the new way if syntax blocks so that's it so guys uh this is how we deal with number values in angular if blocks perfect so guys in the previous lecture we learned how to deal with number values now in this lecture let's see how we can do the conditions with string values so guys nothing much here so for this also let's look at an example the example is so when user logged in I want to show a message based on a user role like the previous example but this time we will store the user roles inside of string variable not like the previous Boolean values right so let's do this first thing first go to the app component is file and create a variable to store the user role so create a variable something user role and set this type to string at last set a default value to this something admin next let's work on the logic so go to the component HTML file first let's create the message so create an H4 tags the message message is welcome admin next let's add the condition so inside this H4 tag at the directive NG if the condition is this time I want to show this message when the user all variable set as admin so how do we check that very simple for this we can use the equals operator right so pass the condition now first the variable user role after this equals operator which is this double equal sign after this add the user all which is admin pass this inside codes that's it so we successfully write the condition so guys with this we are telling that if this user role variable is set to admin display this message simple right so save this all and go to the browser as you guys can see here this time we got this admin message message here if I change this variable value to something different something member save this and go to the browser now this message is not displaying inside the browser awesome so guys now what I want to do is I want to show another message when this user all value set member set to member so how do we do that for this we can write another ngf but for this example as a good practice we'll do this using the else condition so let's do this for this first thing first we need a NG template so down here create NG template inside this create a the message which we want to show when the user R set as member so create another H4 tags set the message welcome member now at last don't forget to add an identifier to this NG template so how do we add that for this we'll use template variables so create template variable something member message that's it so next let's work on the else condition so after this ngf condition add a semicolon and add else so after this else condition call the NG template which is this member message that's it so say this and go to the browser now this time we can see this member message inside the browser so this loaded inside the browser because this time this user all value set as member awesome right so guys in this lecture let's see how to deal with string values conditions using the new syntax approach so nothing much here very simple so first create the block and set the condition same as previous I want to show a message when the user role set as admin so how do we do that for this for this also we'll use the past condition the condition is use roll equals admin so pass this admin as string values inside codes so now inside this block add the user admin message so save this and go to the browser now we cannot see the message why is that because now this user all set as member so in this case the syntax condition return false so in this case the syntax condition return false so this message will not render inside the browser so if I change the role to admin save this and go to the browser now we can see our admin message cool right so next guys let's see how to show the member message so how do we do that simple for this we can use another else if block so after this down here add the else if block set the condition this time we want to check whether this user all value set as member or not so the variable is user all after this equals operator and the value is member pass this as a string value inside of quotes So after this inside this scope add the message welcome member that's it so save this all and go to the browser now we can see the admin message so back to the app component is file change the user value to member save this and go to the browser now this loaded the member message inside the browser awesome right so guys this is how we deal with string conditions in if directive so guys we successfully completed the ngf directive awesome job guys now before we move on to the next directive let's dive deeper into the NG template in the previous lecture we used NG template but I didn't explain much about it so in this lecture let's look at what is NG template and what we can do with it so actually what is this NG template NG template is a powerful tool in angular that allows us to define template contain that can be used later in our application unlike regular HTML elements templates itself will not rendered inside the Dome we can use it when we need it so guys think of NG template as a container for a piece of template code that we want to keep hidden until we needs it it's especially useful when working with conditional rendering as it allows us to define a template that will be displayed based on a certain conditions so this is what we did using the else condition in previous lectures when we deal with else conditions we used this NG template right so if this return true we show this message if not we show this NG template right so by default this NG templates content will not load inside the browser it will only load inside the browser when we call it from this lse condition wait I show you another example create Ang G template Tex inside this add P tag and add this text this content is inside NG template so now save this and go to the browser inside the browser we cannot see the NG template message so guys this is what I was trying to tell you the content inside the NG template is not rendered in the Dom by default it act as a placeholder for the content that angular can inject into the Dom when needed so in order to render this NG template inside of the browser Dom we have to use one of the angular directives so we can give an identifier to this using template variables something Dynamic template now inside this else we'll call this Dynamic template so save this and go to the browser as you guys can see here this time this loaded the NG template message inside the browser perfect right so guys once again NG template is a powerful feature in angular that allows you to define template content that can be conditionally or dynamically rendered inside the browser it's a great way to create reusable and flexible templates in your application I hope this examples helps you to understand how NG template works and how you can use it in your angular projects in the next lectures we'll explore more advanced directives and features of angular so let's move on to the next lecture so in the previous lecture we learned that in order to render the NG template content inside of the browser we have to use an angular directive right but there is another approach for this like the property binding approach for this we have another special property for this called NG template Outlet so let's see this in action guys think that we want to load something called to action button inside of this component multiple times in different areas simply how do we do that in traditional way we simply copy and paste that button code right so but in angular we can do this more efficiently using the NG template so let's see this inaction first thing first create a button something join now so now what I want to do is I want to load this button inside the sidebar area foter area and also in the hero section area for this we'll create three Deals the first one is for the Side Bar the second one is for the hero section and the third one is for the footer so in a traditional HTML website we will simply copy and paste this button in these three places something like this so this will load inside the browser as well so guys but as I said in angular we can do this using the NG template so for this first thing first this button inside of NG template tags so after this given identifier to this NG template something called to action so save this and go to the browser now we cannot see the button inside the browser why is that because the NG template content will not render inside the browser until we Trigger or call it right so now inside these sections how do we load in this NG template in here we do not need to use any angular directives so how do we do that very simple for this we have another property in angular called NG template Outlet so inside the first div add square brackets and add this property NG template Outlet so now from here access the NG template which is this C action as you guys can see here we are getting a compile error which is this NG template isn't known a property of D so in order to fix this we have to import that into the app component so same like other Imports inside this Imports array add the module name NG template Outlet select this from the auto suggestions this will add the import statement automatically this also coming from this angular Command Module awesome so now we don't have the error so save this all and go to the browser now we can see the join now button inside the first div sidebar so using the same approach we can load the same button inside the other divs as well so inside this again pass the same NG Outlet template let's copy and paste this from the previous View save this and go to the browser now this loaded the join now button inside this all three sections so guys before end of this lecture inside of this NG template area we can Define as much as templates we needed for example we can add a P tag here something call to action so save this and go to the browser as you guys can see here this loaded this P tag also in all of these sections so guys simply using the NG template we can reuse a piece of template code again and again without repeating the same HTML code inside our browser so guys this is the use of NG template so hope you guys all understand this all right I think that's it for this lecture so let's move on to the next one all right guys in this lecture let's look at our next structural directive and G4 or the for Loop directive so basically we use this to Loop a set of data stored inside of an array so let's see this in action so guys first thing first we need an array for this so let's create this array so go to the app component file and create this array set the array name to something like users the variable type is array and set the array type as string next set a default value for this array so how do we Define an array yes of course we will define an array using square brackets so open and close square brackets and inside set a few dummy usernames uh set the first name as John so guys don't forget to put this inside codes because this array values are strings all right so the first name is John the second array value is Sam the third one is Smith and finally Raj so guys all these values will be string data types okay so now we have the array now I want to load these array values inside the V so how do we do that for this we can use several approach just in angular so first let's see the string interpolation approach so go to the app components HTML file and create an H3 tag inside this add the string interpolation scope and the array name which is users that's it so save this and go to the browser as you guys can see here it's now loaded the array values inside the browser V but guys if you look at this carefully all the array values are loaded as one value separated by commas so think about this if I want to load these array values as separate values in separate heading tags how do we do that so we can simply do that using the array index values so let's see this an action in our array we have four values so create 4 H3 tags simply duplicate these H3 tags four times now we can access the array values one by one using the array index so what will be the index for the first value is it one or zero as you guys know array indexes start from zero not from one so we can access the array value using the array index inside square brackets right so hope you guys already know know about this this is nothing to do with angular this is just basic JavaScript all right so for the first value after the users variable open and close square brackets and add the array index number which is zero for the second value insert square brackets use the number one the next value is number two and the last value index is number number three so now save this all and go to the browser as you guys can see here now we got the array values one by one inside separate H3 TXS awesome right all right so guys this is how we deal with array values using string interpolation but this approach is not a good practice in our example we are the one who created this array so we know how how many values are inside this users array but in a real world application we cannot predict exactly how many values are inside an array in that case we cannot use this string interpolation approach effectively so as a solution we can use the ng4 directive in angular the ng4 directive will look inside this array and print each and every value inside the browser view until the array values are completed right so all right guys now let's see how we can do this using the ng4 directory so down here create another H3 tag and we want to load the array values inside this H3 tag so how do we write the ng4 directive so this is similar to the previous ngf directive so first thing first we will look at the old syntax of ng4 then in the next lecture we will look at the new syntax approach so let's write the G4 inside the opening H3 10 as before start with an asri symbol then the directive name is ng4 next we have to Loop through the array so write this statement inside codes so let user of users so guys with this we are telling angular to Loop through the users array and assign the values to a new variable named user so by using the L keyword we are creating a new user variable so this tells angular to iterate through the users array hope you guys got the idea so to load this inside the browser view we use the same approach as before with string interpolation so inside this open and close string interpolation brackets so open close to curly brackets so inside this add the user variable not the users array variable right so carefully note this all right so before we move on we have to import the ng4 direct to this otherwise this will not work so let's do this inside the app component TS file go to this Imports array after this add this NG for directive select this auto complete this will add the import statement so guys this is also coming from the angular common module perfect um I think that's it so save this and go to the browser as you can see this loads the users array values inside these four H3 tags one by one cool right so with just a few lines of code we dynamically displayed all the values in the users array inside the browser VI so once again we use the ng4 directive to iterate over the users's array so with this statement we create a variable named user and store each array values inside this user variable so after that we use string interpolation to load this inside the browser view so guys this is a simple use case of the ng4 detective in angular so you guys got the idea so guys in the previous lecture we learned how to fetch an array using the ng4 directive which is the old way in this lecture let's see the new approach using the updated ng4 syntax so this new approach is quite similar to the old one but with some improvements so we will use the same scenario as before we want to patch this array and display the users names one by one inside an 3 tag in the browser view so how do we do that so first let's uh create the for syntax blog how do we do that just like the same as the if syntax blog so we start by adding the at symbol followed by the directive name which is for after this add the parenthesis and the method scope so to define the scope simply simp L open and close curly brackets so now inside the parenthesis uh we need to add the condition we want to Loop through the users array so first we Define a new variable and like before we don't this is not like in the previous one in here we don't need to add the let keyword so just pass the new variable name user after this add of and array name which is users so we successfully added the looping condition now we want to load now let's load these values inside the browser so this also same as before so create an3 tags inside this looping scope inside this tag use the string interpolation approach so open and close two curly brackets insert this pass the new looping array variable which is user after this so next add this after this string interpolation loaded using for syntax block so guys with this we can identify the previous ng4 approach and this new approach inside the browser view so that's it uh but before we move on you might no this an error saying that this Loop must have a track expression so what is that in angular to work with this new for Loop syntax we must Define a track expression so let's do that so after the loop statement and a semicolon add the track keyword and set its value to user so which is this looping array variable that's it so say this all and go to the browser as you guys can see here the users array values are loaded one by one inside the browser so this time we use the new syntax approach in angular awesome right so guys this is how we Loop through an array using the new for Loop syntax in angular so guys in the previous lecture we learned how to fetch array data inside the browser View using a heading tag to display the data but what if we want to load this data inside an unnoted list so let's see this in action first we'll look at the old ng4 directive approach and then we'll move on to the new syntax so let's get started first create an unnoted list inside the HTML file so how do we create an unloaded list so for this we use the UL HTML tags so create UL tags and inside them create an Li tag now inside these Li tags we want to fetch the users's name so how do we do that we can use the ng4 directive just like before so inside the AI tag add the ng4 loop so start with the stic symbol and add the directive name ng4 so next Define the loop by creating a variable let user of users so this is the array name so now inside the L Tex use a string interpolation to fetch the user name so open and close to curly brackets and inside add the variable name user that's it so save this and go to the browser as you guys can see here this time we got our users names as a list so this is very easy right so guys before we move on I want to show you something some of you guys might wonder why we wrote this ng4 condition inside the L tags instead of inside the UL tags can you guys tell me why is that the reason is that ng4 directive should be used on the elements that we want to repeat so in this case the LI elements are repeated for each user not the UL element if you used the ng4 on the UL tag it would try to repeat the entire list structure instead of just the list items uh wait let's see this in action so cut the ng4 directive from the LI tag and paste it inside the UL tag save this and go to the browser as you can see here nothing has changed so we got the same results as before but if you look inside the code you can see that we got four different UL tags each containing Li tags so now if I place the ng4 directive back inside the LI tags we got only one UL tag with four Li tags inside this main UL tag so this is what I was trying to explain when using the ng4 directive it should be placed on the elements that you want to repeat which in our case this Li tag not the UL tag so hope you guys got the idea all right so before we move on let's quickly see how to do this using the new for syntax blogs so first create uh the for Block using the ad symbol after this add this directive four add the parenthesis next at the Block scope so now inside this parenthesis at the Loop user of users so in this syntax approach we don't need to use the let keyword and after this we must also pass the track value add that here after this coland and the track keyword the value is this variable user so now inside this scope create UL tags and Li tags inside this Li tag simply render the user value using the string interpolation that's it so save this and go to the browser as you can see we go our second user list which is loaded using the four syntax blocks awesome right um wait uh there's one more thing here without realizing it I made a mistake can you guys find the problem yes of course the problem is with the UL tag I place the UL tag inside this block if I look at the code inside the browser elements tab we can see see this it's repeating the UL TXS so what is the issue here so guys the issue here is that by placing the UL tag inside the for Block the entire UL tag is being repeated for each user instead of just this Li Texs so this is the same issue as before to prevent this we need to move the UL tags outside of the for loop block so let's do this so remove the UL Tex from inside the for block and place them before the for Loop syntax and add the closing U tag after the for Loop blocks scope so that's it save this and go to the browser as you guys can see here this time we got only one UL tag so guys remember this we must put only the repeating element inside this for loop block scope so hope you guys got this idea perfect in the real world application we often have to work with object arrays not simple string arrays like our users array so in this lecture let's see how we can deal with object arrays using the ng4 directive so first thing first let's create a new array for this inside the component ts5 at the following code set the array variable name as something users obj with a capital O after this set this type as an array and the array type is objects next assign a default value to this array so open close square brackets and inside this let's define the user values as objects so how do we Define objects we Define objects using curly brackets right so inside the array scope open and close the object scope open and close two curly brackets now inser this Define key value pairs for the object so the first key value pair is ID and set this value as number one so next let's define the name name the key is name and the value is John so pass this as a string value inside codes so next let's define the email address the key is email and set the value as jn@ gmail.com so once again pass this as a string value inside of codes so I think that that's enough for this one object so let's define uh few more user objects in this array so copy and paste the previous object three times and change the values so in the second object change the ID to two name to Smith and email to Smith at gmail for the next object set ID to three name to Sam and email to Sam at gmail.com lastly set the ID to 4 name to Raj and email to Raj at gmail.com so guys now we have the array of objects so let's see how we can load this inside the browser view so in order to load this inside the browser view so go to the HTML file and create an unordered list first create UL tags and after this add Li tags now inside these Li tags let's add the ng4 directive so even though this values are objects the entire structure is still an array to load array details inside the browser view we have to use the ng4 directive so at the ng4 directive inside this Li opening Texs start with the S symbol followed by the directive name ng4 so next Define the loop as before so this is like same like previous so Define a variable let user after this off and the this time array name is users obj so follow this simple capital letters carefully so now in order to load these looping values inside the browser view we have to use the string interpolation approach right so inside the LI TX add the string interpolation scope and inside this add the user variable which is this looping variable now save this all and go to the browser so in the browser you guys can see this object object instead of the actual object values so what is this can you guys tell me so guys actually this happen because we are trying to display play the entire object directly so that's why this loaded the object object inside the browser so this is not like the previous string array in order to display object values inside the view we have to access the values individually by using the object key right so let's see this inaction inside the string interpolation after the user variable add a DOT and so let's load the user's name by passing the key which is name so it should be user. name if you look at this carefully you can see in this compile error so what is this error this error is coming from typescript when dealing with objects in typescript we have to define the shape of our object using an interface otherwise typescript doesn't know the exact shape of our object and it will throw this error to fix this we need to Define an interface however in this lecture we will not dive into object interfaces so in a section we have a dedicated section for this interfaces right so for now to fix this error simply change the array type from object to any that's it so now we won't get any errors so save this and go to the browser as you guys can see here all the users names are loaded inside the list so this is how we fetch data from array objects so in any case if you want to load the email instead of the user name how do we do that it's very simple just change the key of the object from name to email so again save this and go to the browser as you guys can see here this time we got the email addresses instead of previous users name so guys that's it for this lecture let's move on to the next lecture where we will see how to fetch this object arrays using the new follow Loop syntax approach all right guys in the previous lecture we learned how to fesh an array object using the ng4 directive so in this lecture let's work on the how to fesh an array using the new angular syntax approach so first let's write the new for syntax so how do we write that so add the at symbol after this direct your name for after this next the looping condition parenthesis and last don't forget to add the directive scope now let's write the loop so user this is the variable so in this new Loop syntax we don't need to pass the let keyword right so the loop is user of users obj which is our users array object variable next when using this new syntax approach we must pass pass the track option to this Loop otherwise this will throw an error so after this add a semicolon and the track after this pass the loop variable user that's it so guys next uh let's load the values so how do we do that for this we'll use string interpolation so inside this Loop scope add a string interpolation scope after this add the looping array variable which is this user that's it so save this and go to the browser as you guys can see here inside the browser we got this object object so why is that can you guys remember in the last lecture we learned about this right so guys we are getting this object object value inside the browser because with this we are directly accessing the entire object so in order to fix this we have to pass the object key name here so pass that after this you user variable so user do name save this and go to the browser this time we got the users names but this loaded in a single row so in order to see this clearly let's load this inside of UL Tex so how do we do that so first WP this for Loop inside of UL tags after that inside this Loop scope create L line tags and put this string interpolation value inside of Li TS that's it so save this all and go to the browser as you guys can see here this time the users names are loaded as unordered list awesome right so guys this is how we deal with an array object using the new for syntax approach in angular so guys in this lecture let's look at another awesome feature in angular which is the angular change detection mechanism so let's do this first I want to add a new user object to our current object array programmatically so guys let's do this when pressing a button so when user press uh the button will call to a method and from that method we load the new user object into our user obj array so let's see this in action all right so start this by adding a new user we'll create a button for this purpose so guys let go to the HML file and enter button text and the button text will be end new user now I want to call a method when I click this button so for this we need to bind a click event binding to this button so how do we bind a click event yes of course so inside the button tag at the event click inside of brackets next assign this to a method called something add new user so pass this inside codes and don't forget to add the method parenthesis so guys this will call the add new user method when this button clicked so as you guys can see here we are getting a compile error here why is that course still we don't have this method declared so in order to fix this let's create the add new user method in our components typescript file so go to the component is file and create the method so the method name is add new user carefully follow these Capital simple letters so after this add the parentheses and the method scope now inside this let's add a new user object to our array so how do we do that for this we can use the JavaScript array push method right so so let's see this in action inside this method first let's define a new user object to push inside this array first Define a variable let user and assign this to the user object open and close curly brackets inside this add the key value pairs ID and set the value as number five next name add the name something user one pass this insert codes next the email at this user [email protected] and pass this also as a string value inside quotes all right so next let's push this object into our user object so down here access this user object variable this keyword after this dot user obj again dot push method so after this don't forget to add the parenthesis now inside this parenthesis pass the object that we want to push to our array which is this user so pass that here inside this push method parenthesis as parameter that's it so guys this push method will insert our new user object inside the array as the last array value so I think that's it save this all and go to the browser now you should see the add new user button click on it as you guys can see here once I press the add new user button a new user is added to our array and the users name is loaded inside the browser VI so if I press the button again another new user is rendered inside the browser view so every time I click this button you can see a new user added to the list without reloading the page so this happens in real time thanks to the angulus change detection mechanism so what's happening here angulus change detection mechanism detects changes in the application such as a button click an ax request or any data value changes when such changes occur angular updates the D to reflect these changes in real time so when we click the add new user button angular detects the new user object added to the array and updates the list in the vi immediately and in real time so without needing to refresh anything once again guys angular change detection mechanism is like a small B inside our application this bot continuously watches our entire application looking for any changes when such changes occur this change detection but immediately acts and updates the D according to the changes in real time this is what we simply call the change detection mechanism in angular so this is one of the reasons the angular framework is getting popular day by day all right guys in the previous lecture we learned how to push a new value to our users array object and also we learned and how the angular change detection mechanism works so now think in any case if you want to remove a user object from the user obj array how do we do that very simple so let's do this first thing first I want to add a delete button to each array element that loads inside the browser so go to the HTML file and add the delete button inside the first list of user where we use the ng4 to fetch the array object so now next to this string interpolation and the delete button so open and close button tags and the button text will be delete now next I want to call a method from this button to write the delete operation code so b a click even to this inser brackets the event is click and next the method name is something on delete so after this add the parenthesis now we have the delete button let's work on the delete logic so go to the app component is file and create the UND delete method so down here method name is UND delete next the parenthesis and the method score so guys we are dealing with an array right so I want to delete or remove the relevant user object when the user click the delete button uh wait so save this and go to the browser now as you guys can see here we got this delete button on each and every user value loaded inside the browser so if I add another new user using our previous button for this also we got another new delete button so guys why do we need separate delete button for each and every value can you guys guess yes of course so guys having a delete button for each user allows us to remove specific user individually think if you want to delete the JN from this list so for this we can simply click on the delete button which located front of the Jo value not the other delete buttons If I click on the Raj delete button this will remove only the r LGE user object not the others so this is important for user management functionality where you might want to delete specific entries without affecting the rest of the list hope you guys got the idea all right so next guys uh to delete a specific value from an array we need the array index number of Target deleting object so how do we get that for this we have another JavaScript method in Array index of method if we pass the any array value to this method this will return the array index number so let's see this in action in order to get the index number we have to pass the target array value to this method right so how do we do that so we can pass that to this method for binding this as a parameter value so our array object is stored inside the user variable so pass the user variable to this on delete method inside this parenthesis awesome so now we are passing the user object from the on delete method let's capture it using a new variable something user so guys don't get confused this user is inside the HTML file we we storing the looping and array user objects and this user is located inside the TS file we created this to capture the parameter so these two variables are totally different okay so next set this parameter variable type as object now inside this method let's first get the index number of the array so this do array variable is users obj of this again Dot and the index of method after this add the parenthesis so this method required the array value as the parameter so pass that here pass this user parameter variable inside this F parenthesis so next this inside of a variable something let index awesome so we have successfully captured the index value but wait uh let's see wait let's log this down so we can see this clearly down here at the console.log and pass this index variable to this now save this all and go to the browser click on one of these delete buttons as you guys can see here inside the browser console we got the index number of relevant user values perfect right all right so next by using this we can delete the users from the users obj array so let's see this inaction what the component is file as I mentioned before for this we have another method called splice in JavaScript so let's do this after this again add the array this do users obj after this dot splice and the parenthesis guys this uh method require two parameters one is is the index number and the next one is the number of items that we want to delete so pass the index variable as the first parameter and as the second parameter pass number one so we want to delete only one item at once that's it so save this and go to the browser click on this Jon's delete button as you guys can see here this deleted the John from this list next let's click on the Raj delete button as you guys can see here this remove the Raj from the list awesome right so guys clicking the delete button next to a user will trigger the UND delete method which will remove that user from the users obj array angular change detection mechanism will then automatically update the view to reflect the changes in real time removing the user from the list displayed in the browser so every time you click the delete button the specific user will be removed from the list without needing to refresh the page this is another demo of an angular's change detection mechanism in handling Dynamic updates to the Dom hope you guys got the idea awesome right all right guys so in the previous lecture we did this delete operation for this delete operation we had to use the index of the array to delete the relevant array object so for this we use this index of JavaScript array method but guys in angular we have a simple approach for this in angular we can directly get the index of the looping array using the ng4 directive with just one line of good right so let's see this in action there's not much here just simply add this after this ng4 Loop and the semicolon after this again Define another variable for index so let I assign index so guys with this index NG for Loop we'll throw the current index number of the looping array so in order to use that we have to assign this into a variable so this is what we did with this new variable all right so we successfully captured the index of the object array values next um wait before we move on let's load this index numbers inside the browser view so we can understand this clearly so before the string interpolation add another string interpolation and add the index variable which is this I that's it so save this and go to the browser as you guys can see here this time we got the index numbers loaded inside the browser these numbers started from zero why is that because we are looping through an array so array index starting from zero simple right all right so guys this is how we capture the index of the looping array in angular ng4 directive way so now let's see how we can use this to deal with the delete operation nothing much here this time just simply pass this index variable into this on delete method parameter instead of the previous you users object so as you guys can see here after we changing this parameter variable we are getting this compile error why is that because this time we are sending an index number not an object so in order to fix this we have to change this variable type to number wait um I'll commend this and let's create another method for this approach so we can compare them both clearly down here again create the on delete method inser parenthesis create the parameter variable something index and this time set this type as number now inside this method nothing like previous we don't need to use the index of method because we already have the index number so just simply add this place method to remove that Target value from the users array so down here this dot our array uses obj and again dot splice method so now inside this parenthesis pass the index number that's it so save this all and go to the browser press one of these delete button as you guys can see here when I click the button that relevant item removed from the view which means this is working as previous awesome right so guys with the single line of code we achieved the delete operation as we expected so this is the beauty of angular all right so before we move on some of you might wonder why we need to assign the index to a variable instead of using it directly the reason is that ng4 in angular provides a mechanism to capture the current Loops index and bind it to a local template variable this local variable can then be used within the scope of the loop to access the current index without assigning it to a variable we don't have a way to reference the index value directly in the template so that's why we are assigning this to a new template variable hope you guys got the idea right guys that's it for this lecture let's move on to the next lecture all right guys so in the previous lecture we did this delete operation for this delete operation we had to use the index of the array to delete the relevant array object so for this we use this index of JavaScript array method but guys in angular we have a simple approach for this in angular we can directly get the index of the looping array using the ng4 directive with just one line of word right so let's see this in action there's not much here just simply add this after this ng4 Loop add a semicolon after this again Define another variable for index so let I assign index so guys with this index ng4 Loop we'll throw the current index number of the looping array so in order to use that we have to assign this into a variable so this is what we did with this new variable all right so we successfully captured the index of the object array values next um wait before we move on let's load this index numbers inside the browser view so we can understand this clearly so before this string interpolation add another string interpolation and add the index variable which which is this I that's it so save this and go to the browser as you guys can see here this time we got the index numbers loaded inside the browser these numbers started from zero why is that because we are looping through an array so array index starting from zero simple right all right so guys this is how we capture the index of the looping array in angular ng4 directive way so now let's see how we can use this to deal with the delete operation nothing much here this time just simply pass this index variable into this on delete method parameter instead of the previous you users object so as you guys can see here after we changing this parameter variable we are getting this compile error why is that because this time we are sending an index number not an object so in order to fix this we have to change this variable type to number wait I'll command this and let's create another method for this approach so we can compare them both clearly down here again create the on delete method inser parenthesis create the parameter variable something index and this time set this type as number now inside this method now nothing like previous we don't need to use the index of method because we already have the index number so just simply add this spli method to remove that Target value from the users array so down here this dot our array uses obj and again dot splice method so now inside this parenthesis pass the index number that's it so save this all and go to the browser press one of these delete button as you guys can see here when I click the button that relevant item removed from the vi which means this is working as previous awesome right so guys with a single line of code we achieved the delete operation as we expected so this is the beauty of angular all right so before we move on some of you might wonder why we need to assign the index to a variable able instead of using it directly the reason is that ng4 in angular provides a mechanism to capture the current Loops index and bind it to a local template variable this local variable can then be used within the scope of the loop to access the current index without assigning it to a variable we don't have a way to reference the index value directly in the template so that's why we are assigning this to a new template variable hope you guys got the idea all right guys that's it for this lecture let's move on to the next lecture all right guys in the previous lecture we learned how to use the index of followup directive in the ng4 directive so this lecture let's look at how to use the same index value in the new syntax approach for this we'll use this for Loop syntax blog we created this in the previous lecture so now let's see how to capture the index number of this looping array so this also same like the previous approach first we have to declare a variable so let I assign now we have to assign this to the index so pass that here as you guys can see here we are getting this compile error unknown variable index so what is this guys can you guys guess so so guys the problem is in this new syntax approach this index value will be stored inside of a dollar sign index variable not the simple index variable like the ng4 so in order to fix this we have to add the dollar sign before this index that's it so now the error is gone so guys this is how we access the index variable in this new syntax approach so almost same like the ng4 directive the only difference is this dollar sign so hope you guys got the idea all right so now we can use this index value inside our looping scope so first let's render this index number inside the browser VI so we can see this clearly so same like previous before this string interpolation inside this SL tag add another string interpolation and pass the index variable which is this I that's it so save this and go to the browser as you guys can see here now we got the index value inside this new syntax loop as well so now using this we can do the delete logic um let's do this uh the all other steps are same like previous so create a button inside this Loop the button name is delete next add a click event binding from this call the on delete method so guys this method required the index number so pass this index variable inside this parenthesis as the parameter that's it so we already created and wrote delete operations inside this on delete method so so again we don't need to write this so save this all and go to the browser as you guys can see here we got the delete buttons delete the user joone as you guys can see this removed the Jone from the list so now again remove Smith and next and so on so guys delete button working as we planned so that's it for this lecture once again in order to capture the index in the syntax for Loop approach we have to use the dollar sign Index right so hope you guys got the idea all right so let's move on to the next lecture all right so guys think that we want to show the total number of user accounts that are stored inside of our users OBG array inside the browser view so how do we do that for this we have two different approaches so let's see them one by one so first see the JavaScript way so guys in JavaScript we have the length method in arrays to get the length of an array right so we can simply use this to get the user accounts that are stored inside this users obj array right so let's write example so we can understand this clearly uh first thing first I want to show this user account when these components loads inside the browser for this we can use the Constructor method so guys don't worry about this Constructor method we will learn about this in detail in next lectures for now just follow this code so inside the app component is file create the Constructor method very simple this also same like previous regular typescript methods so the method name is Constructor and next the method parenthesis and at last add the method score now inside this let's log the users count so create a console log and inser this log parentheses pass this user objr length so how do we access this user obj variable this dot users obj after this dot length so as you guys know this length method will return how many array values are stored inside this users OBG array in our case can you guys tell me how many user objects stored inside this array it's for right so save this and go to the browser inside the browser console we got this array length for in other words user count of this array is four so guys we got this array value using the array length JavaScript method guys remember this these arrays and all of the array methods that we use in previous lectures and also this lecture coming with the JavaScript or the typescript these are not angular things right so angular is developed on top of the JavaScript so that's why we can use all the JavaScript Concepts methods in angular okay all right so we got this value inside this component is file and we printed this users count inside the browser console so this browser console will be used used by the developers not the end users so in order to show the total count of users inside the browser view or the D we have to get this users array length inside the app component HTML file so can you guys tell me a way to do this yes of course we can use the string interpolation approach so go to the app component HTML file let's show this inside this Li tags so before this I another string interpolation scope open and close two cly brackets inside this now we have to add the length of the users OBG array so how do we do that simply just call the array length method from here same like previous so insert this users obj do length that's it so guys simply this will return the length of this users obj and render that length value inside the browser that's it so save this over and go to the browser as you guys can see here we got this array length or the users count inside front of all of these users so let's add let's add another new user as you guys can see here this users count also increased 4 to five if I add another user again this value increased awesome right so guys uh this is how we capture and work with the arrays l or in our case number of users count using the JavaScript length approach so in the next lecture let's look at the angular approach all right so guys in this lecture let's look at how we can get the users count using the angular approach which is using this ng4 directive so let's see this in action guys in this ng4 directive we have an inbuilt variable to capture the looping arrays length something same like this index approach so nothing much here very simple just simply add this inside this loop after this index again we have to create a variable to capture this so create a new variable something users count so let keyword and the variable name is users count so after this assign this to the count variable which is coming from this ng4 directory so guys why do we have to assign this to VAR because this is coming from the ngf directive in order to use this inside of our HTML component file we have to store it inside of another variable which is declared under this Cod so otherwise we cannot use this inside our template file right all right so now we have the users count so let's load this inside the browser view so for this also we have to use the string interpolation approach um let's remove this previous JavaScript length method here and this time let's pass this users count variable that's it so save this and go to the browser as you guys can see here we got the users count for printed here same as previous so if I add a new user this count also change to number five so this is working like previous without any issues but this time we use the ng4 directive to get the count so so some of you guys may wonder is there any issue if you use the previous JavaScript length method for this guys there is no issue for this but if we are using the angular framework to develop our application then why do we need to use the JavaScript methods even a better approach is available with the angular framework right so always guys if there is a better approach in angular for any conditional Logics or code try to use that otherwise you cannot take the full advantage of the angular framework so hope you guys got the idea all right so guys now let's see how we can do this getting the users array count using the new syntax block approach so let's see this in action same like the previous first we need a variable so declare that inside this for Loop syntax block let users count assign count so again we are getting this error why is that in this new syntax approach this count variable modified as dollar sign count so change it to dollar sign count that's it the only difference is this dollar symbol compare with the ng4 count variable right so next let's render this inside the browser view before this add another string interpolation scope and pass the count variable here that's it so save this and go to browser as you guys can see here we got this users count cool right so guys this is how we deal with the count in angular for directive um I think that's it for this lecture so let's move on to the next all right so guys think if this array is empty then what will happen to this Loop wait let's see this in action let's go to the component file and remove all the users ofj arrays objects save this and go to the browser in here we got nothing just an empty page why we got this empty page because there is no value inside our array right if I press this add new users button this will start to render the new user value inside the browser so guys now what I want to do is I want to show a message something like no users to display inside this browser view so how do we do that can you guys guess for this first we have to check whether this looping array has values or not so how do we do that for this we have to use the ngf directive so let's do this before this create a div and inser this add a P tag and add the message that we want to show the message is no users to display now I want to load this inside the browser conditionally so for this let's use the ngf directive so inside this add the ngf directive so the as symbol and the directive is NG if so next the condition so what is the condition we want to load this message inside the browser view when there is no value stored inside the users array so let's add the condition here the users OBG which is our array dot length equals operator which is double equal signs after this add zero because we want to check whether this array length is Zer or not so guys if this array length is equal to zero this will return true so in that case this will render this message inside the browser so save this and go to the browser as you guys can see here we've got this no use users message inside the browser so how do we get this now our users obj array is empty which means this array length will return zero in that case this will return true if this return true this message will render inside the browser VI so if I add the new user to this as you guys can see here this time the message is removed from the view and this loads the users details inside the browser right so guys this time we added a new user object to the array programmatically using this add new user button so once we add the new user value to this array this array length will increase to one in that case the statement will return false because this length is now not equals to the zero in that case this will remove this P tag from the Dom so this is what's happening behind the scenes so guys all this happen in fraction of second all in real time without reloading the web page so this is another example for change detection mechanism in angular right uh all right so before we move on I want to show you something um some of you guys may wonder why do we didn't use this count NG if directive value to do this logic with this also we can get the arrays length right so why do we use using this JavaScript method here so guys this is a valid question but when there is no values inside the array this ng4 will not Loop through this array this will stop and this will move on to the next code uh wait I'll show you this so let's comment the previous message now inside this let's add a P tag and add the message we'll copy and paste the previous message and inside this Li tags now let's set the NG if directive to show this no user data message inside the browser view the same thing we did before but this time we'll use this count value instead of the array length method so at the directive inser this V tags so after this condition let's check whether this us account value is equals to zero or not so the US account equals operator zero if this users value is zero this should render inside the browser Vib right so save this and go to the browser we got nothing here so now our array is empty so this message should render inside the browser right why this is not rendering this message inside the browser so guys as I said before if there are no values inside the looping array this ng4 will stop executing and move on to the next so in that case this will ignore these all so that's why this is not loaded inside the browser on other hand we cannot use this count value out of this NG for directive scope so in order to achieve this in here we have to use the JavaScript array length method so there is no any other option so that's why I used this approach so hope you guys got the idea all right so let's move on to the next lecture where we learn how to do the same scenario using the new fope syntax approach all right guys so in the previous lecture we learned how to deal with the empty value for this we use the ng4 approach so in this lecture let's see this in the new approach so guys there is not much let's do this so first we have to get the array length so how do we get that same as the previous In Here Also we cannot use this count variable because the same reason if this array is empty this for Loop won't execute So In Here Also we have to use the array length approach so now before this for Loop syntax create an if Loop syntax so how do we do that add symbol and the if directive after this parenthesis and the directive scope now let's add the condition so users obj which is our users array after this dot length next add the equals operator which is this two equal signs now assign the value which is number zero next inside the scope add the message so create a P tag and the message is the same as the previous so copy and paste that here now after this add this to this message loaded using syntax that's all so save this all and go to the browser as you guys can see here this loaded the no user data message coming from syntax right so we successfully loaded the message when there is no users to fetch perfect right uh before we move on we have something new another approach to display this empty value message in this for Loop syntax so this is coming with this new for syntax approach so we have another new separate block for this which is empty syntax block so let's see this in action it's very easy compared to the previous approach just simply open an empty directory block after this for syntax block same as other syntax templates first add the add symbol after this the directive name empty for this there is no parenthesis just simply add the curly brackets just simply add the directive scope with curly brackets all right so now this time let's pass the empty array message inside this block so let's simply copy and paste it from the previous change it to loaded from empty syntax block that's it so save this and go to the browser as you guys can see here we got this message which is loaded using the N empty syntax block if I add a new user as you guys can see here this removes the message from the Dom and render the new user values so this empty block also do the same thing but in a different way so when this for Loop trying to execute this Loop if this looping array is empty this will stop executing this and move on to this empty block and render this value inside the Dom something similar like the if Els block right so this is one of the new features coming with the new angular syntax approach so with this empty block we can simply do this empty message without writing any conditions or Logics awesome right so guys this is how we deal with the new empty syntax block all right guys so we almost completed all the features in fullop so in this lecture we'll quickly go through some of other properties coming with the ng4 and the fullop syntax block so these are not that much important but it can be sometimes helpful when you're dealing with the real world application so let's look at the first and last properties so guys simply this will return a Boolean value whether the current item is the first or the last item in the list this can be useful for applying special styles of behavior to the first or last item in a list so let's see this in action so guys I will do this example in the new for Loop syntax so these all valid in the previous ng4 directives as well so let's look at the first property so inside this for sytax Loop let's add this first property nothing much here same as the previous index and this count properties so after this count property at the semicolon let's create a variable for this let first assign the property is dollar sign and the property is first so guys in the new syntax approach always remember all the properties are coming with the dollar sign right if we want to use this with the NG for all directives then we don't need to use the dollar symbol right all right so guys this first property will return true if the current array item is the first one in the list otherwise it will return false so let's load this inside the browser view so we can see this this clearly so before this enter another string interpolation and add this first variable that's it so save this and go to the browser as you guys can see here in front of all the users we got these Boolean values for the first value we got true Boolean value and all other values are false so basically this is what this first po Loop directive will do so using this Boolean value we can add a dynamic style or we can work on something conditional rendering and so on so you guys will get used to this when dealing with real world applications all right so next we have the last property so guys this is same opposite of the previous first property so this will return a Boolean value when the current item is the last item in the list okay so let's say this in action so again create another variable after this the variable this time set as last and assign this to the last property so this also coming with the dollar sign right so in order to see this inside the browser view so let's pass this inside the string interpolation so inside this previous string interpolation replace this first to last variable that's it so save this and go to the browser as you guys can see here this loaded the Boolean value unlike previous this time this returned true Boolean value on the last item on the list if I add another user as you guys can see here this changed and this last value only returning a true Boolean value so this is what we can do with the last property so hope you guys got the idea all right so let's quickly move on to the next even and odd follow directory properties so what is this even and out properties so you can find the answer simply with these property names so these even and odd return a Boolean value when the current item is the even or the odd item in the list if the item is even this even property will return true otherwise this will return false so in other hand this odd property will return true if the item is odd and otherwise false very simple right so let's look at this in action so we can understand this clearly so first let's look at the even property so as usual create a variable let even after this assign this to the dollar sign even property next replace the string interpolation value to even which is this even property variable all right so save this all and go to the browser as you guys can see here this time we got true Boolean value front of these even array indexes awesome right all right so next let's look at the odd property so after this again create a variable for this let odd and assign this to the dollar sign on property next replace this even to odd that's it so save this and go to the browser we got this True Value front of the odd items perfect so guys that's it for these properties these are just simple properties that are bundled with angular for directive so hope you guys got the idea all right guys uh this is the end of the ng4 and the new for Loop syntax directive so let's move on to the next chapter which is our last structural directive which is NG switch case and the new syntax NG switch all right so guys in this lecture let's look at the last structural directive in the list NG switch case directive for this also we have the old ways and the new syntax approach Ina so first look at the old way and we'll move on to the new syntax approach so guys when we learning if directive we use this example to load a message Mage inside the view based on the users role if the user is admin we loaded the welcome admin message if the user is a member we loaded the welcome member message and so on so guys for this we used the else condition and again another if conditions and so on so for this we have an easy and clean approach which is we can simply do this using the NG switch case directly so let's see this in action before that I will comment all the previous codes inside the HTML files and inside the TS files as well so we'll do this from scratch next first thing first we need a variable to store the users role so and that here inside the component is file set the variable name as users role and this R is capital after this type will be string and set a default value something admin pass this inside codes all right so next inside the HTML file let's define the NG switch case directive wait first let's define the HTML code then we'll work on the directive so first create a d and inside this add a P tag inside this P tag add the message welcome admin so next copy and paste this P tag again and change the message as welcome member so guys when the user is admin I want to show this admin message if the user is a member I want to show this member message that's it so guys now let's work on the logic when we're dealing with the switch directive we have to follow two steps first we have to define the switch then we have to define the cases right so all right so first we have to define the switch so let's do this inser this d add this NG switch directive and guys we have to Define this as a property binding so wrap this inside of square brackets next equal sign inside codes pass the user R variable so guys this is how we Define the switch with this we are telling angular to evaluate the user all variable and switch based on its values so as you guys can see here we are getting this warning CA as usual like other NG directives we have to import this NG switch directive as well so go to the component is file and add this inside this Imports array so the directive is NG switch select this auto complete this will add the import statement as you guys can see here this also coming with the common angular modu all right so next we have to define the case for these messages so inside this V tag add this NG switch case so carefully follow this Capital simple letters so guys unlike this NG switch we have to Define this as a directive with a as symbol after this equal sign and add double codes so guys in here we have to define the case so we want to show this message when the user role set as admin so this case is admin now we have to pass this as a string value so inside these double codes again add another single code inside this pass the admin so guys this is the case so simply we are telling angular to display this message when the user role set as admin so in here also we are getting this warning in order to solve this we we have to import this NG switch case directive as well so go to the app component es5 and add this import statement this time the directive is NG switch case select this auto complete that's it so we successfully completed the two steps first we Define the switch and second we Define the cases with this we are simply telling angular to evaluate the user all variable and display the the corresponding message based on its value if the user rle is admin it will show this welcome admin message right so save this and go to the browser in here we got this welcome admin message so how this loaded here because guys by default we set this user value as admin so in this case this NG switch case will return true so this will displayed this message but guys if you notice this cas carefully we got this welcome member also printed here why is that cuz guys we Define this NG switch case only for the first admin message this ptag so for this member message we didn't add any condition logic so that's why this loaded inside the browser even this is inside this NG switch div right so in order to fix this we have to add the NG switch case directory to this ptag as well so same like previous Asic symbol and the directive is NG switch case after this the case is this time we have to show this message when the user role is a member so pass this inside of codes that's it so save this and go to the browser as you guys can see here this time we got only this welcome admin message so if you change this user rle value as member save this and go to the browser so this time we got the welcome member message hope you guys got the idea all right guys before we move on to the next what I want to do is I want to add down the user R case something for user all something editor how do we do that very simple just all we have to do is simply add another case inside this NG switch right so down here again create another P tag and set the pag value as welcome editor next we have to define the case same as previous first add the directive NG switch case followed by the as symbol next the case is I want to show this message when the user R set as editor so pass this inside double codes and inside of single codes that's it so save this and go to the browser syvia got this member message why is that because this user all value set as member so change this to editor save this and go to the browser as you guys can see here this time we got the editor message so guys this is how we deal with the NG switch case directory so in here first we have to define the switch next we have to define the cases so inside of a switch we can add as many as cases we want so hope you guys got the idea so guys before the end of this lecture let's look at another case for this so imagine that we are building this Logic for the our applications login page if admin logged in we are showing the welcome admin message if the member logged in we are showing this welcome member message right so I think in any case if there is no users logged into our application in other words this users role variable doesn't have any value assigned to this in that case we want to change the message to something else like please login or something right so how do we do that can you guys guess for this guys we can simply use another NG switch case um let's see this in action so first let's make this users rooll value as an empty string next inside this add another P tag and the message is please login now in order to show this conditionally we have to add the NG switch case directive to this P tag so add that here this time the case is just an empty string so pass that here inside of Double quotes and and a single Cotes and a empty single quotes that's it so save this and go to the browser we got this please login message which means this working as we expected um but guys using this empty string values are not a good practice for this we have a better approach in angular we have another directive for this which is NG switch default so using this we can use this please login message when the user all not defined so let's see this in action just simply remove this NG switch case directive and add the NG switch default directive so as symbol and the directive is NG switch default so follow these Capital simple letters carefully so to this uh directive we don't need to pass any checking values right so guys we are getting this warning as usual in order to prevent this we have to import this directive as well so go to the app component is file and add the import statement inside this import array the directive is switch default select this auto complete this will add the import statement that's it so say this go to the browser as you guys can see here we got this place login message so guys how this loaded when there is no values assigned to the users role this NG switch will go through these cases if there is no any matching Case by default this will load this NG switch default message inside the browser be so this will not only work with an empty value so if I set something user all to apart from these Swit cases values in that case also this will print this default message uh so let's change this users roll to something HR save this and go to the browser till we are getting this please login message so guys simply we use this NG switch default directive to display a default message message when there is no matching cases so hope you guys got the idea awesome all right guys that's the end of the NG switch case directive so in the next lecture let's look at the new Switch case syntax approach for this perfect