Pages UI
v5.0.1 - Pages Angular
v5.0.1 - Pages Angular
  • Getting Started
  • Layouts
  • Routing
  • Styles
  • Layout Components
    • Header
    • Menu Items
    • Sidebar
    • Horizontal Menu
    • Secondary Sidebar
    • Quick View
    • Overlay Search
  • Directives
    • Parallax
    • Retina Image
  • Bootstrap Components
  • Forms
    • Checkbox and Radio
    • Form Group
    • Input Helpers
    • Switch Toggle
    • Select
    • Select FX
    • Typeahead
    • Date Picker
    • Time Picker
    • Quill Editor
    • File Uploader
  • UI Components
    • Progress Bar
    • List View
    • Cards
    • Social Cards
    • Collapse
    • Tabs
    • Tree View
    • Sliders
    • Notifications
  • Tables / Datatables
  • Maps
  • Session and other pages
  • Service
  • Dashboards
  • Widgets
  • Charts
  • Change log
Powered by GitBook
On this page
  • Importing
  • How to use
  1. UI Components

Tree View

PreviousTabsNextSliders

Last updated 6 years ago

Tree view plugin is powered by a third party plugin. Please refer there documentation for further celebrations.

Importing

First import it to your app module or any submodule as you wish

import { TreeModule } from 'angular-tree-component';
@NgModule({
  imports: [TreeModule,...]
})
export class AppModule(){}

How to use

Basic Select with Search

<tree-root [nodes]="simpleNodes" [options]="options" class="tree-wrapper bold-node-text level1-document-icon-only m-b-20"></tree-root>
simpleNodes = [
    {
        id: 1,
        name: 'item1 with key and tooltip'
    },
    {
        id: 2,
        name: 'item2'
    },
    {
        id: 3,
        name: 'Folder with some children',
        children: [
        { id: 4, name: 'Sub-item 3.1',
            children:[
            {id: 5, name: 'Sub-item 3.1.1'},
            {id: 6, name: 'Sub-item 3.1.2'}
            ]
        },
        { id: 7, name: 'Sub-item 3.2',
            children:[
            {id: 8, name: 'Sub-item 3.2.1'},
            {id: 9, name: 'Sub-item 3.2.2'}
            ]
        }
        ]
    },
    {
        id: 10,
        name: 'Document with some children (expanded on init)',
        isExpanded:true,
        children: [
        { id: 11, name: 'Sub-item 4.1  (active and focus on init)',
        isFocused:true
        }
        ]
    },
];

options = {
    animateExpand:true,
};
https://angular2-tree.readme.io/docs