Multi-Slot Content Projection

[00:00:00]
>> Alex Okrushko: So Module 2 is, this is where we get into more advanced patterns, how we compose components together. We're going to look at a thing called content projection, and one more thing we're going to look into is more, even more advanced dependency injection techniques. We're also going to look at how to do host directives, which is enhancing components with directive functionality straight in the component itself.

[00:00:34]
All right, so just clear that first. And we kind of continued doing almost all of this work in our regular npm run dev. We're done with optimizations, we know how to do that now. All right, so let's take the first one, so we'll create some UI card, and we'll use this card in our, close this guy here, this guy here, so we'll have some tabs here right now, all the information, including the venue is all here, so we're going to split them into a few different tabs.

[00:01:15]
That's what we're going to do. We'll have basically 3 different tabs. So but these tabs are all reusing the same layout, basically the tab layout, you can call it a common component as well, right, it's basically our common component, it's what's called UI card, and we can reuse it further, we can maybe even card and even details can reuse it, it's the same format, I will have a header, it'll have the main contents, and then it'll have a footer, that's the card that we'll have.

[00:01:51]
So, let's create this card, and first we'll just create this shared, right, just be basically a shared component, common component, depending which terms your team's using. Let's create it first, so first we'll just create a shared folder, I'm going to collapse all of them, so it's clear where it's done. I'll write along the other folders, we can create a new folder, let's call it shared.

[00:02:19]
And within this shared component, we'll create a new shared UI card component. I push it here. I'm going to close all the unrelated things. Close to the right. Close to the left too. I close all of this, so it's out of the way, it's a bit cleaner. So let's create this component. I call this component component. I'm going to do it step by step a little bit.

[00:03:06]
UI card we're going to use this UI card. A UI card here and the view details, that's right, and use it there as well, OK, let me just paste, because it's quite a lot of boilerplate here, but I'm going to go over exactly what we're doing. So this component will basically have 3 different slots. This is the header. This is the main content.

[00:03:44]
And this is the footer. What we're using here is a special tag called ng-content. And you can see there's 3 of them. Two of them have a selectors. And what these selectors are doing is they're helping select specific part of the component, the host component that will have it and project that part into the specific slots.

[00:04:20]
Once I'm going to be showing and implementing the rest of it, it'll make more sense, but we'll basically, we can target these 3 different slots from the component that will be content projecting things into this. All right, let's see it in action, for example, we'll have our, this is our event card. Right, this is our event card.

[00:04:52]
Event card. So right now we have everything together here. Right, we have the details, view everything together, and it's just one card, this is this one, right? Sorry, this is the event card. Yeah, this is the event card. Event card is coming from our event list. That's our event card, so we're going to refactor this and make it look the same using our UI card, so how can we do this?

[00:05:36]
We have our source image, so we're going to wrap this card here white rounded. Probably no longer need this class background, let me just check. So we'll have this UI card, right? So you need to import as well, this components imported UI card. And then within the UI card, we need to close this as well, it'll be all the way up to the view details here.

[00:06:11]
I need to close it, right, so this is a closing. So we'll have our UI card, let me just check one more thing, yes, so our UI card already has, see the background, all the CSS beautiful things, so we don't need it in our event card anymore, right? So this is no longer needed because it'll basically be reusing the same thing.

[00:06:42]
So div, this div is not needed. The div, the closing is not needed. Now, we're doing a few things here in our UI card, right now, the whole thing is just content projected, here, let's get back, this is our UI card. We don't have a server running, let's make sure it's running, we'll do the npm. Our backend's not running as well.

[00:07:15]
We don't actually need it anymore. So we'll just do the npm run dev. So we're back to our dev mode. Let's refresh this. There you go, so we have our cards. So looking good, but right now. We didn't target anything, so the entire content of this, the entire, see where this is the card that's wrapping this, right? Anything inside of this is called the content.

[00:07:57]
So the entire thing, the entire thing is projected into our content here. Right, so we're basically not using the slots right now. So the entire thing is projected into this content. And you can see it right, we have this bag at the bottom for the actions, see this, but we're not using it right now. So let's help target this slot and this slot as well.

[00:08:26]
Because they have some different colors, and you know, this is the footer, this is the header. Let's help target this. So we're going to get back to our event card. And we're going to say that, what do we put the name this image will be on our card header. See, card header is like the attribute and our UI card here is selecting this attribute, see, it's doing the square, I guess this is like, hey, I need this attribute that I'm looking for, so now it's going to put that not in the main content, but into this specific content.

[00:09:28]
And we can see, I'm going to save this, we can see it in action already. Right now this is part of, if you again, go Angular UI card, this is part of this content, let's see here. Right, it's part of this border gray gray 100, border gray 100, so this one, so this now goes into the card header, because we're selecting from the content that we have and targeting this specific placement.

[00:10:10]
Let's add the footer as well, and the footer would be our, event card, the footer would be our view details. So all of this, we can make the card footer, so we'll do card footer. I'm going to save and look at the changes here. This, let me just double check card footer card footer. Card footer card footer. UI card select card footer, that's right.

[00:11:12]
So this should be part of the card footer now, let me just double check border gray 50. That is card footer, good, good. Let's take a look. I didn't put it in the card footer yet, so that is card footer card footer. That should be card footer, is it? Let me just double check things. Card header is in the card header.

[00:11:45]
Card header is in the card header. This is UI, yes, that's right. This is the entire thing. Yes, that's the card header, so that work. What is missing card footer? It's probably some spelling mistake, that's what I assume. This div, or maybe this div is, oh, it's part of the different div, yes, so this div is part of the different structure, it has to be outside of this.

[00:12:15]
Right, so we're putting, because this div card footer was deeper into another's DOM structure, we need to put it outside of this. Here, right, and now we can target that slot. Now I can target this because it's no longer part of that existing DOM structure. Let's take a look here we go, see, now it's part of the footer, moreover, we can put it this one from not even here.

[00:12:44]
We can put it as a sibling element anywhere within the within this the card, so we can have card header first and then we're going to put the footer here before our main content, right? Because it's selecting the top elements. Right, so I can have the footer right, I can have the footer before the header, it doesn't really matter because it's basically, hey, use these chunks and project them into this specific slots, and you can see here it still works just fine, very powerful stuff, especially when you try to do component composition.

[00:13:23]
Right, instead of having the template with the ton of ifs and whatever else is, you can really compose and do the content projections in specific slots, you can have content projection within the content projection, you can do, you can go very far with this, and that allows you to compose the elements in the template, instead of having one template with a bunch of if elses.