Chartjs-Angular : how to display a modal-dialog (chart) in ng-template

by

0👍

✅

The solution is to set a parameter {“size: ‘xl’} in the open method.

  displayChart(content, stock: Istock) {

    // Open popup window
    this.modalService.open(content, {size: 'xl'}).result.then((result) => {

and the html is also changed 

<ng-template #content let-modal>

  <div class="modal-header">

    <div class="row">
      <div class="col-sm-6">
        <h4 class="modal-title">{{instrumentName}}</h4>
      </div>
      <div class="col-sm-8">
        <div>last trading day : {{lastTradingDay}}</div>
      </div>
    </div>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>

  </div>
  <div class="modal-body">
    <canvas id="myChart" width="1000" height="500"></canvas>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-light" (click)="modal.close('Close click')">Close</button>
  </div>

</ng-template>

Leave a comment