In this session, let us learn about directives, which is a building block of Angular. A directive is a custom HTML element, which extends the power of HTML. In the Angular application that we have done till now, we have added HTML tag. Together with that, we have also added our own HTML element, which is nothing but the component like app hyphen, root, app hyphen, grid app hyphen home, what are they they are the components which are created by Yes, they are nothing but custom HTML elements. So this is nothing but a directive. Basically, directives are divided into structural directive component, which we have seen already and attribute directive.

What is the structure a direct to current directives is responsible for the HTML layout. That is it changes perspective. Turn off your HTML page, it gets add or remove the HTML elements dynamically. Section directors are always preceded by starts Well, the inbuilt structural directives are Yunji you end fast and mg switch. Based on the condition the elements can be added or removed from your HTML layout. To start with, in this particular session, we will see how to use in G you you know what is the use of if you've always taken for a condition, the condition can be either true or false.

Based on the condition, the DOM element will be added to the HTML page or it will be removed from the HTML page. Let us see this with an example. I'm now in Visual Studio code to understand that so let us not work with existing components. Let us create a new company So this is my terminal, let me create a new component empty space component. Space trial. So my component is trial.

So all the four files are created. Now the component is created. Let me open trial component dot html. This is the place where I need to write the code. before writing the code in HTML. Let us add the instance variable in the TS files file.component.ts.

So let me add username, colon string, colon string. Next, within the constructor, I need to finish placing this doc username equal to this dot code equal to Angular Okay, this is done. Now let me go into the HTML page trial component dot html. Here, let me add the code h1 space of six mg. Here I need to specify the condition. So within single, within double quotes, username, w equal to single quotes RA, then it'll enter into this loop.

So here I need to say welcome double curly braces username. If we save it, and we were running this application, we need to do two things. One is you need to add this component to the app component dot html file. The other one is I want to check whether it is added to the module. So let me open app.module.ts see automatically this added trial component here and here. It is added to the import and to the declarations part.

Now let me open app component dot html here. I need to add this one hyphen trial slash app hyphen science. Now all said terminal control Tilda, so it is Youngji Wi Fi and open the application have started successfully you can see the output will come from. Now let us go in for the else condition is caught also. So here let me just close this and go to trial component dot html here. Let me add a spot for this RAM, okay.

Yes, new TMP. And let me create the new TMP using mg template and the template has new TMP and within which, I can just give her messages. Sorry, wrong uses The name is not wrong then from users. So here see I am just dynamically hard coding the values basically you will be doing it using even binding to a binding like you will be having an input fields will be taking the value to the back end and that value will be checking it in h1 sources can be done. So here now I have given saris on uses and Instagram let me give it as Roger over here. Now, let me run it.

Now, there is an error. Let me just check Okay, I have separated it, it has to be a new template. Okay, I'm saving it. Let me check the output. Sorry, wrong user. I'm getting the output properly.

So I hope it is clear. If the name is Roger, it'll enter here and print welcome Roger. Yes, it will go and call this new P and P MTL. That is just the name. You also that name bar Exactly. We are retrieving we are retrieving it over here.

That is For this chunk of code, I have given the name of new t MPL and that is being called over here. Now, we will try still more, what we will do is we'll check with the cost. if then else part we are going to add all three, we add the code here return h1 astrix n g u equal to here I'm going to check in for the course course, double equal to Angular. Then template one, yes, template two. So this is done. So here in this case, we are not giving the complete code inside h1.

Instead we are going to create it as a separate template. So let me just copy this and I will change it mg template instead of new template, this T MPN. One and it made the court of the court selectors double curly braces This is the end template and then again in the template template two course not available. Okay. So I hope it is clear what actually we are doing is we are checking in for you then yes, if the courses Angular then called template one is called template two. Okay, TMP one TMP two here also I have made a mistake it has to be BMP and one and CMP.

Okay. So based on the condition, the DOM element will be added or removed from the HTML page. And let me add this with an h2 tag. Control x in control V. Ctrl V and Ctrl V Okay. Now, let me save this let us check the output. Now I have got the port selected as Angular property instead of Angular if I have given it as node if the cost value is north then what it will say cost is not available course not available right.

So, this is a structural directive, what actually it is doing is based on the conditions it is either adding a chunk of code to the HTML page or removing the code from the HTML page. So, in our case based on the name so, even give it the first raw I mean raw only this will be printed this part of this template this code will not be added okay. And similarly in this case based on the condition either this part of the code will be added are this part of the code will be added suppose n g if directive In the next session, let us learn about in dzifa. Thank you