Building Awesome Web Apps with Angular 2 Hashtag, Asterisk, & Elvis (Safe Navigation) Operators

Transcript from the "Hashtag, Asterisk, & Elvis (Safe Navigation) Operators" Lesson

[00:00:00]
>> Lukas Ruebbelke: All right, so this gets interesting. We have a local template variable, and so you'll see this especially when we're working with forms. But we have the ability to essentially take an element in our HTML and assign it a variable that Angular can then reference. So it's available essentially anywhere within the current template, but it's also available in the component using view child.

[00:00:29] So this is kind of out of scope of this discussion, but anytime you want to create a variable that references a specific element in your markup, you do so with a hashtag. And to consume it we simply use it without the hashtags. So big question, what the heck am I talking about here?

[00:00:54]
>> Lukas Ruebbelke: So when you're using forms in Angular, and we'll cover this tomorrow. What Angular does is, you have your HTML that represents your form. And you're essentially binding that form to an object of some sort. So you can see here, that we are binding this form, we have two inputs that's bound to really item description and item name.

[00:01:26] But you'll notice here that, or rather because you have something bound to a form that doesn't really give you an indication of the state of the form. For instance, you'll notice that on our selected item name that is a required field. Well how do we know the state of the form that we're in?

[00:01:53] Like how do we separate the actual values of the form that it's bound to, to the state of the form? So for instance, does the values in the form match the requirements of the form, like is it actually valid? And so what Angular does under the hood and it did this in Angular 1 in the form of a form controller.

[00:02:12] Is it kind of implicitly creates essentially this entity behind the scenes, that is keeping track of your form. So in this case, we can reference that by creating a local variable called dollar formRef, you can call it whatever you want. And we're simply saying dollar formRef = ngForm.

[00:02:37] So ngForm is essentially the top level form group that's keeping track of the state of your form. So don't worry too much about this right now. Just know that Angular has to keep track of, if your form is valid or not and it does that using ngForm. Yes?

[00:02:57]
>> Speaker 2: Two questions up, when do we need to use ATR?
>> Lukas Ruebbelke: Attribute.
>> Speaker 2: Yep, and when will we be doing template drive and reactive forms as well?
>> Lukas Ruebbelke: So we are going to start out with template driven forms tomorrow, and we'll see how far we get. And you will need to use essentially attribute when you are trying to bind to something that doesn't actually exist on that element.

[00:03:23] So like for instance call span or something like that is a good example. So when you're trying to basically bind to attribute that doesn't exist on that element. I don't know, then you can use attribute. And there is actually some use cases in the documentation where they talk specifically about that.

[00:03:37] But especially with SVG is where you try to bind something that the native dome element, it doesn't exist.
>> Lukas Ruebbelke: All right, so dollar formRef. We now have a reference to this underlying form group that's keeping track of the state of the form.
>> Lukas Ruebbelke: Now what I want everyone to focus on is if we go to the bottom, button type="submit".

[00:04:06] Now we're binding to the disabled property or attribute, and we're saying if formRef is not valid then disable the button. And we know that formRef is not valid because we are binding that essentially to ngForm.
>> Lukas Ruebbelke: And so let me actually, and so we can do this as well with regular text input.

[00:04:35] So just so everybody can see this.
>> Lukas Ruebbelke: So now I'm creating,
>> Lukas Ruebbelke: A local template variable called colorInput as denoted by the hashtag, let me actually just expand this out here.
>> Lukas Ruebbelke: And so now, let's go and,
>> Lukas Ruebbelke: Actually, let's do this. So just one pro tip, this actually one of the most common things I use in Angular, is when you want to debug something, pre-tag whatever you want to actually,

[00:05:28]
>> Lukas Ruebbelke: Debug. And then if you use JSON, essentially what this does is it takes an object and it calls to JSON on it. And so now by wrapping this in this pre-tag you get this kind of pretty JSON object in your page. So we'll go here.
>> Lukas Ruebbelke: And hold on one second.

[00:05:53]
>> Lukas Ruebbelke: There's one caveat.
>> Lukas Ruebbelke: Believe this is it.
>> Lukas Ruebbelke: There we go. So it doesn't allow me to actually do two JSON on the core object. But I can actually grab the value of it and dump that out. So this is where local template variables come in handy, is when you can reference something else into the inter template somewhere.

[00:06:35] So if we go here let's actually see, and try something here.
>> Lukas Ruebbelke: Okay, so I think that only works on the,
>> Lukas Ruebbelke: Hold on, so if I went like,
>> Lukas Ruebbelke: Let's do this on a form. So we'll go form, now validate,
>> Lukas Ruebbelke: ngForm,
>> Lukas Ruebbelke: Then let's just put this in here.

[00:07:30]
>> Lukas Ruebbelke: I'm getting ahead of myself a little bit, but YOLO.
>> Lukas Ruebbelke: Okay, so now what I've done is I've created a local reference to the form and I can output it. And then you'll see here, and so this is really what I was talking about, about the state of the form.

[00:08:04] It's no longer valid, so it's false. And then with just our typing you can see now, there's something under the hood keeping track of like this is a valid element. Makes sense? So this is just a way to keep track of local template elements, and you can then perform additional logic.

[00:08:33]
>> Lukas Ruebbelke: So Angular does come with some built-in directives that ships with it, and they're broken into two classes. So structural directives, and let's see if I can get into this. Actually, mainly structural directives is that a structural directive essentially changes the DOM layout. So there are attribute directives but the main one, actually what I really wanna talk about here, is structural directives and it essentially modifies the structure of the DOM.

[00:09:06] Now what you're gonna see here,
>> Lukas Ruebbelke: Is within in these structural directives, so ngIf, ngFor, ngSwitch that there is an asterisk. I think we lost my screen,
>> Lukas Ruebbelke: And so you'll notice this asterisks here. So what this is, is it tells Angular that we are going to be modifying the DOM.

[00:09:41] And what that does is provide syntactic sugar for Angular to essentially create a template element within the page than then wraps what we are going to actually modify. So what happens is when you modify the DOM, kind of following this web component kind of spec. Is that there's a template tag that changes the way that a template is actually rendered or an element.

[00:10:11] So what Angular does is, when it's saying, we are going to take this from the dom or add it in, it will wrap that into a template tag. So this is something that unless I told you, at this point, you would just never see it. It just happens completely under the hood.

[00:10:26] But the long hand version of this for example, is you notice here we have at the top these spans that we're saying based on toeChoice. If it's Eenie, Meanie, Miney or Moe, then show this one element and then hide the other ones. But what's really happening under the hood is that Angular's saying, we need to actually modify the DOM, wrap every one of these elements in a template tag and then bind it.

[00:10:59] And so I would just prefer to do asterisk, do my thing than having to go here and wrap all of these elements in template tags and do that. So the team felt like this was just a little verbose at the bottom, and so that's where they came up with this asterisk operator.

[00:11:18] Again, you do not have to understand digestion at a molecular level to enjoy eating. And one more navigation operator, and this is the safe navigation operator or Elvis. And so occasionally you would need to bind to something or a property in your DOM that doesn't exist yet. So this will actually happen quite a bit when you're working with observables where it can happen.

[00:11:47] And so what this does is it allows, so previously Angular was just in 15 or 1.s simply like this thing doesn't exist, [NOISE] I'm just not gonna show it. Angular 2, they're little more strick and they're like if this things doesn't exist, we're going to let you know.

[00:11:59] This is not good, and so this allows us to safeguard against null, essentially null values that were binding to in our template. So this would be an example of this. If we had a nullHero object, and firstName did not exist on it. We could then use essentially the safe navigation operator to say bind to this if it exists, if not [NOISE] carry on.

[00:12:32] Makes sense?
>> Lukas Ruebbelke: Okay, let me show you, I'll just show you a few more examples then we'll get into the code challenge.
>> Lukas Ruebbelke: Let's see here.
>> Lukas Ruebbelke: Let's go colors, hopefully that's not a reserved word, blue, red, tomato.
>> Speaker 2: Papayawhip.
>> Lukas Ruebbelke: Papayawhip?
>> Speaker 2: Papayawhip.
>> Lukas Ruebbelke: My goodness, this is amazing.

[00:13:21]
>> Lukas Ruebbelke: Papayawhip.
>> Speaker 2: Yep.
>> Lukas Ruebbelke: I'm kind of skeptical,
>> Lukas Ruebbelke: And more so I'm eagerly impressed, one part skeptical, three parts impressed that you actually know these colors. Holy!
>> Speaker 3: I think it's from Bryan Holts class, right?
>> Speaker 2: No, no, no, it's 147 colors with some fanciful names.
>> Lukas Ruebbelke: I feel like I've been living below my privileges as a human being up to this point.

[00:13:59]
>> Lukas Ruebbelke: All right, so,
>> Lukas Ruebbelke: Let's just keep this party going. I now have a collection of colors that I would like to display on the stage. So first things first, let's use ngFor.
>> Lukas Ruebbelke: So actually talk about some of these, I realized. So ngFor what this does is it says for every item in this collection go ahead and stamp out this element as a template, okay?

[00:14:34] So we'll go let color, that's gonna be interesting. You know what? let c of colors,
>> Lukas Ruebbelke: And then we'll just go c.
>> Lukas Ruebbelke: Let's see what happens.
>> Lukas Ruebbelke: All right,
>> Lukas Ruebbelke: I'm gonna go in here.
>> Lukas Ruebbelke: Then what it's doing,
>> Lukas Ruebbelke: Is,
>> Lukas Ruebbelke: Basically stamping out one of these every time.

[00:15:11]
>> Lukas Ruebbelke: If we go back,
>> Lukas Ruebbelke: Let's take this a step further.
>> Lukas Ruebbelke: So,
>> Lukas Ruebbelke: background.
>> Lukas Ruebbelke: color maybe? Let's try this.
>> Speaker 2: It's probably capitalized as opposed to dash [INAUDIBLE]
>> Lukas Ruebbelke: Sounds like a basis for a test.
>> Lukas Ruebbelke: Cool, then,
>> Lukas Ruebbelke: So ngFor, it basically takes a collection and for every element in the collection, it stamps out a template.

[00:16:12]
>> Lukas Ruebbelke: The other one that I wanna show you is ngIf. So we'll go div,
>> Lukas Ruebbelke: *ngIF, and we'll just take this.
>> Lukas Ruebbelke: We're simply saying that if it's not valid, go ahead and show it. Fix your form sucka!
>> Lukas Ruebbelke: Cuz now that condition is true, then it evaluates.

[00:17:01] It'll go ahead and show it.
>> Lukas Ruebbelke: So the question is,
>> Lukas Ruebbelke: So this is just like Swift optionals, talking about the safe navigation operator. I believe yes, that is. And Yohana's asked is there something equal to index? And I'm pretty sure there is, let me just double check the Docs real quick.

[00:17:30] I haven't needed to use this, but I would wager. So now everybody gets to see, when I get stuck how I solve this. This latest 4/API is probably the single most helpful page in the entire,
>> Lukas Ruebbelke: There we go.
>> Lukas Ruebbelke: NgFor, yeah, so there is additional properties, there we go.

[00:18:09] So let's actually try this, so good question.
>> Lukas Ruebbelke: [NOISE] How would I do this? So we'll go.
>> Lukas Ruebbelke: let
>> Lukas Ruebbelke: Okay,
>> Lukas Ruebbelke: So you can see it starts at zero, zero, one, two, three, four. And so you have the ability to actually track the index.