Custom Tree view in angular Type Script

Posted By : Puneet Sharma | 13-Dec-2017

Let's make one use Angular 2. For the sake of summarizing, I have dropped common import statements and other boilerplate code.

It is very simple to parse infinite trees, we repeat. To do this, until we break the status of a break, we call the function within that function.

The same idea works for templates, we present our constituents within the same component and do it while doing so until the tree meets the nodes of its leaves.

The code is very simple

We include the <ui-tree> component in our app templates. We will see a detailed code for <ui-tree> in a moment.
We have a key that is the property name in our data that increases the depth of the tree. In our case, the data is an array of objects and each object has names and categories array. This array is an array that gives deeper depth to our tree, so here are the key "categories".

Below is a tree component that looks like itself. It accepts two parameters, data, and keys. It then calls itself in the template and sends the internal range array to another sub-tree.

1) This has to be added to the body

    <my-app>loading...</my-app>

2) You must have the following files in javascript directory:-

  <script src="https://unpkg.com/[email protected]/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/[email protected]/Reflect.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/system.js"></script>

3) Now create the type script component file to handle the data:-

//our root app component
import {Component, NgModule, Input} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <ui-tree [data]="data" [key]="key"></ui-tree>
    </div>
  `
})
export class App {
  name:string;
  key: string = 'categories';
  data: Array<Object> = [
    {
      name: "Beverages",
      categories: [
          {
            name: "Pepsi",
            categories: []
          },
          {
            name: "CocaCola",
            categories: [
                {
                  name: "Coke Diet",
                  categories: []
                },
                {
                  name: "Coke Zero",
                  categories: []
                }
              ]
          }
        ]
    },
    {
      name: "Footwear",
      categories: [
          {
            name: "Sneakers",
            categories: []
          }
        ]
    }
  ];
  constructor() {
    this.name = 'Rendering Nested Trees in Angular 2'
  }
}

@Component({
  selector: "ui-tree",
  template: `
    <ul *ngIf="items.length">
      <li *ngFor="let item of items">
      {{item.name}}
      <ui-tree *ngIf="item[key].length" [key]="key" [data]="item[key]"></ui-tree>
      </li>
    </ul>
  `
})
export class UiTree {
  @Input('data') items: Array<Object>;
  @Input('key') key: string;
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, UiTree ],
  bootstrap: [ App ]
})
export class AppModule {}