Rendering Angular component inside Datatable.

Ozz1k

Hi there,

I'm a happy user of DataTables as it provides me with everything I need to display responsive and flexible list views. My website is based on Angular 7, so I'm adding Datatables jQuery on top of it. I'm aware this is far from a best practice, but I'm ok with it as long as these libs work together.

A challenge I'm trying to tackle boils down to being able to render a dynamic element inside my Datatable once its responsive row is opened and then access this element in Angular model.

So far I managed to add/remove a div on expanding/collapsing rows in my list, using jQuery and columns.renderer. Trying to understand what would it take to make this dynamically rendered div available for Angular. it looks like I will need a way to catch an event of rendering a div inside each expanded row of my Datatable in Angular and then somehow access the div from Angular model. I'm sorry if this sounds obvious, but I could really use some help from more experienced developers. Thank you!

colin

Hi @Ozz1k ,

I'm not quite clear what you're after, sorry if I'm being slow, but the Responsive extension does offer hooks that maybe useful for you - things such as events, options like the display, and various API methods. Hopefully one of those will give you the hook that you're after,

Cheers,

Colin

Ozz1k

Hi Colin,

Thank you for providing some good references. These would help me manipulate my content relying on JQuery. I have some logic implemented that way and everything works well.

My current challenge is finding a way to access elements rendered inside Datatable with AngularJS. The reason being is that I have a dynamic element that works well with Angular, and I want to show this element inside my Datatable. My current approach involves rendering a placeholder using Responsive hooks and then selecting this element in Angular to place my dynamic element into it.

I hope this paints a picture of my struggle. It may not be a big deal, but I am yet to find a good way to access Datatable content from Angular.

colin

Hi @Ozz1k ,

I'm sorry, but I'm still struggling to see what you're after. We're happy to take a look, but please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Ozz1k

@colin,

You have a fair point. I'm afraid I can't put together a full-featured sample, but I will do my best below.

Let's start with a prototype you already built for me to address my other question (it worked like a charm, thanks again!) - http://live.datatables.net/qecafuci/1/edit

Now imagine I am to insert a dynamic component into the information rendered inside the Datatable upon expanding each of its rows. The twist is to understand how to do it using the AngularJS framework. Here's an example of a dynamic component that resembles the one I am dealing with - https://stackblitz.com/edit/dynamic-component-demo?file=app%2Fapp.component.ts Again, imagine I want to display that inside the expandable areas of the rows of my Datatable.

allan

I fear that we're not going to be able to offer much help here. I know very little Angular, and as I understand your question, it would require knowledge of Angular and how it interfaces with the DOM (which I think is why Colin is a bit unsure - we've not used Angular yet).

I think you'd need to post on SO or similar as an Angular specific question.

Allan

Ozz1k

Hi @allan & @colin ,

Thank you for your replies. I figured this is really out of the scope of the tool. I will try my luck somewhere else.

happy to be a user of Datatables!