Topic: TreeView component

Sergius pro asked 5 years ago


Do you plan to create TreeView component? Something like this: https://vmware.github.io/clarity/documentation/tree-view

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


Hi,

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


Hi,

HTML

<div class="treeview w-20 border">
  <h6 class="pt-3 pl-3">Folders</h6>
  <hr>
  <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>
          </ul>
        </li>
      </ul>
    </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>
      </ul>
    </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>
        </ul>
    </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>
  </ul>
</div>

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

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

@Directive({
    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

Thanks


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: https://github.com/fiffty/react-treeview-mui

Sergius pro commented 5 years ago

Thank you


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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