How to replace images with divs in ng-bootstrap carousel?-CodePudding

I'm using ng-bootstrap with Angular. I am also using chart.js. I have built two charts that are updated in realtime with data. I would like to present these charts in a carousel, allowing the user to slide to view each chart. I am trying to use the carousel directive offered by ng-bootstrap but I cannot seem to figure out how I might go about replacing the img directive with the two divs I have that wrap the chart canvases.

Here is an example I am trying to replicate, from: StackBlitz Example

<ngb-carousel #carousel [interval]="50000">
  <ng-template ngbSlide *ngFor="let img of images; index as i">
    <div class="picsum-img-wrapper">
      <img [src]="img" alt="My image {{i   1}} description" />
    </div>
  </ng-template>
</ngb-carousel>

Instead of looping between the images, I would like to loop between the div of the two charts. Is there a way to achieve this?

Here is the HTML code I currently have for the two charts:

<!-- Chart 1 -->
    <div>
        <div id = "crowOnPerchChart">
            <canvas baseChart
                    [datasets]="crowOnPerchChartData"
                    [labels]="crowOnPerchChartLabels"
                    [options]="crowOnPerchChartOptions"
                    [legend]="crowOnPerchChartLegend"
                    [chartType]="crowOnPerchChartType"
                    >
            </canvas>
        </div>
    </div>

<!-- Chart 2 -->
<div>
    <div id = "coinsDepositedChart">
        <canvas baseChart
                [datasets]="coinsDepositedChartData"
                [labels]="coinsDepositedChartLabels"
                [options]="coinsDepositedChartOptions"
                [legend]="coinsDepositedChartLegend"
                [chartType]="coinsDepositedChartType"
                >
        </canvas>
    </div>
</div>

CodePudding user response：

You can just remove the image things and use the div content, for example

<ngb-carousel *ngIf="showCarousel" #carousel [interval]="5000">
  <ng-template ngbSlide>
    <div style="background-color: black; height: 200px">
      <h1>Graph 1</h1>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <div style="background-color: black; height: 200px">
      <h1>Graph 2</h1>
    </div>
  </ng-template>
</ngb-carousel>

please find the code sample here https://stackblitz.com/edit/angular-uz29lk?file=src/app/carousel-basic.html