.modal() function not working in angular 8

Question

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

Answer 1

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

Answer 2

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.