angular-cli 3rd Party Library - jquery.floatThead 2.0.3

Question

I want to use floatThead in my Angular2 app. I have install jquery as a global library.

In angular-cli.json

"scripts": ["../node_modules/jquery/dist/jquery.min.js",
              "../node_modules/bootstrap/dist/js/bootstrap.min.js",
              "../node_modules/ngx-rating/ngx-rating.pure.amd.js",
              "../node_modules/bootstrap-select/dist/js/bootstrap-select.min.js",
              "../node_modules/floatthead/dist/jquery.floatThead.min.js"
              ],

In the component I have imported both jquery and floatThead as follows

    import * as $ from 'jquery';
    import * as floatThead from 'floatThead';
    ...
    $('card-list-table').floatThead({top:110,
        responsiveContainer: function($table){ 
            return $table.closest(".table-responsive");
        }
    });

There is no complitaion issue but I am getting this runtime error and plugin doesn't work

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_5_jquery__(...).floatThead is not a function
    at CustomerListComponent.webpackJsonp.../../../../../src/app/

It looks even I have imported jquery globally it has an issue jquery plugins getting loaded.

Can someone please suggest whats wrong in this scenario.

score 1 · Accepted Answer · answered Apr 29 '18 at 20:29

1

I was getting the same Error.

Here how did I solve the issue.

First of all I did remove both JQuery and floatThead from angular-cli.json "imports"
Second, I have imported both jquery and floatThead as follows

import * as $ from 'jquery'

import 'floatThead'

And now in my Component ngOnInit it works as expected.

ngOnInit() {
    $(this.el.nativeElement).floatThead({top:40,
      responsiveContainer: ($table) => {
        debugger
        return $table.closest(".table-responsive");
      }
    }); 
}

NOTE: If you are using typescript please make sure to add an interface for floatThead.

It can be done as follows

Go to your typings.d.ts and add

interface JQuery {
  floatThead(options?: any) : any;
}

I hope it helps.

answered Apr 29 '18 at 20:29

Armen Zakaryan

1,037
1
9
7

Your solution worked for me but I cannot remove jquery since bootstrap requires jquery and it gives error if I remove it. Any other solution? – Usman Hussain Jun 01 '18 at 10:05
I am using bootstrap as well without including both bootsrap as well as jquery explicitly under angular-cli.json. – Armen Zakaryan Jun 02 '18 at 11:00
You can include bootsrap into your project differently. This should be helpful. https://stackoverflow.com/questions/50290197/how-to-add-bootstrap-in-angular-6-project. Let me know if I can help more. Thanks. – Armen Zakaryan Jun 02 '18 at 11:03

angular-cli 3rd Party Library - jquery.floatThead 2.0.3

1 Answers1