Integrating Interact.js with an Angular Project

Question

I need to use the functionality provided by Interact.js, such as draggable, resizable and such, in an Angular project, but i can't find a solid way of importing it in typescript.

I've read about some work-arounds by defining it as a function, but i just want to know if that's the proper way to do it.

Beginner

Answer 1

Interactjs team added type definition so you can use with typescript. Use NPM install instead of separate file like

npm install interactjs

Then the regular import should work

import * as interact from 'interactjs';

Drice

thanks for pointing this out! i was really confused because of some posts that stated that i have to declare it as a function and, furthermore, some of the github issues made matters worse, like this thread in the github project ( github.com/taye/interact.js/issues/572 ) – Beginner

how did you implemented the interact.js functions in typescript? – Psi

@SenAlexandru I don't understand ? doesn't this solution works ? what you are trying achieve ? – Drice

@Reza I've used the import, but there are js functions that are implemented at the beginning of the class, like ``` interact('.draggable') .draggable({ // enable inertial throwing inertia: true, // keep the element within the area of it's parent modifiers: [ interact.modifiers.restrictRect({ restriction: 'parent', endOnly: true }) ],... ``` which i don't know how to implement in typescript – Psi

@SenAlexandru unfortunately still i don't understand the problem :( It would be nice if you ask new question with code sample and error details. – Drice

@Reza Just go to the interactjs.io website. there, every example has tabs for html, css and js. So, in order to drag some items for example i have to copy that chunk of js code. Since angular is working on typescript and not on js, how do i implement that piece of code to make it work? – Psi

Hopefully I understood now!, typescript accept any vanila javascript, so paste the code inside any ngOnInit or ngAfterViewInit and make sure you have a DOM element with that class selector like interact('.my-draggable-element') – Drice

Yep, that's what i've needed. Thanks! – Psi

@Reza Typescript is transpiled to JavaScript after build. So, yes, you can write anything you wish in JS format within a .ts file just because they are basically the same. The only downside is that you cannot have intellisense(if you use VSCode) that points out functions of an object and basically saves up a lot of time, instead of writing code in a blind way. – Beginner

Answer 2

this worked for me:

npm install interactjs

and then use this syntax

import interact from 'interactjs';

meanwhile:

import * as interact from 'interactjs';

throws an error "Type 'typeof import...."

Turbo