Select From Multiple Nested Angular 2 Elements
You have complete control over the elements you nest inside of your component instance by using selectors to access and rearrange them. Selecting allows you reconstruct the elements in whatever order you like so you can visual customize the content passed in.
[00:00] You could actually pass more stuff into widget two, isn't just one thing. If I pass in an H2 and say title, I'll pass in a div, and say some content, and then an H3 that just says footer. If I go into my widget two template now, you'll see that everything works the same.
[00:17] It takes all three pieces, title, some content, footer, and that there's still a between above and below. I can actually select each of those with an NG content tag. I can say select H2, then if I hit save here, and when this refreshes, you'll see this just takes the title, and ignores the other pieces.
[00:38] What that allows me to do is if I duplicate this, and I say div, I can grab the div as well. Now I have title and some content. Obviously, if I do that again, and grab the H3, then I'll get each of those titles, some content, and footer.
[00:56] I can move these around now. I'll cut this and paste it beneath that H3. This'll move the title to the bottom, underneath the footer. I can grab each piece of content, and reorganize it, even though back in my home component, you can see these are still in the same place.
[01:15] As you pass stuff in, you can reorganize and reorder the things inside of there. Also, you don't have to do this by H2, div, H3. You can select any sort of attribute on there. Right now, forcing someone to pass in an H2, H3, and div is a weird contract between templates.
[01:34] Instead, if I say this will have an attribute of header, this will have an attribute of content, and this will have an attribute of footer, then inside of here, I could say select the attribute of header, select the attribute of content, and select the attribute of footer.
[01:54] I'll hit save, and you can see now I get back to my title, some content, and footer. I could even reorganize them here. If I put content at the top, title at the bottom, hit save, you'll see you'll still get the same order inside of the template, because it's grabbing each of those, and reordering them as expected, header, content, then footer.
[02:21] These can be in any order you need. Put that back here in the middle, and clean this up a bit. Lastly, as you might expect, you could also do a class of header, and then in the widget, instead of the square brackets around it as the selector, put the dot as a class selector.
[02:41] I'll hit save now, and we still get that same behavior, because it's selecting based on this selector, finding the header, which is the class header, and the other ones are doing the attribute selectors. Those selectors will work pretty much as you need.
[02:57] I'm just going to revert it back to the attribute, and back to the attribute.