Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I am trying to include the following library in my Angular 4 project but am having trouble doing so:-

https://github.com/TonyGermaneri/canvas-datagrid

I have ran:-

npm install canvas-datagrid
But when I try to use the following code in my ts file:-
<canvas-datagrid class="myGridStyle" data="data can go here too">[
{"col1": "row 1 column 1", "col2": "row 1 column 2", "col3": "row 1 
column 3"},
{"col1": "row 2 column 1", "col2": "row 2 column 2", "col3": "row 2 
column 3"}
]</canvas-datagrid>
I get the error:-
Invalid ICU message. Missing '}'
What steps would I need to do to use this in my angular 4 project as the documentation doesn't seem to include angular in it?
//to create grid
var grid = canvasDatagrid({
      parentNode: document.getElementById('gridctr'),
      data: []
//then set test data
grid.data = [
    {col1: 'foo', col2: 0, col3: 'a'},
    {col1: 'bar', col2: 1, col3: 'b'},
    {col1: 'baz', col2: 2, col3: 'c'}
In app.component.html, you should have a container for the grid accordingly:
    < div id="gridctr" >< / div >
That is it.
After installing the npm package canvas-datagrid, I started with including the library in my component:
import * as canvasDatagrid from 'canvas-datagrid';
Then in my html file I added the template:
<div id="grid"></div>
And the following lines of codes I added in the ngOnInit function:
ngOnInit(){
 this.grid = canvasDatagrid({
  parentNode: 
 document.getElementById('grid'),
  data: [],
  schema: [
      name: 'Time'
      name: 'Message' 
 this.grid.style.height = 'calc(100vh - 
 229px)';
 this.grid.style.width = '100%';
 this.addData();
In the above code I have initialized the data for the grid as empty array. 
So for the initialization of the array I have written the below lines:
addData(){
 let data= [];  
 for(let i =0;i<1000;i++){
 data.push({'Time' : new Date() , 
'Message' : 'HELLO' );
 this.grid.data 
 =this.grid.data.concat(data);
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.