Template Conditionals

[00:00:00]
>> All right, so now we've reached a really good point because not only can we do dynamic data in our templates, not only can we update and style our templates and components. We can do dynamic data in our components, we can update and style our components, we can compose our components, our component-like behavior stuff is getting really strong, right?

[00:00:19]
We got most of us stuff we need except for how do you make decisions? How do you make a decision in your component? When I say make a decision, I'm talking about conditional logic, right? So how do you conditionally display things in your component? Well, we have something called control flow, which is just language, not a special feature, just language, control flow using the @if syntax.

[00:00:44]
All right, anybody ever use Blazor before by any chance, anybody at home ever use Blazor? Okay, so if you use Blazor, you might have seen this, we get this comment every single time people see this, that's Blazor. It's not Blazor, but it definitely looks like Blazor, and this syntax was actually chosen by the Angular community.

[00:01:03]
We had our own ideas about what the syntax should be. We liked the hashtag and then the community was like, no, we hate this, [LAUGH] we really like the @ symbol. And so we changed because the Angular team said, well, we'd like to do, we're an evidence driven team, meaning we take evidence Information from the community and we try to serve our community the best we can.

[00:01:23]
And so, y'all said y'all didn't like it, so we changed it. Okay, let's say that if you see this component, you could probably get an idea of what the intended behavior is. The intended behavior is that you could show one or the other, right? One or the other, please login or welcome back.

[00:01:42]
But how could you do that in your template? What logic and things could you do? Okay, here's how we can make that happen, all right? So the idea is that we have maybe a user object in our class, and it has a property called isLoggedIn, which is true or false, right?

[00:01:59]
And so if that's there or not, we want to do that thing. So here's what you do in Angular, you use the control flow with the @if syntax. This goes directly in your template, okay, this is at the template level. So you use @if parentheses and what goes in there is a expression that evaluates to truly or falsely.

[00:02:19]
And I had to use that language because of JavaScript's complicated relationship with the truth.
>> [LAUGH]
>> All right, JavaScript has a very complicated relationship with the truth. So you want a truly or falsely expression there. And here's what's really nice about this, it's a very declarative style.

[00:02:38]
I know in other frameworks, it's like you've got to do an expression in there and then put your if and else statement, then come out of the expression. So this is just a different way to do it, right, but the same way that you can still make your decisions.

[00:02:52]
And you can group everything by those curly braces. So you can conditionally display groups of elements and components, right, and not just one line. It could be a group, whatever fits in your curly braces, okay? But here's what gets really nice. So now we got our expression user.isLoggedIn, and no curly braces, no double curly, cuz this is not interpolation.

[00:03:12]
We're not displaying the value, we're just conditionally choosing things. Guess what, though? It can get better. You wanna see how it gets better? Give me a thumbs up if you wanna see it get better. Check this out, [SOUND] a nice clean else, a nice declarative else, right? Okay, and then you got your else block, but it can get even better because we also support else if.

[00:03:38]
So If the amount is < 50, else if, do this thing and as many of those as you want, right, and then else. So what does this give you? Instead of having to do a bunch of ifs and trying to rearrange things in your template and lots of messy syntax, cuz we used to have that, it used to be not as ergonomic as this.

[00:03:57]
This is a new feature for Angular. We used to do it through what's called directives, which would allow us to tag an element and say ng if this thing and that other thing. It was just harder to read, harder to reason about, but this is better. And guess what's great about this?

[00:04:13]
This is built into our template system, our syntax, so no external dependencies are required, okay? You just start typing this, okay? All right, so let's jump back in it. Let's get back cooking, all right? I'm gonna close all these up for us. Keep our workspace clean, stop my other server.

[00:04:43]
And then I wanna go to 04, control-flow with if, all right? And then go to the README. Now README should be updated, okay? Very cool, I'm just gonna grab the how to run this example script just to keep it. I feel like somebody at home was like, man, this is really helpful that every example has what I need to start.

[00:05:07]
I know, I thought about y'all. Listen, I was thinking about y'all when I was designing this, how can I make your lives better and have a good experience? So I'm glad that this is working for you. All right, so let's go through what our task is. All right, so we have this example.

[00:05:26]
Now if I go to the example, it's updated for me right? But we have our Frontend Masters' credit card. Mark, I'm sorry about that. [LAUGH] He's like, how'd you get my information? Okay, this is the credit card system, but if you notice the levels are kind of messed up because it's showing all levels, you can't be all those at the same time.

[00:05:44]
And we're missing some information here. So your task is to fill in the information and then conditionally show the level based on the data. Conditionally show the level based on the data. Now, how do we get started here, right? Well, let's look at it. So we need to add the user information to the credit card using the Account Info class.

[00:06:10]
So we update the app.component.ts. But this is gonna be our first introduction to using types in our components, okay? Explicitly using types, we've been using types this whole time, but they've just been inferred types. Now we're gonna be explicit about using our types. And let's look at how that works for us.

[00:06:33]
So I already created the type for you. And just to let you know, friends, I'm not going to do any of the, I mean, very little of the CSS writing or little of the HTML, cuz that's not what you're here for. You can learn that at any other time, right?

[00:06:46]
I'm focusing only on Angular and so TypeScript stuff, I've provided you with TypeScript because you don't want to spend time on that for now. All right, so we got some places where our data should go. And then we got our first example of our type. So I'm just gonna talk through this because you'll see this when you write Angular code.

[00:07:06]
So you get your property name, followed by colon, and then your type information, okay? And that's our type information, so if we go to our AccountInfo type, then we can see what our type information is. What's interesting about AccountInfo, we got this union here between silver, gold, or platinum, so membership status could only have one of those three values.

[00:07:31]
And this just makes it nicer, that way you get type checking. And the way TypeScript works is that it takes that string, it turns that into its own type value, so it's not just any string. So then it could tell you if you're right or not, all right, and that'll help you during developer time, which is one of the main things we were thinking about with hey, writing code with TypeScript.

[00:07:49]
There's lots of developer value, so you'll know if it's wrong and save you from that string misspelling problem that you can get. But not the only way to do this, this is the way that I decided to do this, okay? All right, so off you go. Going to implement the parts, I'll let you get started.

[00:08:07]
And then I'll take some questions from our community while you friends start typing this out. Do you have any questions from chat at home? OK, well chat, go ahead and do your thing, yes?
>> I think with WebStorm, you need the latest version to do control flow.
>> Really?

[00:08:28]
>> I think so, just in case anyone has an issue.
>> So you're using WebStorm, all right? No, it's good you're using WebStorm. So WebStorm is another Web IDE by the friends who make IntelliJ. But one of our uber TL on our team, Jeremy Elbourn, loves WebStorm and he's been trying to convert the whole team to use WebStorm this entire time.

[00:08:50]
It's not working, though. But he wants us all to use WebStorm, because it's so good. I used to use WebStorm, or I used to use IntelliJ when I did mobile development with Flutter and it's incredibly powerful, incredibly powerful.
>> In chat, people just said thanks for this awesome content and well done, Mark, so.

[00:09:10]
>> You better stop being so nice to me. You know I got something for you. You see this? [COUGH] That's for y'all. Just enjoy it, no, I'm glad you're having a good time. I hope everyone's having a nice time and I'm having a blast, I'm having a blast.

[00:09:26]
All right, I'll let you folks get a head start and then now we're just gonna start filling it in, so the data object's called a count. So these parts. This should be the name, right? Okay, so why did I include some of the string interpolation, even though we've already done that a bunch of times?

[00:09:47]
Just for repetition, I want you to get more comfortable with it and continue to do it, okay? So then we've got account., this is valid through, so I think I have a validThru property, yep, we do. And then this one is account.CVV. I'm gonna save that. And then we start to see some information, looks good, looks great, but now here's where the magic really comes in.

[00:10:20]
We gotta get this party started. So first things first, don't make the mistake that I make all the time when I do this. I make this mistake because I'm just not used to it, cuz this is brand new. I type this, which looks really good, right? So I do if (account., I think it's status, is it?

[00:10:39]
Yeah, status) === everything looks good so far, right, no problems. But you'll see what the problem I made already, some of you already spotted it. So is this a silver one, I wanna make sure I spell that right, okay? This is gold, okay, so if it's gold, then we wanna do this thing, okay?

[00:10:58]
Can I move it up? Okay, cool let's go. All right, looks good. What's going on? Because I'm so used to writing if without the @ sign. That's why, you see? And now, Angular is like, hey, I see stuff is broken. Why don't you like this?
>> Membership status.

[00:11:20]
>> It's membership status.
>> Membership status. Okay, see, use your IntelliSense here, membership status, okay, now it works. But beware, here's another place where you can get caught up. Else if, you feel like it should just carry that @ through the system for you? No, you gotta type @ again.

[00:11:42]
This is something that if I had a choice, I would probably put this as an opportunity for us to consider some changes. But I don't have a choice on this part, because I assume for me as a developer cuz I have that first @ it should apply to this whole structure, but it's not how it works.

[00:11:59]
You gotta keep putting that @. And guess how I figured this out? Because I was stuck developing this example, and I couldn't figure out what was wrong and I started over from scratch. I literally deleted the whole thing, I was like, it must be my environment. And then it was the @ symbol, and I was like, yeah, see this is a opportunity for us to either give better tooling support here or some hints or something, because I think people are gonna type this.

[00:12:25]
I just do. Man, I'm being a little transparent here, let me, this is gonna be recorded. Hey, don't tell people on my team I said that. All right, [LAUGH] they're like, we're all here. Let's see, this one is platinum, right? Okay, so if we know this one is platinum, and we only have three possible values, wait, what can I put for this last one?

[00:12:46]
>> Else.
>> Just else.
>> Just else, yeah, that's our that's our last case. And there's a bonus in this example actually, I'm gonna show it to you, Okay? So we got that. Now if we look, cool, it's working in our favor. But you might say, Mark, that didn't work, well, let's change it.

[00:13:03]
Let's change it, so what if I put something else? Let's say somebody tried to hack my system, they say I'm a ruby. Look at that. See, our TypeScript is helping us because I put that type union there, no worry about the mistake spelling. It's telling me right here in developer time, I can't even cheat.

[00:13:22]
Okay, so let's put platinum. There you go, okay? We did, and then I think the default was gold, but let's just make sure silver also works, okay? Which is great, so now, we got the data, we got interpolation, and we have our syntax. So we got this done.

[00:13:46]
Now at the bottom of this, So if somebody said this in their mind, why would you do an if here, if you know all the possible values. What's a different way to conditionally show things when you have a set of values that you already know? What's a different way to do that?

[00:14:05]
In regular programming, not even with Angular in regular-
>> Switch.
>> A switch, Angular also supports the switch statement as well, okay? So we could rewrite this. Now this one, I'm gonna do it and I bet you I'm gonna get it wrong cuz of the syntax, but we're going to work it out together, okay?

[00:14:21]
So let's start with the first thing we need. We're gonna switch, and we're going to switch on account.membershipStatus, okay? So you do that. Okay, no error, so far, so good. I'm not messing this up. I can't write a switch statement to save my life sometimes. All right, it's probably @case.

[00:14:42]
And then I wonder if it's case parenthesis and then just the type value that I'm looking for, gold, would this do it? I might have to look this up. Let's see, let's just see. Let's see if I can get it to work. Cuz yeah, this is all super new, but okay, that doesn't like that works.

[00:15:02]
Maybe it's no parentheses? Maybe, no, I have to look this up, let's see.
>> Curly brackets.
>> Is it just curly brackets?
>> Parenthesis for the value.
>> Yeah. [INAUDIBLE]
>> There you go, thank you. Look at you, teamwork. Yeah, I got something for you, see this? I'm gonna warm it up, [SOUND] high five Steve, there you go, nice job.

[00:15:25]
All right, very good. Okay, so then we could rewrite this whole thing just like that, right? And then I mean from a programming point of view, that probably makes sense to do it this way, but the switch syntax, you probably use this less often. I know in my work, in my career, I've used it sometimes, well, you use if more often, but it's cool to know that you can do both ways, right?

[00:15:47]
So then we take this one as well. So platinum, and then technically this will be our default case, so @default. And then I think we just do our curly brackets, yep. So see, that feels good, that feels good. I actually like that set up there. Okay, good, so we get both ways, both ways are valid.

[00:16:12]
So let me just kinda explain to people at home what we just did. We just switch this from, no pun intended, but okay, we went from if else to switch. In our case, because we have a numerated set of values that we kind of know what they're gonna be, a switch feels like a nice alternative here for this one.

[00:16:32]
And it should work the same, I wanna comment out this. All right, wait, where did this one come from? It formatted it with. That's okay, not the end of world. Okay, still works, still works. Yeah, the formatting, you see how it brought it to a new line? We'll continue to improve this.

[00:16:56]
Like I said, these are features that are new as of Angular version 17 that just released November 8th, but what's really rad is that this is the future of our framework. This is how it's going to work moving forward, so no matter when you watch this, you'll have up-to-date syntax and really cool stuff going on for you.