using jQuery + Bootstrap with Angular4

The key here is which jQuery to use where:

* If you want to use the jQuery built in functions:

- You can import it from the node_modules

- OR you can also use the method below

* If you want to use bootstrap functions: Eg. $('#IDselector').modal('show')

- use the global 'jQuery' variable / constructor that jQuery introduces and bootstrap adds functions to.

So something like below should work.

declare var jQuery:any;  // this will allow the usage of global jQuery that has bootstrap extended functions  @Component({  ... }) export class YourComponent{  ... }

Instead of:

import jQuery from 'jquery';

@Component({  ... }) export class YourComponent{  ... }

* The second one would use the vanilla jQuery object, bootstrap functionality will not be available

Reference:

https://stackoverflow.com/a/42896498

The element selector could be anything.

the 'hash scheme' (Eg <div #myModal ></div> ) of ViewChild selector in angular; plus ElementRef etc. is not necessary.

Simple jQuery selectors have also worked for me

* Fair warning - if an id based selector is being used - make sure that there are no repetitions -

- it will introduce funny bugs !

- rather use this approach (summarized below ): https://stackoverflow.com/a/42896498

- use Angular2 based selector:

in component HTML:

#selector

in componen ts:

@ViewChild('selector') mySelector: ElementRef;

// show modal function

function showModal(){

jQuery(this.mySelector.nativeElement).modal('show');

}

Nice blog post on the topic:

http://deanmalone.net/post/using-jquery-from-angular2/