The component would be just like any other:
@Component({
selector: 'tab',
...
})
export class Tab {
private state: string;
expanded() {
return state;
}
}
There is nothing special and it is just like you put any other component
within your component.
On Fri, Jul 1, 2016 at 4:03 PM, Panos P <[email protected]> wrote:
> 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]> 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.
>
--
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.
