I am struggling to display a menu on my HTML page. Currently, it is showing all the submenu options instead of just the options related to the clicked item.
Here is the code from my home.html
file:
<ul class="navbar-nav">
<li data-toggle="dropdown" class="nav-item" *ngFor="let page of list;let i = index" id="id{{page.link_id}}"><span (click)="showsubmenu(i)">{{page.link_name}}<i class="iconn" *ngIf="page.flg[0].SHOW_ICON=='YES'"><ion-icon name="md-arrow-dropdown"></ion-icon></i></span>
<ul *ngFor="let sublink of page.sublink; let j=index;"><li >{{sublink.SUBLINK_NAME}}</li></ul>
</li>
</ul>
The default behavior is displaying all submenu options, as shown in the screenshot below:
https://i.sstatic.net/81Wcd.png
Here is the home.ts
code for reference:
export class HomePage {
list = [];submenu;
json_data = [
{"link_id":"38","link_name":"Contact","flg":[{"SHOW_ICON":"NO"}],"sublink":[]},
{"link_id":"37","link_name":"Offices","flg":[{"SHOW_ICON":"YES"}],"sublink":[{"SUBLINK_NAME":"test11","SUBLINK_OF":"37","SUBLINK_ID":"10005"}]},
{"link_id":"34","link_name":"Products","flg":[{"SHOW_ICON":"YES"}],"sublink":[{"SUBLINK_NAME":"Quick Patrol","SUBLINK_OF":"34","SUBLINK_ID":"10004"},{"SUBLINK_NAME":"Link2","SUBLINK_OF":"34","SUBLINK_ID":"10013"}]},
{"link_id":"33","link_name":"Home","flg":[{"SHOW_ICON":"NO"}],"sublink":[]}
];
constructor(public navCtrl: NavController) {
this.list = this.json_data;
}
showsubmenu(index){
this.submenu= this.list[index]["link_id"];
console.log(this.submenu);
this.submenu=this.list[index]["sublink"];
console.log(this.submenu.length);
}
}