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:
#selectorin componen ts:
@ViewChild('selector') mySelector: ElementRef;// show modal function
function showModal(){
jQuery(this.mySelector.nativeElement).modal('show');
}
Nice blog post on the topic: