Binding Conditionals

Justin Mitchel
A free video tutorial from Justin Mitchel
Coding Entrepreneur & Teacher - 568,000+ Students
4.3 instructor rating • 30 courses • 679,562 students

Lecture description

Understand the concept behind binding conditionals!

Learn more from the full course

Try AngularJS: Beginner's Guide to Front End Web Development

Built and managed by Google, AngularJS is one of the most powerful front-end frameworks in the world.

04:25:58 of on-demand video • Updated October 2016

  • Build a basic AngularJS Web Application
  • Know the fundamentals of AngularJS
  • Learn about the powerful AngularJS concept known as "directives"
  • Understand concepts like Data-binding
  • Running a local web server to handle URL Routing in AngularJS
English [Auto] All right so well this is cool and also I can you know say my name or say 100 times or whatever. There's a lot of things that I can do here but I actually want to play around with conditionals a little bit. So meaning if ABC or let's change it back to name if that actually doesn't exist or if it's not actually showing up I want to play around with initials so that is I can say span N-G if name and then we put the name in there and we close off that span and then we do span ngi if equals to exclamation mark a name. I'll explain this in a second. And then we close off that span. OK. So let's jump back in. Refresh and we see that it says now it says hello world. And if I type out my name and now says hello just in. So this is a very simple conditional and if I go ahead and spaced this out in a way that makes it better for me to see it. And if you remember M-L doesn't matter about spaces it just matters mostly about tag some some faces would make a difference but mostly it doesn't matter. OK so what we see here is we have this conditional Engy if we're saying basically if the name exists then put the name. If it does not exist so exclamation mark name or the opposite of whatever that is then we'll go ahead and put world. Right. So this is just a very simple conditional it's not really that complicated. So let's go ahead and add something. With classes we're going to do a conditional with adding a class. So go ahead. In this H1 class while say class equals two new class and inside of my head I will go ahead and make inline style sheets with style and style. And we're going to make our class just kind of ridiculous. I'm just going to go in here and say font size being like 72 pixels refresh in there. And now it's really really big. But what I want to do is make it really small when this starts. When I start writing my name. So if Justin is in there then I want to make sure that I add another class and I'll say other Dash class and image or say font size equals to 32 pixels. No big deal just kind of swapping out the class and we could do this by using a nother sort of condition called ngi class. And we're going to set this equal to. No that's what I'm doing here. Get single parentheses and curly brackets. And we're going to say the name of the class we're going to call it which is going to be. So we want to use double quotes here actually curly brackets single quote other Dash class and colon after that single quote and then that condition which was name. All right. So then we want the curly brackets in it. So this is going to say that it's going to and this class when we use name. All right. So this is just kind of cool just bear with me as we play around with this. And let's go ahead and save it refresh in here. Say your name and notice that my class changed right and actually add that class to the element so if I look at this element I go to inspect and see that the element the H-1 class says here. New class and other class says N-G class other class and name. OK so what's going on here exactly. This is actually called a directive. That's what the name of this is. That is also a directive here. So basically what Engle is doing and is doing really well is it saying OK give us some class name in this case or put it in quotes. It's very possible that if we used without quotes it still could work. But using quotes ensures that it works especially when you have a dash or something else in here someone to go ahead and leave it inside of quotes. And of course the inside quotes have to be the opposite of whatever is on the outside. But this case it says we're going to add this other class based off of some condition here and I can actually say based off the condition that name is equal to single quotes just then with the capital J. So let's try to get him a refresher here and I'll say ABC blah blah blah. Does it matter doesn't change if I change it to just then and notice right. As soon as I finish and press in it changes and then press enter I didn't do anything it just does automatically. As you can see so this is a condition right. That's a very simple statement inside of there to change classes. This is actually very very practical especially if you've used if you use javascript or Jay queried you just before Angola does it very practically and it does it very quickly using something not much different than what we see on this actual conditional right here. Also known as a directive and for Engy class you can see more uses of it on the documentation for angular itself. So hopefully that it was actually a little bit useful for you but we might even want to go one step further. In fact we might want to change the font size here to something that we want. So I'm going to go ahead and put in some curly brackets here and I'm just going to play with this. This right here is not a advisable I would suggest that you do this because realistically you're not going to be writing inline style sheet. But I do want to see if I can actually have a variable up here and make some changes to it by an input. So let's go down here and I'll say input type equals to text. And notice I called this variable font so I have to call that Engy model equals to font and I'll write a placeholder in here so placeholder equals to font as well. So we save it refresh. Now I see this font. So we're going to say font size let's just do a hundred and ninety pixels. And again I want to type out my name just then and notice it changes it if I change it to 290 it will continue to get bigger and bigger I just change it to even bigger than that. So that's pretty cool. I can actually do it there as well. Again this is not very good practice. You won't want to do this sort of thing. Instead you're going to want to make specific classes. So it changes dynamically that way based off of a condition versus base of somebodies input which you could still do based off of the input. You can still change that condition on this other one. So let's actually do that. I'm going to change just fought back to being 32 pixels. And now what I can do is to add a different condition and I know put comma here and I'll say New Class 2. And we're going to just put this condition Igor's to Fonte equal equal to 120 k. So we'll add this new class in here and this new condition font size one twenty one and 20 pixels. All right. So it's going to add based off of this condition right here. Save it refresh. When I say Justin notice it changed it and then font adjusted one 20. Notice as it changes it to 120. Pretty cool. So that's how you use Engy class to tell you some conditional stuff for any questions let us know. Otherwise let's keep going.