Tree view

Angular Bootstrap 5 Tree view plugin

MDB treeview plugin is used to show hierarchical information which starts from the root item and proceed to its children and their respective children. Each item besides the root has a parent and can have children.

The parent is the node which is higher in the hierarchy and the child the one that is lower. Siblings are items which have one and the same parent. Items can be expanded and collapsed.

Note: Read the API tab to find all available options and advanced customization

Basic example

<mdb-treeview
  textField="name"
  childrenField="children"
  [nodes]="data"
></mdb-treeview>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  data = [
    { name: 'One' },
    { name: 'Two' },
    {
      name: 'Three',
      children: [
        { name: 'Second-one' },
        { name: 'Second-two' },
        {
          name: 'Second-three',
          children: [
            {
              name: 'Third-one',
              children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
            },
            { name: 'Third-two' },
            {
              name: 'Third-three',
              children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
            },
          ],
        },
      ],
    },
  ];
};

Open on item click

Use a [openOnClick] to define opening lists of treeview by click only on the arrow or on the whole list item. 

<mdb-treeview
  textField="name"
  childrenField="children"
  [nodes]="data"
  [openOnClick]="false"
></mdb-treeview>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  data = [
    { name: 'One' },
    { name: 'Two' },
    {
      name: 'Three',
      children: [
        { name: 'Second-one' },
        { name: 'Second-two' },
        {
          name: 'Second-three',
          children: [
            {
              name: 'Third-one',
              children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
            },
            { name: 'Third-two' },
            {
              name: 'Third-three',
              children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
            },
          ],
        },
      ],
    },
  ];
};

Accordion

Use a [accordion] input to enable or disable opening only one list at the same level. 

<mdb-treeview
  textField="name"
  childrenField="children"
  [nodes]="data"
  [accordion]="true"
></mdb-treeview>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  data = [
    { name: 'One' },
    { name: 'Two' },
    {
      name: 'Three',
      children: [
        { name: 'Second-one' },
        { name: 'Second-two' },
        {
          name: 'Second-three',
          children: [
            {
              name: 'Third-one',
              children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
            },
            { name: 'Third-two' },
            {
              name: 'Third-three',
              children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
            },
          ],
        },
      ],
    },
  ];
};

Selectable

Use a [selectable] input to set up checkboxes in every list item.

<mdb-treeview
  textField="name"
  childrenField="children"
  [nodes]="data"
  [selectable]="true"
></mdb-treeview>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  data = [
    { name: 'One' },
    { name: 'Two' },
    {
      name: 'Three',
      children: [
        { name: 'Second-one' },
        { name: 'Second-two' },
        {
          name: 'Second-three',
          children: [
            {
              name: 'Third-one',
              expandId: 'expand-example-item',
              children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
            },
            { name: 'Third-two' },
            {
              name: 'Third-three',
              children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
            },
          ],
        },
      ],
    },
  ];
};

Expand

Expand your treeview to the particular list using the expand(ID) method. 

<button type="button" class="btn btn-primary" (click)="treeview.expand('expand-example-item')">
  Expand first list
</button>
<mdb-treeview
  #treeview="mdbTreeview"
  textField="name"
  childrenField="children"
  [nodes]="data"
></mdb-treeview>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  data = [
    { name: 'One' },
    { name: 'Two' },
    {
      name: 'Three',
      expandId: 'expand-example-item',
      children: [
        { name: 'Second-one' },
        { name: 'Second-two' },
        {
          name: 'Second-three',
          children: [
            {
              name: 'Third-one',
              children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
            },
            { name: 'Third-two' },
            {
              name: 'Third-three',
              children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
            },
          ],
        },
      ],
    },
  ];
};

Collapse

Collapse your treeview using the collapse() method.

<button type="button" class="btn btn-primary" (click)="treeview.collapse()">
  Collapse treeview
</button>
<mdb-treeview
  #treeview="mdbTreeview"
  textField="name"
  childrenField="children"
  [nodes]="data"
></mdb-treeview>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  data = [
    { name: 'One' },
    { name: 'Two' },
    {
      name: 'Three',
      collapsed: false,
      children: [
        { name: 'Second-one' },
        { name: 'Second-two' },
        {
          name: 'Second-three',
          collapsed: false,
          children: [
            {
              name: 'Third-one',
              collapsed: false,
              children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
            },
            { name: 'Third-two' },
            {
              name: 'Third-three',
              collapsed: false,
              children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
            },
          ],
        },
      ],
    },
  };

Custom icons

Add icons to the list elements by pasting an icon code in the icon property.

Use a [rotationAngle] input to define a rotation angle of nested lists icons. 

<mdb-treeview
  textField="name"
  childrenField="children"
  [nodes]="data"
  [rotationAngle]="'90'"
></mdb-treeview>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  data = [
    { name: 'One', icon: 'fas fa-dot-circle' },
    { name: 'Two', icon: 'fas fa-dot-circle' },
    {
      name: 'Three',
      icon: 'fas fa-angle-double-right',
      children: [
        { name: 'Second-one', icon: 'fas fa-dot-circle' },
        { name: 'Second-two', icon: 'fas fa-dot-circle' },
        {
          name: 'Second-three',
          icon: 'fas fa-angle-double-right',
          children: [
            { name: 'Third-one', icon: 'fas fa-dot-circle' },
            { name: 'Third-two', icon: 'fas fa-dot-circle' },
            { name: 'Third-three', icon: 'fas fa-dot-circle' },
          ],
        },
      ],
    },
  ];
};

Color

Set the color of an active item using the [color] input.

Current color: primary
<div class="text-center mb-5">
  <button (click)="setColor('primary')" type="button" class="btn btn-primary" id="primary">Primary</button>
  <button (click)="setColor('secondary')" type="button" class="btn btn-secondary" id="secondary">Secondary</button>
  <button (click)="setColor('warning')" type="button" class="btn btn-warning" id="warning">Warning</button>
  <button (click)="setColor('danger')" type="button" class="btn btn-danger" id="danger">Danger</button>
  <button (click)="setColor('info')" type="button" class="btn btn-info" id="info">Info</button>
  <button (click)="setColor('success')" type="button" class="btn btn-success" id="success">Success</button>
  <button (click)="setColor('dark')" type="button" class="btn btn-dark" id="dark">Dark</button>
</div>
<div class="row text-center">
  <h5>Current color: <span id="current-color">{{ color }}</span></h5>
</div>
<mdb-treeview
  textField="name"
  childrenField="children"
  [nodes]="data"
  [color]="color"
></mdb-treeview>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  color = 'primary';

  data = [
    { name: 'One' },
    { name: 'Two' },
    {
      name: 'Three',
      children: [
        { name: 'Second-one' },
        { name: 'Second-two' },
        {
          name: 'Second-three',
          children: [
            {
              name: 'Third-one',
              children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
            },
            { name: 'Third-two' },
            {
              name: 'Third-three',
              children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
            },
          ],
        },
      ],
    },
  ];

  setColor(newColor) {
    this.color = newColor;
  }
};

Line

Use a [line] input to set up an additional line in every nested list. 

<mdb-treeview
  textField="name"
  childrenField="children"
  [nodes]="data"
  [line]="true"
></mdb-treeview>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  data = [
    { name: 'One' },
    { name: 'Two' },
    {
      name: 'Three',
      children: [
        { name: 'Second-one' },
        { name: 'Second-two' },
        {
          name: 'Second-three',
          children: [
            {
              name: 'Third-one',
              children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
            },
            { name: 'Third-two' },
            {
              name: 'Third-three',
              children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
            },
          ],
        },
      ],
    },
  ];
};

Disabled

To generate a disabled list item, use disabled property. You can expand disabled items, but you can't select them.

<mdb-treeview
  textField="name"
  childrenField="children"
  [nodes]="data"
  [selectable]="true"
></mdb-treeview>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  data = [
    { name: 'One' },
    { name: 'Two', disabled: true },
    {
      name: 'Three',
      children: [
        { name: 'Second-one' },
        { name: 'Second-two' },
        {
          name: 'Second-three',
          disabled: true,
          children: [
            {
              name: 'Third-one',
              children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
            },
            { name: 'Third-two' },
            {
              name: 'Third-three',
              children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
            },
          ],
        },
      ],
    },
  ];
};

Filter

Use the .filter(string) method to expand list items that meet your requirements. 

<mdb-form-control>
  <input (change)="treeview.filter($event.target.value)" mdbInput type="text" id="form1" class="form-control" />
  <label mdbLabel class="form-label" for="form1">Find in the treeview</label>
</mdb-form-control>
<mdb-treeview
  #treeview="mdbTreeview"
  textField="name"
  childrenField="children"
  [nodes]="data"
></mdb-treeview>
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  data = [
    { name: 'One' },
    { name: 'Two' },
    {
      name: 'Three',
      children: [
        { name: 'Second-one' },
        { name: 'Second-two' },
        {
          name: 'Second-three',
          children: [
            {
              name: 'Third-one',
              children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
            },
            { name: 'Third-two' },
            {
              name: 'Third-three',
              children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
            },
          ],
        },
      ],
    },
  ];
};

Tree view - API

Installation

To install and configure the plugin follow our Plugins Installation Guide. Please remember to update all the plugin names and import paths. You can find all the necessary information in the Import section. 

npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/treeview

Import

import { MdbTreeviewModule } from 'mdb-angular-treeview';
…
@NgModule ({
  ...
  imports: [MdbTreeviewModule],
  ...
})
@import 'mdb-angular-treeview/scss/treeview.scss';

Inputs

Name Type Default Description
color MdbTreeviewColor 'primary' Defines a text and background color for an active or hovered item
openOnClick Boolean true Enables opening list by clicking only on the icon
selectable Boolean false Setup checkboxes for the every list item
accordion Boolean false Allows only one list on the same level to be opened
rotationAngle String 90 Defines a rotation angle of the icons in nested lists
line Boolean false Adds a line to every nested list

Outputs

Name Type Description
selected EventEmitter<any> This output fires immediately when one of the treeview checkboxes are changed.
activeItemChange EventEmitter<ElementRef> This event fires immediately when one of the treeview list items are selected by click. 
<mdb-treeview
  textField="name"
  childrenField="children"
  [nodes]="data"
  (activeItemChange)="onActiveItemChange($event)"
></mdb-treeview>
import { Component, ElementRef } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  data = [
    { name: 'One' },
    { name: 'Two' },
    {
      name: 'Three',
      children: [
        { name: 'Second-one' },
        { name: 'Second-two' },
        {
          name: 'Second-three',
          children: [
            {
              name: 'Third-one',
              children: [
                { name: 'Fourth-one' },
                { name: 'Fourth-two' },
                { name: 'Fourth-three' },
              ],
            },
            { name: 'Third-two' },
            {
              name: 'Third-three',
              children: [
                { name: 'Fourth-one' },
                { name: 'Fourth-two' },
                { name: 'Fourth-three' },
              ],
            },
          ],
        },
      ],
    },
  ];

  onActiveItemChange(event: ElementRef): void {
    console.log('onActiveItemChange: ', event);
  }
}

Methods

Name Description Example
collapse Collapses every list in treeview treeview.collapse()
expand(id:string) Expands a treeview to the list with a particular ID treeview.expand('example-id')
filter(value:string) Expands list items that meet your requirements treeview.filter('Name') 
<button class="btn btn-lg" (click)="treeview.collapse()">Collapse tree</button>
<mdb-treeview
  #treeview
  textField="name"
  childrenField="children"
  [nodes]="data"
></mdb-treeview>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  data = [
    { name: 'One' },
    { name: 'Two' },
    {
      name: 'Three',
      children: [
        { name: 'Second-one' },
        { name: 'Second-two' },
        {
          name: 'Second-three',
          children: [
            {
              name: 'Third-one',
              children: [
                { name: 'Fourth-one' },
                { name: 'Fourth-two' },
                { name: 'Fourth-three' },
              ],
            },
            { name: 'Third-two' },
            {
              name: 'Third-three',
              children: [
                { name: 'Fourth-one' },
                { name: 'Fourth-two' },
                { name: 'Fourth-three' },
              ],
            },
          ],
        },
      ],
    },
  ];
}