add Vexflow in angular 6

Question

I'm trying to add vexflow to my angular 6 app...

I tried to add this line in my typings.d.ts file

declare var Vex: any;

and vexflow-min.js in my angular.json

  "scripts": [
             ...
             "./node_modules/vexflow/releases/vexflow-min.js",
             ...
            ],

I'm trying to render an element in my app.component.ts

  ngOnInit(){
      var div = document.getElementById("vexflow-test")
      var VF = Vex.Flow;
      renderer = new VF.Renderer(div,VF.Renderer.Backends.SVG);
  }

I can see Vex is correctly loaded (console.log(Vex)) But I got an error telling me Renderer is undefined

AppComponent_Host.ngfactory.js? [sm]:1 ERROR ReferenceError: renderer is not defined

Answer 1

Ok this is working now

   public VF;
   onNgInit(){
        var div = document.getElementById("vexflow-player")
        this.VF = Vex.Flow;
        var renderer = new this.VF.Renderer(div,this.VF.Renderer.Backends.SVG);
        renderer.resize(500, 500);
        var context = renderer.getContext();
        context.setFont("Arial", 10, "").setBackgroundFillStyle("#eed");
        var stave = new this.VF.Stave(10, 40, 400);
        stave.addClef("treble").addTimeSignature("4/4");
        stave.setContext(context).draw();
     }