0

I've tried to do everything in angular and not use jQuery. Unfortunately, there's one component that requires it. However, I would like to only load the jQuery plugin .js file on that component (so it's not being loaded everywhere...)

I have done the following

  1. npm install jquery --save
  2. npm install --save-dev @types/jquery
  3. Update Angular-cli.json > scripts > jQuery.min.js

Questions

  1. Is it worth just loading the plugin in the index file?
  2. If not, how is it possible to load the plugin file on the one component that's going to use it?

Any assistance would be much appreciated.

UPDATE

I've loaded the jQuery plugin as mentioned in the answer, but there's an error on:

'$("#myCanvas").annotate(options);'

[ts] Property 'annotate' does not exist on type 'JQuery'.

Is there a disconnect between the loaded file and the typescript file?

  loadAnnotate(): void {
    const jQueryCdnUrl = `assets/scripts/djaodjin-annotate.js`;
    const node = document.createElement('script');
    node.src = jQueryCdnUrl;
    node.type = 'text/javascript';
    node.async = false;
    node.charset = 'utf-8';
    document.getElementsByTagName('head')[0].appendChild(node);
  }


  loadAnnotateSettings(){
    var counter = 0;

			$('#myCanvas').on("annotate-image-added", function(event, id, path){
				$(".my-image-selector").append("<label><input type=\"radio\" name=\"image-selector\" class=\"annotate-image-select\" value=\"" + path + "\" checked id=\"" + id + "\"><img src=\"" + path + "\" width=\"35\" height=\"35\"></label>");
			});


			var options = {
				width: "600",			// Width of canvas
				height: "400",			// Height of canvas
				color:"red", 			// Color for shape and text
				type : "rectangle",		// default shape: can be "rectangle", "arrow" or "text"
				images: ['https://www.w3schools.com/w3css/img_fjords.jpg'],			// Array of images path : ["images/image1.png", "images/image2.png"]
				linewidth:2,			// Line width for rectangle and arrow shapes
				fontsize:"20px",		// font size for text
				bootstrap: true,		// Bootstrap theme design
				position: "top",		// Position of toolbar (available only with bootstrap)
				idAttribute: "id",		// Attribute to select image id.
				selectEvent: "change",	// listened event to select image
				unselectTool: false		// display an unselect tool for mobile
      }
      
      

      $("#myCanvas").annotate(options);
  }

Improve this question

1 Answer 1

Reset to default
2 
constructor() {
  this.loadJQuery()

  const script = document.getElementById('dynamicScript')
  script.onload = //Do your thing now

}


loadJquery(): void {
  const jQueryCdnUrl = `jquerycdn`;
  const node = document.createElement('script');
  node.src = jQueryCdnUrl;
  node.type = 'text/javascript';
  node.async = false;
  node.id = 'dynamicScript'
  node.charset = 'utf-8';
  document.getElementsByTagName('head')[0].appendChild(node);
}
Improve this answer
Sign up to request clarification or add additional context in comments.

13 Comments

Thanks for the response Manzur. Apologies, this is a bit vague for me. Where would this go exactly? Any help would be great, thank you.
text/javascript is the default type of script tags if you're using HTML5, so you should be able to omit that.
@ETX This would replace your implementation of including jQuery in the Angular CLI global and move it to the component.
Updated the answer, you just need to call this function in your constructor or on ngOnInit
Thanks all. In my question I mention that I already have jquery installed. I have another plugin jquery file. This is the file that I wasn't sure where to load. I'm assuming I can use the same approach in your answer for 'myPlugin.js' file too?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.