Check out a free preview of the full Angular 13 Fundamentals course:
The "Templates" Lesson is part of the full, Angular 13 Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Lukas discusses the relationship between templates and data binding, including event, property, and two-way binding. A demonstration of each type of binding is provided in this segment.

Get Unlimited Access Now

Transcript from the "Templates" Lesson

>> Let's talk about templates. So specifically, we're going to talk about the HTML portion, and then more so the binding and we've seen this in the Hello Angular piece, but just to refresh our memory. We have a template, we have a class, our template is declarative in nature, it's HTML.

[00:00:27] Our class is imperative in nature, that it's designed with imperative logic. And we need to be able communicate between the two, so we have string interpolation. Which is your double curly braces. And all that's doing is saying here's the value in in the template, it just renders it as a string and that's as far as it goes.

[00:00:46] So this is why I've indicated this with a dotted line. Now if I want to pass a complex value in to a template so that it can be passed on to a child template or it needs to modify something then I will use property binding. But if something happens in the template and I wanna capture that, then I use event binding.

[00:01:14] And if I need to put them together, then I use property and event binding in the same place. So what I want to do here just real quick that we just to help kind of streamline some of this when you think about this is. If you have an object, any want to access a dynamic variable and you don't know what that is, how do you dynamically access a property on an object?

[00:01:54] Well, you use array notation. And let me see here I think I can do this cool. So if I have an object and I want to access a property, then I can do it like this. And so if property equaled name, it would return the name, the value of the name property on that object.

[00:02:21] Now if I want to execute something, so let's say I have a function and I want to call it it's called hello world and I wanna execute it. How do I do that? Well, at this point, it's just a function but to execute it, I add in parentheses.

[00:02:39] So, this is how I think of property binding and event binding is using array notation. I can bind to a property using event or like these parentheses for functions, I can bind to an event. So just a little kind of a mental thing somebody said once that kind of resonated, and I think it's a pretty good I think it's consistent with how we actually program and other places.

[00:03:08] So property binding, so it's data from the component to an element and we use brackets array notation. And what's cool is you can actually bind to attributes, classes and styles. So, you could do, for instance, color, any kind of a property we've done it where if you have like a text field and you start typing it in.

[00:03:34] You can bind to the color of that text field and change it on the fly with, well, here we go style.color. And if we put this into a, like a text field, as we change this, it would change the color of the text, we may get into that.

[00:03:55] So event binding flows from data from the element to the component, and we use parentheses. And the one thing I wanna talk about is the event handler receives the event and it is $event parameter. That's just kind of the convention that Angular uses. And so you kind of need to have that.

[00:04:19] And if you're like, well, I need to send out two things inside of an event handler I've ran into problems with that it didn't work. What I had to do is combine them into a single object to then be communicated via $event. So this is what this looks like here, click, and we're able to do that.

[00:04:39] Two way data binding it's just the conjunction of event and property binding. Sometimes it's referred to as a banana in a box and typically you'll use it with the entry model. There is a way for you to actually create two way data binding on a component but I rarely ever use that.

[00:05:00] It's mainly just used with ngModel. All right, so, real quick just review we have string interpolation, event binding, property binding and then two way data binding. And now let's talk about the structural directives. And so we have binding, but we also have the ability to modify or manipulate the DOM.

[00:05:30] And so Using things like ngIf, ngSwitch, we can use these things to dynamically indicate we want to use this part of the DOM where we want to render this this way or render it this way. So ngIF is a big one ngFor is another one that we use frequently.

[00:05:53] Every once in a while I use ng Switch and but that's fairly rare but that does exist. So ngIf and ngFor is where you're going to get your money's worth. And the reason why we use and this is I think changed just a bit is that asterix is syntactic sugar for what's being rendered under the hood at compile time which is a lot more verbose.

[00:06:24] So skip don't worry about it real quick, another two things and then we'll start coding. If you want to reference a piece of your template, somewhere else inside of the template, you can use a local template variable. And so, the canonical form of this is a hashtag, whatever you wanna call it.

[00:06:49] This is very common when dealing with forms. And if you need to do it in a canonical form, where occasionally the some kind of like server side rendering will conflict with this. You can do this using ref-variable which is more of like an html5 Complaint thing. And so here, you can see we have ng-template and we're calling this prompt.

[00:07:19] And so this is what I like about ngIf is that if something is if current portfolio ID then render this else render prompt and we can see that prompt here is the second ng-template. And as well this is very very common this is probably why because I'm able to reference the underlying form controller using $formRef.

[00:07:47] And then based on the state of that form like is it valid or not then I can disable or enable a form. So this is where we see again property and event binding. And last but not least, occasionally you need to bind to something that may or may not exist.

[00:08:09] And so this one point was called the Elvis operator because of the little hair dip to do. But it is now safely referred to as the safe navigation operator and it's just you use the question mark. This is also built into TypeScript I think at this point, and it's a way to guard against null or undefined properties.