Using jQuery plugin with Angular 5 (Typescript) failed

Question

I am trying to integrate this plugin: https://github.com/gridstack/gridstack.js into a fresh Angular 5 (Typescript) application but I am facing this error:

I have installed this jQuery library using: npm install gridstack

Here is my code:

app.component.ts

import { Component, OnInit } from '@angular/core';

import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  title = 'app';

    constructor() {}

  ngOnInit() {
    $(document).ready(function(){
      // It works.
      $("button").click(function(){
        var div = $("div");
        div.animate({left: '100px'}, "slow");
        div.animate({fontSize: '5em'}, "slow");
      });

      // Failed !!!
      $('.grid-stack').gridstack();

    });
  }
}

app.component.html

<div style="text-align:center">
  <h1>
    Hello World!
  </h1>

  <button>Start Animation</button>
  <div style="border:1px solid #555;border-radius:3px;color:white;background:#555;height:105px;width:260px;position:relative; margin-top:10px">jQuery</div>

<div class="grid-stack">
    <div class="grid-stack-item"
        data-gs-x="0" data-gs-y="0"
        data-gs-width="4" data-gs-height="2">
            <div class="grid-stack-item-content"></div>
    </div>
    <div class="grid-stack-item"
        data-gs-x="4" data-gs-y="0"
        data-gs-width="4" data-gs-height="4">
            <div class="grid-stack-item-content"></div>
    </div>
</div>


</div>

Demo showing the error: https://stackblitz.com/edit/angular-1sidhl

it's in question description. using: npm install gridstack — Bmaed Riasbet
– Bmaed Riasbet, Commented Apr 2, 2018 at 13:11
Installing the package does not mean that you are using it. Do you use angular cli? — David
– David, Commented Apr 2, 2018 at 13:12

Dheeraj Kumar · Accepted Answer · 2018-04-02 12:43:45Z

1

Try Below.

In you component.

    declare var $el: JQuery;  // This is missing in your code, you have to declare $ as variable.

    @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
     })
   export class AppComponent implements OnInit {

       ngOnInit() {
    $(document).ready(function(){

This should work.

edited Apr 2, 2018 at 12:43

answered Apr 2, 2018 at 12:39

Dheeraj Kumar

4,2559 gold badges51 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Bmaed Riasbet Over a year ago

Which part you have fixed ?

Dheeraj Kumar Over a year ago

To use $, you have to declare it as variable, which was missing in your code.

Bmaed Riasbet Over a year ago

But I have imported it from 'jquery' package. also in your code you have written $el.

Dheeraj Kumar Over a year ago

You dont need to import. $el is there because simply $ doesnt follow naming conventions of variable in Javascript. Angular is nothing but javascript. to use $(), it must find some variable for it. This works perfectly fine for me.

Dheeraj Kumar Over a year ago

Also $el keeps a reference to the DOM Elements which you are trying to modify.

|

David · Accepted Answer · 2018-04-02 13:21:59Z

0

You need to include the gridstack js file in your .angular-cli.json file in the scripts sections

"scripts":[
//Your other dependencies, including jQuery
"../node_modules/gridstack/dist/gridstack.js",
//other dependencies
]

Then make sure you stop and restart ng serve after modifying the config

answered Apr 2, 2018 at 13:21

David

34.6k13 gold badges90 silver badges124 bronze badges

7 Comments

David Over a year ago

@BadisMerabet: From a quick google search, I'd say it's probably because you forgot to add lodash

Bmaed Riasbet Over a year ago

I think we are getting away from the problem :). how did you know if it's lodash or underscore ? jQuery is working just fine without including it in .angular-cli. the error is: Uncaught TypeError: $(...).gridstack is not a function . it's not because gridstack it's not included. IMHO it's a typing problem of typescript that I am not able to resolve.

Bmaed Riasbet Over a year ago

you can play around with it here :) : stackblitz.com/edit/angular-1sidhl?file=.angular-cli.json . thanks !

David Over a year ago

Have you tried adding installing lodash and adding it to angular-cli.json ? And I did you understand what your stackblitz is means to prove?

David Over a year ago

You can't modify angular-cli.json on stackblitz AFAIK, so I cannot show you actual example (you can put anything in the scripts section it won't be loaded). I managed to make your stackblitz work by including the files in index.html, but it's not good as you need to add a setTimeout to have gridstack plugin recognised, otherwise the component is loaded before the plugin is ready

|

Bmaed Riasbet · Accepted Answer · 2018-04-02 16:57:27Z

0

Replacing this line:

import * as $ from 'jquery';

By:

declare var $: any;

Fixed the error.

answered Apr 2, 2018 at 16:57

Bmaed Riasbet

15.1k9 gold badges42 silver badges57 bronze badges

Collectives™ on Stack Overflow

Using jQuery plugin with Angular 5 (Typescript) failed

3 Answers 3

13 Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

13 Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related