Angular: как отобразить модальное диалоговое окно (диаграмму) в ng-template

Question

Мое приложение использует Angular 8 с Bootstrap и диаграммой. js. Я пытаюсь отобразить всплывающее окно bootstrap в директиве Angular ng-template. Всплывающее окно (график) отображается, как только пользователь щелкает последний столбец в строке таблицы. Но, как вы можете видеть на картинке, белый фон в два раза меньше реального графика. Как я могу избавиться от этого фона?

html часть

    <tbody>
      <tr *ngFor="let stock of stockList; index as i" (click)="displaySelected(stock);">
        <td style="width: 30px" scope="row">{{ i + 1 }}</td>
        <td style="width: 40px">{{ stock.id }}</td>
        <td style="width: 70px">{{ stock.symbol }}</td>
        <td style="width: 70px">{{ stock.isin }}</td>
        <td style="width: 180px">{{ stock.name }}</td>
        <td style="width: 40px">{{ stock.liquid }}</td>
        <td [class]="getFlagClass(stock.countryCode)" style="width: 14px"></td>
        <td style="width: 180px">{{ stock.exchangeName }}</td>
        <td style="width: 180px">{{ stock.sector }}</td>
        <td style="width: 50px">{{ stock.active }}</td>
        <td style="width: 30px"><img src="assets/img/chart.png"  height="30" width="30" (click)="displayChart(content, stock);"/></td>
      </tr>
    </tbody>

  </table>

</div>


<ng-template #content let-modal>

      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">[name]</h5>
            <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-outline-dark" (click)="modal.close('Save click')">any action</button>
          </div>
        </div>
      </div>

</ng-template>

Составная часть

  displayChart(content, stock: Istock) {

        // Open popup window
        this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
          this.closeResult = `Closed with: ${result}`;
        }, (reason) => {
          this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        });

        const today = new Date();
        const dd = today.getDate();
        const mm = today.getMonth();
        const yyyy = today.getFullYear();

        const dateTo: Date = new Date(yyyy, mm, dd);
        const dateFrom: Date = new Date(yyyy - 1, mm, dd);


        // retrieve dates and Prices
        this.labelsDate = new Array();
        this.dataPrices  = new Array();
        this.http.post(this.apiUrl + '/instrument/getPrices', {id: stock.id, from: dateFrom, to: dateTo } ).subscribe( (result: IinstrumentPrice[]) => {
            result.forEach(x => {
              this.labelsDate.push(x.date);
              this.dataPrices.push(x.close);
          });

          this.canvas = document.getElementById('myChart');
          this.ctx = this.canvas.getContext('2d');

          // display chart
          const myChart = new Chart(this.ctx, {
              type: 'line',
              data: {
                labels: this.labelsDate,
                datasets: [{
                  label: 'Daily prices',
                  data: this.dataPrices,
                  fill: false,
                  borderWidth: 2,
                  borderColor: 'black'
                }]
              },
              options: {
                elements: { point: { radius: 0 } },
                responsive: false,
                display: true
              }
          });
        });
  }

css часть

.row-input {
  font-size: 15px;
  padding-top: 2px;
  padding-right: 1px;
  padding-bottom: 1px;
  padding-left: 2px;
}

input {
  font-size: 15px;
}

.flag-us {
  background-size:contain;
  background-position:50%;
  background-repeat:no-repeat;
  position:relative;
  display:inline-block;
  width:1.33333333em;
  line-height:1em;
  background-image:url(../../assets/img/flags/united-states-of-america.png);
}

.modal-dialog{
  position: relative;
  display: table; /* This is important */
  overflow-y: auto;
  overflow-x: auto;
  width: auto;
  min-width: 300px;
}

Answer 1

Решение состоит в том, чтобы установить параметр {"size: 'xl'} в методе open.

  displayChart(content, stock: Istock) {

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

и html также изменяется

<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>