Using JQuery Plugins in Angular 4 Applications

Question

So I am currently trying to use some jquery plugins like Magnific-Popup etc in my Angular 4 application but I'm having some trouble. I installed jquery by doing npm install --save-dev @types/jquery in my terminal and that worked fine, but I'm having trouble getting the actual plugins to work. This is what I tried initially,

 @Component({
 selector: 'app-showcase',
 templateUrl: './showcase.component.html',
 styleUrls: ['./showcase.component.css']
 })
 export class ShowcaseComponent implements OnInit {
 @ViewChild("elementRef") elref2: ElementRef;

 constructor(private elRef: ElementRef) { }

 ngOnInit() {


  jQuery(this.elref2.nativeElement).magnificPopup();

  }

 ngAfterViewInit() {

  }

In order to get typescript to recognize the magnificPopup() function, I tried importing the scripts from the magnificPopup documentation into my index.html (at the bottom of the body tag), but as far as I can tell that is not working. Webstorm says "can not resolve file jquery.magnific-popup.js". I'm also loading the jquery.min script as well, and that seems to work fine.

I also tried running npm-install magnific-popup, but that also failed. Additionally, I tried adding the script into the angular.JSON file but to no avail.

I guess what I'm asking is, what is and how can I go about installing and using a third-party jquery plugin like magnific-pop up into my angular 4 application?

Thanks, any help is appreciated.

brando · Accepted Answer · 2017-06-25 18:55:18Z

I have an Angular project where I need to use (for now) a jquery dependent plugin (nanoscroller). I use angular-cli to do all my build processes and my angular-cli.json file has the following under the "scripts" property:

 "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/nanoscroller/bin/javascripts/jquery.nanoscroller.js"
      ]

Then I use the plugin as follows:

import { AfterViewInit, Component, ElementRef, OnDestroy, Renderer, ViewChild } from "@angular/core";

declare var jQuery: any;

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.scss"]
})
export class AppComponent implements AfterViewInit {
    layoutMenuScroller: HTMLDivElement;
    @ViewChild("layoutMenuScroller") layoutMenuScrollerViewChild: ElementRef;

    constructor() {

    }

    ngAfterViewInit() {
         this.layoutMenuScroller = <HTMLDivElement>this.layoutMenuScrollerViewChild.nativeElement;
        jQuery(this.layoutMenuScroller).nanoScroller({ flash: true });

    }
    //  etc..
}

Perhaps you can adopt this to your use-case.

I tried doing it with the nanoscroller plugin in your example, but I'm getting this error: Property 'nanoScroller' do es not exist on type 'JQuery'.
I'm stumped. This setups works for me. Not sure what is misfiring in your code.
Actually, your setup worked! I just had the scripts loaded incorrectly in the angular.json file. Thanks!

Collectives™ on Stack Overflow

Using JQuery Plugins in Angular 4 Applications

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related