title: Show / hide <ul> on click in Angular
body: <p>I am trying to show menu on HTML. Currently it is showing all the submenu options. I want it to show the options of the clicked item.</p>
  
  <p>Below is my <code>home.html</code> code</p>
  
  <pre><code>  &lt;ul class="navbar-nav"&gt;
      &lt;li data-toggle="dropdown" class="nav-item" *ngFor="let page of list;let i = index" id="id{{page.link_id}}"&gt;&lt;span  (click)="showsubmenu(i)"&gt;{{page.link_name}}&lt;i class="iconn" *ngIf="page.flg[0].SHOW_ICON=='YES'"&gt;&lt;ion-icon name="md-arrow-dropdown"&gt;&lt;/ion-icon&gt;&lt;/i&gt;&lt;/span&gt;
  
       &lt;ul *ngFor="let sublink of page.sublink; let j=index;"&gt;&lt;li &gt;{{sublink.SUBLINK_NAME}}&lt;/li&gt;&lt;/ul&gt;
  
  
      &lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>By default the submenu options are coming, see screenshot below:</p>
  
  <p><a href="https://i.stack.imgur.com/81Wcd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/81Wcd.png" alt="enter image description here"></a></p>
  
  <p><code>home.ts</code> code below:</p>
  
  <pre><code>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);
  
    }
  }
  </code></pre>