Column Template with Angular 2-5

[Maciej]

Dear Syncfusion Team,

I wonder how to use Column Template with Angular 2-5. Do you have any example like this one for JavaScript linked below?

http://js.syncfusion.com/demos/web/#!/bootstrap/treegrid/columns/columntemplate

Regards,

Maciej

[Jayakumar Duraisamy]

Hi Maciej, 

We have prepared a TreeGrid column template sample by using ng-template support to render template inside the respective TreeGrid column in angular.  

Syncfusion controls already have support up to angular 5.  

Please refer following code snippet, 

<ej-treegrid #TreeGridControl 

//… 

<e-treegrid-column field="Name" headerText="Name" [isTemplateColumn]="true"> 

      <ng-template e-template let-data> 

 

         <div style='height:20px;' unselectable='on'>  

           <div *ngIf="data.hasChildRecords==true">  

             <div class='intend' [ngStyle]="{height:'1px', float:'left',display:'inline-block', width: data.level*20 + 'px'}"></div>  

             </div>  

  

            <div *ngIf="data.hasChildRecords==false">  

              <div class='intend' [ngStyle]="{height:'1px', float:'left',display:'inline-block', width: data.level*20 + 24 + 'px'}"></div>  

            </div>  

  

            <div *ngIf="data.hasChildRecords==true && data.expanded==true">  

               <div class='e-treegridexpand e-icon' style='float:left;display:inline-block;' unselectable='on'></div>  

            </div> 

 

           < <div *ngif="data.hasChildRecords==true && data.expanded==false"> 

                  <div class='e-treegridcollapse e-icon ' style='float:left; 

           display:inline-block;' unselectable='on'></div> 

          </div> 

 

    <div *ngif="data.hasChildRecords==false "> 

        <div class='e-doc e-icon' style='float:left;display:inline-block;' unselectable='on'></div> 

    </div>           

 

    <div *ngIf="data.Name">  

                <div class='e-cell' style='display:inline-block;width:100%'  

              unselectable='on'>{{data.Name}}</div>  

           </div>  

     </div>  

 

                    </ng-template> 

                </e-treegrid-column> 

<e-treegrid-column field="Type" headertext="Type"></e-treegrid-column> 

<e-treegrid-column field="DateCreated" headertext="Start Date"></e-treegrid-column> 

<e-treegrid-column field="DateModified" headertext="End Date"></e-treegrid-column> 

</e-treegrid-columns> 

 

Please find the sample location as below, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Angular_ColumnTemplate2103301239  

Please let us know, if you require any other assistance. 

Regards, 

Jayakumar D