Adding Angular component as table column puts [object HTMLElement] in the column

[advapiIT]

🪲 bug report

Adding a column render puts content below

🔬 Minimal Reproduction

I've a component with some button and logic that can be applied to different tables of my real application.
I try to add this via dtOptions instead of having as before using the angular datatables in the HTML.
The problem I've is that I see [Object HTML] in the table and a lot of buttons below.
For the array of Click button I think it's due to the fact they're added without pagination, but it's wrong

StackBlitz/GitHub Link:

https://stackblitz.com/edit/angular-datatables-gitter-e8pokn?file=app%2Fapp.module.ts,app%2Fapp.component.ts,app%2Fbutton-component%2Fbutton-component.component.ts

Step-by-step Instructions:

🎱 Expected behavior

The rendered component just in the table

🌐 Your Environment

• NodeJS version:
• Angular version: 13*
• Angular CLI version: 13*
• jQuery version:
• DataTables version: latest
• angular-datatables version: 14.0

[shanmukhateja]

Hi,

Can you try https://l-lin.github.io/angular-datatables/#/advanced/using-template-ref and report back?

[advapiIT]

I recevie this error when I try to add the ngTemplate on the column.. am I missing something?

Type '{ title: string; data: null; defaultContent: string; ngTemplateRef: {}; }' is not assignable to type 'ColumnSettings'.
Object literal may only specify known properties, and 'ngTemplateRef' does not exist in type 'ColumnSettings'.(2322)
(property) ngTemplateRef: {}

[shanmukhateja]

You must be using an older version of angular-datatables. Can you remove node_modules directory, upgrade to latest version and try again?

[advapiIT]

You were right... I was using Angular-datatable 13.x ... now I was seeing that this package ***@***.***/datatables.net doesn't reflect latest version of datatables... so I had to put any for dtOptions... going forward, let you know Thanks

…

On Thu, Jul 14, 2022 at 3:05 PM Surya Teja K ***@***.***> wrote: You must be using an older version of angular-datatables. Can you remove node_modules directory, upgrade to latest version and try again? — Reply to this email directly, view it on GitHub <#1668 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABDZBJRNPRZ2NWRIALVDI3LVUAGA3ANCNFSM53SDLEGA> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>

[advapiIT]

Hello,
Lastest version of angular-datatables is build on Angular 14, I can't upgrade right now...

[advapiIT]

I've updated to angular 14.... the approach works... I've got an issue where the icon I've appears only after I click one time to the grid....

After I click

I tougth the issue was with InlineSVG but the edit button you see is a simple png image,so I need to investigate further.

Any suggestion on this? I try to create a repo in a short
Thanks