⚠️ This lesson is retired and might contain outdated information.

Select From Multiple Nested Angular 2 Elements

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 8 months ago

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.

egghead
egghead
~ 22 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today