Is there a way to use node template(s) based on some conditions?

Thread ID:	Created:	Updated:	Platform:	Replies:
148130	Oct 7,2019 03:13 PM UTC	Oct 8,2019 11:46 AM UTC	Angular - EJ 2	1

Subscribe to this post

Tags: Treeview

PROCOS AG

Asked On October 7, 2019 03:13 PM UTC

We use the "<ejs-treeview #tree ... >" with an embedded node template:

<ng-template #nodeTemplate="" let-data="">

</ng-template>

Now we have three conditions we have to change the used node template: If condition = A use template TemplateA elseif condition = B use template TemplateB else use defaultTemplate (simplified templates):

<ng-template #templateA="" let-data="">

<span style="color:green">{{data.caption}}</span>

</ng-template>

<ng-template #templateB="" let-data="">

<span style="color:red">{{data.caption}}</span>

</ng-template>

<ng-template #defaultTemplate="" let-data="">

</ng-template>

How do we accomplish such a scenario? If we use "*ngIf" within the template we get angular runtime errors parsing the templates....

Reply | Reply with quote

Ashokkumar Balasubramanian [Syncfusion]

Replied On October 8, 2019 11:46 AM UTC

Hi PROCOS,

Good day to you.

We have validated your requirement and prepared a sample for rendering Tree View with templates based on multiple conditions. Here based on the node level, we have changed the color of the Tree View node using “ngif” condition. Please refer to our code snippet.

<ng-template #nodeTemplate="" let-data="">

<div>

</div>

<span class="treeCount e-badge e-badge-primary" *ngIf="data.count">{{ data.count }}</span>

</div>

<ng-template #condition2>

</div>

<span class="treeCount e-badge e-badge-primary" *ngIf="data.count">{{ data.count }}</span>

</div>

</ng-template>

</div>

</ng-template>

In the above sample, we have used ngIf condition. But we did not face any run time errors. We have prepared the sample for your reference.

Live Demo: https://stackblitz.com/edit/angular-7uf5dr-nhxa46?file=app.component.html 

Local Sample: https://www.syncfusion.com/downloads/support/forum/148130/ze/my-app-1674289217

Kindly check the above sample and get back to us with the following details if still issue persists. 

a. What kind of run time error did you face? If possible, share the error screenshot to us

b. If possible, share the code snippet or sample you have tried at your end.

c. If possible, kindly modify the above-attached sample to reproduce the reported issue.

Please get back to us with the above-asked information if you still face any issues. It would be more helpful to assist you better.

Regards,

Ashokkumar B.

Reply | Reply with quote

Is there a way to use node template(s) based on some conditions?

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US