ngx-treeview-bambam

An Angular treeview component with checkbox

Dependencies

• Angular
• Lodash
• Bootstrap 4
• Font Awesome 5

Features

• Unlimited tree level
• State: disabled / collapse, expand
• Filtering
• Internationalization (i18n) support
• Template
• Checkbox with tri-state

Installation

After install the above dependencies, install ngx-treeview-bambam via:

npm install ngx-treeview-bambam --save

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

import { TreeviewModule } from 'ngx-treeview-bambam';

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

Usage

Treeview:

<ngx-treeview
    [config]="config"
    [items]="items"
    (selectedChange)="onSelectedChange($event)"
    (filterChange)="onFilterChange($event)">
</ngx-treeview>

Treeview with dropdown:

<ngx-dropdown-treeview
    [buttonClass]="buttonClass"
    [config]="config"
    [items]="items"
    (selectedChange)="onSelectedChange($event)"
    (filterChange)="onFilterChange($event)">
</ngx-dropdown-treeview>

config is optional. This is the default configuration:

{
   hasAllCheckBox: true,
   hasFilter: false,
   hasCollapseExpand: false,
   decoupleChildFromParent: false,
   maxHeight: 500
}