Hi! You might also want to check this tabset implementation from https://github.com/ng-bootstrap/core (Bootstrap directives for Angular 2): https://github.com/ng-bootstrap/core/blob/master/src/tabset/tabset.ts
I did a lot of reviews of this design with Misko and other Angular team members. This is also structure used by tabset in the material design. Cheers, Pawel On Fri, Jul 1, 2016 at 10: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 >> 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. -- AngularJS book: http://www.packtpub.com/angularjs-web-application-development/book Looking for bootstrap-based widget library for AngularJS? http://angular-ui.github.com/bootstrap/ -- 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.
