-1

This is not the first time I'm facing this problem, and I'm pretty sure there are several 'work-around' to this problem. Every now and then I'm looking online to some front design code to improve the projects the UX of projects I'm working on. It might be a carousel, some animation, etc ... Most of the time those project are full JS and I have no idea how to use them / adapt them / integrate them so they can be used in my Angular 4 app.

Let's say I want to integrate this : https://gist.github.com/CodeMyUI/9e60eaddc810c3aac9558af52859459b

  • Should I add the .js file as an external library and to figure out how to use it in my Angular App ?

  • Should I find a way to write JS inside Angular ? (TS file)

  • Is there a solution not listed here that could do the trick ?

jineb92
  • 189
  • 1
  • 4
  • 13
  • ts file is to define the component/module etc. What you have to do to use other sources that you need for your component is just to import them. – Mert Mertce Jan 29 '18 at 09:21
  • You definitely don't want to integrate a jQuery plugin in an Angular app. You're bound to fail, ultimately. Look for the same thing as an Angular module/plugin. – Jeremy Thille Jan 29 '18 at 09:24
  • Possible duplicate of [jQuery is not defined in bootstrap-sass](https://stackoverflow.com/questions/45339209/jquery-is-not-defined-in-bootstrap-sass) – Rahul Singh Jan 29 '18 at 09:25
  • @JeremyThille Ok so I can do it by using the global variable, but I definitely don't want to do so ? – jineb92 Jan 29 '18 at 09:26
  • well, of course. Why would you want to mix up jQuery and Angular? They are two radically different frameworks that really don't work the same way. Angular generates the DOM, jQuery manipulates it. Do something with jQuery, Angular will have no idea what happened. Not to mention that you'd produce super-heavy clumsy unmaintainable code full of workarounds, and you'd have to load two libraries instead of one. Use jQuery OR Angular, not both at the same time. But eh, you do what you want :) – Jeremy Thille Jan 29 '18 at 09:28
  • You can import it in app module if you want it to be globally available, or in other module/component whatever if you need it locally. – Mert Mertce Jan 29 '18 at 09:28
  • @MertKoksal thanks a lot, i'm going to try this out ! – jineb92 Jan 29 '18 at 09:30
  • @jineb92 yeah do that :) And ignore my advice – Jeremy Thille Jan 29 '18 at 09:30
  • @JeremyThille Ok so most of the time I wan to find an Angular version of what's been done in JQuery ? What if there are no 'Angular' version ? – jineb92 Jan 29 '18 at 09:31
  • Ah, if there's no ready-made Angular module, you'll have to develop something yourself, of course. In Angular!! But it will work, unlike forcing Angular to integrate jQuery stuff. – Jeremy Thille Jan 29 '18 at 09:32
  • Sure, I talk generally to use any .js. Jeremy is right about that you would not need jquery if you already use angular. But anyway, if the javascript code that you use does not have already a type definition, you have to declare it by yourself: "declare module 'my-library'" – Mert Mertce Jan 29 '18 at 09:35
  • Ok ! Thanks a lot to both of you :). – jineb92 Jan 29 '18 at 09:44

1 Answers1

1

In your TypeScript now you need to import it by the given name, so in your TS controlle :

import * as yourPreferedName from 'your-library';
yourPreferedName.method();
Léo R.
  • 2,620
  • 1
  • 10
  • 22