 Hello everyone. In this module, you will learn how we can apply if else conditions in or a component. So jumping into developer console. So here basic code I have already implemented. So I'm just explaining and we'll be adding or if else in this view file of the component. So here you can see I have created one attribute whose name is flag, its type is Boolean, and its default value is false. Then this masses enter a number will be displayed on the UI, then UI color input text. So one input box will be available on the UI. ID of this element will be input CMP. So this is basically our ID. So if we put our ID for any tag, so we can fetch that into this components controller. With the help of this or ID. And at the bottom, you can see I have created a button. So if we click on this button, so its label will be click me and upon click this do action method will be called. So whenever we want to call any method of controller, so we need to use C dot, right. Now here I'm going to implement or if so if you want to apply conditions in the component view file itself, so you need to use this tag or a colon if then is true equals to now here you need to put an expression like this. So what is happening here or if we'll check the value of this flag attribute. So if you want to use attribute in the view so we need to use colon V dot flag. So if this flag attribute is having value is true, then this if will be executing the true block otherwise falls. So here I'm writing a div. So I'm going to display this masses like values greater than or equals to 15. So in this input text I will be providing a number. Any number. So if it is greater than or equals to 15. So this message should display. And if this flag is false. So we need to provide else part of this arrive. So what do you need to do. You can write or a colon set attribute equals to else. Now, this will be false block. So here you need to implement one more day, or maybe any other code snippet, you can write, and I'm writing value is less than 50. So this way. This is the true block of this arrive. And this is the false block, false, or you can say else part is optional. So if I, sorry, if I don't want to put this or a set L set to build so I can remove this. In that case, if a flag value is true, then true part will be execute. And upon falls, nothing will happen. Right. So I'm saving this code. Now here I pasted two statements. So in the controller that is JavaScript controller. I'm using component dot find. So this input CMP is basically or ID. I'm finding this comp, this tag in the controller. Right. So it's all properties will be available in this input CMP variable. And through this input CMP dot get P dot value. So I'm fetching the value that user going to be entering in that element or tag. So that will be available in this value. Now here I'm applying if value is greater than equals to 50. So I need to set value of this attribute flag. So I'm copying this. And here I'm writing component dot set V dot flag true. And in else, I can write component dot set V dot flag false. Right. So this way I hope you understood how we can apply or if and else in the view of the component and how we can set the value of that flag through controller. Now, coming to demo application and here I already provided this component name. Now I'm just clicking on preview. So you will see default value. Sorry. You will see the false will be printed automatically because default value of this flag is false. So it will be showing values less than 50. So let's check that refreshing it once one more time. It's taking long or maybe I can open it once again. So open this. Now again, I'm clicking on preview. So here you can see enter a number of this message is available. Here we can put the value and by default it is showing values less than 50. Why so? Because here value of this flag is false. So automatically this false is executed. Now what you can do you can create one more attribute to control this flag header and it is default false. Now here I'm implementing one more arrive. So I am going to use nested arrive. So here I'm writing V dot flag header and putting whole code inside this. So now if it is true, then this will be evaluated. Otherwise nothing will happen. So initially both are false. So by default nothing will be displayed. Then when we are setting these values, so we need to set flag header as true. So whenever we want to display a true or false value, so we need to make this flag header true as well so that nesting will work. Now if I refresh it, so you won't see this value is less than 50 anymore. It will be displayed when you will be entering less than 50 in that input box. So it is being refreshed. So here you can see now a default message is not available. If I enter let's say 100 and click on this click me so enter 10. Let's check it. Okay, I just forgot to put this exclamation mark. So that's why it is not working. So I'm saving it and using one BR as well. So again doing a refresh. So this time you will see this click me button will be available at the bottom. Yeah. Now if I enter 100. So here you can see values greater than or equals 250. And if I put 10, so it is less than 10. So this way you can apply or if else. So I also demoed you like how you can apply nesting using or if so this is all about or if thank you.