Angular Core

Angular Core Review & Binding Styles


This course has been updated! We now recommend you take the Angular 9 Fundamentals course.

Check out a free preview of the full Angular Core course:
The "Review & Binding Styles" Lesson is part of the full, Angular Core course featured in this preview video. Here's what you'd learn in this lesson:

Lukas reviews the basic anatomy of the classes and associated component and properties. An overview of how to bind to a style, class, or child component is also discussed.

Get Unlimited Access Now

Transcript from the "Review & Binding Styles" Lesson

>> Lukas Ruebbelke: So let me do a quick summary of what we've covered, and I'll answer any questions that anybody might have. So the basic anatomy of a component, when it's all said and done is I start to,
>> Lukas Ruebbelke: Kind of close this out.
>> Lukas Ruebbelke: We have a class, which holds the imperative logic for that component.

[00:00:31] We have a decorator, or metadata, that will define how Angular is supposed to interpret and handle that component. So selector is what allows you to place that component into another component's template. templateUrl, styleUrls, so you can actually have more than one stylesheet. And then when you create a property or a method on that component class, it's now available for binding in your component.

[00:01:08] So in the case of our projects component, we created a projects array, which just has three kind of mock projects.
>> Lukas Ruebbelke: Which we were then able to bind to in our template. And so the easiest way to bind it is just wrap it in curly braces. And if you want to see it like to JSON, so I believe under the hood, when you do the JSON pipe, it's just taking that object and going object.toJson.

[00:01:37] That you just dump that right out. But you can use structural directives such as ngFor to iterate over a collection. And then whatever element that ngFor is on, it will stamp out an instance of that for every item. So in this case, we're saying,
>> Lukas Ruebbelke: ngFor="let project of projects".

[00:02:04] Create for every one, for every project, in projects, create an instance of this element and everything that is inside of it. And then because we said let project, so we're creating a local scoped variable in our template that we can now reference that. So if I call this hoohaw, whatever, that I would have to update it here within the template.

[00:02:34] And Angular is able to infer scope and context, so that if you wanna capture, for instance, a click event, you do this via event binding, which is in parameters. So I wanna capture a click event. But you could also do mouseover, mouseunder. So any dom event, you can bind to.

[00:02:57] You can also create your own events, which we will talk about later. And from here, you can then capture that event. And when it triggers, call a method back on your component, which in this case we're calling selectProject.
>> Lukas Ruebbelke: And so this is fundamentally under the basic shape of a component.

[00:03:29] So it's just a class that then properties are available for binding in your templates, that you use curly braces to do event binding. And if you want to bind to a property in your template and it's typically just a string. So I will mention one other thing is that you can use double curly braces or you can use bracket bracing for property binding.

[00:03:57] So, if we go into, let's say, ProjectsComponent here, and let's just call this primaryColor. And we'll set this to red.
>> Lukas Ruebbelke: Now what we can do is go to our, really any element, and we can go [style.color],
>> Lukas Ruebbelke: ="primaryColor".
>> Lukas Ruebbelke: Here, so this is a way to if you wanna bind to a style or a class, or moreso, if you wanna pass data into a child component, it's done via property binding.

[00:04:52] And so just a helpful mnemonic for this is that if you have a method and you wanna call it, how do you actually invoke that method?
>> Lukas Ruebbelke: So for instance, if I did,
>> Lukas Ruebbelke: console.log(selectProject), what's gonna happen?
>> Speaker 2: Log out the code for selectProject.
>> Lukas Ruebbelke: Right, its going to log that code out.

[00:05:29] But if I do this, then it's going to invoke that method. And so here you can think of property binding is that if you want to capture that event and then invoke something, I think it would just as parenthesis on a method. And if you want to reference a property on something that, so let's say I had, and it's a dynamic property.

[00:06:05] So for instance, you have a collection or you have an object. And you want to reference a property, but you don't know what it is. So for instance, I could go,
>> Lukas Ruebbelke: That if I want to go this.selectedProject, and I want to reference some property on here. I don't know what it is.

[00:06:29] But let's say I pass this in, it's some prop. Well, whatever this is, I can access it because it's in array notation. So from here, when I think of I want to bind to a property on my component class and put it into my template, that it's done essentially with array notation.

[00:06:55] Or essentially, you want to access a property on a collection or an object, array notation. So events are parentheses, properties are brackets. Just as if you were accessing something dynamically using array notation. That just, last but not least, is that you can create local variable references to elements in your template and then reference them elsewhere.

>> Speaker 2: So that local variable reference doesn't have to be a, what did you call it, a local template? It could be any tag or any component?
>> Lukas Ruebbelke: Mm-hm, yep.
>> Speaker 2: What's the scope of those declarations?
>> Lukas Ruebbelke: So I would have said, I believe it's,
>> Lukas Ruebbelke: I believe everything inside that component template.

>> Speaker 2: Okay.
>> Lukas Ruebbelke: At one point, I thought it was only that and down, but then obviously we're going kind of parallel. So I believe it's available to anything inside of the template. But if anybody finds some official decree in the documentation, let me know. But I generally, I would never break the Law of Demeter and reference a local template variable in another template per se.