Guide on incorporating jQuery-extended bootstrap components in Angular

Question

Guide on incorporating jQuery-extended bootstrap components in Angular

Currently, I am exploring the integration of the Bootstrap 3.3.7 popover component (since I cannot use the ng version) into a new Angular 4 application. To achieve this, I initially installed:

npm install --save jquery @types/jquery bootstrap

Following that, I included the necessary CSS and scripts in angular-cli.json file:

 "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/bootstrap-tour/build/css/bootstrap-tour.css",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js",
    "../node_modules/bootstrap-tour/build/js/bootstrap-tour.js"
  ]

Then, within the typings.d.ts file, I defined an interface as follows:

interface Jquery { 
   popover(...any) : any;
}

Afterwards, I imported jQuery into my component using the code snippet below:

import * as $ from "jquery"

However, upon attempting to execute the popover method, I encountered a compilation error:

('#test1').popover('show'); // An error is triggered here for the popover method.

How can TypeScript be configured to recognize it properly?

angular typescript

Answer 1

Answer №1

Here is the method I used to make this work on a brand new Angular project generated with the cli:

npm install --save jquery <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="41232e2e35323533203101726f726f">[email protected]</a>

I made changes to the app.component.ts file as follows:

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';

declare const $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('div') divElement: ElementRef;

  ngAfterViewInit(): void {
    $(this.divElement.nativeElement).popover({content: 'foobar', placement: 'bottom'}).popover('show');
  }
}

and updated the app.component.html accordingly:

<div #div>hello there</div>

By adding the scripts and styles to the angular-cli.json, these files are included in the global scope. Importing them as you normally would could lead to duplicate imports of jQuery, particularly after the bootstrap scripts.

While it's generally preferred to import scripts in a way that allows typescript/webpack to handle them efficiently, in this case, using the global scope method seems necessary due to bootstrap's dependencies on jQuery. To avoid errors in typescript though, include the line declare const $: any;

You can find the complete GitHub repository here

I hope this explanation proves helpful!

Answer 2

Here is the method I used to make this work on a brand new Angular project generated with the cli:

npm install --save jquery <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="41232e2e35323533203101726f726f">[email protected]</a>

I made changes to the app.component.ts file as follows:

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';

declare const $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('div') divElement: ElementRef;

  ngAfterViewInit(): void {
    $(this.divElement.nativeElement).popover({content: 'foobar', placement: 'bottom'}).popover('show');
  }
}

and updated the app.component.html accordingly:

<div #div>hello there</div>

By adding the scripts and styles to the angular-cli.json, these files are included in the global scope. Importing them as you normally would could lead to duplicate imports of jQuery, particularly after the bootstrap scripts.

While it's generally preferred to import scripts in a way that allows typescript/webpack to handle them efficiently, in this case, using the global scope method seems necessary due to bootstrap's dependencies on jQuery. To avoid errors in typescript though, include the line declare const $: any;

You can find the complete GitHub repository here

I hope this explanation proves helpful!

Guide on incorporating jQuery-extended bootstrap components in Angular

Answer №1

Similar questions

I want to make my code available as an npm library on GitHub, but when users install it, I want them to only get

Creating a new project with Angular CLI version 7.2.1 is encountering some issues

Issue: Module not found; Typescript error encountered in a react application

Changing the color of a specific span using Angular

What is the best way to define a model class within my Angular 2 component using TypeScript?

What are the steps for setting up Angular and Rails on Nginx for deployment

Compilation error in VueJS: missing dependency detected

Ways to efficiently update the API_BASE_URL in a TypeScript Angular client generated by NSwag

I'm curious why my phone number is being treated as an object when it's passed in as a prop

The Ionic tab is already finished displaying even before the data has completed loading

Is it advisable to include auto-generated files in an npm package upon publication?

Angular 2 Error: TS2322 - The type 'Subscription' cannot be assigned to the type 'Observable<MouseEvent>'

(angular 8) Error occurred when converting a file or image to FormData due to an invalid value (Note: FormData object printed as Object Form{})

leveraging Angular 2 in combination with an express-node js API

Dynamic starting point iteration in javascript

Update the content of a page on an Ionic application every few minutes

Error encountered in Snap SVG combined with Typescript and Webpack: "Encountered the error 'Cannot read property 'on' of undefined'"

Guide on creating a TypeScript function that extracts specific properties from an object using a filter criteria

The process of invoking the AsyncThunk method within the Reducer method within the same Slice

Encountering an issue while attempting to initiate a nested array: "Cannot assign a value to an optional property access in the left-hand side of an assignment expression."