Angular V10 - Cannot use column template

[Anthony Miller]

Hi,

I just updated to Angular Version 10 and using the latest release of  "@syncfusion/ej2-angular-grids": "18.2.55" and getting errors using any form of the ng-template for an individual column.

This simple column definition causes an issue:

      <e-column headerText="Code" width="50">

        <ng-template #template let-data>

          <div>

            {{ data?.code }}

          </div>

        </ng-template>

      </e-column>

I created a blank project and used you stackblitz example using column templates and this seems to work fine, however my usage doesn't. The compiler is different for the column TemplateString as opposed to TemplateEle

Your assistance would be greatly appreciated.

From what I have gathered its something to do with the compiler that is used.

The catch block is called:

Which uses this Engine to compile the template, but its not a string its a TemplateRef.

Then fails on the highlight line.

However the working demo app I produced it doesn't follow the same path it going into :

Let me know if I could provide any further clarification.

[Ajith Govarthan]

Hi Anthony, 

Thanks for contacting Syncfusion support. 

Based your requirement you have mentioned that you are facing issues with column template feature in the angular 10 version. Based on that we have  prepared sample and in that sample we have used the column template and found no issues at our end. 

For your convenience we have attached the sample so please refer the sample for your reference. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sampleangula10815994935.zip 

UG-links: 

https://ej2.syncfusion.com/angular/documentation/api/grid/#actionfailure 

https://ej2.syncfusion.com/angular/documentation/grid/columns/#column-template 

If you still face the issue then please share the below details to validate further on your requirement. 

1. Share the complete grid code example. 

 

2. Share the screenshot of the issue if you face any script error. 

 

3. Use Actionfailure event and let us know if you face any exceptions. 

 

4. Please ensure that you have used the lasted version of Syncfusion package. 

Regards, 

Ajith G. 

[Anthony Miller]

Hi,

Thanks for you reply, I've managed to fix this issue. 

To help others, the fix for me was to delete the package-lock.json and delete the node_modules folder and reinstall.

For an unknown reason @syncfusion npm packages where being nested, result in the referencing of ej2-base.es2015.js twice. This meant that it was being incorrectly initialized.

webpack:///C:/Projects/xyz/jms_v10/node_modules/@syncfusion/ej2-grids/node_modules/@syncfusion/ej2-base/dist/es6/ej2-base.es2015.js

webpack:///C:/Projects/xyz/jms_v10/node_modules/@syncfusion/ej2-angular-grids/node_modules/@syncfusion/ej2-base/dist/es6/ej2-base.es2015.js

Thanks,

Anthony

[Ajith Govarthan]

Hi Anthony, 

Thanks for the update. 

We are happy to hear that your issue has been resolved and thank you for sharing the solution with us. 

Please get back to us if you need further assistance. 

Regards, 

Ajith G.