TreeView ng-template about ej2-javascript-ui-controls

[ninopetrovic]

Thank you for the example. it works now!

And a big thumbs up for your response time!

Br. Nino

[PiramanayagamSyncfusion]

@ninopetrovic ,

Thanks for contacting Syncfusion support.

We would like to inform you that, ng-template support all native event bindings. So, you can bind the click event to delete icon. Additionally, you need to enable to pointer events for delete icon in application level. Please refer to the below code example.

[CSS] #root .e-treeview.e-fullrow-wrap .e-text-content .delBranch { pointer-events: auto; }

For your reference, we have prepared a sample based on your requirement in the link: https://stackblitz.com/edit/angular-s68thf-yvwsm9?file=default.html

Please let us know whether the provided sample is helpful in achieving your requirement. If not, revert with more information to proceed further.

Regards,
Piramanayagam R

[victor-lara]

I tried the same code and is not working, even on the stackblitz is not working

this is the error when I use that code.
"Failed to execute 'querySelectorAll' on 'Document': '[object Object]' is not a valid selector."

[SowmiyaPadmanaban]

Hi Victor,

Adding the pointer-events as auto for TreeView node will trigger the click event when clicking on the tree node icon. Refer the below code snippet.

.e-treeview.e-fullrow-wrap .e-text-content  { pointer-events: auto; }

deleteNode(args){
      let node = args.target.closest('.e-list-item');
       //to remove node in TreeView
       this.treeObj.removeNodes([node]);
       // you can get the updated data 
       console.log(this.treeObj.getTreeData());
    }

Refer the TreeView sample with updated Angular version.

https://stackblitz.com/edit/angular-3bigvu?file=app.component.ts

Please let us know whether the provided sample is helpful in achieving your requirement. If not, revert us with more information to check and provide your prompt solution..

Regards,
Sowmiya.P

[victor-lara]

Hi Swomiya,

The problem is the template is never used, it throws an error and is never read. The only way it works is returning the template from a component property as a plain string and using ${} for interpolation.

Do you have an idea why this happens? I'm using the last version on npm. And let me prepare a repo to reproduce

[victor-lara]

Here's a repo
https://github.com/victor-lara/ejs-treeview

It is consuming a dummy API, just click on the login button (don't need to type user or password).
It will redirect you to a page where the treeview component is at the right.
If you click Add Location, it will add more nodes to the root.

Using ng-template throws an exception, on this part of ej2-navigations.es2015.js.
It is expecting an string to compile the template.

On the documentation syncfusion site, says the template should be a string using ${} for interpolation, and not {{}} as angular templates.

Doing this

and this

It works, but, how can I call the component methods from there?
Also, need to update the documentation from syncfusion site.
https://ej2.syncfusion.com/angular/documentation/treeview/template/

Thanks,
Victor

[SowmiyaPadmanaban]

Hi Victor,

We are unable to run your GitHub application as we faced some issue while running it. You can use the below code for defining nodeTemplate property, to define the nodeTemplate property of TreeView component without using ng-template

<ejs-treeview id="template" #tree [fields]="field" [nodeTemplate]="maintemplate"  >
        </ejs-treeview>
 maintemplate: any = '${name}-1';

Refer the sample link.
https://stackblitz.com/edit/angular-3bigvu-xv2jfs?file=app.component.ts

However, when using ng-template for template property of TreeView component. You need to use the following syntax for interpolation.

<ng-template #nodeTemplate="" let-data="">
                <div>
                    <div class="treeviewdiv">
                        <div class="nodetext">
                            <span class="treeName">{{data.name}}</span>     
                        </div>
                         <div  class="nodebadge">
                            <span class="treeCount e-badge e-badge-primary"  *ngIf="data.count">{{ data.count }}</span> 
                        </div>
                    </div>
             </div>
            </ng-template>

Refer the below link for interpolation syntax for Angular component.

https://angular.io/guide/interpolation

Interpolation refers to embedding expressions into marked up text. You can’t able to bind the TreeView methods in that expression. To achieve your requirement, you need to bind the methods in TreeView component.

<ejs-treeview id="template" #tree [fields]="field"  (nodeClicked)="nodeClicked($event)">
            <!-- Template to render tree node -->
            <ng-template #nodeTemplate="" let-data="">
            </ng-template>
        </ejs-treeview>
   nodeClicked(args){
     console.log("click event triggered");
   }

Refer the sample link below.

https://stackblitz.com/edit/angular-3bigvu-lw2lh8?file=app.component.ts

If we misunderstood your requirement, then could you please share us more details regarding your requirement. It will help us to provide you a prompt solution to meet your requirement.

Please let us know, if you have need any further assistance.

Regards,
Sowmiya.P

[victor-lara]

Hi Swomiya,

The problem is. Using that code does nothing, I mean it only shows the text property with the value it ignores the ng-template

I tried using a template with a number inside, not interpolation, nothing from data just a simple character and always it returns the text property

I debugged the code and looks if I don't set [nodeTemplate] it will use a default, which is just the text, if I set it need to be a string from component, but the ng-template is never read or displayed

[victor-lara]

I just found the problem.
Need to import CommonModule.

import { CommonModule } from '@angular/common';

If you do it, treeview will just omit the template, and show the text property value.

Thanks,
Victor