Build Web Apps with Angular 2

Build Web Apps with Angular 2 Template Demonstration: 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 "Template Demonstration: 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 continues his template code example by incorporating the asterisks and Elvis operators. He also shows a couple different ways to iterate over an array inside a template.

Get Unlimited Access Now

Transcript from the "Template Demonstration: Operators" Lesson

>> [MUSIC]

>> Scott Moss: Let's talk about the asterisked stuff, right. Let's do some iterations here. So we'll do a URL and we'll do LI and just some basic numbers. So we'll use star. Why do you say star? Do people say asterisk? I just star, right? Star, okay, star ng 4 equals, and we'll just stay num of nums.

[00:00:31] So the reason they did of, and not in like they used to, is because of iterators. Because now you can do of syntax to iterate over things in JavaScript. So, that's why they're doing that here. It makes sense. And for each one of those we're just going to just put a noun here, Shazam.

[00:00:48] So, now we need to go to here and we need to initialize these bad boys. So, we'll just say nums and it goes in an array of 1, 2, 3. And now, we have our nums, all right. So remember the other way around for this, would be something like this.

[00:01:11] So we have a ul ad then li.
>> Scott Moss: And then a template.
>> Scott Moss: And then, NG4= num of nums. Then num. I think that's it. Maybe I got it wrong, we'll see.
>> Scott Moss: Yeah, I totally got it wrong. It broke. So, forgot what that was, let's, look at the syntax real quick.

>> Scott Moss: Yeah, okay, I put it on the wrong one. It's actually like this. Had it backwards. So let's check that out. Okay, it's still broke, does not work, unexpected, may be you just don't use this with that any more. Let's check it out. No, that's not it. Okay, we're not going to sit here and debug this.

[00:02:51] So just use this way because it's better, obviously. Any other questions? On this stuff.
>> Speaker 2: It's the Awesomer Asterisk Loader WebPack.
>> Scott Moss: Awesomer Asterisk Loader? That's a thing?
>> Speaker 2: No.
>> Scott Moss: [LAUGH]
>> Speaker 2: It should be. [LAUGH] You could solve this with WebPack naturally.
>> Scott Moss: Probably could. Those are some of the basic.

>> Speaker 3: Somebody's having an issue in CAD. Could you maybe just see if that message means anything to you?
>> Scott Moss: There's one more example I want to show you. The Elvis operator. I forgot that one, so let's do that. Let's say H1, and we'll just call it Elvis, name.

[00:03:32] The way we do it is we do that. Right, so we'll say Elvis?.name and then now we'll come in here and I'm gonna make Elvis be an object with no name property. And let's see what happens.
>> Speaker 4: Absolutely nothing.
>> Scott Moss: Nothing on the page, no errors, what's in the DOM?

[00:03:53] Let's check out the DOM.
>> Scott Moss: Okay, could you just go? Thank you.
>> Scott Moss: Hm, there's the h1, wait no nevermind, this is not the h1. It's just not there, it's just not even on the page at all. This element Never even got rendered. So, that's pretty cool. But now,-

>> Speaker 5: Take the operator off.
>> Scott Moss: You take the operator off. What happened? No errors, elements.
>> Scott Moss: Hm, looks like no change there, actually. Looks like the same result. I don't know, maybe it works differently now in Beta9. Let's put that back and then put a name property.
>> Scott Moss: Okay, obviously it shows up.

[00:05:03] But that's weird. I was expecting it to error, maybe it silently errored, I don't know. Interesting, I'll look into that.