How to include Vivus Javascript in an Angular 2+ project

Question

I have an angular 6 project and I would like SVG animations.

Vivus is a JavaScript class that I would like to inlude.

The first step is to obviously run "npm install vivus" inside the project folder.

I'm guessing after that I need to put something like this in my app.module.ts file: "import * as Vivus from 'Vivus';" and "Vivus" in my imports array.

What steps do I need to take to include Vivus SVG animations in my angular project?

Answer 1

I solved the problem by doing the following steps:

1) npm i -S vivus and npm i -D @types/vivus

2) Open the angular.json file and add the following value to the scripts array: "node_modules/vivus/dist/vivus.js"

3) Add the this line in your component: import * as vivus from 'vivus';

5) Add vivus in the class in the ngAfterViewInit :

ngAfterViewInit() {
    const hi = new vivus('animateWeb', {type: 'sync', duration: 300, start: 'autostart', dashGap: 2, forceRender: false},);<br >
}

Answer 2

I think you can import the library like this: import * as vivus from 'vivus';

and then this is being used after a subscription to an Observable acknowledges the data and has an object as I am using an *ngIf on the markup to wait for this observable data.

const x = new vivus('my-svg-id', this.after());