Angular Bootstrap Treeview

Angular Treeview - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Angular treeview 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.


Basic example

Live example
        
            
          <div class="container">
            <div class="row">
              <div class="col-md-6">
                <mdb-tree
                  (checked)="onCheck($event)"
                  (checkedKeys)="onCheckedKeys($event)"
                  (nodesChanged)="onNodesChanged($event)"
                  textField="name"
                  childrenField="children"
                  [nodes]="data"
                ></mdb-tree>
              </div>
            </div>
          </div>
        
        
    
        
            
          import { Component, OnInit, ViewChild } from '@angular/core';
          import { MdbTreeComponent } from 'ng-uikit-pro-standard';

          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.scss'],
          })
          data = [
            {
              name: 'Pictures',
              children: [
                {
                  name: 'Vacation',
                  children: [
                    {
                      name: 'Italy',
                      children: [
                        { name: 'Image 01' },
                        { name: 'Image 02' },
                        { name: 'Image 03' },
                        { name: 'Image 04' },
                      ],
                    },
                  ],
                },
                {
                  name: 'Video 01',
                },
                {
                  name: 'Video 02',
                },
                {
                  name: 'Video 03',
                },
              ],
            },
            {
              name: 'Music',
              children: [
                { name: 'song01.mp3' },
                { name: 'song02.mp3' },
                { name: 'song03.mp3' },
                { name: 'song04.mp3' },
              ],
            },
          ];

          onCheck(e: any) {
            console.log('%c Returned checked object ', 'background: #222; color:  #ff8080');
            console.log(e);
            console.log('%c ************************************ ', 'background: #222; color: #bada05');
          }
          onCheckedKeys(e: any) {
            console.log('%c Returned array with checked checkboxes ', 'background: #222; color: #bada55');
            console.log(e);
            console.log('%c ************************************ ', 'background: #222; color: #bada05');
          }
          onNodesChanged(e: any) {
            console.log('%c Returned json with marked checkboxes ', 'background: #222; color: #99ccff');
            console.table(e);
            console.log('%c ************************************ ', 'background: #222; color: #bada05');
          }
        
        
    

Advanced example (with checkboxes)

Live example
        
            
          <div class="container">
            <div class="row">
              <div class="col-md-6">
                <mdb-tree
                  (checked)="onCheck($event)"
                  (checkedKeys)="onCheckedKeys($event)"
                  (nodesChanged)="onNodesChanged($event)"
                  [expandAll]="expanded"
                  [checkboxes]="true"
                  textField="name"
                  childrenField="children"
                  checkboxesField="checked"
                  [toggleOnTitleClick]="true"
                  [nodes]="data"
                ></mdb-tree>
              </div>
            </div>
          </div>
        
        
    
        
            
          import { Component, OnInit, ViewChild } from '@angular/core';
          import { MdbTreeComponent } from 'ng-uikit-pro-standard';

          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.scss'],
          })
          this.data = [
            {
              name: 'Root1',
              checked: false,
              children: [
                {
                  name: 'FolderV1.0',
                  cheched: false,
                  children: [
                    {
                      name: 'FolderV2.0',
                      checked: true,
                      children: [],
                    },
                  ],
                },
                {
                  name: 'FolderV2.0 (empty)',
                  checked: false,
                },
              ],
            },
            {
              name: 'FolderV2.0 (empty)',
            },
            {
              name: 'FolderV3.0 (empty)',
              checked: false,
            },
            {
              name: 'Root2',
              checked: true,
            },
          ];

          onCheck(e: any) {
            console.log('%c Returned checked object ', 'background: #222; color:  #ff8080');
            console.log(e);
            console.log('%c ************************************ ', 'background: #222; color: #bada05');
          }
          onCheckedKeys(e: any) {
            console.log('%c Returned array with checked checkboxes ', 'background: #222; color: #bada55');
            console.log(e);
            console.log('%c ************************************ ', 'background: #222; color: #bada05');
          }
          onNodesChanged(e: any) {
            console.log('%c Returned json with marked checkboxes ', 'background: #222; color: #99ccff');
            console.table(e);
            console.log('%c ************************************ ', 'background: #222; color: #bada05');
          }
        
        
    

Angular Bootstrap Tree - API

In this section you will find informations about required modules and available inputs of tree component.


Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

        
            
          import { MdbTreeModule } from 'ng-uikit-pro-standard'
        
        
    

Components

MdbTree

Selector: mdb-tree

Type: MdbTreeComponent


Inputs

MdbTree
Name Type Default Description Example
nodes any[] [] Array with nodes which will be displayed in the Tree [nodes]="data"
textField string '' The fields of the data item that provide the text content of the nodes textField="name"
childrenField string '' The fields of the item children that provide the text content of the nodes textField="children"
checkboxesField string '' The fields of the item checkboxes that provide the boolean content of the nodes textField="checked"
expandAll boolean false Specifies wheter all tree items are collapsed or expanded [expandAll]="true"
checkboxes boolean false Specifies whether tree items have an checkboxes [checkboxes]="true"
toggleOnTitleClick boolean false Specifies whether tree item should expand on textField click [toggleOnTitleClick]="true"

Events

MdbTree
Name Type Description Example
checked any The event is fired when checkbox is clicked. Returns checked object (checked)="onCheck($event)"
checkedKeys string[] The event is fired when checkbox is clicked. Returns array with checked nodes (checkedKeys)="onCheckedKeys($event)"
checkedKeys any[] The event is fired when checkbox is clicked. Returns modified data from [nodes] input (nodesChanged)="onNodesChanged($event)"


Methods

You can get access to tree methods from another component. Add template reference variable to your mdb-tree component in HTML file

<mdb-tree #tree></mdb-tree>

Then in your typescript file use @ViewChild decorator to get access to MdbTreeComponent methods

@ViewChild('tree', { static: true }) tree: MdbTreeComponent

MdbTree
Name Description Example
toggleByNode('0') Allow to toggle node this.tree.toggleByNode('0')