This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Angular Building Blocks, Part 2" Lesson
[00:00:00]
>> Lukas Ruebbelke: Data binding. How do we actually communicate between the class and the template? There's really kinda four ways. Before, I'd say there was kinda one main way, and then you have like entry model, but as a whole, most people are familiar with the curly braces. But if you have a value, on a component class that you want to send in to your template, you communicate that via property binding.
[00:00:28] But then if something happens in your template, and you want to communicate it back to the component, you do that via event binding. And so these are essentially one way streets. Let me see what my next slide is here.
>> Lukas Ruebbelke: I guess I thought I had, it might be in another one.
[00:00:48] But, so template, or class over here to template. We're basically passing properties into the template. If something happens in the template, we pass the event back into the class for processing. So these are one way streets. Class to template, template to class. Now the question is, brain bender, what happens when you combine?
[00:01:15] If you take two one way streets and you put them together, what do you have?
>> [INAUDIBLE]
>> Lukas Ruebbelke: Yeah, and so you'll see here. Entry model is one of the most common ones. Initially, there was not going to be two way data binding, and enough people, let their voices be heard.
[00:01:32] And so they said, well, we have going this way let's just combine them together. And so when you see what's called, banana in a box, if you will, is you have the brackets and then the parentheses. What this allows it to do is bind to the property on the class, so it automatically updates, but if it changes, then it will communicate that change back to the class.
[00:01:56] And so really, two way data binding is just two one way data bindings combined together. I actually like to call this an angular hug, so, that's kind of how that happens. So, what we have here is template class, property binding and event binding. I think I lost my arrows here, but the event binding happen from what to what?
[00:02:27]
>> Speaker 2: Template to class.
>> Lukas Ruebbelke: Template to class, okay. And then property binding is from? Class to template. So it's just kind of a circle.
>> Lukas Ruebbelke: So let's see some of this. Over here, what do we have? String interpolation. It's just taking a string and rendering it on to the template.
[00:02:48] This is pretty much kind of the most basic one. Now we have e of experiments, so we have this property e that we want to pass into this template. We're using property binding. So we're saying, on this property experiment, we're passing in this value of e. But then over here, we have a button.
[00:03:12] And we say when this clicks, so we're capturing the click, we're saying call updateMessage. And then from here, we have an input. You can see that we're binding in both places. Does that make sense? So one way to think of this, is if you have an object and you want to dynamically access a property on it.
[00:03:37] Wish we had a whiteboard but we do not. So imagine you have an object. And you say, I want to get the value of some dynamic property. You don’t know what it is. It could be first name, last name, address, whatever. How do we do that? With the ray notation.
[00:03:55] So, you can say, user, a ray notation, you can actually just pass him the property dynamically to get that value. And so this is how I think of property binding, cuz you're actually accessing the value of a property that exists on this component. Now when you have a function, how do you call it?
[00:04:20] So if I had a function called run, well, let's just say Hello World, and I traced it out in the console, just console log, Hello World. What's it going to output? The body of the function. So it's not calling it. A function is an object. I'm tracing out the object.
[00:04:39] How do I call, Hello World? Parentheses. Once you put the parentheses on it, that method is going to get called, and it's actually gonna trace out the result of it. And so this is how I think of events. Capture it with parentheses. So, brackets for array, parentheses for event calls.
[00:05:01]
>> Lukas Ruebbelke: If you can believe it, I think we're in the homestretch. So, this comes up a lot. What about directives? So, a component is a directive with a template. A directive is actually a kind of a superset of a component that provides functionality to an element, but it doesn't provide a template with it.
[00:05:30] So what it's doing is taking an existing element on the page, and essentially augmenting that. So you're basically saying a directive is behavior only, not behavior and view, if that makes sense. So, there's certain things, like let's say you had an item on the page that you wanted to attach some kind of styling to it, dynamically.
[00:05:56] That would be a good case of a directive. A router link is a good example of that. Is that it will basically take and take an existing element and attach the link to it. It's not inserting a new template, it's just taking the thing that's already there and augmenting the behavior.
[00:06:14] NGF is actually another example of this. NGF what does that look like? Or NG4. It doesn't look like anything, it looks like whatever template it's on. So that's the difference is that a component has a template, a directive does not. So it kind of broke my heart, but they deprecated the blink tag.
[00:06:35] Somebody could bring this back, if they wanted. And how would do this is, write a blink directive, insert the element, that it's on, so this is element rev, and then attach the blink functionality and get the party started. And so this is an example of, I don't want to add in a new view.
[00:06:52] What I wanna do is take this existing thing, and I want it to blink like it's 1999.
>> Lukas Ruebbelke: So this is it, it just has a selector, not a template.
>> Lukas Ruebbelke: Okay, really close to homestretch now. This is pretty easy, a component is system what? A class and a template.
[00:07:15] That's a metadata. Well, this is really easy with a service, it's just a class. And what you wanna do it's keep your business logic, everything as much as you can into your services. And you want your components to do one of two things. Consume just enough data to satisfy the template, capture user events and delegate it back to the services.
[00:07:40] So you want your services to be rich, your components to be thin clients. One thing I will say is, you technically do not have to use injectable metadata, but there's some weird cases, it'll break. So just the recommended thing is always use injectable. And this is it, what do we have here?
[00:08:03] Well, it's a class. A little bit of dependency injection with a method. And so, by the time we get to components, and kinda work through that, we'll get to the services thing, and it's like, all right, you know what to do. And it's gonna actually be a very short module, because this is just a class.
[00:08:31]
>> Lukas Ruebbelke: So what NG 4 worked with ES 5 syntax. Like in angle GS entry repeat. No, I don't, they do not have an equivalent to that, so it is very much, yes, kind of all the way.