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

Show code

HTML
Typescript

        
            
          <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

Show code

HTML
Typescript

        
            
          <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');
          }

Basic Example
Advanced Example

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.

Show code

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

Import example Modules list

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')`