We are creating one project in angular 7. We want to use jquery based library as image picker.
We have imported the library correctly as
import * as 'image-picker' from '..asset/image-picker.min.js'
Also it has been imported as script in index.js with correct path.
Now we are getting stuck about the correct use of this file in Typescript environment.
For example how to use the below example method of the above library in
Angular Module in component and templates.
You CANNOT use jquery based libs in Angular context.
It was clearly not a good practice with the old fashionned AngularJS 1.**, now it's not even possible.
EDIT :
According to this source, it's seem's possible.
But for me, it's clearly not a good idea to insist on using Jquery with Angular 7
I saw this library using jquery so
If you using external library you need to include script of that library in your website using script tag or if you using angular cli you need to edit your angular.json and include that script
then use it in your method
$("select").imagepicker()
You can go to my blog to read detail how to integrate third party library to angular here
Related
I am new to Angular 6 and .Net Core 2.1. I've created a some application but now I need to make use of jquery events. I have installed Jquery packages to node_modules as well.
Could anyone please help me!!
Thanks in advance
Even in the angular-cli.json file, I've added the jquery files and my custom js file.
But still not working.
Below are my configuration and code
Solution Structure
You will find here an example link
I would recommend to keep JQuery out of your Angular project. You have to understand how Angular 2+ works and you will see that there is no need for JQuery.
With JQuery you were selecting an element in the page and modify it but with Angular the UI changes based on a model property. It is another way of thinking about the UI.
You can read more about the differences between the two here link. I also tried to use JQuery when I began using Angular because of my previous experience but I learned that was a mistake.
if you want to use jQuery u will need to put the files in the wwwroot folder. You can link it from there.
Typescript is a great language, but I haven't use it in my project, the reason is that my project is a traditional website with many page (asp.net core MVC), and all tutorial I can found is for SPA (anglerjs,vuejs ect.) and I use many jquery plugins in my project. and I'm confusing about javascript's module system.
and here is my question:
do I must using npm, and how do I configurate it to download package to the folder I wanted ?
how do I load jquery and it's plugin ?
what module loader should i use?
do I must use webpack ? and how to config (multiple output files are needed)
I already try to use typescript without module , and use namespace instead but a problem is that I can't define a repeated public function or variable (sometime I copy and paste code from one to another, and a few file structure similar but not the same (they expose the same variable but they don't in one page))
I know there a lots of question there, but even if you only know one answer of above question, please share you answer to me! it will be really helpful
I am trying to create a iOS/Android app based on a client side html5 web project, (i.e. a site) I did.
I thought Ionic would be the ideal choice, that it would help me to port my web application as soon as possible.
In my site, I would use the 'script src="https:// ..."' tag to load the external lib, then calling it in another script
tag. However, I can't import and use it in Ionic3.
I tried many solutions tagged with 'ionic2' and nothing really seems to work.
It also seems no one knows a general solution for this, since each answer was case-specific.
Does anyone know a general way of importing external js file and using its objects and 'classes' in ionic3?
(I would prefer to load from the web, but I am also accepting to download and load it fro file. )
(If ionic isn't the best way of accomplishing my objective, I am open to suggestions)
I think you need to wait till release the Ionic 4 and Stencil.
What is all about Ionic 4 and Stencil?
The magical, reusable web component generator.
Stencil is a tool for building modern Web Components
Stencil combines some of the best features from traditional
frameworks, but outputs 100% standards-compliant Custom Elements, part
of the Web Component spec.
Stencil was created by the Ionic Framework team to build faster, more
powerful mobile and web apps. Stencil is the foundation for the next
generation of Ionic Framework, but is completely independent of Ionic
or any other UI framework.
Here you can see the official doc.
Nice video about the power of Ionic 4
Nice article about it
First of all have a look at this useful ionic resource, it explains how to add thirs party libraries using npm.
If you cannot use npm because of whatever reason you have to put the source .js file into your assets/js folder and import it in your index.html using a <script> tag. Then you have to tell typescript that your library exists. This is done like so: declar var <library-handle>. Where <library-handle> can be an exported function/class if the library already uses ES2015 or the object which exposes the functions using prototype. This is the tricky part where you may have to try a few things until you get it to work.
You can have a look at my answers here, here and here where I explained how to add different third party libraries to ionic projects.
I want to add this library to my angular webapp
<script src="https://secure.mlstatic.com/sdk/javascript/v1/mercadopago.js"></script>
But i havent been able to do it. What would be the correct way to integrate a javascript library?
The underlying issue is that Typescript won't understand the types used by the library because it's in JavaScript form. Take a look on this github site for the library you want to load and then you can install the type signatures:
https://github.com/DefinitelyTyped/DefinitelyTyped
I have developed a custom Joomla template, and I need to add a piece of custom javascript to a Joomla core module (mod_articles_news), without a plugin, if possible (this should be so simple that I don't think I want to use a third party plugin for that). And async, if possible.
I have been searching thoroughly, but haven't found the perfect solution. Either they want me to install a plugin or the solution refers to a custom written module (suggesting to add JS before installation of module) while I am dealing with a core module (Articles Newsflash) that is already installed per definition. (The reason I need to use JS is to make a conditional design change, presently not possible with CSS).
I have been following the steps outlined here, but to no avail. Namely, I added the following code into the module's template folder (mod_articles_news/tmpl/my-template-name.php)
<?php
JHtml::script(Juri::base() . 'templates/my-template-name/js/myScript.js');
?>
(Of course, I have added the myScript.js file into the above location).
When checking it live, nothing happens, the browser is not loading my JavaScript at all (the script itself is tested and it works).
Please help me what I am missing here. Thank you in advance!
If you want to do customization you should use a Joomla! template for this. A template determines the basic HTML including the necessary CSS/JS for your site. In addition it can contain overrides for modules and components so you can do even more customization without touching any of the original code.
What you want to do sounds like a simple customization. Just add any CSS/JS which is necessary to achieve your task to the template.
You could try
<?php
JHTML::script('templates/my-template-name/js/myScript.js');
?>
alternatively, is there any reason you can't add it via your custom template, as suggested by Sven Bluege