This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Angular 2 Building Blocks 2" Lesson
[00:00:00]
>> Lukas: And so, in between template and class, because up until this point, if you have a class, there's nothing particularly angular about it. And if you have a template, there's nothing technically really angular about that. Because it's mostly standard space, there's some debate about some of the syntax.
[00:00:23] But it's just going to render, and so the question is, how do we make it angular? Well, we do that with Metadata. So we take a regular ESS class, and by using metadata, we are telling Angular essentially how to process this class. And then what it does is it essentially takes that class, it takes the template.
[00:00:48] And it kind of puts those together. And then when you hit a selector or some route definition, then Angular notes like, hey this template is class they go together. And let's initialize it as a component. So we attached metadata with TypeScript using decorators. They're just functions. And so if we're gonna do like a super advance Angular class, this is something that you can actually write, I recommend sometime.
[00:01:16] Trying it out, it's pretty interesting. But decorators are just functions that essentially would turn another function that Angular then knows how to, it essentially will call and initialize that component or that property. This is like eating. I love delicious food. I don't necessarily need to know how I'm processing it at the molecular level.
[00:01:39] So you can just use decorators and really not go too deep into the woods. But if you want to geek out, just know that you can write custom metadata and it's pretty neat. The most common is the component decorator, and this takes config options such as selector, templateURL, styles, styleURL, animations, etc.
[00:02:00] So this is how we tell Angular, take this class and do Angular things with it. So in this case, what you have to have is obviously a ES6 class, a selector and a template or a template URL.
>> Lukas: And so those are kind of the bare minimum requirements for a component.
[00:02:22] You have to have a selector so you can put it into the Dom and it needs a template and a class. So fairly simple. And then, we have data binding which allows to send data from the template to the class and vice versa. So the binding syntax has expanded.
[00:02:43] And as a result, we have our built in directives like library has just shrunk dramatically. But we have essentially interpolation, which if you've done Angular one, you're familiar with double curly braces. Property binding, event binding, and two way binding, which is essentially Property binding and event binding combined.
[00:03:04] So if you have two one-way streets, side by side, what do you have? Well, it's a two-way street. And so, that's the concept of two-way data binding. And as I said, it's expanded but we have a much smaller framework. So what we have is the doubly curly bracelets, so we're sending a value from the class to the template.
[00:03:26] So if you've done angular one this is very familiar. But if you want to send a value and them bind it to essentially a property, then you use these square brackets. So think of this, is really like array axis notation. Is if you have an array of stuff and you wanna access a specific property on it, then it is brackets.
[00:03:49] So this is something my friend, Todd Motto, came up with. And it's just kind of clicked for me. So if you wanna access something, such as a value, it's brackets like array notation. Or if you want to send something back from the template to the class. So for instance, I click event.
[00:04:05] Then, how do you call a method? Well if you have a method named mymethod, and if you just go this.mymethod, you're just referencing the function. But if you want to execute it, how do you do that? Well, you just add parenthesis on the end of it. And so, think of property binding, event binding.
[00:04:23] And so, in this case we're sending an event from the template to the class and then we can put those together and we have two-way data binding. Yes?
>> Speaker 2: Two questions coming in, one from Annie. Is equatable to the link function?
>> Lukas: Not exactly. So, the question is, is on it, equivalent to the link function in a directive?
[00:04:58] And I'm gonna say no. The reason being is because the link function actually returns an angular one returns a reference about the actual element that directive is on. Whereas the link function has really no knowledge of like essentially like the element that it's on, the attributes on that element, etc.
[00:05:19] What on in it is closer to is if you're using doc component syntax, and 1.x, or 1.5, which I highly recommend, it's essentially equivalent to a dollar sign, I think it's. So they've introduced, they've back ported these component life cycle hooks into 1.x. 1.5 specifically. I think
>> Speaker 2: Follow up to that from Chris B.
[00:05:42]
>> Lukas: Mm-hm.
>> Speaker 2: Link function was just DOM manipulation?
>> Lukas: Yes, although they've updated the constructor method in directives that you have dollar element. And you can manipulate it there as well. But, I recommend, if you're doing DOM manipulation, really do it in the linked function within a directive.
[00:06:08]
>> Speaker 2: Next question.
>> Lukas: Yes.
>> Speaker 2: From. Is the digest cycle still there?
>> Lukas: Not in the classical 1.x set. So there is still change detection happening. But $digest as we know it is completely dead, thank God.
>> Speaker 2: One more question from Simon. What about suggestions for using style URLs versus inline styles?
[00:06:41]
>> Lukas: So this actually falls back. I'm not as rigid on this as with templates and template URLs. So just to reiterate I think your templates or your components should be fine-grained in so much that your template, your HTML, should comfortably fit inline. Again, there's cases where that's not gonna make sense.
[00:07:03] For instance, if you're dealing with a forum I found that it's pretty verbose, as well as if you're dealing with a team of designers. And so I've mentioned this to some people and they're like, what? We don't have people do our layouts. That's crazy. I do it all.
[00:07:17] Well unfortunately there are companies that they actually have dedicated resources that all they do is html, CSS, and they get everything pixel perfect. When you're dealing with that workflow, it's really handy to give or essentially receive like here, so your html file, here is your CSS and you just reference them as external files so it allows you to decouple that in the workflow.
[00:07:43] With that said, if it's a very specific simple thing then I will use style and drop it in there. I think it just comes down to what you and your team decides. And then I think from that point you should stick to it. So again, consistency is better than being right.
[00:08:03]
>> Speaker 2: Okay, questions are coming in like crazy here. One from Macy. Can a property in one way data binding be an attribute of an element?
>> Lukas: Can a property in one way data binding? Yes. That's the point. This is kind of the keyboard equivalent if you're looking at like piano keys is that you can see we have a class and a template, interpolation, property binding, so that's one way from class to template.
[00:08:33] Then in our template we have the event binding, which essentially sends a event with information about that Back into the class. And then we have the two-way data binding. More importantly is it helps to actually visualize it. I feel like I'm looking down on top of it, is that you have your template and your class with metadata sitting in between.
[00:08:52] But your template is sending event binding into the class, or event information. And your class is sending essentially information as properties into your template. And so we are actually going to revisit this exact graph or this diagram later when we get into driven architecture.
>> Lukas: So let's check this out here.
[00:09:20]
>> Lukas: At the top, what do we have? The first two elements. What kind of binding do we have in there?
>> Speaker 3: Turbulation.
>> Lukas: Turbulation, yes. So now, if we go to the experiment component, and if you look toward the ends there, we have the brackets. What's going on there?
[00:09:42]
>> Speaker 3: So it's a property.
>> Lukas: Yes, so essentially we're binding the experiment object to this template. And so this is, without trying to get ahead of myself, I don't want to say too much, but this is how you essentially send data into child components. This is the majority of what I use property binding for but what we're doing is we're saying I want to bind this experiment property to this experiment attribute on this element.
[00:10:15] Now let's go down to the input within the form. And you can see here we have NG model. And what do you think happens if we have property binding and event binding together? So remember you go like this two one way streets make a two way street. So this is two way data binding in action.
[00:10:44] This is what this looks like, the two things put together, they call this banana in a box. Essentially you just visualize it's just a banana sitting in a box, or a hotdog in a box, whatever. Unfortunately that's a little too close to a very hilarious SNL skit, and moving along.
[00:11:01] In the submit, what do we have here? Click. So, what are we capturing.
>> Speaker 3: The event.
>> Speaker 4: Event.
>> Lukas: The click event. And so, what you can actually do, is any dom event, as far as I know. I haven't exhaustively tried this out, but if you go to the MDN, and you pull up dom event, you can just start grabbing those and binding to them.
[00:11:23] And so we have click. We're binding to it, parenthesis. And when that click event is captured. Then we're calling update message and we're passing in message, makes sense. Okay, this is for all my homies. That are doing now, one.x, and this comes up. But what about directives? So, think of a component as a directive with a template.
[00:11:56] More so, I just think of directives as a component without a template. So there are times when you want to augment an existing element. And this is where directives come in handy. So if you want to take an existing element and enhance it, so it's decorated with @Directive.
[00:12:15] And so a component is a directive with a template or a directive is a component without a template. So technically If my life was on the line and had to be absolutely submantly correct a component is a directive. So really a component derives off of the directive. But it has a template.
[00:12:40] And more importantly angular comes with built in directives that we'll see in a little bit. So what we have here is a blinker directive, being now that the blink tag has been deprecated, we could technically bring this back. And so now you can imagine we have a paragraph and we want it to blink.
[00:13:02] So we don't need a new element or a template. We want to really augment the behaviour of an existing element. And so what I want everybody to notice here is one, so this goes back to our link function, that this is slightly closer to how a link function works in angular one.
[00:13:22] In the sense that you are injecting the element ref into your constructor so now you have access to the element that exists. So I would say more so element ref is closer to dollar element or what exists in the link function. But this is the piece that I want to point out.
[00:13:44] In the directive, or in our directive metadata, notice we simply have a selector. We no longer have a template.