Unable to use the .modal() function in Angular 8

When I try to use "$("#Popup").modal('show')" on click, it doesn't work.

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

javascriptangulartypescriptsingle-page-applicationangular8

Answer №1

Here are the steps you can take to include jQuery in your Angular project:

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

In the scripts section of the architect => build in the angular.json file, add the path for the jQuery library:

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

Next, modify tsconfig.app.json as follows:

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

Once you have added the type definition for jQuery, you can remove the import statement:

import * as $ from 'jquery';

Answer №2

Consider utilizing ngx-bootstrap from . This library provides Angular Bootstrap components without the need for jQuery. It is recommended to use this official method when incorporating Bootstrap with Angular, as it helps avoid unnecessary inclusion of jQuery in angular applications.

Wishing you all the best.

Answer №3

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

I successfully implemented this solution in my angular.json file.

Answer №4

Make sure to add jQuery to your index.html file and also declare the variable $ in your component.

declare var $: any;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing jQuery for AJAX requests on a timed loop

I'm puzzled by a situation involving an AJAX call within an interval. It seems that the code doesn't work as expected, and I'm wondering why. Initially, I had this code snippet which wasn't functioning properly: setInterval($.ajax({ ...

javascriptjqueryajaxsetinterval

Guide to importing a function from a Javascript module without declaration

Currently, I am utilizing a third-party Javascript library that includes Typescript type declarations in the form of .d.ts files. Unfortunately, as is often the case, these type declarations are inaccurate. Specifically, they lack a crucial function which ...

typescript

Create a new Angular component by leveraging an existing project

In our current Angular 8 project, we have a variety of common components (such as custom datepickers and numeric inputs). The project itself follows the standard structure of an Angular application. Our goal is to separate some of these components into An ...

angularangular-cliangular-elements

What can be done to prevent an ajax call on keyup when there are no search results?

I have implemented an autofill search feature using .ajax call on keyup event. Currently, it triggers a new call when the user inputs more than 3 characters. However, I want to prevent additional ajax calls once there are no more results, allowing the user ...

javascriptphpjqueryajax

Unable to compile Angular 5 using the AOT systemjs configuration

I've hit a roadblock in finding a solution to my issue. Maybe someone out there can lend me a hand. I'm in the process of upgrading from ng 4.4.4 to 5.0.1 and everything seems to be functioning fine in JIT mode. However, when attempting to compi ...

angular

Error with Firebase authentication on a Next.js project using TypeScript

I recently started a personal project using Next.js, Typescript, and Firebase for authentication and database management. While working on a sign-in page with Google integration, I encountered an error labeled as auth/argument-error. According to the Fireb ...

reactjstypescriptfirebasenext.jsfirebase-authentication

Finding and merging duplicate values within a Javascript array

I am working with a dynamically generated array that looks like this: var myArray = ("0% { left:74px; top:202px; }" , "44% { left:427px; top:122px; }", "0% { font-size:11px; }", "55% { font-size:49px; }" ); Within the array, there are 2 entries that ha ...

javascriptarrays

Exploring the concept of Promises through the lens of recursion

I am dealing with a MongoDB collection that looks like this [ { "classId": "1", "name": "Input", "definition": [ { "property": [ { "classId": "12", "name": "One" }, { ...

javascriptnode.jspromise

Toggling classes in Angular for dynamic elements can easily be achieved by using the

I am trying to toggle between the right and wrong classes based on boolean values from an array. The goal is to add a red background class for incorrect answers and a green background class for correct answers. Unfortunately, I'm having trouble getti ...

angulardomclickdom-events

Exploring the capabilities of utilizing Await/Async functions in Node.js

Here is my custom Axios Request function to make API calls. export function axiosGet (url) { return opsutils.get(url) .then(function (response) { return response.data.data; }) .catch(function (error) { return 'An error occu ...

javascriptnode.jsasync-await

How does Angular2 indicate the modification in a segment of Component?

ReactJs utilizes virtual DOM for rendering changes, whereas Angular2 does not have a virtual DOM. However, Angular2 is reactive similar to ReactJS. In Angular2, with any change, the whole component does not need to be modified, only the portion of the co ...

angular

Concealed checkbox value in jQuery

I have a problem with setting the hidden checkbox "marketingPhone" to TRUE when the "marketingAAA" checkbox is checked as true. This part works fine. However, if any other checkbox on the page is set to TRUE, then it also sets "marketingPhone" to TRUE. I ...

javascriptjqueryhtmlcheckbox

What is causing this to function properly on Firefox but not on Chrome or IE?

After clicking the process_2banner button on my html page, a piece of code is executed. Surprisingly, this code performs as expected in Firefox, but not in Chrome or Internet Explorer. In those browsers, although the ajax code is triggered, the div spinner ...

javascriptjqueryajax

Warning: The use of jQuery load to trigger a Synchronous XMLHttpRequest on the main thread is now considered deprecated

$('#in-view-contents').load("/browse/".concat(selectedId), function(responseData){ var contentsLabelEl = document.getElementById("refined-contents-container"); contentsLabelEl.style.display = "block"; var arrayOfReloadScripts = ["/js/ ...

javascriptjqueryajax

An easy way to showcase Wikipedia's JSON data using JQuery

I would like to showcase the information found in the "extract" section of this JSON data retrieved from Wikipedia: { "query": { "normalized": [ { "from": "india", "to": "India" } ...

javascriptjqueryjsonwikipedia-api

Tips for adapting this code to be compatible with react-router v6

Within ProtectedRoute.js, the following code is implemented: const ProtectedRoute = ({ component: Component, ...rest }) => { const { loading, isAuthenticated, user } = useSelector((state) => state.user); return ( <Fragment> {!load ...

javascriptreactjsreact-routermern

The clash between Angular.json's CSS styles configuration and a component's own CSS settings

After experimenting with both angular.json's CSS setting and component CSS setting, I noticed that the component CSS setting is not fully applied. I am looking for a way to ensure that the component CSS setting works properly in a particular componen ...

cssangularbootstrap-4

What is the significance of an empty href attribute in the HTML <base> tag?

If my website URL is: http://example.com/path/to/dir/index.html And I decide to proxy this page through: http://proxyserver.com/path/to/dir/index.html. I would like all relative URLs on the page to be resolved by proxyserver.com instead of example.com. Wh ...

htmlangularbase-tag

Using AngularJS to link a model referenced in the view (ng-bind) to a $resource obtained from an API

I'm currently facing a challenge in Angular where I need to establish a connection between a database object displayed in the html view and its corresponding instance through a json API. While I have a functioning api and $resource, I am struggling t ...

javascriptruby-on-railsapiangularjsangularjs-resource

Issue with Angular 17 button click functionality not functioning as expected

Having trouble with a button that should trigger the function fun(). Here's the code snippet I'm using. In my TS file: fun(): void { this.test = 'You are my hero!'; alert('hello') } Here is the respective HTML: &l ...

javascriptangulartypescript