mat-tree-select-input

MatTreeSelectInput

A material select formfield that allows user to select option from a tree data structure.

Dependencies

• Angular
• Angular material

Features

• Select single tree option
• Select multiple tree option
• Unlimited tree level
• Collapsable trees

Demo

(https://mat-tree-select-input-demo.netlify.app/)

Installation

After intalling the above dependencies. Intall mat-tree-select-input via.

npm i mat-tree-select-input

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

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.

<form [formGroup]="form"> .... <ngx-mat-tree-select-input [options]="options" [placeholder]="'Select Category'" [controlName]="'customTreeSelect'"> </ngx-mat-tree-select-input> .... </form>

mat-tree-select-input (multiple) with form control.

<form [formGroup]="form"> .... <ngx-mat-tree-select-input [multiple]= "true" [options]="options" [placeholder]="'Select Category'" [controlName]="'customTreeSelect'"> </ngx-mat-tree-select-input> .... </form>

mat-tree-select-input with NgModel.

.... <ngx-mat-tree-select-input-ngmodel (selectionChanged)="onSelectionChanged()" [(select)]="value" [options]="options" [placeholder]="'Select Category'" > </ngx-mat-tree-select-input-ngmodel> .... mat-tree-select-input with NgModel(multiple). .... <ngx-mat-tree-select-input-ngmodel (selectionChanged)="onSelectionChanged()" [(select)]="value" [multiple]= "true" [options]="options" [placeholder]="'Select Category'" > </ngx-mat-tree-select-input-ngmodel> ....

Creating options to pass into the component. In you component import TreeDate from mat-tree-select-input via

import { TreeData } from 'mat-tree-select-input'; Declare options property to be of type TreeData[], sample options: TreeData[] = [] TreeData is an interface exported from mat tree select input, below is the definition of the interface interface TreeData { name: string value: string children: TreeData[] } Hence, a sample option will be `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: []

          
        }
      ]
    }
  ]
},

]`