0

I'm trying to create a mat-spinner next to a custom button of a datatable with jquery with no luck so far:

The button is configured as below: 

{
    text: '<i class="fa fa-file-excel-o"></i> Export',
    className: 'btn btn-success btn-sm',
    init: function(api, node) {
       //...
    },
    action: function() {/*...*/}
 }

After configuring the table I create an ng-container in the following way:

this.table
  .buttons()
  .container()
  .append($('<ng-container #export/>'));

I can see the tag is added to the DOM but it's like it doesn't exist for angular 'cause adding @ViewChild('export', {read: ViewContainerRef}) export to my compononent's class always results in undefined. This way I would be able to create dynamically the MatSpinner and add it to the export container.

I also tried to create the spinner the same way as the ng-container but the same result. Do you have any idea how I would get this done?

Thank you in advance!

Improve this question
6
  • 6
    Don't mix angular with jQuery. Since you are manipulating DOM directly without using angular API , the above code is not working. Angular has a different mechanism to manipulate the DOM. Commented May 14, 2019 at 19:12
  • Yes, I'm aware that I shouldn't mix angular and jquery but I don't know how to add the component where I want to add it the angular way with the code I have. I thought adding the ng-container via jquery and then continue to add the spinner the angular way. Commented May 14, 2019 at 19:37
  • @dcg, check this for the dynamic component creation: stackoverflow.com/a/53191913/9386929 Commented May 14, 2019 at 20:15
  • @nircraft Thanks for your reply. I already know how to do that. The thing is that by the time the buttons are created (by the datatable) is that I know where the component should be. My problem is that I'm not able to tell angular to "re-query" the ViewContainerRef some how and always give me undefined, so I'm not able to insert the MatSpinner the way you pointed me out. Commented May 14, 2019 at 20:21
  • 1
    This problem isn’t specific to mixing jQuery with Angular. It’s simply equivalent to opening developer tools and adding an HTML tag with ng-container and expecting angular to somehow have compiled it. Commented May 14, 2019 at 20:36
Related questions
43
Using Jquery Datatable with AngularJs
1
Initializing Datatables with AngularJS
1
Jquery DataTable Angular
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.