We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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
loading
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="">
       {{data.caption}}
     </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="">
       {{data.caption}}
     </ng-template>
How do we accomplish such a scenario? If we use "*ngIf" within the template we get angular runtime errors parsing the templates....


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 class="treeviewdiv" *ngIf="data.level == 1; else condition2"> 
            <div style="float:left"> 
                <span class="treeName" style="color:green">{{data.name}}</span> 
            </div> 
            <div style="margin-right: 5px; float:right"> 
                <span class="treeCount e-badge e-badge-primary" *ngIf="data.count">{{ data.count }}</span> 
            </div> 
        </div> 
        <ng-template #condition2> 
            <div class="treeviewdiv" *ngIf="data.level == 2; else condition3"> 
                <div style="float:left"> 
                    <span class="treeName" style="color:red">{{data.name}}</span> 
                </div> 
                <div style="margin-right: 5px; float:right"> 
                    <span class="treeCount e-badge e-badge-primary" *ngIf="data.count">{{ data.count }}</span> 
                </div> 
            </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. 
 
 
 
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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon