Angular - Create component tree menu-CodePudding

I am creating a tree menu, visually it looks like this:

The tree has been created based on an array of objects obtained from a service, extracted from a date property.

Now, I have to get the tree menu to allow displaying and collapsing the: years, months and complete dates, in the style of this component: https://angular2-tree.readme.io/

Ideally, I'd do this with typescript, but if it's hard for me, I'd try using an external component.

This is the html code:

<ul>
        <li *ngFor="let y of tree | keyvalue">{{y.key}}
            <ul>
                <li *ngFor="let m of tree[y.key] | keyvalue">{{m.key}}
                    <ul>
                        <li *ngFor="let d of tree[y.key][m.key] | keyvalue">{{d.key}}
                            <ul>
                                <li *ngFor="let h of tree[y.key][m.key][d.key]"><a [ngClass]="{'hourSelected': (idSchedule === h.id || lastId === h.id),'hourUnSelected': idSchedule !== h.id}" (click)="loadMacroProcesses(h.id)">{{h.hour}}</a></li>
                            </ul>    
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

This would be the solution, now I will refine it:

<ul>
    <li *ngFor="let y of tree | keyvalue; let i=index" (click)="indexExpanded=indexExpanded==i?-1:i"><span>{{y.key}}</span>
        <ul [hidden]="indexExpanded!=i?true:null">
            <li *ngFor="let m of tree[y.key] | keyvalue"><span>{{m.key}}</span>
                <ul>
                    <li *ngFor="let d of tree[y.key][m.key] | keyvalue">{{d.key}}
                        <ul>
                            <li *ngFor="let h of tree[y.key][m.key][d.key]"><a [ngClass]="{'hourSelected': (idSchedule === h.id || lastId === h.id),'hourUnSelected': idSchedule !== h.id}" (click)="loadMacroProcesses(h.id)">{{h.hour}}</a></li>
                        </ul>    
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Can you recommend me a good one external component? Thanks.

NOTE: I am working with version 11 of Angular

NOTE: If you deploy one year, the rest of the years should be collpased back.

NOTE: Angular material is not valid for me

CodePudding user response：

You could add a parameter for visibility and click event to the parent ul. How it would work is that they would have a boolean value on them for visibility that would change when you click the top ul element. You would have a method that would just switch between true/false and display if true hidden if false. Click event should be on the top li element and visibility on its child.

CodePudding user response：

You should checkout the tree component provided by primeng. It has its own data format and can do your own customisation on top it.