Call jquery file from angular2

Question

I need to add a file already created with jquery in my typescript

for example a file that add effect and animations to html (i have already jquery installed)

declare var jQuery:JQueryStatic;

 $("#id").nameOfMyclassOfjQuery({   });

for example I need to integrate a template that create a gridmanager to run this directly in index.html I need to call like this (after I added grid.js into my index.html)

 $(document).ready(function(){
 $("#id").grid({ );
 });

but if I'm inside a component.ts how to call this ?? when I put this the word grid is not known by jquery $("#id").grid({ );

grid is not a standard function in jQuery. What file did you previously include to make this available? Or which jQuery grid are you using? — Cobus Kruger, Jun 17 '16 at 10:53
I'm using gridmanager https://github.com/neokoenig/jQuery-gridmanager — khalil _diouri, Jun 17 '16 at 13:13

score 0 · Answer 1 · edited May 23 '17 at 12:25

0

There are bunch of questions and answers here. For example Replace draggable function in angular 2

Same applies to your grid

edited May 23 '17 at 12:25

Community

1
1

answered Jun 17 '16 at 11:39

Andrei Zhytkevich

8,039
2
31
45

score 0 · Answer 2 · answered Jun 17 '16 at 13:39

0

I resolve my problem I added just this

interface JQuery {
    gridmanager: any;
}

and I added the gridmanager.js and css files to my project

thanks

answered Jun 17 '16 at 13:39

khalil _diouri

791
3
12
34

score 0 · Answer 3 · answered Mar 13 '17 at 18:05

If you want to call any jquery code in Angular 2 components call them in ngOnInit method. For instance I was using Materialize CSS with Angular 2 and various components of Materialize required initialisation with jQuery, so this is what I did:-

import { Component, OnInit } from '@angular/core';
declare var jQuery: any;
class SampleClass implements OnInit{
    constructor() { }

    ngOnInit() {
         //Your jQuery code here
    }
}

Call jquery file from angular2

3 Answers3