Angular 5 combined with the dynamic capabilities of Popper.JS

Launching a training project that requires Popper.Js in its features has been quite challenging. Despite following Bootstrap's documentation on how to implement Popper.Js, I have encountered difficulties.

As per Bootstrap's docs, I tried initiating Popper.Js by:

$(function () {
  $('[data-toggle="tooltip"]').tooltip();
});

I attempted using it in the main component's ngOnInit, but unfortunately, it did not work as expected. An error message was displayed: "Property 'tooltip' does not exist on type 'JQuery'". Although I imported jQuery and the Bootstrap bundle file, the issue persisted. I even experimented with using "popper.js" instead of bootstrap.bundle.js, but encountered the same error. Both Bootstrap.bundle.js (which includes bootstrap and popper.js in the correct order) and jQuery are imported in angular-cli.json.

javascriptangulartwitter-bootstraptypescriptangular5

Answer №1

To easily install bootstrap, jquery, and popper.js, run the command below: 

  npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="123436363d3a3d3b2839310e000e00073e3938223d010d">[email protected]</a> popper.js jquery --save

Add the following lines to your angular-cli.json file:

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

In your page.ts, include the following line:

declare var $;

Note:

While some JavaScript libraries/frameworks may lack TypeScript declaration files, you can still utilize them in your TypeScript code without encountering compilation errors by using the declare keyword. The declare keyword is useful for creating ambient declarations for variables that may not be originally from a TypeScript source.

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

Creating interactive features for a TypeScript interface

I was looking to create a dynamic interface with custom properties, like so: data: dataInterface []; this.data = [ { label: { text: 'something', additionalInfo: 'something' } }, { bar: { text: ' ...

typescript

Is it possible to provide unrestricted support for an infinite number of parameters in the typing of the extend function from Lodash

I am utilizing the "extend" function from lodash to combine the objects in the arguments as follows: import { extend } from 'lodash'; const foo1 = { item: 1 }; const foo2 = { item: 1 }; const foo3 = { item: 1 }; const foo4 = { item: 1 }; const f ...

javascripttypescript

Alpinejs Mega Menu Issue: Hover Functionality Glitchy

I'm working on a complex Mega Menu project that is activated upon hovering, using the powerful combination of Tailwind CSS and Alpinejs. The functionality is mostly there, but I've encountered some bugs along the way. Despite my attempts to impl ...

javascriptcssmenumegamenualpine.js

What is the correct way to properly enter a Svelte component instance variable?

Currently, I am delving into learning Svelte and specifically exploring how to bind to a component instance as demonstrated in this tutorial: As I progress through the tutorial, I am attempting to convert it to Typescript. However, I have encountered an ...

javascripttypescriptsveltetypescript-eslintsvelte-component

Creating a Dojo HTML template involves incorporating repetitive sections of HTML code within the template structure

I am working with a custom Dojo widget that is based on a template and has an HTML template stored in a separate .html file. Here is the Dojo Widget code snippet: define("dojow/SomeWidgetName",[ "dojo/_base/declare", "dijit/_WidgetBase", "dijit/_Templat ...

javascripthtmldojo

Can jQuery be used to edit an XML file?

Can XML files be updated using jQuery, or is server-side scripting necessary for this task? Thank you ...

javascriptjqueryxml

Incorporate Bootstrap styling into a layout featuring a row containing numerous input fields

I need some help with styling using bootstrap 5. I have set up a codepen for reference: https://codepen.io/korazy/pen/xxmWGOx Here are the issues I am facing: The input height changes to match the row height when text wraps. How can I keep the input at ...

htmlcsstwitter-bootstrapuser-interfacebootstrap-5

Struggling to calculate the total of a property within an array of objects

I'm currently trying to calculate the sum of a specific property within an array object. Although I successfully accomplished this in one component, I am encountering difficulties replicating it in another. The error message being displayed is: this. ...

javascriptvue.js

What strategies can be employed to combine Material-UI Autocomplete and react-virtualized?

Currently, in one of my projects, I am incorporating the Autocomplete component from Material-UI. Given the large number of options to display, implementing virtualization would prove to be highly advantageous. Initially, I referred to the virtualized exam ...

javascriptreactjsmaterial-uireact-virtualizedui-virtualization

Unable to combine two columns within a Bootstrap card

Looking to incorporate two columns into a card structure? <div class="card bg-white black-content"> <div class="card-body"> <div class="col-xs-12 col-sm-6"> <label>test</label> </div> <div class= ...

twitter-bootstrapbootstrap-4

Navigating external pages with Vue Router

Could really use some assistance. I've got a JSON file filled with various URL links, some internal and some external. This is what the JSON structure looks like: [ {stuff..., "Url":"https://www.google.com/", stuff..}, {stuff... ...

javascripthtmlvue.jsvue-router

Passing the array as query parameters and retrieving it using the angular getAll function is the most efficient way

When using this function, I extract the ids of items and aim to send them as an array for retrieval with getAll(). const queryParams: Record<string, string[]> = selectedItems.reduce( (acc, curr, index) => ({ ...acc, [&apo ...

angulartypescriptquery-string

What are the benefits of using a synchronous XMLHttpRequest?

Many developers opt for asynchronous XMLHttpRequest requests, but the existence of synchronous requests suggests that there could be valid reasons for using them. What might those reasons be? ...

javascriptajax

Restrict the number of subscriptions allowed for an rxjs observable

Seeking a replacement for observable, subject, or event emitter that allows only one subscription at a time. The first subscriber should have priority to execute its subscribe function, with subsequent subscribers waiting their turn until the first unsubsc ...

angulartypescriptrxjsobservable

When a large object changes value in Firebase, does it transfer only the delta change in internet bandwidth?

Hello, I am working with a node that contains an array of 1000 nodes, totaling around 60KB in size. rootRef.on('value', function (snapshot){ //callback every changes props , full list obj }); I would like to know: - When a node in ...

javascriptnode.jsfirebasefirebase-realtime-database

Tips for re-formatting JSON data using Lodash / JavaScript

Can anyone help me with reformatting the JSON data below? [ { "name": "Hello", "value": 1 }, { "name": "Hello", "value": 11 }, { "name": "Bye", "value": 2 }, { "name": "Bye", "value": 22 } ] I want to trans ...

javascriptjsonlodash

Tips for incorporating a captcha image into your angular 8 application

I would like to implement a captcha element with an image of letters and an input field for the user, (I prefer not to use the "I am not a robot" version) similar to this example: https://i.sstatic.net/dd1Gb.png Is this feature still available today? ...

angularrecaptchacaptcha

Python script using selenium webdriver to interact with an accordion container and expand its contents (round

After successfully creating a scraper, I encountered an issue where the data I needed to scrape was hidden and required manual expansion before scraping. Upon inspecting the webpage source code, I found that the data was located within 3 different accordio ...

javascriptpythonselenium-webdriveraccordion

What is the best way to convert my MySQL data into JSON in a specific format?

I need help with outputting MySQL data into various formats below: timelist, usersex, and userage from the users table. <script type="text/javascript"> timeList = new Array(), userSex = new Array('female','male','male') ...

phpjavascriptxmljson

Edit esri pop-up template

Can I customize the popupTemplate in Esri to match my design? I currently have a popupTemplate set up like this: popupTemplate: { content: [{ type: "fields", fieldInfos: [{ fieldName: "Name" ...

javascriptreactjsarcgisesri