Vivus.js in Angular 5 Component

Question

I am trying to use this library Vivus.js in Angular 5 and am getting issues from the constructor of Vivus, so I think it's loading the library and using it correctly, I am wondering if anyone could give me some insight as to why its not picking up my element id. Here is the library: https://github.com/maxwellito/vivus

And here is what i've done so far:

This is the svg with the id of 'pill':

            <svg id="pill" width="450px" height="50px" viewBox="0 0 450 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g>
                  <path class="svgnew state" [class.active]="order.status === 'new' || order.status === 'pending' || order.status === 'ready'"
                    d="M25,0 L170,0 L130,50 L25,50 C11.1928813,50 1.69088438e-15,38.8071187 0,25 L0,25 C-1.69088438e-15,11.1928813 11.1928813,2.53632657e-15 25,0 Z" id="Rectangle"></path>
                  <polygon class="svgpending state" [class.active]="order.status === 'pending' || order.status === 'ready'"
                    points="170 0 320 0 280 50 130 50"></polygon>
                  <path class="svgready state" [class.active]="order.status === 'ready'"
                    d="M305,2.84217094e-14 L450,2.84217094e-14 L410,50 L305,50 C291.192881,50 280,38.8071187 280,25 L280,25 C280,11.1928813 291.192881,3.0958036e-14 305,2.84217094e-14 Z" id="Rectangle-Copy" transform="translate(365.000000, 25.000000) rotate(-180.000000) translate(-365.000000, -25.000000) "></path>
                </g>
              </g>
            </svg>

And here is my component code:

I am importing 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('pill', {duration: 2000}, this.after());

This is the issue I get with that code:

ERROR Error: Vivus [constructor]: "element" parameter is not related to an existing ID

I have also tried this:

const x = new vivus(document.getElementById('pill'), {duration: 2000}, this.after());

and I get this issue:

Cannot read property 'constructor' of null

These issues seem to be happening during the process of Vivus calling its setElement() method.

I have found the typings for vivus and wonder if I should also install these: https://libraries.io/npm/@types%2Fvivus

Please let me know if you need to see any more code in my markup or the Observable subscription that runs the vivus object creation after the data is acknowledged.

Serving this page the svg just shows up, does not animate in. Any and all help is appreciated here, I would love to use this library in Angular 5 for animations on svgs. Thanks in advance.

Answer 1

Sorry, I was late, but when I was searching for a solution to the same problem I found this. Possibly you could have missed the element to be placed in the HTML. And shouldn't have to place SVG

<div id="pill"></div>

<script>
  new Vivus('pill', { duration: 200, file: 'link/to/my.svg' }, myCallback);
</script>

Answer 2

You should run your code in the ngAfterViewInit life cycle of component, because 'pill' is not available before the view is initialized. So inside your component you'll have:

ngAfterViewInit() {
  const x = new vivus('pill', {duration: 2000}, this.after());
}