Unleashing the power of dynamic nested lists in Angular 2

Question

Unleashing the power of dynamic nested lists in Angular 2

I'm facing a challenge with my dynamic list created using ngFor. What I want is to expand the list for a specific item when clicked, instead of expanding all items in the list. The issue is that currently, every item expands when I click on one. I understand why this is happening but struggling to find a solution.

Below is my code snippet:

<ul *ngFor="let p of portList">
    <li (click)="setONUList(p.name)" id="{{ p.name }}"><img src="app/resources/{{ p['oper-status'] }}.png" class="myimage"/>{{ p.name}}</li>
        <ol *ngFor="let onu of portONUList">
            <li><img src="app/resources/{{ onu['oper-status'] }}.png" class="myimage" />{{ onu.name}}</li>
        </ol>
</ul>

I would greatly appreciate any suggestions on how to tackle this problem.

html css angular

Answer 1

Answer №1

Based on my understanding, the subarray remains constant and is displayed for all items in your list. In this case, there seems to be no direct connection between the nested array and the outer array.

One suggestion I have is to introduce a new property within your main array, such as expanded. This way, your main array could be structured like this:

portList = [{id:1,name:'one',expanded:false},{id:2,name:"two",expanded:false}];

Then, you can implement it in your HTML code as follows:

<ul *ngFor="let p of portList">
  <li (click)="expand(p)">{{ p.name}}</li>
  <div *ngIf="p.expanded">
    <ol *ngFor="let onu of portONUList">
      <li>{{ onu.name}}</li>
    </ol>
  </div>
</ul>

To toggle the expanded property on click, you can use the following function:

expand(p: any) {
   p.expanded = !p.expanded;
}

If you prefer a quicker solution without adding a new property, you can utilize HTML5 features like so:

<details *ngFor="let p of portList">
  <summary>{{p.name}}</summary>
    <ul *ngFor="let onu of portONUList">
      <li>{{ onu.name}}</li>
    </ul>
</details>

You can also view examples of both options in this Plunker demo.

Answer 2

Based on my understanding, the subarray remains constant and is displayed for all items in your list. In this case, there seems to be no direct connection between the nested array and the outer array.

One suggestion I have is to introduce a new property within your main array, such as expanded. This way, your main array could be structured like this:

portList = [{id:1,name:'one',expanded:false},{id:2,name:"two",expanded:false}];

Then, you can implement it in your HTML code as follows:

<ul *ngFor="let p of portList">
  <li (click)="expand(p)">{{ p.name}}</li>
  <div *ngIf="p.expanded">
    <ol *ngFor="let onu of portONUList">
      <li>{{ onu.name}}</li>
    </ol>
  </div>
</ul>

To toggle the expanded property on click, you can use the following function:

expand(p: any) {
   p.expanded = !p.expanded;
}

If you prefer a quicker solution without adding a new property, you can utilize HTML5 features like so:

<details *ngFor="let p of portList">
  <summary>{{p.name}}</summary>
    <ul *ngFor="let onu of portONUList">
      <li>{{ onu.name}}</li>
    </ul>
</details>

You can also view examples of both options in this Plunker demo.

Answer 3

Answer №2

A connection must exist between the parent and the childlist, presented in json format. Below is an example code snippet:

<ul>
        <li ng-repeat="item in parent" ng-click="showChilds(item)">
            <span>{{item.name}}</span>
            <ul>
                <li ng-repeat="subItem in item.subItems" ng-show="item.active">
                    <span>{{subItem.name}}</span>
                </li>
            </ul>
        </li>
    </ul>

JSON FORMAT Example:

let parent= [
        {
            name: "Item1",
            subItems: [
                {name: "SubItem1"},
                {name: "SubItem2"}
            ]
        },
        {
            name: "Item2",
            subItems: [
                {name: "SubItem3"},
                {name: "SubItem4"},
                {name: "SubItem5"}
            ]
        },
        {
            name: "Item3",
            subItems: [
                {name: "SubItem6"}
            ]
        }
    ];

Answer 4

A connection must exist between the parent and the childlist, presented in json format. Below is an example code snippet:

<ul>
        <li ng-repeat="item in parent" ng-click="showChilds(item)">
            <span>{{item.name}}</span>
            <ul>
                <li ng-repeat="subItem in item.subItems" ng-show="item.active">
                    <span>{{subItem.name}}</span>
                </li>
            </ul>
        </li>
    </ul>

JSON FORMAT Example:

let parent= [
        {
            name: "Item1",
            subItems: [
                {name: "SubItem1"},
                {name: "SubItem2"}
            ]
        },
        {
            name: "Item2",
            subItems: [
                {name: "SubItem3"},
                {name: "SubItem4"},
                {name: "SubItem5"}
            ]
        },
        {
            name: "Item3",
            subItems: [
                {name: "SubItem6"}
            ]
        }
    ];

Unleashing the power of dynamic nested lists in Angular 2

Answer №1

Answer №2

Similar questions

Exploring the capabilities of this class in Jquery attribute manipulation

Styling does not seem to apply to inner components in NEXTJS

Tips for concealing scrollbars across various browsers without compromising functionality

What is the purpose of the video-js endcard plugin incorporating native controls into the player?

Preventing Bootstrap 4 slider images from shifting position when using background-attachment:fixed for a parallax effect

Is ngOnDestroy in Angular 2 triggered on page refresh, or only when navigating away from the component?

Is there a way I can finish animating these divs in a diagonal motion?

Insert PDF to completely fill the screen

Styling in CSS for aligning a drop-down menu to the right side

Fixed navbar at the top changes from absolute positioning to relative when scrolling

Alignment of headers and footers in email newsletters for various email clients<td>

How can custom selectors be created in LESS?

Animated CSS sidemenu (utilized as a filtering panel for a table)

Tips for eliminating the draggable item's shadow in Angular

How can I fix the "element is not defined" error in JavaScript when using Get

Connecting buttons to JavaScript functions that interact with MySQL database entries

How to Include a JavaScript File from a Local Source on a Web Page

I wish to have the option to choose a courseId when creating a new hole by clicking the "create new hole

Tips for resolving the final item issue in Owl Carousel when using right-to-left (RTL)

Bootstrap modal with sticky-top class displays abnormal margin and padding upon being shown