Using velocity.js in angular component

Question

I am trying to create an angular component that implements this codepen script.

I created the component using ng g component <my-comp-name> so I have the 3 HTML, CSS and ts files in my component.

The HTML and CSS section I just copy-pasted it. The JS part is always the difficulty in merging. Mostly because I have this velocity function.

I tried the following link. I used npm install angular-velocity --save and added <script src="node_modules/angular-velocity/angular-velocity.min.js"></script> in the component HTML.

I tried to see if this worked changing the following line:

<div ng-view class="velocity-opposites-transition-slideUpIn hover-notify">Hover Me!</div> But no animation is shown in the Hover me! text.

What am I doing wrong? or is there an easier way to merge these codes?

---

More things I tried:

In the end, the jQuery part I succeeded using it by doing import * as $ from "jquery"; I tried something similar but all variations fail: import {Velocity} from 'velocity-animate';

With this link I used:import {Velocity} from 'velocity-animate'; and then replace line $(".hex-wrap").velocity("callout.pulse"); with Velocity(document.getElementsByClassName("hex-wrap"), "callout.pulse"); but nothing.

Please! I basically just want to be able to use $(<sth>).velocity(...);. I know I am a newbie but how hard can it be?

---

I solved my problem with a hack (I am still looking for how to use velocity in angular) I did something that "solved" the issue.

I did import 'src/app/languages/computer/script.js'; with the JS directly downloaded from the webpage and at the end of the HTML file I also added it as a script with <script src="'src/app/languages/computer/script.js'"></script>.

There was an issue in the css file. I changed:

.code-description * {
display: none;
}

for

div[class$="-desc"] {
  display: none;
}

So I technically have it working with JavaScript and not using my component ts.

Answer 1

You can try to add node_modules/angular-velocity/angular-velocity.min.js in the script section of your angular.json:

"scripts": [
  "node_modules/angular-velocity/angular-velocity.min.js"
]

Edit: actually this script is for AngularJS, it cannot work with Angular.