Tree view menu with list in ionic 4

Ionic Framework Ionic Angular
1

Dear Friends,

iam creating tree view menu in my app. iam using the below code:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    
    <ion-item *ngFor="let fullmenu of fulldetails; let i=index">
      {{fullmenu.name}}
     <ion-list >
       <ion-item *ngFor="let submenu1 of fullmenu.subtitle1; let j=index" ng-init="submenu1.isExpand = false" (click)="menu_clicked(submenu1)">
         {{submenu1.name}}
                
       <ion-list *ngIf="submenu1.isExpand">
         <ion-item *ngFor="let submenu2 of submenu1.subtitle2; let k=index" ng-init="submenu2.isExpand = false" (click)="menu_clicked(submenu2)">
            {{submenu2.name}} 
            <ion-list *ngIf="submenu2.isExpand">
              <ion-item *ngFor="let submenu3 of submenu2.subtitle3; let l=index" ng-init="submenu3.isExpand = false" (click)="menu_clicked(submenu3)">
                {{submenu3.name}}
                <ion-list *ngIf="submenu3.isExpand">
                  <ion-item *ngFor="let submenu4 of submenu3.subtitle4; let m=index"  ng-init="submenu3.isExpand = false" (click)="menu_clicked(submenu4)">
                      {{submenu4.name}}
                  </ion-item>
                </ion-list>
              </ion-item>
            </ion-list>
         </ion-item>
       </ion-list>
       </ion-item>
     </ion-list>
    </ion-item>
  </ion-list>
</ion-content>

its working fine. but the output comes as tree view in horizontal view. i want treeview in vertical directions. i mean,

fullmenu
submenu1
submenu2
submenu3
submenu4

but output comes as
fullmenu -> submenu1 -> submenu2 ->submenu3->submenu4

image
image954×694 28 KB

Please help me to modify this.

Thanks and Regards,
Syed Abdul rahim

2

If I were writing this, I would make it into a single component that could be used recursively, to allow for much more freedom in the format of the underlying data. I also don’t think that <ion-list> nests very well, so I would only use it for the final layer if at all.

However, given what you’ve apparently decided to work with, I would suggest wrapping everything inside each <ion-item> in a single <div>, so that every <ion-item> has but a single child element.

1 Like
3

Dear Mr.rapropos,

thks for the reply. i have updated my post pls check the image i gave, the above code is working fine. but the output is coming horizontally. how can i make it show each set of submenus below each menu. i will try with div also.

Please be informed that i am new to ionic, i know actionscript3 and js verywell. pls help me to get this.

Thanks and Regards,
Syed Abdul Rahim