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. Install 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]="'category'">
            </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]="'category'">
            </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 your component import TreeData 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: []

              
            }
          ]
        }
      ]
    },
  ]

Finnaly pass it to any one of the examples(code snippet) above