在调用函数之前设置类范围变量

Question

I have a component that creates a d3 chart. It creates the chart in a div element based on its id , so I'm setting the id of the div during the initiation of the component and then calling a private function that creates the chart:

HTML:

<div class="widget">
    <div class="header">Progress Status</div>
    <div id="{{chartId}}" class="gauge-chart-container"></div>
</div>

JavaScript:

public ngOnInit(){
    this.chartId = 'chart-'+uuid();
    this.createGaugeChart(this.chartId);
}

The problem here is the function createGaugeChart runs before the div elements gets the id assigned, so when I add a timeout function it works:

public ngOnInit(){
    this.chartId = 'chart-'+uuid();
    setTimeout(() => {
        this.createGaugeChart(this.chartId);    
    },1000);
}

I'd rather not add a timeout of course, so is there a way I can wait on the HTML to render with the scope variables before calling any functions? Or maybe I'm calling the createGaugeChart function in the wrong location?

Answer 1

Have a look here: https://angular.io/guide/lifecycle-hooks .

I think you are probably after ngAfterViewInit()