You can nest components. I have an application that does this an it works
fine.
Your issue seems to be the expand/collapse functionality. The parent
element needs to control the expand/collapse state of the child element.
Something like:
<tab>
<span>Tab 1</span>
<div class="tab-set" (ngStyle)="{display: expanded()}">
<tab>
<span>Tab 1.1</span>
<div class="tab-set" (ngStyle)="{display: expanded()}">
<tab><span>Tab 1.1.1</span></tab>
</div>
</tab>
</div>
</tab>
The tab component's "expanded()" function would return 'none' when
collapsed or 'block'/'inlne-block' when expanded.
Make sense?
On Fri, Jul 1, 2016 at 3:21 PM, Panos P <[email protected]> wrote:
> Hi to all! I'm playing around with Angular 2 and I'm interested in a very
> specific feature.
> Let's say we have a component <tab></tab> can we use it in a way that
> nests the same component inside? I need to create a custom UI with
> *unlimited* nested levels, like this:
>
> tab level 0
> - tab level 1
> -- tab level 2
> -- tab level 2
> --- tab level 3
> --- tab level 3
> - tab level 1
> -- tab level 2
> -- tab level 2
>
> When you click in level 1, all children in level 2 appear (with unlimited
> levels of possible children). Is this possible in Angular 2? I think the
> general idea would represent something like this:
>
> <tab>
> <tab> content level 1 </tab>
> <tab> content level 1 <tab> content level 2 </tab> </tab>
> <tab> content level 1 <tab> content level 2 <tab> content level 3
> </tab> </tab> </tab>
> </tab>
>
> The following template is a mess but is there a way around?
>
> selector = '*tab*'
> template = '<div class='tab>
> <div> {{ text_current_level }} </div>
> <div class='children'>
> * <tab *ngFor = 'let tab for tabs' > *
> * <div>{{tab.text}} </div>*
> * </tab>*
> </div>
> <div>'
>
> I'm curious because with html elements like <div> we naturally do internal
> nesting all the time, and with infinite levels of nesting. Can we do the
> same nesting with custom components? Can we nest a <tab> component inside
> another <tab>?
>
> Thanks in advance!
>
> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To post to this group, send email to [email protected].
> Visit this group at https://groups.google.com/group/angular.
> For more options, visit https://groups.google.com/d/optout.
>
--
Lucas Lacroix
Computer Scientist
System Technology Division, MEDITECH <http://ehr.meditech.com>
781-774-2293
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
