How To Use Javascript Library In Angular Component

I am building a Web-Client, which is supposed to visualize Sensor data (velocity, acceleration) inside a coordinate system. To display the coordinate system i used the library grap

Solution 1:

Did you say?

the HTML of my component

You cannot place scripts code or source references in component template as Angular will automatically sanitize the template and remove any scripts in the template html.

What you can do is

1. Add the reference it in the scripts array in angular.json file, or
2. add the reference in the index.html file
3. write a code to manually inject the script in the DOM

Edit: Steps:

1. Create Assets folder an your angular application is it doesn't already exists.
2. Copy-paste your js file there.
3. Add the js file path in the scripts array in angular.json file, make sure you point to the correct file.

Your component code will be like following

declarevarGraph: any;
graph: any;

ngOnInit() {
    this.graph =  newGraph({
        appendTo : "container",
        canvasWidth : 100,
        canvasHeight : 100,
        colorList : ["#666666","#666666","#00F"],
        xAxisTitle : "X",
        yAxisTitle : "Y"
    }); 
    this.draw();
}

Notice: no need to add this line in your component.ts import * as Graph from '../libraries/graph';