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

Question

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'.

Answer 1

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.