4

I tried this and didn't work

<div id="vantajs"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://www.vantajs.com/dist/vanta.birds.min.js"></script>
<script> 

VANTA.BIRDS({
  el: "#vantajs",  
})
</script>

How to bind <script> element's src attribute in AngularJS

According to this we cannot use script tag

Is there any other way to add vantajs ?

Udith Shalinda
  • 487
  • 1
  • 8
  • 20
  • Like any other plain javascript library, it can be imported regularly and used in angular like you would use any other (jQuery and so on). – briosheje Apr 17 '19 at 09:01

1 Answers1

2
  1. Add vanta.js in your angular.json, script object.

  2. declare variable where you want to use that js for e.g. app.component.ts

    import { Component, OnInit } from '@angular/core';
declare var VANTA;
@Component({
     selector: 'my-app',
     templateUrl: './app.component.html',
     styleUrls: [ './app.component.css' ]
})

export class AppComponent implements OnInit  {   
name = 'Angular';

     ngOnInit() {

          VANTA.CELLS({
               el: "#your-element-selector"
          })

      }

}
Sunil Kashyap
  • 2,946
  • 2
  • 15
  • 31
  • Error : cannot find #your-element-selector //I use id="your-element-selector" – Udith Shalinda Apr 17 '19 at 10:14
  • Initialize VANTA in ngOnInit hook, not in the constructor as constructor get call first then HTML renders. (see I've updated my answer) – Sunil Kashyap Apr 17 '19 at 10:37
  • For those who want a simple example of how to setup and use Vanta.js in Angular(14.2 as of writing this). Here's the repo containing the code. https://github.com/chinonso098/simple-vantajs-example-angular – nahaelem Aug 18 '22 at 15:24