CODEWITHSUNDEEP
jqueryangular
Leo Tse
Leo Tse

Reputation: 39

How to use a jQuery plugin in an Angular 2 component?

I would like to use a background image slider plugin called Vegas on only the home page in my Angular 2 app. The jQuery plugin has been installed under the /node_module directory via npm.

Here is my home page component:

import { Component, OnInit, ElementRef } from '@angular/core';
import { Router } from '@angular/router';
import { Title } from '@angular/platform-browser';
import $ from 'jquery';
import 'vegas';

@Component({
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

    constructor(private el: ElementRef, router:Router, title:Title) {
        router.events.subscribe((url)=>{
            title.setTitle('Home Page');
        });
    }

    ngOnInit() {
        $('body').vegas({
            slides: [
                { src: "../../img/home/1.jpg" },
                { src: "../../img/home/2.jpg" },
                { src: "../../img/home/3.jpg" },
                { src: "../../img/home/4.jpg" }
            ]
        });
    }
}

I've got this error:

Uncaught (in promise): Error: Error in :0:0 caused by: __WEBPACK_IMPORTED_MODULE_3_jquery___default(...)(...).vegas is not a function...

It seems the plugin files were not loaded. How do I properly load and use a jQuery plugin?

Upvotes: 1

Views: 3269

Answers (1)

RemyaJ
RemyaJ

Reputation: 5526

You should give path like this.

Import 'vegas' from 'vegas/dist/vegas';

Upvotes: 0

Related Questions