title: Angular Sidemenu subitems closes all together
body: <p>I have Sidemenu in which i have items and subitems. What i need to do is open all subitems by default which is working but when i close it will just close that item only. Right now its closing all items together and on reopen its open that particular subitem which is fine but need to do same on close.</p>
  <p>My html code</p>
  <pre><code>&lt;ng-container *ngIf=&quot;!item.hidden&quot;&gt;
    &lt;li *ngIf=&quot;themeLayout === 'vertical'&quot; data-username=&quot;dashboard Default Ecommerce CRM Analytics Crypto Project&quot;
      class=&quot;nav-item pcoded-hasmenu ng-tns-c20-2 ng-star-inserted pcoded-trigger&quot; [routerLinkActive]=&quot;['active']&quot;&gt;
      &lt;a [routerLinkActive]=&quot;['active']&quot; href=&quot;javascript:&quot; class=&quot;nav-link&quot; (click)=&quot;navCollapse($event)&quot;&gt;
        &lt;ng-container *ngTemplateOutlet=&quot;itemContent&quot;&gt;&lt;/ng-container&gt;
      &lt;/a&gt;
      &lt;ng-container *ngTemplateOutlet=&quot;subMenuContent&quot;&gt;&lt;/ng-container&gt;
    &lt;/li&gt;
  
  
    &lt;ng-template #itemContent&gt;
      &lt;span class=&quot;pcoded-micon&quot; *ngIf=&quot;item.icon&quot;&gt;
        &lt;i class=&quot;{{item.icon}}&quot;&gt;&lt;/i&gt;
      &lt;/span&gt;
      &lt;span class=&quot;pcoded-mtext&quot;&gt;{{item.title}}
        &lt;span *ngIf=&quot;item.badge &amp;&amp; themeLayout === 'horizontal'&quot; class=&quot;badge label&quot; [ngClass]=&quot;item.badge.type&quot;&gt;
          {{item.badge.title}}
        &lt;/span&gt;
      &lt;/span&gt;
      &lt;span *ngIf=&quot;item.badge &amp;&amp; themeLayout === 'vertical'&quot; class=&quot;pcoded-badge label&quot; [ngClass]=&quot;item.badge.type&quot;&gt;
        {{item.badge.title}}
      &lt;/span&gt;
    &lt;/ng-template&gt;
    &lt;ng-template #subMenuContent&gt;
      &lt;ul class=&quot;pcoded-submenu&quot; [routerLinkActive]=&quot;['active']&quot;&gt;
        &lt;ng-container *ngFor=&quot;let item of item.children&quot;&gt;
          &lt;app-nav-group *ngIf=&quot;item.type=='group'&quot; [item]=&quot;item&quot;&gt;&lt;/app-nav-group&gt;
          &lt;app-nav-collapse *ngIf=&quot;item.type=='collapse'&quot; [item]=&quot;item&quot;&gt;&lt;/app-nav-collapse&gt;
          &lt;app-nav-item *ngIf=&quot;item.type=='item'&quot; [item]=&quot;item&quot;&gt;&lt;/app-nav-item&gt;
        &lt;/ng-container&gt;
      &lt;/ul&gt;
    &lt;/ng-template&gt;
  &lt;/ng-container&gt;
  </code></pre>
  <p>component.ts</p>
  <pre><code>@Component({
    selector: 'app-nav-collapse',
    templateUrl: './nav-collapse.component.html',
    styleUrls: ['./nav-collapse.component.scss'],
    animations: [
      trigger('slideInOut', [
        transition(':enter', [
          style({transform: 'translateY(-100%)', display: 'block'}),
          animate('250ms ease-in', style({transform: 'translateY(0%)'}))
        ]),
        transition(':leave', [
          animate('250ms ease-in', style({transform: 'translateY(-100%)'}))
        ])
      ])
    ],
  })
  export class NavCollapseComponent implements OnInit {
    public visible;
    @Input() item: NavigationItem;
    public dattaConfig: any;
    public themeLayout: string;
  
    constructor() {
      this.visible = false;
      this.dattaConfig = DattaConfig.config;
      this.themeLayout = this.dattaConfig['layout'];
    }
  
    ngOnInit() {
    }
  
    navCollapse(e) {
      console.log('asddsa');
      this.visible = !this.visible;
  
      let parent = e.target;
      if (this.themeLayout === 'vertical') {
        parent = parent.parentElement;
      }
  
      const sections = document.querySelectorAll('.pcoded-hasmenu');
      for (let i = 0; i &lt; sections.length; i++) {
        if (sections[i] !== parent) {
          sections[i].classList.remove('pcoded-trigger');
        }
      }
  
      let first_parent = parent.parentElement;
      let pre_parent = parent.parentElement.parentElement;
        if (first_parent.classList.contains('pcoded-hasmenu')) {
          do {
            first_parent.classList.add('pcoded-trigger');
            // first_parent.parentElement.classList.toggle('pcoded-trigger');
            first_parent = first_parent.parentElement.parentElement.parentElement;
          } while (first_parent.classList.contains('pcoded-hasmenu'));
        } else if (pre_parent.classList.contains('pcoded-submenu')) {
          do {
            pre_parent.parentElement.classList.add('pcoded-trigger');
            pre_parent = pre_parent.parentElement.parentElement.parentElement;
          } while (pre_parent.classList.contains('pcoded-submenu'));
        }
        parent.classList.toggle('pcoded-trigger');
    }
  
  }
  </code></pre>
  <p>Preview</p>
  <p><a href="https://i.stack.imgur.com/tRZ4U.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tRZ4U.gif" alt="enter image description here" /></a></p>