Thanks for the answer! It gives me hope!
I understand the final structure, I had in my mind something like this.
But I don't get how the component template would look like?
Can I add the element *<tab>* inside the template in a component with a
selector name '*tab*'? How would that work?
Can you please give me an example of a component template with a selector
name 'tab'?
*Thanks for your patience! *
On Friday, July 1, 2016 at 9:38:28 PM UTC+2, Lucas Lacroix wrote:
>
> 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] <javascript:>
> > 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] <javascript:>.
>> To post to this group, send email to [email protected]
>> <javascript:>.
>> 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.
