html5 - How to save or download PrimeNg chart images - Angular 4 -

i'm using primeng chart module (p-chart) display charts inside cards. requirement is, should able save images (of charts/graphs) clicking download icon. have used ngfor iterate on json object , have displayed chart inside card successfully.

here html:

... <div class="card-media-block" id="chart-{{rcard.id}}">     <p-chart [type]="rcard.typeofreport" [data]="rcard.content"></p-chart> </div> ... 

i found p-chart converted canvas in runtime , doesn't have dedicated id. i've used nearest div element's id reach canvas element using .childnodes property, unfortunately not able save/download image this.

here runtime html generated above block (found inspecting element):

<div _ngcontent-c3="" class="card-media-description" id="chart-reportcard1">     <p-chart _ngcontent-c3="" class="ng-tns-c3-2" ng-reflect-type="bar" ng-reflect-data="[object object]">         <div>             <iframe class="chartjs-hidden-iframe" tabindex="-1" style="display: block; overflow: hidden; border: 0px; margin: 0px; top: 0px; left: 0px; bottom: 0px; right: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;"></iframe>             <canvas width="300" height="150" style="display: block;"></canvas>         </div>     </p-chart> </div> 

here typescript function tried write saving image:

saveimage(pcard): void {     let chartdiv = document.getelementbyid('chart-' + pcard['id']);     let canvaselement = chartdiv.childnodes[1].childnodes[1].childnodes[2];      console.log(canvaselement); // output:- <canvas width="300" height="150" style="display: block;"></canvas>     let imageurl = canvaselement.todataurl(); // error:- property 'todataurl' not exist on type 'node'.     window.location.href = imageurl; } 

i'm stuck problem, kindly help.

look using @viewchildren decorator querylist , elementref iterate through elements

example: inside template:

<div *ngfor="let cdl of chartdatalist">     <p-chart #barchart type="bar" [data]="cdl"></p-chart> </div> 

inside component:

@viewchildren("barchart") charts: querylist<elementref>;  saveimage(event) {     this.charts.foreach(element => {         console.log(element);     }); } 

wiki