How to add smoothie chart in Angular 8

Question

I am very beginner in Angular 8, I am adding smoothie chart in my Angular 8, there no tutorial in google smoothie chart added to angular 8 help me to solve this or give me examples

npm install smoothie added my angular 8 project
import {SmoothieChart} from "smoothie"; added to app.component.ts

Code:

import {SmoothieChart} from "smoothie";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'dashboard';
  constructor(){}
    ngOnInit()
    {

      var smoothie = new SmoothieChart();

    }
}

App.component.html

<div>
  <canvas id="mycanvas" width="800" height="200"></canvas>
</div>

In Javascript smoothie .streamTo(document.getElementById("chart"), 500); In angular 8 how to add above code

Refer to this question. https://stackoverflow.com/questions/48226868/document-getelementbyid-replacement-in-angular4-typescript For Life-cycle refer this. https://angular.io/guide/lifecycle-hooks — Himanshu Shekhar, Apr 29 '20 at 08:16

score 1 · Answer 1 · answered Apr 29 '20 at 06:08

First, you need to let Angular initialize the DOM, so you can't do it in the ngOnInit (because the element is not yet inserted in the DOM), you need to implement for example AfterViewInit and the related method ngAfterViewInit.

Then, you could use document.getElementById but it's not the best way to achieve it in Angular, you should use @ViewChild to retrieve the related element.

How to add smoothie chart in Angular 8

1 Answers1