Include igTree from jQuery to Ignite UI for Angular

[pranaysharmadelhi]

Is your feature request related to a problem? Please describe.

Include igTree from jQuery to Ignite UI for Angular for easy inclusion

Describe the solution you'd like

Ability to add IgxTreeModule similar to IgxGridModule

Describe alternatives you've considered

Tried including IgTreeComponent, but that causes failures with other Modules

Additional context

[Lipata]

@pranaysharmadelhi have you tried our angular wrappers for Ignite UI for jQuery?

[pranaysharmadelhi]

Ya, they are causing the Grid Modules to fail. They are not compatible.

[Lipata]

@pranaysharmadelhi can you attach a sample or link to a StackBlitz demo, where we can investigate the problem you are experiencing?

[pranaysharmadelhi]

So, when I click JSFiddle on https://www.igniteui.com/tree/angular , it doesn't work
http://jsfiddle.net/gh/get/jquery/1.9.1/igniteuisamples/jsfiddle-samples/tree/master/EN/HtmlSamples/tree-control/angular/

[github-actions]

There has been no recent activity and this issue has been marked inactive.

[github-actions]

There has been no recent activity and this issue has been marked inactive.

[github-actions]

There has been no recent activity and this issue has been marked inactive.

[ViktorSlavov]

@pranaysharmadelhi , Thanks for bringing this to our attention!

We've started developing an igx-tree component which will cover the functionality of igTree in a native angular control.
You can check the spec and comment here w/ any questions and suggestions.

You can also track the progress of the implementation in this issue.

[ViktorSlavov]

IgxTree Implementation

Spec
Samples

• Basic Implementation (file structure, dev sample)
  • IgxTreeComponent
  • IgxTreeNodeComponent
  • Dev sample
• Node state implementation
  • Tree API service
  • Tree state methods (expand/collapse/toggle)
  • Tree node input (expanded)
  • Animations (open/close animation as in IgxExpansionPanel)
  • Expand/Collapsed events
• Selection
  • Selection Modes ('None', 'BiState', 'Cascading')
  • Cascading Selection - Implementation
  • Tree API methods (select/deselect node)
  • Tree node input (selected)
  • Selection events
• Keyboard Navigation
  • Basic navigation (active item)
  • Selection
  • Toggle
• Aria Support
  • Aria roles and tab index on tree / tree nodes
  • igxTreeNodeLink directive + roles
• Styling
  • Tree and Tree Node classes in theming
  • Actual stying
• Testing
  • Test scenarios in spec
  • Implement unit tests
  • Implement e2e tests
• Docs
  • README.md
  • docfx page entry
  • igniteui-angular-sample entry
  • igniteui-cli template
• Drag and drop
  • Basic implementation
  • Events and event args

[ViktorSlavov]

Since we're going w/ a declarative approach, we will have some limitations regarding the tree. There is a known issue in Angular for using @ContentChildren directive together w/ ngTemplateOutlet.
More specifically, this impacts the tree when:

1. Recursively creating nodes via ng-template is not supported:

<!-- this is not supported and will lead to incorrect behavior -->
<igx-tree>
     <ng-container *ngFor="let node of data">
          <ng-template ngProjectAs="igx-tree-node" *ngTemplateOutlet="recursiveNodeTemplate; context: { $implicit: node }">
          </ng-template>
     </ng-container>
     <ng-template #recursiveNodeTemplate let-node>
          <igx-tree-node [data]="node">
               {{node.label}}
               <ng-container *ngFor="let entry of node.children">
                     <ng-template ngProjectAs="igx-tree-node" *ngTemplateOutlet="recursiveNodeTemplate; context: { $implicit: entry}">
                     </ng-template>
               </ng-container>
          </igx-tree-node>
     </ng-template>
</igx-tree>

Currently, all levels of the hierarchy must be written explicitly.

2. Creating an anchor (<a>) child w/ our tab stop directive ([igxTreeNodeLink]) via ng-template. As a workaround you need to pass a ref to the parent node (<a [igxTreeNodeLink]="parentRef"></a>):

<igx-tree>
    <igx-tree-node #nodeRef *ngFor="let node of data" [data]="node">
         <!-- template outlet in node content -->
         <ng-template *ngTemplateOutlet="nodeTemplate; context: { $implicit: node, node: nodeRef }">
         </ng-template>
         <igx-tree-node #nodeRef *ngFor="let childNode of node.children" [data]="childNode">
             <!-- template outlet in node content -->
             <ng-template *ngTemplateOutlet="nodeTemplate; context: { $implicit: childNode, node: nodeRef }">
             </ng-template>
             ....
         </igx-tree-node>
    </igx-tree-node>
    <!-- template is defined in the tree body -->
    <ng-template #nodeTemplate let-data let-parent="nodeRef">
         <!-- explicitly pass a reference to the parent node via `[igxTreeNodeLink]="parent"` -->
          <a [igxTreeNodeLink]="parent" [href]="data.href">{{ data.label }}</a>
    </ng-template>
</igx-tree>

The ng-template should also be initialized inside of the igx-tree tag (for DI providers).