CODEWITHSUNDEEP
javascriptjqueryangulartypescriptplugins
ay123123
ay123123

Reputation: 23

Using JQuery Plugins in Angular 4 Applications

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.

Upvotes: 2

Views: 2069

Answers (1)

brando
brando

Reputation: 8431

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.

Upvotes: 1

Related Questions