ngx-treeview
An Angular treeview component with checkbox
Dependencies
You can customize CSS yourself to break down dependencies to Bootstrap & Font Awesome.
Features:
- maxCount can select up to a few items
- isShowTotal Checks the displayed result style type
- Change the default checked to selected to unchecked
- Change the default item to checked = true to false
- Unlimited tree level
- State: disabled / collapse, expand
- Filtering
- Internationalization (i18n) support
- Template
Installation
After install the above dependencies, install ngx-treeview via:
npm install --save mizi-ngx-treeview
Once installed you need to import our main module in your application module:
import { TreeviewModule } from 'ngx-treeview';
@NgModule({
declarations: [AppComponent, ...],
imports: [TreeviewModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
Usage
Treeview:
<ngx-treeview
[config]="config"
[items]="items"
(selectedChange)="onSelectedChange($event)">
</ngx-treeview>
Treeview with dropdown:
<ngx-dropdown-treeview
[config]="config"
[items]="items"
(selectedChange)="onSelectedChange($event)">
</ngx-dropdown-treeview>
config is optional. This is the default configuration:
{
isShowAllCheckBox: true,
isShowFilter: false,
isShowCollapseExpand: false,
maxHeight: 500,
maxCount: 0,
isShowTotal: true
}
You can change default configuration easily because TreeviewConfig is injectable.
Pipe ngxTreeview: To map your JSON objects to TreeItem objects.
<ngx-dropdown-treeview
[config]="config"
[items]="items | ngxTreeview:'textField'"
(selectedChange)="onSelectedChange($event)">
</ngx-dropdown-treeview>
Create a TreeviewItem:
const itCategory = new TreeviewItem({
text: 'IT', value: 9, children: [
{
text: 'Programming', value: 91, children: [{
text: 'Frontend', value: 911, children: [
{ text: 'Angular 1', value: 9111 },
{ text: 'Angular 2', value: 9112 },
{ text: 'ReactJS', value: 9113 }
]
}, {
text: 'Backend', value: 912, children: [
{ text: 'C#', value: 9121 },
{ text: 'Java', value: 9122 },
{ text: 'Python', value: 9123, checked: false }
]
}]
},
{
text: 'Networking', value: 92, children: [
{ text: 'Internet', value: 921 },
{ text: 'Security', value: 922 }
]
}
]
});
TreeviewEventParser:
Extract data from list of checked TreeviewItem and send it in parameter of event selectedChange. Some built-in TreeviewEventParser:
- DefaultTreeviewEventParser: return values of checked items.
- DownlineTreeviewEventParser: return list of checked items in orginal order with their ancestors.
- OrderDownlineTreeviewEventParser: return list of checked items in checked order with their ancestors. Note that: value of a leaf must be different from value of other leaves.
