TreeView component

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

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?

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

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