Angular 2: component nested inside the same component?

[Panos P]

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!

[Lucas Lacroix]

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?

--
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 angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
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

[Panos P]

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! 

[Lucas Lacroix]

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.

[Panos P]

thanks!

[Pawel Kozlowski]

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

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/