> For the complete documentation index, see [llms.txt](https://cedrus.gitbook.io/project-fusion/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cedrus.gitbook.io/project-fusion/components/basic/treeview.md).

# Treeview

### ***Component is build based on*** [***Angular Tree Component***](https://github.com/500tech/angular-tree-component)

## Usage

**app.html**

```markup
<cf-treeview [properties]="myTreeview" [styling]="myTreeStyles" (cfSelected)="log($event)">
    <template #itemTpl let-item="item">
        <i>{{ item._name }}</i>
    </template>
</cf-treeview>
```

**app.ts**

```typescript
myTreeview = new TreeviewModel({
    items: [
      {
        _id: '1',
        _name: 'root1',
        _expanded: true,
        _children: [
          { 
            _id: '2', 
            _expanded: false,
            _name: 'child1' 
          },
          { 
            _id: '3', 
            _expanded: false,
            _name: 'child2' 
          }
        ]
      },
      {
        _id: '4',
        _expanded: false,
        _name: 'root2',
        _children: [
          { 
            _id: '5', 
            _expanded: false,
            _name: 'child2.1' 
          },
          {
            _id: '6',
            _expanded: false,
            _name: 'child2.2',
            _children: [
              { 
                _id: '7', 
                _expanded: false,
                _name: 'child2.2.1' 
              }
            ]
          }
        ]
      }
    ],
    options: {
      idField: '_id',
      displayField: '_name',
      childrenField: '_children',
      isExpandedField: '_expanded',
      selectable: true,
      allowDrag: true,
      animateExpand: true
    }
  });

myTreeStyles = new TreeviewStylingModel({
    container: {
      class: 'cf-default-theme my-tree-view'
    },
    item: new StylingModel({
      class: 'my-tree-item'
    })
  });  

log(e) {
    console.log('event', e);
}
```

**app.scss**

```css
/deep/ {
    .my-tree-view {
        background: rgba(0, 0, 0, 0.07);
        padding: 8px;
    }
    .my-tree-item {
        background: mediumpurple;
    }
}
```

## Treeview input properties

|       Attr      |   Type  | Details                                                                            |
| :-------------: | :-----: | ---------------------------------------------------------------------------------- |
|      items      |  array  | Array of tree items.                                                               |
|     options     |  object | Treeview options object. Optional.                                                 |
|     idField     |  string | Name of property to be ID for the item. Default is **id**.                         |
|   displayField  |  string | Name of property to be NAME for the item. Default is **name**.                     |
|  childrenField  |  string | Name of property to be ARRAY with childrens for the item. Default is **children**. |
| isExpandedField |  string | Name of property to be boolean EXPANDED for the item. Default is **expanded**.     |
|    selectable   | boolean | Boolean property which means to be selectable with checkbox for each item.         |
|    allowDrag    | boolean | Boolean property which means to alow items draging.                                |
|  animateExpand  | boolean | Boolean property which means animated items expanding.                             |

## Treeview styling properties

|    Attr   |     Type     | Details                        |
| :-------: | :----------: | ------------------------------ |
| container | StylingModel | Styling options for container. |
|    item   | StylingModel | Styling options for all items. |

## Treeview output properties

|    Attr    | Details                                                                                       |
| :--------: | --------------------------------------------------------------------------------------------- |
| cfSelected | Event is fired when user select/unselect tree items and emit array of selected items indexes. |