Treeview

Component is build based on Angular Tree Component

Usage

app.html

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

app.ts

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

/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.