How to load data in constructor, and render it via Chartjs in ngAfterViewInit?

Question

Here's my problem. A lot of examples of using Chartjs in Angular only assume that data is already there , and they render it in ngAfterViewInit .

However, I can't figure out how to meet my requirements:

• I need to load data in the constructor
• While loading data, I set a Boolean attribute for showing an indeterminate mat-spinner
• Of course, loading data is truly indeterminate, and I can't know when it's loaded (promise land maybe)
• When data is loaded, I need to use Chartjs API to draw data into canvas
• If I do it in the constructor, then I encounter null reference for document.getElementById('canvasId') , since it's not rendered yet.
• If I load data in constrcutor and want to render canvas in ngAfterViewInit , then I don't know when data is loaded, since it's indeterminate, and I encounter null reference for the properties of my data object.
• If I load data in the ngAfterViewInit , then Angular complains that ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: undefined'. Current value: 'ngIf: true' ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: undefined'. Current value: 'ngIf: true' ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: undefined'. Current value: 'ngIf: true' . This error is related to mat-spinner *ngIf='progress'

I'm stuck at this point on how to reconcile these requirements. Any help?

Answer 1

This post uses a service to get data and render the chart after the data is loaded. Hope it helps!

Angular Load Data from Service

I was getting the expression changed error but loading and executing in OnInit worked for me.