Save Initialized Conditional with airSlate SignNow

Save initialized conditional

in the last video we created a simple angular application and we had some basic dynamic functionality on the client-side I don't call it dynamic but basically we did ask angular to do something on the client-side be asked angular to hide this paragraph and angular or even though the paragraph existed in the page angular was able to remove it because of this ngf so we use ng app to declare this as an angular application and we used ng F to make this conditional but if you think about it this is not exactly conditional it's conditional upon a hard-coded false value so this is always going to be false in this paragraph is always going to not show up what we would like to do is have this be influenced by a variable so what I'm going to do is I'm going to create a variable called time of day and we'll initialize it to a hard-coded time of day for now and then depending on that time of day I'm gonna either show good morning are not show good morning let's look at the other good evenings and the good afternoons a bit later but for now this app is going to have an initialized time of day variable let's call it R of day right so it will initialize to a particular R of the day and if the R of the day is less than 12 it's going to say good morning if it's more than 12 it's not gonna say good morning right so that's simple requirement now I need to do a couple of things first I need to create a variable and assign it to a value I'm just going to hard-code the value from now and then the second thing is I need to update this condition to compare that value with 12 and if it's less than 12 only then have this paragraph in there so first step how do I create a new variable an initializer to a value the way to initialize any such kind of a variable there are actually multiple ways to initialize variables like this but one way to do it is by using another directive call ng in it true to its name ng in it lets you in it something all right so I'm going to create an NG init directive and I can put it anywhere over here a bow but I'll just use the body tag for it I say ng in it equals and then within these quotes I initialize available now I'm going to initialize our update variable and I'm going to set the value to 10 so it's 10:00 a.m. all right so I'm hard coding this value notice the out of day is always going to be 10 outputting is fine for now we'll make it a bit dynamic later but this is what I'm doing using ng in it I'm initializing this variable to value 10 you might ask me well have I declared this variable where is this out of day coming from and declared this yet I'm just assigning the value directly well that turns out is perfectly fine in angular when you use a variable than angular like this and assign it a value angular actually creates that variable where it creates that I'm going to talk about a bit later but assume that this variable is created and the value 10 is assigned to it all right so this is ng in it it lets you initialize stuff it lets you run this kind of arbitrary logic to initialize something and this variable can now be used in other places in the code now the place that I want to use R of T is inside ng F now I need to use a condition to check of out of T is less than 10 so I'm going to say R of T less than 10 inside this ng F right so this paragraph shows up if our of days less than 10 right so this condition should evaluate to true if let me actually change this to 12 because that's what I was looking for alright so if our F day is less than 12 ng if evaluates to true and this paragraph tag is shown if I'd of day is greater than 12 and GF evaluates to false right out of take less than 12 this expression is going to turn to false in this paragraph tag will not be shown because it's equivalent of saying in DF equals false so let me save this and execute this I'm going to refresh it shows good morning because R of day equals 10 and 10 is less than 12 if I were to change the slits as I say change this to 2 p.m. by changing out of day to 14 and now out of days 14 here and 40 is less than 12 so ngf is looking at a false expression and it should not have good morning in the Dom all right so let me refresh this and that goes away so this is a very simple use of a new directive that you learned in this tutorial which is ng in it just lets you initialize a variable you don't have to declare it just as in a value and you're going to get that variable and we've taken that readable and give use this inside a directive called ng F which conditionally shows this element right now the cool thing here is I can have this R of day use in multiple directives now let's say I want to have a good evening message over here so I can actually duplicate this paragraph tag and let's here call this good evening and the condition for this will be R of T greater than let's say 5:00 p.m. so that would be 17 so let me go ahead and save this now if i refresh nothing shows up because R of T is 14 so this ng if evaluates to false so good morning is not shown this ng if also evaluates to false because 14 is not greater than 17 so good evening is also not add it to the Dom however if I change this to let's say 18 now I'm going to get good evening if this is less than 12 let's say 9:00 a.m. now it's going to show good morning right so this is pretty cool you define a variable just once and then you can use this in multiple multiple tags and you have multiple ng ifs which do different things but then it's referring to the same variable so you either show good morning or good evening depending on the time of the day you can also add a good afternoon which covers the time between 12 and 17 but I'll leave that to you as an exercise so this is a quick look at a couple of new features - ng in it and you also learn how to create and initialize variables and use them inside another directive you already which is ng-if so with this just gotten started with angular and using some of the directives and its features in the next unit we can dive deep into a lot of angular features that you get out of the box and see how we can build some fairly complex applications using some of the features that already come bundled with angular