How to import jquery and mCustomScrollbar plugin into Angular2 component

Question

I have a problem with import these modules to my angular2 component. I using angular2-webpack-starter from AngularClass.

I install dependecies with npm:

npm install jquery --save
npm install malihu-custom-scrollbar-plugin --save

and install typings:

typings install jquery --save --ambient
typings install mcustomscrollbar --save --ambient

And i want to use it in component like this:

jQuery('.selector').mCustomScrollbar();

What is the best solution to do that?

I tried to use this solution: Whats the best way to use jquery widgets inside angular 2?

But it's not work, i got error "jQuery is not defined".

nthaxis · Answer 1 · 2017-01-11T22:19:48.697

USING
Angular: 2.0.0
Typescript: 2.0.2
Angular-cli: 1.0.0-beta.16
webpack: 2.1.0-beta.22
node: 4.6
npm: 2.15.9

ANSWER
Add types to src/tsconfig.json

SOLUTION

Get Required packages
npm install jquery malihu-custom-scrollbar-plugin --save
npm install @types/jquery @types/jquery-mousewheel @types/mcustomscrollbar --save-dev

Add plugin css and scripts to angular-cli.json in your root folder

//angular-cli.json
"apps": [
    {
        ...,
        "styles": [
            ...,
            "../node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css"
        ],
        "scripts": [
            "../node_modules/jquery/dist/jquery.js",
            "../node_modules/malihu-custom-scrollbar-plugin/node_modules/jquery-mousewheel/jquery.mousewheel.js",
            "../node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"
        ],
        ...
    }
]

Add types to src/tsconfig.json

//tsconfig.json
{
    "compilerOptions": {
        ...,
        "typeRoots": [
            "../node_modules/@types/"
        ],
        "types": [
            "jquery","jquery-mousewheel","mCustomScrollbar"
        ],
        ...
    }
}

Make Directive

//scrollbar.directive.ts
import {Directive, ElementRef, OnInit} from '@angular/core';
declare var $:any;  //<-- let typescript compiler know your referencing a var that was already declared

@Directive({
    selector: 'scrollbar',
    host: {'class':'mCustomScrollbar'},  //<-- Make sure you add the class
})
export class ScrollbarDirective implements OnInit {
    el: ElementRef;
    constructor(el:ElementRef) {
        this.el = el;
    }
    ngOnInit() {
        //$(function(){ console.log('Hello'); }); <--TEST JQUERY
        //check if your plugins are loading
        //$().mousewheel) ? console.log('mousewheel loaded') : console.log('mousewheel not loaded');
        //$().mCustomScrollbar) ? console.log('mCustomScrollbar loaded') : console.log('mCustomScrollbar not loaded');

        $(this.el.nativeElement).mCustomScrollbar({
            autoHideScrollbar: false,
            theme: "light",
            advanced: {
                updateOnContentResize: true
            }
    });

Include directive in ngModule and apply in your component's template

//app.module.ts
import {ScrollbarDirective} from "./shared/UI/scrollbar.directive";
import {AppComponent} from "./app.component";

@NgModule({
...
    declarations: [
        AppComponent,
        ...,
        ScrollbarDirective
    ],
...
})
export class AppModule{}

//app.component.ts
@Component({
    selector: 'dashboard',
    templateUrl: `
        <scrollbar>
            <div *ngFor="let thing of things">thing</div><br/>
        </scrollbar>
    `
})

Hey Thanks, for such a well constructed answer. I have learned a lot form this! — Irv Lennert, Dec 21 '16 at 07:13

score 0 · Answer 2 · answered Apr 20 '16 at 21:37

0

You need to include JQuery and plugin somewhere in your page:

answered Apr 20 '16 at 21:37

kemsky

14,727
3
32
51

TGH · Answer 3 · 2016-04-21T02:05:23.157

You have to include jquery/plugin via script tag in your index.html page.

Assuming you are using TypeScript you can refer to jquery from the component like this:

import {Component, ElementRef, OnInit} from 'angular2/core';

declare var jQuery:any;
@Component({
    selector: 'jquery-integration',
    templateUrl: './components/jquery-integration/jquery-integration.html'
})
export class JqueryIntegration implements OnInit {
    elementRef: ElementRef;
    constructor(elementRef: ElementRef) {
        this.elementRef = elementRef;
    }
    ngOnInit() {
        jQuery(this.elementRef.nativeElement).mCustomScrollbar();
    }
}

More info here: http://www.syntaxsuccess.com/viewarticle/using-jquery-with-angular-2.0

How to import jquery and mCustomScrollbar plugin into Angular2 component

3 Answers3