javascript - How to use jquery plugin in angular 4

I am trying to use this jquery plugin for nested drag and drop feature. I have already installed the jquery from npm install jquery --save and typings from npm install @types/jquery --save-dev

i have declared import * as $ from 'jquery'; in my ponent and included the plugin file in index.html page.

Here is my ponent code:

import { Component, OnInit,AfterViewInit,ElementRef } from '@angular/core';
import { MdDialog, MdDialogRef } from "@angular/material";
import { MediaUploadComponent } from '../helper-ponent/media-upload/media-uploadponent';
import * as $ from 'jquery';
// import 'jquery';
// declare const $: JQueryStatic;
// declare var $:any;
// import $ from "jquery";

@Component({
  selector: 'app-appearance',
  templateUrl: './appearanceponent.html',
  styleUrls: ['./appearanceponent.css']
})
export class AppearanceComponent implements OnInit ,AfterViewInit{
  private selectedOption:string ;
  site_icon:any;
  constructor() { }

  ngOnInit() {
  }
  ngAfterViewInit(){
  // jquery plugin nestable
    $('.nestable').nestable();
  //console.log(jQuery.fn.jquery);
  }
}

After all it throws error :

How can i fix this problem?

[i have already tried including the jquery link to index page from the cdn but shows the same error]

Index.html

!doctype html>
<html>
<head>
  <meta charset="utf-8">

  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="+Icons" rel="stylesheet">
  <link rel="stylesheet" href="../assets/bootstrap.min.css">
  <!--<script src=".2.4.min.js"></script> -->

  <script src="../assets/nestable/jquery.nestable.js"></script>
  <script src="../assets/nestable/jquery.nestable++.js"></script>


</head>

....

I am trying to use this https://github./ShinDarth/Nestable jquery plugin for nested drag and drop feature. I have already installed the jquery from npm install jquery --save and typings from npm install @types/jquery --save-dev

i have declared import * as $ from 'jquery'; in my ponent and included the plugin file in index.html page.

Here is my ponent code:

import { Component, OnInit,AfterViewInit,ElementRef } from '@angular/core';
import { MdDialog, MdDialogRef } from "@angular/material";
import { MediaUploadComponent } from '../helper-ponent/media-upload/media-upload.ponent';
import * as $ from 'jquery';
// import 'jquery';
// declare const $: JQueryStatic;
// declare var $:any;
// import $ from "jquery";

@Component({
  selector: 'app-appearance',
  templateUrl: './appearance.ponent.html',
  styleUrls: ['./appearance.ponent.css']
})
export class AppearanceComponent implements OnInit ,AfterViewInit{
  private selectedOption:string ;
  site_icon:any;
  constructor() { }

  ngOnInit() {
  }
  ngAfterViewInit(){
  // jquery plugin nestable
    $('.nestable').nestable();
  //console.log(jQuery.fn.jquery);
  }
}

After all it throws error :

How can i fix this problem?

[i have already tried including the jquery link to index page from the cdn but shows the same error]

Index.html

!doctype html>
<html>
<head>
  <meta charset="utf-8">

  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis./icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="../assets/bootstrap.min.css">
  <!--<script src="https://code.jquery./jquery-2.2.4.min.js"></script> -->

  <script src="../assets/nestable/jquery.nestable.js"></script>
  <script src="../assets/nestable/jquery.nestable++.js"></script>


</head>

....

Share Improve this question edited Jun 18, 2017 at 19:54 asked Jun 18, 2017 at 19:37 Suraj Khanal 5409 silver badges28 bronze badges

Can you show index.html – Ced Commented Jun 18, 2017 at 19:51
@Ced Yes i have updated the question – Suraj Khanal Commented Jun 18, 2017 at 19:55
you are using angular cli ? – Ced Commented Jun 18, 2017 at 19:59
yes i am using angular cli @Ced – Suraj Khanal Commented Jun 18, 2017 at 20:00

Add a ment |

1 Answer 1

Sorted by: Reset to default 7

Ultimately you'd want to install jquery and other libraries in the angular-cli.json

scripts: [
"../node_modules/jquery/dist/jquery.min.js",
"../assets/nestable/jquery.nestable.js",
"../assets/nestable/jquery.nestable++.js"
]

The changes will only apply once you restart ng serve.

EDIT: For further reading and explanation this article might be of help https://github./angular/angular-cli/wiki/stories-global-scripts

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to use jquery plugin in angular 4 - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)