Linking children to their parents in a mat tree structure

I'm looking to create a mat tree based on the provided diagram. https://i.sstatic.net/cTY2w.png

So far, I've managed to design the icons and boxes, but I'm struggling with drawing the connecting lines. Can anyone assist me with this part? I'm using a mat nested tree for this project. You can find my code on StackBlitz here: https://stackblitz.com/edit/angular-qhper2 Please note that Mat icons are not loading correctly in StackBlitz; however, I only need help with the lines.

I know it's achievable through CSS by styling the li and ul tags, but unfortunately, my CSS skills are limited. Any guidance or support would be greatly appreciated.

cssangulartreeangular-material

Answer №1

Utilize the code snippet below:

<mat-checkbox [(ngModel)]="recursive">Recursive</mat-checkbox>
 <mat-card>
  <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
   <mat-nested-tree-node *matTreeNodeDef="let node">
    <li>
      <div class="mat-tree-node">  {{node.item}}</div>
    </li>
   </mat-nested-tree-node>
  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChildren">
    <li class="example-tree-container">
      <div class="mat-tree-node">
        <button mat-icon-button matTreeNodeToggle
                [matTreeNodeToggleRecursive]="recursive"
              [attr.aria-label]="'toggle ' + node.filename">
          <mat-icon>
            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
          </mat-icon>
        </button>
        {{node.item}}
    </div>
    <ul class="example-tree-nested-node">
      <div  *ngIf="treeControl.isExpanded(node)">
      <ng-container matTreeNodeOutlet></ng-container>
      </div>
    </ul>
  </li>
  
   </mat-nested-tree-node>
 </mat-tree>

For full access to the code, click on the link below:

stackblitz

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

The alignment of a background image in CSS is different from using margin:0 auto, especially when dealing with scrollbars

Check out the following link to view the issue: http://jsfiddle.net/7zb6P/1/ In a scrolling div, both the yellow box and the background image are centered, however their centers appear slightly different. The discrepancy seems to be because the background ...

htmlcss

`Unable to activate label function in HTML`

As I dabble around with HTML and CSS, I've been experimenting with creating a custom file selection button. I came across a method on the internet that involves hiding the original button and superimposing a new one over it using the following code: ...

htmlcss

When the header is given a fixed position, the modal becomes unattainable

I am currently working on developing my personal news website called News Pews. This is my third project, and I have encountered an issue that was not present in my previous projects. The problem arises when I apply position: fixed; top:0; to the header c ...

htmlcssmodal-dialogbootstrap-5bootstrap-rtl

Add a background image to the parent element while preserving the existing background color

Can you help me figure out how to apply a background image to the menu while still keeping the background color? HTML: <div class="top"> <div class="menu"> Nop. </div> Nam hendrerit erat eget tellus mollis facilisis. ...

htmlcss

Changing the text color of mat-chips in Angular Material

Having a mat-chip-set and multiple mat-chip elements with a custom product-chip class: <mat-chip-set> <mat-chip class="product-chip" *ngFor="let category of categories"> {{category}} </mat-chip> </mat-chip-s ...

angularmaterial-uiangular-material

What is the best way to set a Firestore data field as a variable?

I am working with a firebase collection named 'messages', where I add documents as follows: this.afs.collection('messages').add({ 'qn': message, 'student': this.student, 'upvotes': this.upvote }); The upv ...

angulartypescriptgoogle-cloud-firestore

When using HTML select, text alignment may not be centered properly in the Chrome

Recently, I encountered an issue where the text in select options is not centered in Chrome. Interestingly, using text-align: center on the select element works perfectly fine on Firefox, but fails to do so on Chrome. I haven't had the chance to test ...

htmlcss

Top tips for creating effective Angular 2 components

My application features a user object that stores and updates all user information using an observable provided by the userService. I am now contemplating the best practice for utilizing this user observable with components. One specific scenario involves ...

angularangular2-observables

Achieve an overlapping effect between absolutely positioned sibling divs without the need to specify a background color

Exploring the development of a swipe-to-action list component. <div class="list-container"> <div class="row"> <div class="content"> Sample Content 1 </div> <div class="action"> ...

cssangulardomcss-position

When you refresh the page, the number of items in the cart displayed on the navbar always shows 0

When using my angular application, I encountered a problem with adding movies to a cart. Although I can successfully add them to the cart and see the correct number of movies reflected in the navbar, upon refreshing the page, the count resets to 0. Here i ...

javascripthtmlcssangular

Why is the Angular6 HttpClient Post method failing when Postman shows success?

Here is the code for my postmethod: postMetadata(titleParam, rankParam) { let headers = new HttpHeaders(); headers = headers.append( "Authorization", "Bearer " + this.adalService.userInfo.token ); headers = headers.append( ...

angularrestexpressangular6angular-httpclient

What is the best way to instruct npm to generate a .min.css file from scss?

Currently, I have setup a process to automatically compile CSS from SCSS using a JSON script. However, the issue is that the ".min" suffix is being removed during this compilation. Here is the output from the terminal displaying the script I am running and ...

cssnpmsassnpm-scripts

Guide to incorporating Jquery-Comment into Angular versions 2 and beyond

I've incorporated the Jquery-Comment plugin into my Angular 2 project by adding the necessary script and css files to my Index.html page. However, when initializing the Comment TextBox id within a script tag, I encountered an error in the console. ...

jqueryangularnpm

Tips for parsing a string object in JSON without a preceding double quote

I'm working with an array in my Angular application, for example: searchTerm : any[] In the context of a textbox value like {'state':'tn'}, I'd like to push this to the searchTerm array. Currently, I achieve this by adding t ...

jsonangulartypescript

`Can you provide instructions on modifying CSS using JavaScript once the window size reaches a specified threshold?`

Is there a way to use JavaScript to automatically adjust the font size when the screen reaches 1050px? ...

javascripthtmlcss

Combining Angular (client-side) and Node.js (server-side) applications into a single package

In my project, I am constructing a front-end application using Angular 8, along with a backend Node.js web application using the Express framework. The Express-based server-side web app will offer a REST API to be used by the Angular app, which may also in ...

node.jsangularexpress

Attempting to incorporate alert feedback into an Angular application

I am having trouble referencing the value entered in a popup input field for quantity. I have searched through the documentation but haven't found a solution yet. Below is the code snippet from my .ts file: async presentAlert() { const alert = awa ...

angulartypescriptionic-framework

Ways to generate an Angular 7 component

Seeking guidance on creating an angular 7 component. I have forked a jsFiddle at this link: https://jsfiddle.net/gauravshrestha/fdxsywLv/. The chart in the fiddle allows data points to be dragged up and down. My goal is to convert this into a component whe ...

javascriptangulartypescriptchart.js

Setting a constant width for text characters across all devices using CSS and HTML

I am looking to display text in my textarea with the same width in pixels across all devices. Essentially, I want to set the character width in pixels so that it appears consistently on any device (Desktop/Mobile). <html> <head> <styl ...

htmlcssfontstextareatext-width

Transforming a menu tab into an active anchor when navigating to a particular section

Hello, I have successfully created a JavaScript code that can dynamically add menu tabs into the menu list window.addEventListener("load", () => { const navList = document.getElementById("nav_list") const fragment ...

javascripthtmlcssfrontendweb-frontend