title: Angular 4 hide/show using ng-container
body: <p>Having an issue showing and hiding list items using ng-container. When I select a list item to show sub item lists it returns all sub item lists and not just the selected one. </p>
  
  <pre><code>List1 (Selected)
  -item1
  -item2
  
  List2 (not selected but still showing items when List1 is selected and vice versa)
  -item1
  -item2
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul class="side-nav" *ngFor="let sideNavMenuItem of sideNavMenuItems;"&gt;
  
      &lt;ng-container&gt;
        &lt;li *ngIf="sideNavMenuItem.subMenu"&gt;
          &lt;a id="link" routerLink="{{ sideNavMenuItem.url }}"&gt;
  
            &lt;i class="menu-icon fa {{ sideNavMenuItem.menuIcon }}" aria-hidden="true"&gt;
            &lt;/i&gt; &lt;span class="menu-name" (click)="toggle()" id="bt"&gt;{{ sideNavMenuItem.menuName }}&lt;/span&gt;
  
            &lt;ul *ngFor="let subMenu of sideNavMenuItem.subMenu"&gt;
              &lt;li *ngIf="show"&gt;&lt;a routerLink="{{ subMenu.url }}"&gt;{{ subMenu.menuName}}&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
  
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ng-container&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p><strong>Component</strong></p>
  
  <pre><code>toggle() {
      this.show = !this.show;
    }
  </code></pre>