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)
            }
          }