CODEWITHSUNDEEP
javascriptangulartypescriptsingle-page-applicationangular8
3103
3103

Reputation: 69

.modal() function not working in angular 8

On Click, "$("#Popup").modal('show')" is not working.

HTML 

<a class="btn-profile-login" data-target="#Popup" (click)="loginBtn()">{{SignText}}</a>

TS

import { Component, OnInit, ViewChild } from '@angular/core';
import * as $ from 'jquery';
import * as bootstrap from "bootstrap"; 

export class SampleComponent implements OnInit{
    loginBtn() {
        $("#Popup").modal('show');
    }
}

Error Message:

TypeError: jquery__WEBPACK_IMPORTED_MODULE_9__(...).modal is not a function

Upvotes: 3

Views: 3802

Answers (4)

emrebaris
emrebaris

Reputation: 86

"scripts": [ "node_modules/bootstrap/dist/js/bootstrap.min.js" ]

This worked for me in angular.json

Upvotes: 1

Adrian Brand
Adrian Brand

Reputation: 21628

Use ngx-bootstrap https://valor-software.com/ngx-bootstrap/ It is Angular Bootstrap components that do not require jQuery. It is the official way to use Bootstrap with Angular, you should avoid to include jquery in angular apps when possible

All the best.

Upvotes: 1

Tony
Tony

Reputation: 20082

You can follow these step

npm install jquery --save
npm install @types/jquery --save

Then in scripts section in architect => build of angular.json file we add path for jquery lib

"scripts": [
  "node_modules/jquery/dist/jquery.min.js"
]

Then modify tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["jquery"] // addd jquery here
  },
  "exclude": ["test.ts", "**/*.spec.ts"]
}

Then you can remove this import since you already have type definition of jquery

import * as $ from 'jquery';

Upvotes: 1

KLTR
KLTR

Reputation: 1334

you need to include jQuery in index.html and in your component you need to 

declare var $: any;

Upvotes: 0

Related Questions