Switch to ngAfterViewInit

[amcharts]

Switch to ngAfterViewInit

[Pauan]

@ryzy Angular calls ngOnInit immediately, before any of the child components have been initialized.

That also applies to HTML elements like <div>. You can verify that with this code:

@Component({
  template: `<div id="{{id}}"></div>`
})
export class AppComponent {
  id = "chartdiv";

  ngOnInit() {
    console.log(document.getElementById("chartdiv"));
  }

  ngAfterViewInit() {
    console.log(document.getElementById("chartdiv"));
  }
}

You will see that within ngOnInit, the <div> doesn't exist, but it does exist in ngAfterViewInit

When you call this.AmCharts.makeChart("chartdiv", ...) it will look for a <div> which has an id of chartdiv, therefore the <div> must exist, therefore it is necessary to use ngAfterViewInit