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

[PROCOS AG]

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]

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. 

 

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.