Angular recursive list does not show list-group as a child list

I'm currently working with a list in Angular 2 and utilizing recursive rendering techniques as shown in this tutorial. While displaying the list as an unordered list works perfectly fine, I wanted to experiment with a collapsible list structure similar to the one demonstrated in this example. However, I encountered difficulties in maintaining the hierarchical structure of the items when attempting to implement the collapsible list.

Code for displaying as an unordered list:

<ul *ngIf="items.length">
  <li *ngFor="let item of items">
    {{item.name}}
    <tree-view *ngIf="item[key]?.length" [key]="key" [data]="item[key]"></tree-view>
  </li>
</ul>

Result:

https://i.sstatic.net/QQX6M.png

Code for displaying as a collapsible list:

 <div class="list-group collapse" id="item-1" *ngFor="let item of items">

  <a href="#item-1-1" class="list-group-item list-group-item-warning" data-toggle="collapse">
    <i class="glyphicon glyphicon-chevron-right"></i><strong>{{item.name}}</strong>
  </a>

  <div class="list-group collapse" id="item-1-1">
      <tree-view *ngIf="item[key]?.length" [key]="key" [data]="item[key]"></tree-view>
  </div>

</div>

Result: https://i.sstatic.net/tjC4f.png

.

Styles:

.just-padding {
    padding: 15px;
}

.list-group.list-group-root {
    padding: 0;
    overflow: hidden;
}

.list-group.list-group-root .list-group {
    margin-bottom: 0;
}

.list-group.list-group-root .list-group-item {
    border-radius: 0;
    border-width: 1px 0 0 0;
}

.list-group.list-group-root > .list-group-item:first-child {
    border-top-width: 0;
}

.list-group.list-group-root > .list-group > .list-group-item {
    padding-left: 30px;
}

.list-group.list-group-root > .list-group > .list-group > .list-group-item {
    padding-left: 45px;
}

.list-group-item .glyphicon {
    margin-right: 5px;
}

What modifications should be made to the HTML code to maintain the hierarchical display of items?

htmlcssangularbootstrap-4

Answer №1

Although I haven't had experience working with bootstrap in Angular, it seems like you were on the right track with your tree-view component template structure. Here is an example of how it should be set up to call tree-view recursively:

<div class="just-padding">
  <div class="list-group list-group-root well">
    <ng-container *ngFor="let item of data; let i = index">
      <a href="#item-{{i}}" class="list-group-item" data-toggle="collapse" *ngIf="item[key] && item[key].length else nocollapse">
        <i class="glyphicon glyphicon-chevron-right"></i>
        {{item.name}}
      </a>
      <ng-template #nocollapse>
        <a href="#item-{{i}}" class="list-group-item">{{item.name}}</a>
      </ng-template>
      <div class="list-group collapse" id="item-{{i}}" *ngIf="item[key] && item[key].length">
        <tree-view [data]="item[key]" [key]="key"></tree-view>
      </div>
    </ng-container>
  </div>
</div>

Additionally, ensure that your typescript file is set up as follows:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'tree-view',
  templateUrl: './tree-view.component.html',
  styleUrls: ['./tree-view.component.css']
})
export class TreeViewComponent {
  @Input() data: Array<object>;
  @Input() key: string;
  constructor() { }

}

It appears that the bootstrap functionality may not be fully functional based on the provided js-fiddle, but hopefully, it integrates smoothly with your existing setup. The rest of the code should align closely with what you have implemented.

For an updated Stackblitz demo, visit https://stackblitz.com/edit/angular-5tfnb4

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 2 Loading Indicator for HTTP Requests

Is there a way in Angular 2 to track the progress (percentage completed) of an ajax call using the angular2/http module? Below is the code snippet I currently use for my HTTP requests: let body = JSON.stringify(params); let headers = new ...

ajaxhttpangularionic2

Navigating through different views in Angular 2 using UI Router and ng2 routing directly from

I am currently utilizing the UI-Router ng2 and attempting to change routes after a certain function is triggered. My code snippet looks like this: SomeFunction() { if(condition){ router.navigate(['/newRouteName']); } } It's ...

javascriptangularroutesangular-ui-router

Tips for setting the background image of the body once the image has finished loading

On my website, I have decided to incorporate high-resolution images as the background for the body. However, when I use document.body.style.backgroundImage = "url('URL OF PICTURE')";, the image loads vertically down the page which is not ideal. I ...

javascriptjqueryhtmlcss

Any alterations made to an object in one component result in changes being reflected across all components

I currently have the following item.ts file: item.ts export interface IItem { name: string; isActive?: boolean; } const data: IItem[] = [ { name: 'item1', isActive: true }, { name: 'item2', isActive: true } ...

angular

Issue encountered when attempting to refresh the user interface despite receiving the accurate data in the ngrx

Recently, I've been facing some challenges with updating the user interface and finding a resolution seems to be difficult. Situation: My goal is to allow editing of an event from the event-edit-component and then get redirected back to the same even ...

angularstatengrx

What is the best way to merge different Vue JS instances (each linked to different html divs) into one cohesive unit using Vue

Essentially, I have a scenario where I've created two HTML divs named vueapp1 and vueapp2. Both of these divs serve the same purpose of displaying information and are linked to their individual Vue instances for extracting JSON data and presenting it. ...

javascripthtmlvue.jsvue-component

Receive notifications from a JSON URL in your area

In my Ionic app, I have integrated a feature to display flight schedules using a JSON data API. The goal is to notify users through a bell icon about the status of the flight, whether it's arrival, delay, or landed. To achieve this, I have installed L ...

angularnotificationsionic4

Angular does not support fetching JSON files

update: The code has been modified to include the latest suggestions provided by you all. I've got this data.json file: [{ "codigo": 21420, "desc": "itv orion 20 a", "prod_24_h_kg": 22 }, { "codigo": 21421, "desc": "itv orion 20 w", "prod_24_h_kg": ...

angularjsjsonhtml

Achieving horizontal scrolling for tables without using div wrappers

Whenever the width of tables in my articles exceeds the available space in the webpage layout, I wanted to enable horizontal scrolling. Despite trying to accomplish this with CSS alone, I was unsuccessful. As a result, I resorted to enclosing everything i ...

htmlcssoverflowcss-tables

Encountered a problem while executing the command (npm install -g @angular/cli) on a Mac

Encountering issues while trying to set up angular/cli on my system. When attempting to run the command npm install -g @angular/cli in the terminal, I encountered error messages. Even using sudo as a prefix did not yield positive results. npm ERR! Error ...

node.jsangulargitnpmangular-cli

Unique CSS design with an accentuated border

I was experimenting with creating a corner using CSS and managed to achieve something like this: .left-corner { width: 0; height: 0; border-top: 100px solid powderblue; border-left: 100px solid transparent; } <div class="left-corner"></ ...

htmlcsscss-shapes

Omit the timezone details when initializing a new Date object in Angular

Encountered a problem while testing the following line of code console.log(JSON.stringify(new Date('2016-06-15 10:59:53.5055'))); The result I'm getting is "2016-06-15T08:59:53.505Z", but I was expecting "2016-06-15T10:59:53.505Z" Is ther ...

angulartypescriptdate

How to Solve CORS Policy Issue When Hosting Angular Site on AWS S3?

I'm trying to host a static Angular site on AWS S3, but I'm facing a CORS policy issue. Whenever I attempt to access the index.html file after running 'ng build', I receive the following error: Access to script at '.../dist/testapp ...

angularamazon-s3

New feature: Material UI Chip Input with floating input label

I installed material-ui-chip-input to implement tags in an input field. I wanted a label alongside it, so I utilized the default Material UI label for consistency with other inputs. However, the input doesn't shrink as expected when clicked on by the ...

cssreactjsmaterial-uifrontendlabel

Adding personalized typings to a JHipster (v5.82) application

Starting a new JHipster project (v5.8.2) and integrating the Metronic Angular theme can be a bit of a challenge, especially with limited documentation available. After integrating the various css/js bundles and components, I encountered an issue with some ...

javascriptangularjhipstertypescript-typingsmetronic

Angular and Bootstrap are like peanut butter and jelly -

Recently, I've been delving into Angular and attempting to integrate Bootstrap into my projects. To install Bootstrap using npm, I ran the following command: cmd npm install bootstrap --save After the installation, I imported the necessary styles in ...

angularbootstrap-4

How to Generate a Unique URL in Angular 7 Using Typescript

I'm struggling to display or download a .pdf file in my Angular 7 project due to issues with window.URL.createObjectURL. Here's the code snippet I've written: this.userService.getFile(report.id).subscribe( res => { console.log(res) ...

angulartypescripturlangular7

Guide on implementing CSS3 parser with HtmlUnitDriver

As an example, let's consider a scenario where we have a selector to target the active menu item: $("ul#menu li a[href='/']") And a selector to target the remaining menu items (1): $("ul#menu li a:not([href='/'])") However, the ...

cssseleniumjquery-selectorswebdriverhtmlunit

URLConnection is unable to fetch the entire HTML content

When trying to extract information from a website, I encountered an issue where the content was incomplete if the HTML context was too lengthy. The total length of the retrieved string is approximately 40000, but the count of the string retrieved varies ea ...

androidhtmlhttpsurlconnection

Every time a new modal is opened, the Bootstrap modal within the code seems to magically multiply itself

Hey there! I recently implemented a room password validation feature for the chat application I developed. To display the password input to users, I utilized Bootstrap's 4 modal. https://i.sstatic.net/4wJQp.png The modal is triggered using jQuery wi ...

javascriptjquerybootstrap-4modal-dialogbootstrap-modal