Tree component is not rendering properly

Question

Nested tree control in angular material is not rendering properly. I have used this link https://material.angular.io/components/tree/examples, but its not rendering same as example shown in link.

Tree view rendered in browser

app.component.html file contains html code for tree view

app.component.html file

<div class="container-fluid">
  <div class="row">
     <div class="col-md-4">

      <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">
        <!-- This is the tree node template for leaf nodes -->
        <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
          <li class="mat-tree-node">
            <!-- use a disabled button to provide padding for tree leaf -->
            <button mat-icon-button disabled></button>
            {{node.name}}
          </li>
        </mat-tree-node>
        <!-- This is the tree node template for expandable nodes -->
        <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
          <li>
            <div class="mat-tree-node">
              <button mat-icon-button matTreeNodeToggle
                      [attr.aria-label]="'toggle ' + node.name">
                <mat-icon class="mat-icon-rtl-mirror">
                  {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                </mat-icon>
              </button>
              {{node.name}}
            </div>
            <ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
              <ng-container matTreeNodeOutlet></ng-container>
            </ul>
          </li>
        </mat-nested-tree-node>
      </mat-tree>

     </div>
     <div class="col-md-8">
         <p> Drop Area </p>
     </div>
  </div>
</div>

app.component.ts file contains typescript code for data source and other tree view initialization code.

app.component.ts file

import { NestedTreeControl } from '@angular/cdk/tree';
import { Component } from '@angular/core';
import { MatTreeNestedDataSource } from '@angular/material/tree';
import { TREE_DATA, FoodNode }  from '../../src/dataSource';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'FPGA-App-new';
  treeControl = new NestedTreeControl<FoodNode>(node => node.children);
  dataSource = new MatTreeNestedDataSource<FoodNode>();

  constructor() {
    this.dataSource.data = TREE_DATA;
  }

  hasChild = (_: number, node: FoodNode) => !!node.children && node.children.length > 0;
}

app.module.ts file contains relevant imported modules

app.module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatTreeModule, MatIconModule, MatButtonModule } from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    MatTreeModule, MatIconModule, MatButtonModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Have you found a solution for this? I'm facing the same issue, I'd appreciate any input. — Spray'n'Pray
– Spray'n'Pray, Commented Apr 1, 2021 at 5:37

spence.j.moran · Accepted Answer · 2019-09-06 12:22:00Z

1

I had a similar issue where my tree was being rendered like yours. At first I thought it was an issue with the MatTreeModule but discovered that I need to include the proper CSS in my component's style file.

The fix was to ensure the following styles are applied:

.example-tree-invisible {
  display: none;
}

.example-tree ul,
.example-tree li {
  margin-top: 0;
  margin-bottom: 0;
  list-style-type: none;
}

Source: https://stackblitz.com/angular/earqaagjdamd

answered Sep 6, 2019 at 12:22

spence.j.moran

112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ahmed_mag · Accepted Answer · 2021-07-12 13:52:27Z

1

You have to install material-icons if not yet installed:

 npm install material-icons@latest

then you have to import material-icons into your styles.css:

@import "~material-icons/iconfont/material-icons.css";

then import MatIconModule in your app.module.ts:

 import {MatIconModule} from '@angular/material/icon';
 imports: [    MatIconModule,...]

answered Jul 12, 2021 at 13:52

Ahmed_mag

2794 silver badges6 bronze badges

Collectives™ on Stack Overflow

Tree component is not rendering properly

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related