An angular material select formfield that allows user to select option from a tree data structure.
An angular material select formfield that allows user to select option from a tree like structure.
Similar to Angular mat-select, but the options are provided in a tree like structure.
## Example
!mat-tree-select-input example
bash
npm i mat-tree-select-input
`Once installed you need to import our main module in your application module:
javascript
import { MatTreeSelectInputModule } from 'mat-tree-select-input';
@NgModule({
declarations: [AppComponent, ...],
imports: [MatTreeSelectInputModule, ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
`Usage
mat-tree-select-input with form control: Pass in formControlName to controlName input.
html
`mat-tree-select-input (multiple) with form control.
html
`mat-tree-select-input with NgModel.
html
....
[(select)]="value"
[options]="options"
[heading] = "'Sub Categories of'"
[placeholder]="'Select Category'"
>
....
`
mat-tree-select-input with NgModel(multiple).html
....
[(select)]="value"
[multiple]= "true"
[options]="options"
[heading] = "'Sub Categories of'"
[placeholder]="'Select Category'"
>
....
`Creating options to pass into the component.
In your component import TreeData from mat-tree-select-input via
javascript
import { TreeData } from 'mat-tree-select-input';
`
Declare options property to be of type TreeData[], sample:
typescript
options: TreeData[] = []
`
TreeData is an interface exported from mat-tree-select-input, below is the definition of the interface
typescript
interface TreeData {
name: string
value: string
children: TreeData[]
}
`
Hence, a sample option will be
typescript options: TreeData[] = [
{
name: 'Electronics',
value: 'Electronics',
children: [
{
name: 'Phones',
value: 'Phones',
children: [
{
name: 'Iphones',
value: 'Iphones',
children: []
}
]
}
]
},
{
name: 'Web Development',
value: 'Web Development',
children: [
{
name: 'Frontend Development',
value: 'Frontend Development',
children: [
{
name: 'Angular',
value: 'Angular',
children: []
},
{
name: 'React',
value: 'React',
children: []
}
]
}
]
},
]
`Finnaly pass it to any one of the examples(code snippet) above
In cases where your data is not exactly the type of Treedata[], below is a sample method you can use to convert it to a TreeData[].
You can modify this method to best suit your use case.
typescript constructTreeData(data){
return data.map(
(item)=>{
let o = {
name: item.name,
value: item.id,
children: item.Children.length ? this.constructTreeData(item.Children) : []
}
return o
}
)
}
`
To implement filter for our mat-tree-select-input you can project an input into the component for example
html
[placeholder]="' Select Category'"
[controlName]="'customTreeSelect'"
> #searchInput
placeholder="Search"
(keydown)="$event.stopPropagation()"
(keyup)="filter(original_options,searchInput.value)"
>
`And then, implement the filter method. for example:
typescript
filter(array: TreeData[], text: string) { const getNodes = (result, object) => {
if ( object.name.toLowerCase().startsWith(text)) {
result.push(object);
return result;
}
if (Array.isArray(object.children)) {
const children = object.children.reduce(getNodes, []);
if (children.length) result.push({ ...object, children });
}
return result;
};
this.options = array.reduce(getNodes, []);
}
`To disable the selection of parent nodes, add the property canSelectParentNode and set it to false. For example with ngModel.
html
...
[(select)]="value"
[options]="options"
[heading] = "'Sub Categories of'"
[canSelectParentNode] = "false"
[placeholder]="'Select Category'"
>
...
`
or with Reactive Form.
html
[placeholder]="'Select Category'"
[heading] = "'Children of'"
[canSelectParentNode] = "false"
[controlName]="'category'">
``