This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Hashtag, Asterisk, & Safe Navigation Operator" Lesson
[00:00:00]
>> Lukas Ruebbelke: That's really the four main bindings that you have, string interpolation, which is super common. I'm gonna think pretty much every templating language has those double curly braces. Properties, brackets, methods or events, parentheses, put them together, banana in a box, AKA angular hug. Now, what happens when you have an element on the page that you want to reference via some other element?
[00:00:31] You can do what's called a local template variable. And so there's a few use cases that this becomes very very Interesting, one is if you're doing user interfaces with observables. And so in other words, I have a mouse move and I wanna actually create a new observable based off of this or I want to drag something.
[00:00:55] And so you would need a reference to that element on the stage. This is where you would use a local template variable. For our purposes what we will use is for is two reference a form. So when you are working with a form there's kinda of two winners in pieces with that.
[00:01:16] I'm getting slightly ahead of myself, but you have the underlying data of the form, what is actually in the fields, and then the state or validity of the form. And so, you need a way to say, if this form is not valid, disable this button. And so, this is where you will see this kinda pattern quite a bit.
[00:01:37] So if you look down here, we're saying if the formRef is not valid, disable the button. Well, what is formRef? Well,
>> Lukas Ruebbelke: Use the number sign if you will, hashtag. And whatever you call it that is available for the entirety of the template. So in this case we're saying formRefm, this could be anything.
[00:02:07] And in this case we're passing in the actual form, underlying form instance to check its validity. So we'll talk a little bit more about it later but what I want to connect here is that we're creating a variable here, formRef, as noted by the hashtag. That we can then reference down here and say, we want to disable this button if this form is not valid, make sense?
[00:02:36] One other example, I thought I added it here, maybe I do. Hold on, wait for it, I guess I did not, you'll see it in the code though. You'll also see this in, with endsheet_if, I thought I had a slide for this. But if you have ng if else, you can say if this is not true, then show this, and so you'll see that in there.
[00:03:04] So we'll show that in the code in just a moment, yes?
>> Speaker 2: When it is triggered, when is the disable triggered, or when is the form referred by triggered? If that is a function, when is that triggered?
>> Lukas Ruebbelke: So essentially, every kind of digest cycle, so if there's some event that happens, like somebody touches it.
[00:03:26] If you will like there's some kind of key stroke some change event, then the form is evaluated. And so, that's something really interesting about forms in itself, that Anglers did a really good job of, even with Angler one dot x. Is to keep a form valid, and keep track of everything, there's kind of this, there's a lot of things that need to happen.
[00:03:47] And so angular's kind of doing this for us, and we're able to just reference this ng form, and just know if it's valid, and they're kind of handling that for us. But it's a busy, every change event it's now being evaluated.
>> Lukas Ruebbelke: All right, so,
>> Lukas Ruebbelke: Local template variable, hashtag, you put it on an element, you can reference it anywhere else in the template.
[00:04:11] Using view child you can actually pull it into the component.
>> Lukas Ruebbelke: Occasionally, and by that quite often, you will want to affect the structure of the DOM. For instance, if this is true show this, if not hide it. Or, I have this collection of things, iterate over it.
[00:04:31] So NG4 is a really good example of a structural directive. That it changes the DOM layout by adding and removing DOM elements, pretty simple. You will see an asterisk on these directives to essentially indicate that it is modifying the HTML, that is the nature of it. And the reason why this happens is that Angular's is doing some things under the hood with the template tags.
[00:04:59] And so, the asterisk is just syntactic sugar that they're taking, it's kind of a TypeScript move if you will. They're taking the asterisk and they're using it to expand out and do a lot more things under the hood that I'm just too lazy to do. For example, ngIF, if hero is true then show it, if not, hide it, that is DOM manipulation.
[00:05:24] NgFor, so looping over the heros collection and stamping it out. Ngswitch, and you can see here, we're actually binding to the property or the value of toeChoice. But underneath the hood you have the SwitchCase, and depending on which one is true, it's turning that one on and the other ones off.
[00:05:51] Now let me show you what I mean by the asterisk, syntax show. So with switch case or with the asterisks, we're just saying, hey it's modifying the dom, but we could do this by hand. And what is happening is, A, there's wrapping this element in template, in a template tag, which is kind of a web component thing and then turning that on and off.
[00:06:17] And so you could do this long hand but I'm lazy. So thank goodness for syntactic sugar. So that is the idea is if you wanna do it long hand you can do it this way. But I think way is just so much easier, and that's where that comes in.
[00:06:37] Last but not least, you will run into this occasionally, is sometimes you need to reference a property that just does not exist yet, it's undefined. So it's in Ruby and a bunch of different things. The safe navigation operator is denote by a question mark, followed by a period.
[00:06:57] So for instance if you wanted to check an ID on an object and the object was undefined or null it would normally a tablet would throw an error or just not do anything. Using the safe navigation operator you can say check it. If it's not there, don't do anything and just kind of absorb it.
[00:07:15] So what is happening is angular js they would just kinda swallow it. And so it allowed for a little bit kind of more loose code. With angular they're a lot more specific and a lot more strict. But this allows us to simply say this may not exist yet, if so, just don't do anything.
[00:07:37] So for instance,
>> Lukas Ruebbelke: If first they did not exist on null hero, and we still need to bind to it, we just put a question mark here.
>> Speaker 2: What if null hero is undefined?
>> Lukas Ruebbelke: Then you've got bigger problems.
>> Speaker 2: No, so, I mean, do you do that nullHero question mark, and then something else, or?
[00:08:03]
>> Lukas Ruebbelke: So I don't think you can do it on the overarching object, so it's more so properties on objects.
>> Speaker 2: Okay.