Angular 13 Fundamentals

Angular 13 Fundamentals Presentational & Container Components

Learning Paths:
Check out a free preview of the full Angular 13 Fundamentals course:
The "Presentational & Container Components" Lesson is part of the full, Angular 13 Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Lukas discusses the differences between presentational and container components and walks through separating the courses list and course details into separate components. A presentational component contains mainly bindings, while a container component holds other components.

Get Unlimited Access Now

Transcript from the "Presentational & Container Components" Lesson

>> We'll do a quick coding demo and answer questions and we will then go from there. So the question is how can we identify a presentation component versus a container component? There's a few ways to do that. One, a presentation component and I'm gonna build one in just a moment.

[00:00:20] It's going to be very close to inside of it. It's gonna be mainly just bindings and so a presentation components should have zero or very little logic inside of it. It container component is going to be a much kind of a larger component and it's going to consume data and essentially direct commands or function calls out of that component.

[00:00:53] But then inside of it in the container component is just gonna hold other components. So with that in mind let me build let me build out few components and we can see what this looks like. So, from the command line, I'm going to generate a component. And I'm going to call this courses-list.

[00:01:23] Let me just double check that. This is going to work and because I have an extra module in my route I'm going to go -m app.module.ts. There we go, so, we have a courses component but I'm also adding in a courses-list. And then from here I'm going to add in a course, details All right so now I've generated two components.

[00:02:08] And we have courses-list, courses details. And if we look at the courses component HTML. Currently, you'll notice that it just has everything in here. Like there's no semblance like it's just doing everything. It has the list and it has the details. And what we want to do is we want to start to break this up.

[00:02:38] So within our courses component. I am going to take this courses-list and I'm just going to go to the list component here. And within the HTML I am going to paste this in. And what I am going to do just for a moment just so we can see this is I'm going to.

[00:03:10] Just create a quick placeholder for this. I'm gonna save this and we're going to. Save this, hopefully let me just double-check. I believe that this should be app courses-list. And so if we go back into our application here we can see that we have the courses-list. And let me do the same thing with the details component.

[00:03:51] So I'm going to go here I'm just going to chop this out cut and here Just going to paste this in. And then we'll go back here and we're going to app, course, details. And I'm going to save this here. Now what's going to happen is that this is obviously not going to work because we've moved some stuff around and it doesn't know where to find certain things.

[00:04:31] So, I'm going to comment out the course details for just a moment. And we're going to focus on the courses-list. Now, I'm going to uncomment this, All right, what we have here is two kind of things that are happening or three things. So, we are rendering courses but then we have a select course and a delete course.

[00:05:06] So let me go into the courses-list component and I'm going to just delete all this stuff because we don't need a constructor or selectorial. So, I need to generate I need to define an input. And it's going to be courses. And this is just gonna be an array of courses.

[00:05:29] And for now we're just going to initialize this as an empty array. Then what I'm going to do is I'm going to do an output and we will do selected and this is going to equal a new event emitter. Now, what you have to catch here is notice that there are a few versions of event emitter here.

[00:06:00] And if you import the wrong one, it's not going to work. And so I have ran into that problem a few times, so we're gonna go selected and deleted. All right, so far so good. Now what I can do is we can go back to the courses-list and, We can do deleted omit.

[00:06:33] And selected by emit in theory I thought I'm just going to comment this as well. I just would like this to render why we're building so, all right, not a lot happening, but at least it's not broken. So now, notice I am passing in courses so I can render it, but then I need to respond to events.

[00:07:10] One is when I select a course or I want to delete a course. Now if I go back to our courses component HTML, what I can do is I can define courses as in input, and I'm going to pass in courses. Now, unfortunately, because I've turned off angular language services, I'm not getting the prompts that I would like, but I can live with that.

[00:07:45] So if I go here selected, it can be selectCourse. And I'm going to use this event parameter here. And we'll also do deleted and then this will be delete course. We'll just double check. So, we go into our component we have selectCourse and deleteCourse, okay. So let's go back and you'll see here that although my layout is a little wonky that we are indeed and I think.

[00:08:33] All right, well, I'm not tracing anything out, but this is rendering. So now, let's go ahead and let's build out the courses detail component. So, what I'm gonna do here is. I'm going to uncheck this and I'm going to update this to. Current course. Now what I'm going to do inside of the template.

[00:09:12] I'm going to, add in an input and we're going to allow for course. And this is gonna be of type course. And we're going to go output. We're going to create two outputs saved equals new event. Emitter and cancel equals new event emitter. All right and we are not implementing on emit and so I'm going to save this and then we're going to go back into our component here.

[00:10:23] And we're going to add the sense so now. Course equal selectedcourse. And, Canceled=reset, and saved. =saveCourse, and this is going to take a dollar sign. All right. This should work minus one thing you'll notice here that I have current course. So I'm going to just for a moment going to update this.

[00:11:25] To be currentCourse. All right, just a couple things real quick. So let's go into course details, and we will, currentCourse.title and we go saved.emit and, What did I call, Canceled. And inside of my template, cancel, all right. Right. Notice that I change the input and so that kind of threw things off hopefully.

[00:12:26] All right, here we go. There we go. So you can see here. Now as I select this, although I'm a little bummed out that this layout is totally messed up, let me see if I fix this real quick. I got a good feeling about this. And I'm just gonna wager that, I probably need to do the same thing for the list, of courses-list, if I'm not mistaken.

[00:13:24] And then we are in the homestretch of this. Let me check in courses-list. There we go, boom, just fixing this layout. There we go. Let me save this and, All right, awesome. So now, New course, but we have a small problem. Hello, so we need to update this or one break this, but also one of the things that we are doing.

[00:14:25] That we want to be really careful about is in our selectCourse. What I'm going to do is, I am not going to create a clone at the parent level. But rather we are going to move that into the child component. So I'm going to get rid of that.

[00:14:50] And let's go back here. So now if I start modifying this you can see it happens in more than one place.