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

The jsPdf library performs well on medium-sized screens like laptops, but when downloaded from larger monitor screens, the PDF files do not appear properly aligned

What steps can I take to resolve a dependency update causing issues in my code?

Which TypeScript AsyncGenerator type returns a Promise?

Understanding Scope in TypeScript

Is there a way to determine the distance in miles and feet between various sets of latitude and longitude coordinates?

The error message "Directive does not contain a property called 'element'.ts" is displayed

The process of invoking the parent class's Symbol.iterator function from the child class's Symbol.iterator can be achieved by following a specific

Identify when a browser tab is closed and determine which specific tab out of all the open tabs was closed

Utilizing a dictionary for comparing with an API response in order to generate an array of unique objects by eliminating duplicates

The Angular directive ng-if does not function properly when trying to evaluate if array[0] is equal to the string value 'Value'

Each Tab in Ionic2 can have its own unique side menu that opens when selected

Trying out the results of angular services

Leverage the power of the MEAN stack with Angular 2 to seamlessly retrieve data from multiple APIs

Learn the art of efficiently saving scanned documents using the Dynamic Web Twain

Material UI offers a feature that allows for the grouping and auto-completion sorting

Typescript is throwing a fit over namespaces

Using React hooks and Typescript: I was expecting to see an assignment or function call, but instead, an expression was

Set the default requests header in Ionic 3 using data stored in Ionic Storage

Sending data to Dialog Component

Utilizing Angular 2's ngModel feature for dynamic objects and properties