How to share img in deep nested loop ? JS ANGULAR DEVEXTREME

Question

All my code is here:

https://stackblitz.com/edit/angular-devextrem-gallery?file=src/app/app.component.html

I need to share gallery in deep nested loop. Problem is probably dataSource array. Above code you can see how to print images in loop but i need to share same in galerry using dev extreme gallery. I am open minded if you recommend me whatever solution here but only using gallery...

Answer 1

Here's the solution. Instead of a single Array of datasource have training id specific array by a map. so basically change your html to :-

<div class="modal-header">
    <div class="box-one">
        <div class="header"></div>
    </div>
</div>

<div class="modal-body">
    <div class="wrapper">
        <ng-container *ngIf="firstPage">
            <div class="column-holder" *ngFor="let training of aca.trainingExercises; let i = index;">
                <div class="single-exe">
                    <div class="holder-name">
                        <ng-container *ngIf="firstPage">
                            <div style="display: flex; width: 100%; justify-content: center; height: 100%;">
                                <!-- <div *ngFor="let singleImg of training.exercise.pictureList"
                                    style="width: 20%; height: 20vh; margin: 0 20px;">
                                    <img width="100%" height="100%" [src]="singleImg.url" alt="img exercise">
                                    <p class="description-below-img"> {{ truncate(singleImg.description) }}</p>
                                </div> -->
                                <dx-gallery #gallery id="gallery" [dataSource]="dataSourceImg.get(training.id)"
                                    [loop]="true" [height]="300" [showNavButtons]="true" [showIndicator]="true">
                                </dx-gallery>
                            </div>
                        </ng-container>
                    </div>
                </div>
            </div>
        </ng-container>
    </div>
</div>

then change your datasource from an array to map like below :-

dataSourceImg: Map<number, string[]> = new Map();

then change your ngInit code to :-

this.aca.trainingExercises.forEach(training => {
      this.dataSourceImg.set(training.id, []);
      training.exercise.pictureList.forEach(img => {
        this.dataSourceImg.get(training.id).push(img.url);
      });
    });

Working Stackblitz

https://stackblitz.com/edit/angular-devextrem-gallery-92fa1f?file=src/app/app.component.ts