2

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?

Caleb Grams
  • 273
  • 3
  • 14

2 Answers2

5

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 >
}
Vahid
  • 6,639
  • 5
  • 37
  • 61
Caleb Grams
  • 273
  • 3
  • 14
0

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());
S.Spieker
  • 7,005
  • 8
  • 44
  • 50