Skip to content

Angular hierarchy Component Module for Vertical or Horizontal View.

Notifications You must be signed in to change notification settings

rushik1992/ngx-hierarchy

Repository files navigation

NgxHierarchy

ngx-hierarchy is an Angular Component Module for Vertical or Horizontal Hierarchy/Tree View. It can be used to show parent child view, Organization structure, Tree view. with your flaxible dynamic template design with controls.

Installation

$ npm install ngx-hierarchy

Vertical View

NgxHierarchy Vertical View

Horizontal View

NgxHierarchy Horizontal View

Demo Link

Click Here

Component Inputs

Name Type Description
nodes INode object The INode object that contains node info mentioned below
direction vertical or horizontal Direction of the chart top to bottom or left to right
template TemplateRef<any> Angular Template to render in each node

INode Details

Property Type Description
cssClass string Custom css class to override or change node style
childs INode[] The array of child nodes
{otherCustomeProperty} any or function You can add any other Property or Function in each node and can use in template

import Module in app.module.ts

import { NgxHierarchyModule } from 'ngx-hierarchy';
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    NgxHierarchyModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { INode } from 'ngx-hierarchy';


interface custNode extends INode{
  name:string;
  position:string;
  childs?:custNode[];
  onOk:Function;
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  title = 'ngx-hierarchy-demo';
  nodes: custNode[] = [
    {
      name: 'Caleb Matthews',
      cssClass: 'level1',
      position: 'Chief Executive Officer',
      childs: [
        {
          name: 'Antonia Sancho',
          cssClass: 'level2',
          position: 'HR Manager',
          onOk: this.onOk
        },
        {
          name: 'Thoms Hilty',
          cssClass: 'level2',
          position: 'Marketing Manager',
          childs: [
            {
              name: 'Eyal Matthews',
              cssClass: 'level3',
              position: 'Social Media',
              onOk: this.onOk
            },
            {
              name: 'Adam Mark',
              cssClass: 'level3',
              position: 'Offline Marketing',
              onOk: this.onOk
            }
          ],
          onOk: this.onOk
        },
        {
          name: 'Barry Roy',
          cssClass: 'level2',
          position: 'Production Manager',
          childs: [
            {
              name: 'Ligia Opera',
              cssClass: 'level3',
              position: 'Supply Chain',
              onOk: this.onOk
            },
            {
              name: 'Moran Perry',
              cssClass: 'level3',
              position: 'Operational Manager',
              onOk: this.onOk
            }
          ],
          onOk: this.onOk
        }
      ],
      onOk: this.onOk
    }
  ];
  constructor(){
  }

  onOk(node:custNode){
    alert(node.name);
  }

}

app.component.html

<ngx-hierarchy [nodes]="nodes" direction="vertical" [template]="nodeTemplate">
  <ng-template #nodeTemplate let-node>
    <div class="node-template">
      <strong>{{node.position}} </strong>
      <span>{{node.name}} </span>
      <button (click)="node.onOk(node)">ok</button>
    </div>
  </ng-template>
</ngx-hierarchy>

About

Angular hierarchy Component Module for Vertical or Horizontal View.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published