Posted under Angular
Permalink
Tags Tip, Tutorial
I had a use case where I was rolling my own simple tab container.
An interesting challenge of this use case was the fact that the tabs needed rendering in their own right, but also needed iterating separately in order to build the tab header bar.
This is an example use case where content markup might influence parent markup dynamically and in multiple areas, and that attributes of the content markup are used in parent markup.
To do this I used the @ContentChildren decorator to inject an array of the tabs into the parent tab container. I could then easily iterate the array in the parent markup to build the header bar with labels and icons declared in the content children. In addition, the content children were rendered in their own right with their own content in different ways using <ng-content select=”…”></ng-content>.
Leave a Reply
You must be logged in to post a comment.