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

Lukas introduces list components and implements them into the app, along with a read-only input.

Get Unlimited Access Now

Transcript from the "List Components" Lesson

[00:00:00]
>> Lukas Ruebbelke: Let's start with the list, because it's going to be the easiest,
>> Lukas Ruebbelke: In our ProjectsListComponent.
>> Lukas Ruebbelke: What do we need to render the list? Projects, right? So we do this via this input decorator. Make sure that's imported. Now, little caveat here is decorators are functions. And so make sure that you close this with parentheses.

[00:00:41] And we're just going to go projects. We can even strongly type this if we want. Remember we did this at workspace thing, this is the alternate to that, pretty ugly, right? So let's go back here.
>> Lukas Ruebbelke: Much better.
>> Lukas Ruebbelke: Okay.
>> Lukas Ruebbelke: And so now that we have an Input of projects, so what we're saying is, this is a property on this class, that we are allowing external forces or mechanisms to basically satisfy this particular property.

[00:01:31]
>> Lukas Ruebbelke: And so if we go to projectListComponent in here, what we can do.
>> Lukas Ruebbelke: How do we dump something onto the stage? Pre projects json}}, here we go.
>> Lukas Ruebbelke: So it's there, we are binding to it, but there's no projects. How do we get that in there?
>> Student: Is that it?

[00:02:07] May sync, right.
>> Lukas Ruebbelke: So you have two main type of binding, property binding and event binding. And so this is where kind of everything we've talked about is going to, I feel like, come together. So remember when I said, I wanna do style.color? And whenever that color change, so I could have actually hooked this into a text box that whenever I change it, it would automatically update and change the color.

[00:02:30] Well now, check this out.
>> Lukas Ruebbelke: It's now saying, this component has an input of projects. Then I can go here.
>> Lukas Ruebbelke: And we can go projects. Now notice, this is an observable.
>> Lukas Ruebbelke: And I can unwrap it with the async pipe.
>> Lukas Ruebbelke: Let's go back.
>> Lukas Ruebbelke: And notice now that we're passing that in.

[00:03:10] But the beauty of it is that this ProjectsListComponent in here, it has no conception of where that data is coming from. It's ambivalent and impervious to the implementation details of where that's coming from. It just knows, I'll take whatever you give me. And so you can pick this up and move it in all sorts of places.

[00:03:34] And as long as you match up to this interface, it's totally fine, and it's totally portable.
>> Lukas Ruebbelke: So projects, pretty good. Let's also do.
>> Lukas Ruebbelke: I'm gonna add one more input.
>> Lukas Ruebbelke: And we're just going to call this readonly. For instance, let's say you wanna show the list but you don't wanna allow them to actually delete it, you just wanna show the list.

[00:04:02] Readonly, and we're going to set this to false. So by default this is not readonly, but you could set to true and we'll see why. So in our template let's go a head and get rid of these comments here.
>> Lukas Ruebbelke: And what I'm gonna do is I'm gonna take these click events off for just a moment.

[00:04:46]
>> Lukas Ruebbelke: And we'll go here.
>> Lukas Ruebbelke: We can probably get rid of this. But what we do wanna do is.
>> Lukas Ruebbelke: Here. Instead of allowing it to delete, well, we'll put all this up in a second, but more so is we'll go ngif readonly. And so now, if we refresh this.

[00:05:28]
>> Lukas Ruebbelke: It's not here. Did I set this to true? Let me just double check. Or rather, not readonly, yeah. Wait for it. And so now we're showing it. But if you wanted to pick this up and first let's put it on to the home component, then that may not be a place where you want to allow them to manipulate that collection.