Treeview Control for Angular

Topic: Treeview Control for Angular

rahul.sharma pro asked 6 years ago

Do we have any component which we can use for tree view or any example which i can use to create tree view?

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

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

Add comment

vitticeps free answered 5 years ago

0 0 Best answer

Hi,

HTML

<pre class="prettyprint"><code><div class="treeview w-20 border">
 <h6 class="pt-3 pl-3">Folders</h6>
 <hr>
 <ul class="mb-1 pl-3 pb-2">
 <li>
 Mail
 <ul class="nested">
 <li>Offers</li>
 <li>Contacts</li>
 <li>
 Calendar
 <ul class="nested">
 <li>Deadlines</li>
 <li>Meetings</li>
 <li>Workouts</li>
 <li>Events</li>
 </ul>
 </li>
 </ul>
 </li>
 <li>
 Inbox
 <ul class="nested">
 <li>Admin</li>
 <li>Corporate</li>
 <li>Finance</li>
 <li>Other</li>
 </ul>
 </li>
 <li>
 Favourites
 <ul class="nested">
 <li>Restaurants</li>
 <li>Places</li>
 <li>Games</li>
 <li>Coctails</li>
 <li>Food</li>
 </ul>
 </li>
 <li>Notes</li>
 <li>Settings</li>
 <li>Devices</li>
 <li>Deleted Items</li>
 </ul>
</div>
</code></pre>

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

<pre class="prettyprint"><code>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";
        }
    }

}
</code></pre>

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

Thanks

Please insert min. 20 characters.

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 :)

Thanks

vitticeps free commented 5 years ago

I forgot to add -

in app.module.ts - dont forget to import the directive

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

and add to @NgModule.declarations

Damian Gemza staff commented 5 years ago

That's nice. But as we said before, the treeview component is in our nice-to-have list, and we'll think about implementing it in the future. Your code would be there helpful :)

vitticeps free commented 5 years ago

Thanks for the feedback..

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear Rahul, Unfortunately, we haven't got ready-to-use solution for your case. You have to use simple ul and li markup and add to it .md-form class which gives you a little bit material style.

<ul class="md-form">

    <li>Data 1</li>

    <li>Data 2</li>

    <li>

        <ul>

            <li>Data 3.1</li>

            <li>Data 3.2</li>

        </ul>

   </li>

</ul>

Best Regards,

Damian

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

rahul.sharma

Pro User 0Support score
1Questions 0Answers 0Snippets