Transcript from the "Metadata & Data Binding" Lesson
[00:00:00]
>> How does the template and the class, how do they know about each other? So how do we essentially zip these two together so that a template and a class at runtime comes together and they can make sweet music together? Well, this is done via metadata. And, this allows Angular to process the class, process the template and put these together into kind of a single coherent unit.
[00:00:35] And we attach this metadata, the TypeScript using decorators. And this is I think prior to going all in on TypeScript, that this idea of using annotations or decorators to establish or extend some kind of like meta intent is not new at all like spring and Java frameworks of different interviews this, but it didn't really exist in JavaScript.
[00:01:07] And I think even the Angular team was going to create. I think they're gonna call it add script or something. Thank God they did not. But they realize that TypeScript, they already had an implementation of decorators. And so, in my opinion, this is probably one of the big reasons why we moved to TypeScript.
[00:01:26] Now, one thing to mention, again, this is one of these like hashtag pro tips is that these decorators they are just functions. And so when you define a decorator or some kind of metadata that in this happens a lot with like input or output is I'll forget to put the function call in there.
[00:01:54] So those are the parentheses. As a result, it just doesn't work. So do keep in mind that they are just functions. Which means if you wanted, you could very easily create your own custom decorators and that's not hard to do. So the most common is at component decorator that takes a number of configuration options that tells Angular just like Engie module this is how we want to attach, or this is how we want to decorate this component class with this style, this template, et cetera.
[00:02:31] So you can see here, our component decorator. Notice it is a function that is accepting an object as a parameter and the selector. So this is what we use to attach it to the template and invoke it in our application, template URL style URLs. So this is actually an array that you can have more than one style sheet.
[00:02:54] I've never seen fit to do that, but you could if you wanted. And you can also do inline metadata. So when we get into component driven architecture, we will leverage input and output heavily. So not only can you decorate the class, but you can decorate individual properties for fun and profit.
[00:03:17] All right, so class template how do they talk? How are they connected? Well, this is data binding. So data binding allows data to flow from the template to the class and vice versa. And so we have a few different types of binding interpolation property event into a binding.
[00:03:38] And the binding syntax, on the other hand, with Angular has expanded a little bit. But what this allows us to do is by expanding our bindings syntax, we were able to create more meaningful bindings while reducing the API of the framework itself. So, in a nutshell, there's four of them.
[00:04:02] Most people are familiar with the double braces. So this is just basic string interpolation, meaning it is just going to render simple strings in your template. If you wanted to pass a property from a class into the template, and then possibly into another subcomponent, you do that via property binding.
[00:04:22] If you wanted to capture an event from a template and then handle it in the class, you use event binding. And if you want to do both, so two way data binding, is you'll notice that property binding goes one way. It's a one way street. And event binding goes the other way.
[00:04:44] And what happens if you take two one way streets and you put them together side by side? You have a two way street which is exactly how NG model works is that it is allowing for when you update it in the component class, it renders in the template.
[00:05:05] But because forms and filling in forms are essentially a bidirectional activity and it's mutative by nature, we need to be able to capture that in update on the component class. So this is where this two-way binding comes in, more on that later. And so we can just think of it this way that you have a class.
[00:05:25] It's passing properties or values into the template via property binding. And then if something happens in the template, we capture that via event binding. And you can see here at the top, we have some string interpolation. We're just rendering title body. So this is, again, I want to render a string.
[00:05:43] And that's as far as it goes that you can actually pass a value into a child component, that's not what it's designed for. On the other hand, if I wanted to pass an experiment, so you can see in the second line, I'm binding to experiment and I'm gonna pass in is I'm iterating over the experiments, I want to pass that into the experiment component.
[00:06:04] That's how that is done. So we're basically passing a property or a value from the class into the template and then ideally into a subcomponent. And then you'll notice on the bottom here we have a button that we're capturing a click event, and then we're using that to update the message.
[00:06:21] And then you will see to a data-binding NG model, this is where it's on input, so that whatever's in your component class gets rendered into the form. But as you update it, it then gets rendered back. All right, so real quick, what about directives? This was a major, major piece that when you were doing 1.x, it was what happened to directives because everything now is component based.
[00:06:52] Well, they still exist and we still use them a lot whether we realize it or not that a component is basically a directive with a template. So if you need to do something that has functionality, but it doesn't require a template, rather it needs to just act on a pre existing element on the page.
[00:07:13] This is where a directive comes in. So I don't know if you knew this, but the blink tag was deprecated many years ago. And I think it's a tragedy. And I think it's only a matter of time before some hipster brings them back. And I'm going to tell you how to do that with a Angular directive called blink.
[00:07:37] So we could create a class called blinker that takes an element and then you would just do something. So notice it doesn't have a template but it takes the element ref that you're working with and you can do all sorts of things. So somebody could if they wanted resurrect the blink tag if you wanted and make anything and everything blink.
[00:08:02]
>> Is there any concept of a virtual DOM in Angular like there isn't react?
>> Not in the sense of real, no. So I would say stylistically or philosophically, this is where I think Angular and react converge the most. So, whereas you have virtual DOM in react, where it's taking everything and then constructing essentially this virtual DOM that is then being rendered Angular, on the other hand, they have decided to or really leverage the core functionality of HTML as much as possible.
[00:08:45] So the answer is there a concept of virtual DOM in Angular. The answer is no instead of pulling away from the DOM, the Angular team has for the most part kind of leaned into it which is why you're essentially binding up to native dom elements, et cetera.
>> Is component extended from directive?
[00:09:04]
>> If we go into some code here, I'm gonna show you just a bit of a tip. One of the reasons why I like TypeScript is that a lot of times, I can click into something and I can see here that component extends directive. So, the answer is absolutely yes.
[00:09:28] So the question is does component extend directive? It does. And I think what they've done is taken all the directive functionality and said we're taking this. We're just going to allow somebody to attach a template to it. So, this is really, really handy and I recommend if you have a question about something, just going and clicking into it, and and seeing what's available.
[00:09:53] So I spent a lot of time command clicking into like these core type definitions and so somebody asked like this component extend directive. I first thought was like well maybe I don't know well that's really easy to find out you can just click and you can see here that it does indeed do that.
[00:10:13] So, really, really good question. So the question is, is it good practice to programmatically render a component in Angular? And the answer is Intel, Angular 13, which is where we are, it was really hard to do that. And so one of the things that was really easy to do in 1.x was to dynamically render a component on the DOM.
[00:10:44] With Angular 13, you can now programmatically render components on the DOM and by that just to clarify is there situations where maybe the underlying data structure is the same but the representation of that based on some kind of a type might be differently. And so being able to determine the type and then say okay I'm going to attach or instantiate this component into the DOM based on this that would be a use case but that would be I would say the exception and not not the rule.
[00:11:22] So the answer is, is it a good idea? I would say in most cases, you don't need to programmatically render your components in terms of dynamically attaching them to the DOM. Is that more often than not, you can just attach the template or your component into a template and it gets rendered that way.
[00:11:41] But there are cases where you might need to do that, but it's not very often.