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.

leolorenzoluis / xyz.drop-down-tree-view

readme