CODEWITHSUNDEEP
jqueryangulartypescriptangular6
JOhns
JOhns

Reputation: 339

Property 'modal' does not exist on type 'JQuery' Angular6

i have below error when i use jQuery in TypeScript Angular6 please help me this

jQuery('#assignsp').modal('show');

following these steps

3 Steps:

Install jQuery. (skip if already installed)

npm install jquery --save Install types for jQuery.

npm install @types/jquery --save

Import jQuery in app.module.ts.

import * as $ from 'jquery';

its show me Error

error TS2339: Property 'modal' does not exist on type 'JQuery<HTMLElement>

error TS2339: Property 'modal' does not exist on type 'JQuery'.

Upvotes: 3

Views: 15654

Answers (3)

Bharathiraja
Bharathiraja

Reputation: 812

I have faced same issue and i have done below steps and it got resolved.

npm install -D @types/bootstrap --save

in your app.module.ts
import * as bootstrap from "bootstrap";
import * as $ from "jquery";

Upvotes: 0

Pramod Patil
Pramod Patil

Reputation: 2763

There is multiple things you were trying to do at same time. First, you need to integrate jQuery with typescript and second, integration of bootstrap modal functionality which eventually has an dependency on jQuery. Lets integrate jQuery first and than will jump on to the bootstrap.

jQuery Installation: you have already done many of things here already

npm install jquery --save

npm install @types/jquery --save

npm i bootstrap --save

Angular configuration: make an entry of jQuery and bootstrap here:

"styles":[
           "src/styles.css",
            "./node_modules/bootstrap/dist/css/bootstrap.min.css"
         ],
"scripts":[
            "./node_modules/jquery/dist/jquery.min.js",
             "./node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]

Typescript configuration: add this lines at top of your component.

/// <reference path ="../../node_modules/@types/jquery/index.d.ts"/>
declare var $: any 
ngOnInit() {
    $('#myModal').modal('show');
}

HTML: add modal code here

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">Modal</h4>
      </div>
      <div class="modal-body">
        Modal content
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

I've tried above way and its working for me. Let me know if you still get an error.

Upvotes: 7

JOhns
JOhns

Reputation: 339

    import * as $AB from 'jquery';
        jQuery('#exampleModal').show();
   jQuery('#exampleModal').hide();

Upvotes: 0

Related Questions