ngx-tree-outlook v1.0.14

ngx-tree-outlook for Angular

The simplest solution for tracking the nested data in tree form.

Table of contents

• Quick Start

  • Angular Version

• Upcoming Functinalities

• Simple Example

• Input Properties And Options

• Preview

Quick Start

npm install ngx-tree-outlook --save

Angular Version:

This library is built to work with Angular 5+, and support ahead-of-time compilation. If you need to support an earlier or pre-release version of Angular for now, please see the changelog for advice on which version to use.

Upcoming Functionalities

Soon this library provides the facility of using:

• Tooltips and also custom template tooltips.
• Custom Tree Template.

Simple Example

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { TreeOutlookModule} from 'ngx-tree-outlook'; // <-- import the module
import { CommonModule } from '@angular/common';  

@NgModule({
    imports: [CommonModule, BrowserModule, TreeOutlookModule], // <-- include it in your app module
    declarations: [],
    bootstrap: []
})
export class AppModule {}

// app.component.html

<ngx-tree-outlook [data] = 'data' [options] = 'options' [defaultTooltip]='tooltipOptions'></ngx-tree-outlook> // <-- for default tooltip
<ngx-tree-outlook [data]='data' [customTooltip]='tooltip' [options]='options'></ngx-tree-outlook> // <-- for custom tooltip

<ng-template #tooltip>
       <P>this is the custom tooltip</P>
</ng-template>

Input Properties And Options

Input Properties are:

options are:

Preview

Horizontal

data = { 
         title: 'parent',
         description: 'description',
         imgUrl: 'https://image/',
         children: [{ 
                      title: 'parent',
                      description: 'description',
                      imgUrl: 'https://image/'
                    }]
        };
 options = { direction : 'horizontal', lineColor:'grey', view: "straightTree",clickable : true, showCompleteTree:true}
 // if showCompleteTree is set to true, then view will be chamged to defaultTree