npm package: @guscrawford/ngx-tree-view
Description: Yet another published reusable Angular tree-view component. (Hopefully the last)
Latest version: 0.1.2
Deprecated: no longer maintained; no value

# Tree View
Yet another published reusable Angular tree-view component. (Hopefully the last)

## Install & Import to Your Main Module
`npm install ngx-tree-view`

**app.module.js**
```
import { TreeViewModule } from '@guscrawford/ngx-tree-view';
@NgModule({
  declarations: [
    AppComponent,
    //...
  ],
  imports: [
    //...
    TreeViewModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

```
## Use in a Component

**app.component.html**

```
<tree-view [nodes]="data"></tree-view>
```

**app.component.ts**

```
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  data = [
    {
      name:'North America',
      children:[
        {
          name:'USA',
          children:[
            {name:'Alabama'},
            {name:'Wisconsin'}
          ]
        },
        {name:'Canada'},
        {name:'Mexico'}
      ]
    },
    {
      name:'Europe',
      children:[
        {name:'Germany'},
        {name:'France'}
      ]
    },
    {name:'Antarctica'}
  ];
}
```

## Customize the Options

**app.component.html**

```
<tree-view [nodes]="data" [options]="options" (selectionChange)="selections = $event"></tree-view>
```

**app.component.ts**

```
import { TREE_VIEW_GLYPH_CONFIGS } from '@guscrawford/ngx-tree-view';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  selections;
  data = [
    {
      name:'North America',
      children:[
        {
          name:'USA',
          children:[
            {name:'Alabama'},
            {name:'Wisconsin'}
          ]
        },
        {name:'Canada'},
        {name:'Mexico'}
      ]
    },
    {
      name:'Europe',
      children:[
        {name:'Germany'},
        {name:'France'}
      ]
    },
    {name:'Antarctica'}
  ];
  options =  {
    select:'leaves', // Only reflect selected childless nodes, ('all' selects any, null hides the checkbox)
    glyphs:TREE_VIEW_GLYPH_CONFIGS.fontAwesomeCarets // A default selection of font-awesome carets
    map: {
      children:'children',    // The property to enumerate children on
      value:'name',           // The property to reflect for readable data
      key:'id'                // The property to relfect for a datum's index
    },
    expanded:1                // By default open the tree-view <expanded> levels deep
  }
}
```

## Customize the Node Template

**app.component.html**

```
<tree-view [nodes]="data" [template]="myCustomTreeNode"></tree-view>
<ng-template #myCustomTreeNode>
  {{node[options.map.value]}}!!!
<ng-template>
```

**app.component.ts**

```
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  data = [
    {
      name:'North America',
      children:[
        {
          name:'USA',
          children:[
            {name:'Alabama'},
            {name:'Wisconsin'}
          ]
        },
        {name:'Canada'},
        {name:'Mexico'}
      ]
    },
    {
      name:'Europe',
      children:[
        {name:'Germany'},
        {name:'France'}
      ]
    },
    {name:'Antarctica'}
  ];
}
```

## Update Asynchronously

**app.component.html**

```
<tree-view [nodes]="data" (expansionChange)="onExpand($event)"></tree-view>
```

**app.component.ts**

```
import { TREE_VIEW_GLYPH_CONFIGS } from '@guscrawford/ngx-tree-view';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  data = [
    {
      name:'North America',
      children:[
        {
          name:'USA',
          children:[
            {name:'Alabama'},
            {name:'Wisconsin'}
          ]
        },
        {name:'Canada', children:[]},
        {name:'Mexico', children:[]}
      ]
    },
    {
      name:'Europe',
      children:[
        {name:'Germany'},
        {name:'France'}
      ]
    },
    {name:'Antarctica'}
  ];
  statesOrProvinces(country) {
    if (country === 'Canada')
      return Observable.of([
        {name:'Ontario'},
        {name:'Quebec'}
      ]);    if (country === 'Canada')
    if (country === 'Mexico')
      return Observable.of([
          {name:'Chihuahua'},
          {name:'Durango'}
        ]);
    return Observable.onErrorResumeNext();
  }
  onExpand($event) {
    if($event.$expanded && !$event.children.length)
      this.statesOrProvinces($event.name).subscribe(statesOrProv=>{
        $event.children = statesOrProv;
      })
  }
}
```