Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings
This repository was archived by the owner on Feb 2, 2025. It is now read-only.
Discussion options

arammarm
Apr 29, 2022

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)
You must be logged in to vote
Answered by miamilabs Nov 10, 2023

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

View full answer

Replies: 1 comment · 5 replies

Comment options

pdiwadkar
Sep 1, 2022

Hello,
I am also facing the same issue. Do we have any work around?
I am using Angular 13
You must be logged in to vote
5 replies
@shanmukhateja
Comment options

shanmukhateja Sep 4, 2022
Collaborator

Can you provide a StackBlitz link or repo to investigate this?
@miamilabs
Comment options

miamilabs Nov 10, 2023

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
Comment options

miamilabs Nov 10, 2023

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)">
Answer selected by shanmukhateja
@Jerry97
Comment options

Jerry97 May 26, 2024

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
Comment options

miamilabs May 26, 2024

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)
            }
          }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
🙏
Q&A
Labels
bug needs-repro
5 participants
@arammarm @miamilabs @pdiwadkar @Jerry97 @shanmukhateja
Converted from issue

This discussion was converted from issue #1652 on April 30, 2022 06:58.

Morty Proxy This is a proxified and sanitized view of the page, visit original site.