chart.js not getting rendered inside ng-template in angular

Issue

description

i have declared chart.js inside ng-template but chart is not rendering properly

sample code

<div style="display: block; width: 100%">
  <ng-container *ngTemplateOutlet="qualitySurveyTemp"></ng-container>
</div>

<ng-template #qualitySurveyTemp>
  <canvas id="canvas">{{ chart }}</canvas>
</ng-template>

it is working fine when i use like below

<div style="display: block; width: 100%">
  <canvas id="canvas">{{ chart }}</canvas>
</div>

sample - https://stackblitz.com/edit/angular-chartjs-barchart-sjamlr?file=src%2Fapp%2Fapp.component.html

Solution

It seems like that because you are using trying to plot the chart in a sub template it is not available known in the ngOnInit hook. You can see this by trying to log document.getElementById('canvas'), this will return null. If you change to the ngAfterViewInit hook to create the chart it works fine:

https://stackblitz.com/edit/angular-chartjs-barchart-uqqnay?file=src%2Fapp%2Fapp.component.ts

Answered By - LeeLenalee