Topic: TreeView component

Sergius pro asked 5 years ago

Do you plan to create TreeView component? Something like this:

Arkadiusz Idzikowski staff answered 3 years ago

Treeview component was added to MDB Angular Pro package in version 8.8.0.

Arkadiusz Idzikowski staff answered 3 years ago

Unfortunately, we have not started working on this component yet.

imyke free commented 3 years ago

This is unfortunate indeed.

aathithan priority answered 3 years ago


It is really disappointing that tree view component is not available in Angular Pro version.

Any paid library would provide support for tree view component. Am I missing the documentation? Is there any work in progress tree component which can be used?

vitticeps free answered 3 years ago



<div class="treeview w-20 border">
  <h6 class="pt-3 pl-3">Folders</h6>
  <ul class="mb-1 pl-3 pb-2">
    <li><i class="fas fa-angle-right rotate" appTreeRenderer></i>
      <span><i class="far fa-envelope-open ic-w mx-1"></i>Mail</span>
      <ul class="nested">
        <li><i class="far fa-bell ic-w mr-1"></i>Offers</li>
        <li><i class="far fa-address-book ic-w mr-1"></i>Contacts</li>
        <li><i class="fas fa-angle-right rotate" appTreeRenderer></i>
          <span><i class="far fa-calendar-alt ic-w mx-1"></i>Calendar</span>
          <ul class="nested">
            <li><i class="far fa-clock ic-w mr-1"></i>Deadlines</li>
            <li><i class="fas fa-users ic-w mr-1"></i>Meetings</li>
            <li><i class="fas fa-basketball-ball ic-w mr-1"></i>Workouts</li>
            <li><i class="fas fa-mug-hot ic-w mr-1"></i>Events</li>
    <li><i class="fas fa-angle-right rotate" appTreeRenderer></i>
      <span><i class="far fa-folder-open ic-w mx-1"></i>Inbox</span>
      <ul class="nested">
        <li><i class="far fa-folder-open ic-w mr-1"></i>Admin</li>
        <li><i class="far fa-folder-open ic-w mr-1"></i>Corporate</li>
        <li><i class="far fa-folder-open ic-w mr-1"></i>Finance</li>
        <li><i class="far fa-folder-open ic-w mr-1"></i>Other</li>
    <li><i class="fas fa-angle-right rotate" appTreeRenderer></i>
      <span><i class="far fa-gem ic-w mx-1"></i>Favourites</span>
      <ul class="nested">
          <li><i class="fas fa-pepper-hot ic-w mr-1"></i>Restaurants</li>
          <li><i class="far fa-eye ic-w mr-1"></i>Places</li>
          <li><i class="fas fa-gamepad ic-w mr-1"></i>Games</li>
          <li><i class="fas fa-cocktail ic-w mr-1"></i>Coctails</li>
          <li><i class="fas fa-pizza-slice ic-w mr-1"></i>Food</li>
    <li><i class="far fa-comment ic-w mr-1"></i>Notes</li>
    <li><i class="fas fa-cogs ic-w mr-1"></i>Settings</li>
    <li><i class="fas fa-desktop ic-w mr-1"></i>Devices</li>
    <li><i class="fas fa-trash-alt ic-w mr-1"></i>Deleted Items</li>

tree-renderer.directive.ts (next to app.module.ts)

import { Directive, ElementRef, HostListener, HostBinding, Renderer2 } from "@angular/core";

    selector: "[appTreeRenderer]"
export class TreeRendererDirective {

    constructor(private elmenetRef: ElementRef, private renderer: Renderer2) {}

    @HostListener("click", ["$event"])
    changeBackground(): void {
        if (this.elmenetRef.nativeElement.parentNode.getElementsByTagName("ul")[0].className == "nested") {
            this.renderer.setStyle(this.elmenetRef.nativeElement, "transform", "rotate(90deg)");
            this.elmenetRef.nativeElement.parentNode.getElementsByTagName("ul")[0].className = "";
        else {
            this.renderer.setStyle(this.elmenetRef.nativeElement, "transform", "rotate(0deg)");
            this.elmenetRef.nativeElement.parentNode.getElementsByTagName("ul")[0].className = "nested";


Obviously - it is possible to make it more fancy :)

Dont forget to import the directive in the app.module.ts

import { TreeRendererDirective } from './tree-renderer.directive';

and add to the @NgModule.declarations


Dawid Adach pro answered 5 years ago

Dear Sergius, not in the nearest future, perhaps you could try to adjust either collapse or sidenav similarly to:

Sergius pro commented 5 years ago

Thank you

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No