This course has been updated! We now recommend you take the Angular 13 Fundamentals course.
Transcript from the "Local Templates & else" Lesson
[00:00:00]
>> Let's go back here. And, what I'm gonna do is, I'm gonna put using ng-template, elseBlock, and I'll explain what this is in just a moment. And so, in here we'll go select a lesson. And then I believe it is elseBlock. So let's just see this in action and then I can explain what is happening.
[00:00:35] So, now notice it's saying current lesson does not exist. So, instead I'm going to show what's in the template here. And then you select it, and it shows it. So, there's an interesting piece here that I wanna call out. And it's this right here, what does this hashtag mean?
[00:01:00] Well, this is essentially a way to declare a local template variable. And so by calling or creating this, I can now reference this DOM element in the rest of my template. So I'm saying ngIf current lesson show this else, render elseBlock. Well what is elseBlock? Well, in this case because we're using a local template variable, is we're saying, I want to create this DOM element and I want to assign it this variable elseBlock and show this.
[00:01:35] One other thing, since we're here is, you may have noticed this asterisk. And the reason why this exist is this is some sugar for what is happening under the hood. So under the hood, Angular is actually generating some additional code that you could if you wanted, you could do this longhand.
[00:02:01] But by using the asterisk, you're simply signifying, like hey, this directive is going to be modifying the DOM, go ahead and do it for me. Let me see if I can find that real quick. And I think I actually just saw it. NgIf, And if they talk about it, great, if not, I'm not going to worry about it too much.
[00:02:34] Yeah, so the shorthand syntax is here. But what really is happening is under the hood is generating all these ng templates, which, I don't know why anybody would really wanna do that by hand. And now what's interesting as well is under the hood, what's happening here? It's just property binding.
[00:02:54] So, again, as you just start to kinda poke around in the docs, all the sudden, things kinda started like, I see how they're using this over here to do this. And so that's where that's coming from. So, we have ngIf and if current lesson is not known, we're going to render it else the elseBlock.
[00:03:18] Now we're just gonna dump it in, and then the elseBlock is just select a lesson.