Collapsible list in Angular2 sidenav: ensuring only one sublist remains open

Question

Collapsible list in Angular2 sidenav: ensuring only one sublist remains open

Presenting a functional sidenav demo with Angular 2, TypeScript, and Material Design components. The sidenav features a UL, with the Sites and Users anchors expanding to display their own sub-list.

Check out the Plunker here

Here is the HTML code for the sidenav:

<md-sidenav #start mode="over" class="sideDrawer">
    <ul class="sidenav">
      <li><a>Dashboard</a></li>
      <li>
        <a (click)="sideNavClick()">Sites</a>
          <div>
            <ul *ngIf="clickedSites" class="sublist">
                <li><a (click)='sideNavAlert()'>All Sites</a></li>
                <li><a>Site Groups</a></li>
            </ul>
          </div>
      </li>
      <li>
        <a (click)="sideNavClickUser()">Users</a>
          <div>
            <ul *ngIf="clickedUsers" class="sublist">
                <li><a (click)="sideNavAlert()" >Add User</a></li>
                <li><a>Edit User</a></li>
                <li><a>Remove User</a></li>
            </ul>
          </div>
      </li>
      <li>
          <a>Lights</a>
      </li>
      <li><a>Settings</a></li>
    </ul>
</md-sidenav>

This is a basic version of the solution provided. The actual sidenav will include numerous navigation options, each with children that require toggling visibility. I aim to have only one sublist visible at any given time. Instead of manipulating boolean values for every sublist using *ngIf, I seek a more efficient approach within Angular 2. Although a CSS workaround is plausible, it may involve adding/removing classes individually from each list, similar to flipping boolean values in the alternate solution.

Any thoughts or suggestions?

typescript angular angular-material

Answer 1

Answer №1

To efficiently manage expandable menus, one approach is to keep track of the currently open menu in a variable. This way, when a menu item is clicked, it either closes (if already open) or opens while closing the previously open menu.

Here is an example of the component logic:

export class AppComponent {
    activeMenu: string = null;

    onMenuClick(menu: string): void {
        this.activeMenu = this.activeMenu === menu ? null : menu;
    }

    showAlert(): void {
        alert("Sublist item clicked");
    }
}

And here is how it can be implemented in the template file:

<a (click)="onMenuClick('sites')">Sites</a>
<div>
    <ul *ngIf="activeMenu === 'sites'" class="sublist">...</ul>
</div>

...

<a (click)="onMenuClick('users')">Users</a>
<div>
    <ul *ngIf="activeMenu === 'users'" class="sublist">...</ul>
</div>

For better scalability, consider using an array in the component to dynamically generate menus instead of hardcoding each possibility.

Check out the updated Plunker here.

Answer 2

To efficiently manage expandable menus, one approach is to keep track of the currently open menu in a variable. This way, when a menu item is clicked, it either closes (if already open) or opens while closing the previously open menu.

Here is an example of the component logic:

export class AppComponent {
    activeMenu: string = null;

    onMenuClick(menu: string): void {
        this.activeMenu = this.activeMenu === menu ? null : menu;
    }

    showAlert(): void {
        alert("Sublist item clicked");
    }
}

And here is how it can be implemented in the template file:

<a (click)="onMenuClick('sites')">Sites</a>
<div>
    <ul *ngIf="activeMenu === 'sites'" class="sublist">...</ul>
</div>

...

<a (click)="onMenuClick('users')">Users</a>
<div>
    <ul *ngIf="activeMenu === 'users'" class="sublist">...</ul>
</div>

For better scalability, consider using an array in the component to dynamically generate menus instead of hardcoding each possibility.

Check out the updated Plunker here.

Collapsible list in Angular2 sidenav: ensuring only one sublist remains open

Answer №1

Similar questions

Prevent ESLint from linting files with non-standard extensions

Disabling the experimental app directory feature in NextJs

How to pass a JSON object to a component's constructor in Angular 2

Can someone provide guidance on utilizing the map function to iterate through intricate components in TypeScript?

Having trouble with Next.js 13 GitHub OAuth integration - it keeps redirecting me to Discord instead of signing me in

Angular removing every query string parameters

Implementing webrtc functionality in Angular 2: A beginner's guide

Tips for guaranteeing the shortest possible period of operation

What is the process for including a resource parameter in the acquireTokenSilent method of an MSAL instance within an Angular application?

Center align the mat-expansion-panel material component in a vertical orientation

Establishing the initial state in React

What causes the Angular router URL to vary from the document location on reload while employing CanActivate?

I am attempting to code a program but it keeps displaying errors

Step-by-step guide to conducting a security audit for an Angular project using OWASP dependency check

Which TypeScript AsyncGenerator type returns a Promise?

compileOnSave has ceased to function

The Ion-icon fails to appear when it is passed as a prop to a different component

Facing the issue of "Protractor not syncing with the page" while trying to navigate an Angular website

Issues with Angular routing after upgrading to Angular 4

Is it possible to customize a row with checkboxes in ng2-smart-table when creating a new row?