@abc.xyz/drop-down-treeview

XYZ Angular Dropdown TreeView

An awesome and beautiful Angular 2 and Angular 4 dropdown treeview component.

You can customize CSS yourself to break down dependencies.

Features

• Beautiful component
• Smart text filtering
• Unlimited tree levels
• Supports accessibility features

Demo

Plunker

https://plnkr.co/edit/63jvcJd3K3sz1v9rdxyN?p=preview

Local

Run the sample application

cd dropdown-treeview 
npm install
npm run start

Installation

After install the above dependencies, install @abc.xyz/drop-down-treeview via npm:

npm i @abc.xyz/drop-down-treeview --save

Once installed you need to import our main module in your application module:

import {XyzModule} from '@abc.xyz/drop-down-treeview';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [XyzModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Usage

Here is the example template:

<dropdown-treeview [item-source]="items"
                  item-text="name"
                  min-length="0"
                  [(ngModel)]="item"
                  (change)="handleChange($event)"
                  placeholder="Placeholder Text">
</dropdown-treeview>

config is optional. This is the default configuration:

{
   showRoot: false,
   searchOptions = {
       shouldSort: true,
       threshold: 0.6,
       location: 0,
       distance: 100,
       maxPatternLength: 32,
       minMatchCharLength: 1,
       keys: [
           "name"
       ]
   };
}

Contributing

Submit your ideas, proposals and found bugs which you can leave in github issues.