Using Angular TemplateRef Error"Cannot read properties of undefined (reading 'createEmbeddedView')"

[arammarm]

I'm using angular version 12

I used the exact example from the documentation page. http://l-lin.github.io/angular-datatables/#/advanced/using-template-ref

But I got this error. is this example compatible with the angular version.

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'createEmbeddedView') TypeError: Cannot read properties of undefined (reading 'createEmbeddedView') at ViewContainerRef.createEmbeddedView (core.js:23176:1) at angular-datatables.directive.js:109:1 at Array.forEach (<anonymous>) at DataTableDirective.applyNgRefTemplate (angular-datatables.directive.js:97:1) at S.fn.init.rowCallback (angular-datatables.directive.js:61:1) at node_modules\datatables.net\js\jquery.dataTables.min.js:91:89 at Function.map (node_modules\jquery\dist\jquery.min.js:2:3523) at F (node_modules\datatables.net\js\jquery.dataTables.min.js:91:40) at ja (node_modules\datatables.net\js\jquery.dataTables.min.js:43:110) at Qb (node_modules\datatables.net\js\jquery.dataTables.min.js:53:283) at resolvePromise (zone.js:1211:1) at zone.js:1118:1 at asyncGeneratorStep (asyncToGenerator.js:6:1) at _next (asyncToGenerator.js:25:1) at _ZoneDelegate.invoke (zone.js:372:1) at Object.onInvoke (core.js:28692:1) at _ZoneDelegate.invoke (zone.js:371:1) at Zone.run (zone.js:134:1) at zone.js:1275:1 at _ZoneDelegate.invokeTask (zone.js:406:1) 

[pdiwadkar]

Hello,
I am also facing the same issue. Do we have any work around?
I am using Angular 13

[shanmukhateja]

Can you provide a StackBlitz link or repo to investigate this?

[miamilabs]

This is old, but i am facing same issue and could not find any reply to the issue yet.

I am using angular 15 with server side ajax.
Let me know if this log helps or you need more information.

Thank you

localhost-1699636211958.log

[miamilabs]

Ok i fixed this.

as from missing knowedge from Angular i implemented my templage not on right way.

After implementhis this into HTML all issues was been solved.

<ng-template #demoNg let-data="adtData" let-emitter="captureEvents">
<x-dt-action-edit-delete [data]="data" actionText="View" (emitter)="emitter($event)">

[Jerry97]

Hi, can you explain more on this? <ng-template #demoNg let-data="adtData" let-emitter="captureEvents">
<x-dt-action-edit-delete [data]="data" actionText="View" (emitter)="emitter($event)"> what does it really means? I have the same problem with you, appreciate the help

[miamilabs]

Hi, can you explain more on this? <ng-template #demoNg let-data="adtData" let-emitter="captureEvents"> <x-dt-action-edit-delete [data]="data" actionText="View" (emitter)="emitter($event)"> what does it really means? I have the same problem with you, appreciate the help

Make sure you use right libs. Some i had issue where DT used the wrong import.

Here is example of my old playground stuff.

Dependencies

 "angular-datatables": "^16.0.1", "datatables.net": "^1.13.2", "datatables.net-dt": "^1.13.2", 

and devDependencies

"@types/datatables.net": "^1.10.27",

Then you will need the template for the collumn.

<ng-template #xDataEditDelete let-data="adtData" let-emitter="captureEvents"> <x-dt-action-edit-delete [data]="data" (emitter)="emitter($event)"></x-dt-action-edit-delete> </ng-template> 

Component:

@ViewChild('xDataEditDelete') xDataEditDelete!: TemplateRef<DatatableEditDeleteComponent>;

And the collumn example:

ngTemplateRef: { ref: this.xDataEditDelete, context: { captureEvents: this.onCaptureEvent.bind(this) } }