Build Web Apps with Angular 2

Build Web Apps with Angular 2 Asterisk, Hashtag, & Elvis Operators


This course has been updated! We now recommend you take the Angular 9 Fundamentals course.

Check out a free preview of the full Build Web Apps with Angular 2 course:
The "Asterisk, Hashtag, & Elvis Operators" Lesson is part of the full, Build Web Apps with Angular 2 course featured in this preview video. Here's what you'd learn in this lesson:

Scott reviews a number of operators available inside Angular templates. The asterisk operator indicates a directive that modifies the HTML using the <template> tag. The hashtag operator defines a local variable inside a template which is available to sibling and child elements. Finally, the Elvis operator can be used to guard against exceptions being thrown when a variable that does not exist is referenced.

Get Unlimited Access Now

Transcript from the "Asterisk, Hashtag, & Elvis Operators" Lesson

>> [MUSIC]

>> Scott: Asterisk Operator. So asterisks indicate a directive that modifies the HTML. So I think Lukas hit on it earlier, but Angular 2 leverages the Shadow DOM. The Shadow DOM is part of the web components spec. So there's the template element that we can use to encapsulate HTML in CSS.

[00:00:22] Angular 2 uses that for components and directives and whatnot. But, they don't require that you have to write all of it and know anything about it, so they built a shortcut for it and they used an asterisk for it which is pretty cool I think. It looks weird but the alternative is a lot more to write, so either you get used to it or you write everything else.

[00:00:42] So it's just syntactic sugar to avoid having to use a template element directly. So on top if you use the asterisks in ngIf directive, it'll look like that. But alternatively, if you did wanna use asterisks, it would be like that at the bottom. So that's what the asterisk is doing.

[00:01:00] It's creating that template for you. It's creating a property binding on the ngIf.
>> Scott: So it's up to you, how you want to do it. Whichever way you do it, just be consistent.
>> Scott: Cool, hashtag operator, so this one is pretty cool, I really like this one. This one is like, it defines the local variable inside our template pretty much, so when we do like NG4, which is like NG repeat or maybe you just wanna get a reference to input somewhere and use it somewhere down in a UL or something like that.

[00:01:33] It's just going to set up a local variable that we can use inside of our template. It's the only thing that we can use, actually, to change the context in which our template renders its data. Because by default, it only binds to the components context, but this is another way where we can change that context and add to it as a local variable.

[00:01:49] And it uses the hashtag operator. So you would use the hashtag operator to create it and then to reference it from then on out you wouldn't need a hashtag operator any more. Like this. So you can see we have this hashtag name. And then in interpolation we would just refer to it as name.

>> Speaker 2: Also, within that ng 4, I've seen, actually, you can reference the index, and so it's like #index, as well.
>> Scott: Yep, there's a lot of variables that this thing cooks up for you, for sure. And then, last but not least, the Elvis operator. So we use other languages that had this before, Script had this, it was very much like, I wanna be safe, is this property on here.

[00:02:39] It's the same thing, but now it's in the template, so the template won't freak out if something's not there. So using the question mark after the property before the dot, if you reference a property in your template that does not exist, you will throw an exception. The Elvis Operator is a simple, easy way to guard against null and undefined properties, pretty much exactly what it does in other languages.

[00:02:59] But in a template now, which I think is cool because if I remember correctly, I remember Angular 1 sometimes stuff would just silently fail, you just wouldn't know, you just wouldn't know until someone complained about it. And you would be like snap. So, I think this is pretty cool.

>> Speaker 2: And these are all in the plunks by the way, we're not going into the plunks just for timing reasons but if you have any questions about any of these work, then the plunks are there for documentation.
>> Scott: Cool, all right, so we went through the slides, I wanted to get through them quick.

[00:03:37] You got a question?
>> Speaker 3: Why is it called the Elvis Operator?
>> Speaker 4: [LAUGH]
>> Scott: That's a good question.
>> Speaker 4: It looks like Elvis.
>> Speaker 2: Cuz it looks like Elvis has this flippedy-do hair, he had the hair flipping. So Scott, do this so people on the camera can see like the hair flip.

[00:03:50] So it's like a question mark.
>> Scott: Like this?
>> Speaker 4: [LAUGH]
>> Speaker 2: Yeah, like he had the hair flipped over.
>> Scott: Like that?
>> Speaker 3: Just pop it over.
>> Speaker 2: Yeah.
>> Scott: I mean looks more like a question mark to me.
>> Speaker 4: [LAUGH] [CROSSTALK]
>> Speaker 2: Trust me when he combed his hair like that, it was, it raised a lot of questions.

>> Scott: Yeah, but then he would've liked a question mark or not. I don't know. I mean, if anything, I would've called it a light bulb but not
>> Speaker 2: That's not as catchy.
>> Scott: I don't know. I would've just called it question mark. I don't know.
>> Speaker 4: [LAUGH]
>> Scott: Question, yes.

>> Speaker 5: Is it true that you can use var my variable instead of pound my variable?
>> Scott: Actually, I'm not sure if they got rid of that or not. That used to be the case and it might still be true, but being on Beta 9, I'm not too sure.

[00:04:33] I'm guessing because they haven't been making big releases and it's Beta 9, I'm guessing you can still do that. So, yeah, I would say that you can still do that. We'll test it out and see.
>> Scott: Okay.
>> Speaker 5: And then another one, is there any way to add the same event multiple times?

>> Scott: The same event multiple times.
>> Speaker 2: Please clarify.
>> Scott: Yeah, I'm not sure if-
>> Speaker 2: I could ask him too.
>> Scott: I don't know. I'm sure you can, but I don't know why. I can't see the use case.