circlongroup / angular-tree-component Goto Github PK

TreeNodes with children are 4px to the right of TreeNodes with no children. You can fix this by setting the left padding of .toggle-children-wrapper to 1px instead of 5px.

I'd submit a PR, but I want to wait until you decide what to do with #43.

how to active async load??

THANKS

I have downloaded the code from the master branch, built the code and tried to then use it in my application....

Now for some reason i get the error above?

In my module, i am doing this

import { NgModule }           from '@angular/core';
import { CommonModule }       from '@angular/common';
import { FormsModule }        from '@angular/forms';
import { SharedModule } from '../shared/shared.module';
import { TreeModule } from 'angular2-tree-component/dist/angular2-tree-component';

import { PageComponent }   from './page.component';

import { routing } from './page.routing';

@NgModule({
    imports:        [ CommonModule, FormsModule, routing, SharedModule, TreeModule ],
    declarations:   [ PageComponent ]
})

export class PageModule {
}

I dont see anything wrong with what i have done?? Can someone help at all.

I have tried this with angular rc6 and rc7

Any plans on when is this component going to be updated to support rc5 and ngModules?

drag & drop not update view or model on drag end

It would be nice to be able to say "this is expanded by default" - perhaps by doing expanded: true on the object. I don't want my tree to always be collapsed by default.

Suppose I have the following model which I pass to the tree component:

nodes = [{
    name: 'test',
    children: [{
        name: 'test-child'
    }]
}];

Now, if I do the following

    nodes[0].name = 'test changed';

the displaying text will be changed.

But, if I perform this code

    nodes[0].children.push({name: 'test-child-2'});

or even this one,

    nodes[0].children = [{name: 'test-child-2'}];

nothing will be changed in the tree. It will display only the "test-child" node.

Is there any way to track these changes and rebuild the corresponding part of the tree? If no, is it possible to implement it?

Please update dependencies to support Angular 2 RC.2.

I still get this:

Can't bind to 'nodes' since it isn't a known property of 'Tree'. ("

                <Tree #tree 
                      [ERROR ->][nodes]="nodes" 
                      >

<page-header [title]="'Coaching Planner'">

<div class="row">
    <div class="col-md-3">
        <div class="panel panel-default">
            <div class="panel-heading">User Selection</div>
            <div class="panel-body tree-container" style="overflow-y:auto;">

                <Tree #tree 
                      [nodes]="nodes" 
                      >

                </Tree>
                <button (click)="tree.treeModel.filterNodes('Derek');">next node</button>
                <div class="form-group" id="select-preset">
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-9">
        <div class="panel panel-default">
            <div class="panel-heading">Pre-defined Reports</div>
            <div class="panel-body">
                <div class="form-group" id="select-preset">
                    Select Preset Reports (optional)
                    <select class="form-control" id="selectpreset">
                        <option value="" disabled selected>Select your report preset</option>
                        <option aria-label="All Stars">All Stars</option>
                        <option>Business By Section</option>
                        <option>Business By Product</option>
                        <option>Advisor Pass or Fail</option>
                        <option>Staff Listing</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

import { Component, NgModule } from '@angular/core';
import { Router } from '@angular/router';
import { TreeComponent } from 'angular2-tree-component';

@component({
selector: 'coaching-planner',

templateUrl: 'app/coaching-planner/coaching-planner.component.html',
styleUrls: ['app/coaching-planner/coaching-planner.component.css']

})

@NgModule({
imports: [TreeComponent]
})

export class CoachingPlannerComponent{
data = "[{"name":"Jared Gould","...............

nodes: any = [];


constructor(private router: Router) {

}

ngOnInit(): void {


    this.nodes = JSON.parse(this.data);


}
myFilterNodes(): void  {
    TreeComponent
    console.log("hey!!!!!!!!!!!");

}
gotoDetail(): void {

}

}

I just installed the component using angular rc3 and I have a bunch of loading element showing and when I click on a node every node expands. See gif below for an example.

https://gfycat.com/SpectacularQuickCat

Under configuration, the new context option, this part includes an option called template, which should actually be treeNodeTemplate

MyComponent {
  treeOptions = {
    template: '{{ node.data.name }} <button ng-click="context.doSomething()">Go!</button>'
    context: this
  }

  doSomething() {
  }
}

should be

MyComponent {
  treeOptions = {
    treeNodeTemplate: '{{ node.data.name }} <button ng-click="context.doSomething()">Go!</button>'
    context: this
  }

  doSomething() {
  }
}

I'd like to filter the nodes, and focus all the nodes that satisfy the filter. Is that possible to do?

Currently we must load lodash manually into the project when using systemJS.
This should be solved.

I suspect it's got something to do with lodash being defined as ambient dependency.

In my case I have a form inside a tree node and I want to use the SPACE key but preventDefault() is preventing me of adding white spaces in my input fields. Can you give me a suggestion how can I resolve that or maybe you plan to refactor that in the future?

I want to collapse, expand roots after initialization.

I have initialized a tree with 1 root, which has several children.
I have defined the tree as a ViewChild, and after console.logging the tree I can see in the console, that roots in treeModel is an array of length 1. But after console.logging tree.treeModel.roots I get empty array.

drag & drop behaviour in the tree

Hello
The package.json is still referencing RC7. Can you update it to use 2.0.0 instead ?

Cheers

Can you please update the tree component to the last angular rc ?

Hi

I'm getting this error after upgrading to Angular 2.0.0.

[email protected]?main=browser:344 Unhandled Promise rejection: Template parse errors:
Can't bind to 'nodes' since it isn't a known property of 'Tree'. ("<Tree #tree
[ERROR ->][nodes]="nodes"
[focused]="true"
[options]="o"): CoachingPlannerComponent@9:26

This used to work before I upgrade, and I haven't changed anything else.

This is my template code.
<Tree #tree [nodes]="nodes" [focused]="true" [options]="options"> </Tree>

`import { Component, NgModule } from '@angular/core';
import { Router } from '@angular/router';
import { TreeComponent } from 'angular2-tree-component';

@component({
selector: 'coaching-planner',

templateUrl: 'app/coaching-planner/coaching-planner.component.html',
styleUrls: ['app/coaching-planner/coaching-planner.component.css']

})

@NgModule({
declarations: [TreeComponent]
})

export class CoachingPlannerComponent{

data: any = "DELETE FOR EXAMPLE THIS WORK BEFORE THOUGH"
nodes: any = [];


constructor(private router: Router) {

}

ngOnInit(): void {


    this.nodes = JSON.parse(this.data);


}
myFilterNodes(): void  {
    TreeComponent
    console.log("hey!!!!!!!!!!!");

}
gotoDetail(): void {

}

}
`

Thanks,
Carmen

I am getting this in the console of IE when I try and use angular2-tree-component.

HTML1300: Navigation occurred.
localhost:64766
Error: XHR error (404 Not Found) loading http://localhost:64766/angular2-tree-component
Error loading http://localhost:64766/angular2-tree-component as "angular2-tree-component" from http://localhost:64766/app/coaching-planner/coaching-planner.component.js

Chrome and Firefox are not throwing errors.

Whats the best approach to styling the tree?

If you activate a node and then activate a different node without multiselect, there is no onDeactivate event fired for the first node. This basically forces you to maintain your own list of selected nodes instead of relying on the tree to handle it for you.

I'd submit a PR, but I want to wait until you decide what to do with #43.

With RC6 all components and pipes must now be declared via an NgModule. Unfortunately the following error message pops up since updating:

Can't bind to 'node' since it isn't a known property of 'TreeNode'. ("
      <TreeNode
        *ngFor="let node of treeModel.roots"
        [ERROR ->][node]="node">
      </TreeNode>
    </div>
"): TreeComponent@4:8

Any clue on this?

Allow to configure the tree's:

• viewEncapsulation
• changeDetectionStrategy
• selector

Need to support these options:

• children padding - default
  • allow to supply a method that returns the children padding for each node
• per node padding
  • calculated by default as X * node.level
  • allow to override X
  • allow to supply a method that returns the padding for each node

How to event tree ready?
@ViewChild('treeProcessi') private tree:TreeComponent;

onInizialized tree is undefined.

ngAfterViewChecked is called many times for tree variable.

Thanks

The current setup will error when the local system does not have the typings global module.

There is a post install script that runs typings.

Since typings is fading away and @types is the de facto solution for type definition, maintained by MS I suggest moving to it.

I notice the expansion of nodes can be rather unreliable (sometimes clicking does nothing), and this warning pops up in the console when it actually does expand:
toggle() is deprecated, please use toggleExpanded()

Your demo does not have the reliability issue, but does still throw that warning up in the console.

I am using System.js if that makes a difference for this issue.

I have a tree that displays nodes. On each node i have a custom template, which offers the options Edit, Copy and Delete. When one of these options is pressed, i would like to open a modal window (using ng2-bootstrap) and ask the user to confirm their action.

Now i can do this, if I create a modal window in the custom template, but that seems like a lot of HTML to repeat for each node, so instead i would like to have my ModalComponent on the same component as my tree, and somehow raise an event when a button in a template is pressed....

How can i do this? Here is what i have so far

pages.component.html

<Tree #tree [nodes]="nodes" [options]="options"></Tree>

<div *ngIf="tree.activeNode">
   <!-- got modal here instead of within each node template!! //-->
    <page-copy-modal #copyModal="copyModal" [page]="tree.activeNode.data"></page-copy-modal>
</div>

pages.component.ts

import { Component, OnInit } from '@angular/core';
import { TreeComponent } from 'angular2-tree-component';
import { PagesTreeNodeComponent } from './pages-tree-node.component';
import { PageCopyModalComponent } from './page-copy-modal.component';

@Component({
    selector: 'pages',
    templateUrl: 'app/admin/page/pages.component.html',
    directives: [ TreeComponent, RouterLink, PageCopyModalComponent ]
})

export class PagesComponent implements OnInit {

    nodes: Page[];
    options: Object = {
        treeNodeTemplate: PagesTreeNodeComponent
    };

    ngOnInit() {
        // nodes loaded here
    }

   // need these functions to be called from pages-tree-node-component.ts
   onEdit () { }
   onCopy () { }
   onDelete () { }
}

pages-tree-node.component.html

{{ node.displayField }}
<div class="pull-sm-right options">
    <a (click)="onEdit()">Edit</a> |
    <a (click)="onCopy()">Copy</a> |
    <a (click)="onDelete()">Delete</a>
</div>

pages-tree-node.component.ts

import { Component, Input } from '@angular/core';
import { Router } from '@angular/router-deprecated';
import { TreeNode } from 'angular2-tree-component';

@Component({
    selector: 'pages-tree-node',
    templateUrl: 'app/admin/page/pages-tree-node.component.html'
})

export class PagesTreeNodeComponent {

    @Input()
    node: TreeNode;

    // on editing a page
    onEdit() {
        // call event on PagesComponent for edit??
    }

    onCopy() {
        // call event on PagesComponent for copy??
    }

    onDelete() {
        // call event on PagesComponent for delete??
    }
}

page-copy-modal.component.html

<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Copy page</h4>
            </div>
            <div class="modal-body">
                Are you sure you want to copy this page, all its contents and all of it's child pages?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-primary" (click)="onCopy()" aria-label="Copy">
                    Copy
                </button>
                <button type="button" class="btn btn-outline-secondary" (click)="lgModal.hide()" aria-label="Cancel">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>

page-copy-modal.component.ts

import { Component, Input, ViewChild} from '@angular/core'
import { CORE_DIRECTIVES } from '@angular/common'
import { MODAL_DIRECTIVES } from 'ng2-bootstrap/components/modal';
import { ComponentsHelper } from 'ng2-bootstrap/components/utils/components-helper.service';

@Component({
    selector: 'page-copy-modal',
    directives: [ MODAL_DIRECTIVES, CORE_DIRECTIVES ],
    viewProviders: [ ComponentsHelper ],
    templateUrl: 'app/admin/page/page-copy-modal.component.html',
    exportAs: 'copyModal'
})

export class PageCopyModalComponent {

    @ViewChild('lgModal') 
    lgModal;

    @Input: any
    page;

    show(){
        this.lgModal.show();
    }

    onCopy() {

    }
}

I am using angular2-tree-component with webpack and all the functionality works just fine. The only issue I see is that if I click on a parent node that has one or more children, the icon of the parent node does not change to the down arrow when the parent node is in expanded state.
From what I can see I dont need to add any CSS files, it should just work. What am I missing?
Thanks.

Any plans to add drag and drop?

Please update dependencies to support RC.3.

I'm using Material Icons all over my app and was wondering if I could use them on the tree-component, too?

I'm talking about chevron left+right, and expand less+more

https://design.google.com/icons/#ic_chevron_left

The npm package does not contain the js file(s) of this component. This means the component can't be loaded with system.js. Do you have any plans to fix this (or am I missing something here)?

Thanks.

As the title says, I have some nodes with isExpanded: true, but the treeview is collapsed on startup.

var nodes =
    [
        {
            name: 'a',
            isExpanded: true,
            children: [
                {
                    name: 'b',
                    isExpanded: true,
                    children: [
                        { name: c', }
                    ]
                },
            ]
        },
        {
            name: 'b',
            isExpanded: true,
            children: [
                {
                    name: 'a',
                    children: [
                        { name: 'c' },
                    ]
                }
            ]
        }
    ];

No errors are displayed.

Angular 2 RC4, angular-cli and system-js

I'm not using Typescript so I don't have nor use typings. It fails to install in the postinstall step as a result. I saw that the path is node_modules/.bin/typings install - you should just be able to say typings install and it should install based on the depended-on install of typings - no need to specify the full path.

Would be good to have the possibility to select an node by the id. I did not find this possibility in the API. In this case should fire an event informing that the node has been selected.

One great tree component that i use is the jsTree (https://www.jstree.com) but it has the disadvantage of use jquery.

Follow my suggestion:
<Tree #tree [nodes]="nodes"></Tree>
<button (click)="tree.treeModel.selectNode(2)">next node</button>
nodes = [
{
id: 1,
name: 'root1',
isExpanded: true,
children: [
{
id: 2,
name: 'child1'
}, {
id: 3,
name: 'child2'
}
]
}
]

npm install 1.2.0 version ,I got error:

`npm ERR! Windows_NT 6.3.9600
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install"
npm ERR! node v6.3.1
npm ERR! npm v3.10.3

npm ERR! No compatible version found: angular2-tree-component@^1.2.0
npm ERR! Valid install targets:
npm ERR! 1.1.18, 1.1.17, 1.1.16, 1.1.14, 1.1.13, 1.1.12, 1.1.11, 1.1.10, 1.1.9, 1.1.8, 1.1.6, 1.1.5, 1.1.4, 1.1.4-dev3, 1.1.4-dev2, 1.1.4-dev
, 1.1.3, 1.1.2, 1.1.1, 1.0.2, 1.0.1, 1.0.0
npm ERR!
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! d:\frontEnd\angular2\npm-debug.log `

Since this is a library, forcing the user to use lodash is a problem.

In here there is a direct import of the whole lodash library.

It should be either removed and functionality should be manually written,.
Or, only required functions from lodash should be imported.

Hi. I wanna display more than 1 field. Is it possible to display more than 1 field?

I have the tree in a component, but want to activate the first node in the tree by default.

How can this be done?

Can you publish it to npm please..... Ta

Any idea why the tree doesn't expand on page loading? Below is my configuration:

In the view inside the Tree element:
[nodes]="tree" [focused]="true" [options] = "treeOptions"

In the component:
treeOptions = {
isExpanded: 'expanded',
treeNodeTemplate: MyTreeNodeTemplate,
loadingComponent: MyTreeLoadingTemplate,
context: this
}

Json returned from the server contains "expanded":true

[{"id":"8365a4e2-698e-11e6-b73e-0242ac12000e","name":"Tom Swift","expanded":true,"children":[{"id":"836da3e3-698e-11e6-b73e-0242ac12000e","name":"[G] User","expanded":true,"children":[{"id":"838d876a-698e-11e6-b73e-0242ac12000e","name":"[S] Launch_Default","expanded":true,"children":[{"id":"83ae0fec-698e-11e6-b73e-0242ac12000e","name":"[P] Launch.refcodes.Put","expanded":true,"children":[]},{"id":"83adf800-698e-11e6-b73e-0242ac12000e","name":"[P] Launch.refcodes.Post","expanded":true,"children":[]},{"id":"83addc0c-698e-11e6-b73e-0242ac12000e","name":"[P] Launch.refcodes.Get","expanded":true,"children":[]},{"id":"83ae25ec-698e-11e6-b73e-0242ac12000e","name":"[P] Launch.refcodes.Delete","expanded":true,"children":[]}]}]},{"id":"836d72ed-698e-11e6-b73e-0242ac12000e","name":"[G] Admin","expanded":true,"children":[{"id":"838c74c5-698e-11e6-b73e-0242ac12000e","name":"[S] IDP_Default","expanded":true,"children":[]},{"id":"838d708a-698e-11e6-b73e-0242ac12000e","name":"[S] Gateway_Default","expanded":true,"children":[]},{"id":"838d876a-698e-11e6-b73e-0242ac12000e","name":"[S] Launch_Default","expanded":true,"children":[{"id":"83ae0fec-698e-11e6-b73e-0242ac12000e","name":"[P] Launch.refcodes.Put","expanded":true,"children":[]},{"id":"83adf800-698e-11e6-b73e-0242ac12000e","name":"[P] Launch.refcodes.Post","expanded":true,"children":[]},{"id":"83addc0c-698e-11e6-b73e-0242ac12000e","name":"[P] Launch.refcodes.Get","expanded":true,"children":[]},{"id":"83ae25ec-698e-11e6-b73e-0242ac12000e","name":"[P] Launch.refcodes.Delete","expanded":true,"children":[]}]},{"id":"838d5849-698e-11e6-b73e-0242ac12000e","name":"[S] OAuth2_Default","expanded":true,"children":[{"id":"ca4e7d44-2a47-4136-a796-04b660299f21","name":"[P] OAuth2.ui.Get","expanded":true,"children":[]}]}]}]}]

Hi,
how to filter on tree model?
thanks

Hi,

In the current implementation of the tree it is possible to select/deselect a node with keyboard, pressing on enter/space. I have a requirement to implement tree node template with text input that allows spaces. Default behavior of enter/space is prevented, so it is impossible to use space inside node template.

I suggest to allow configuration of keyboard navigation keys through options object.

Thanks

I encountered the problem, that the title field (displayField) is rendered twice. Same behaviour can be seen in your demo:

Bug or Feature? 😄

Test on IE

I've two questions

Can I give tree custom template ?
is it compatible with angular rc 3 ?

thanks

The user can use check using the $event